首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题

马上动手做一个基础的子主题 假设我现在在用 Twenty Twelve 这个主题,我突然想修改一下网站标题文字颜色,想改成红色(red),那么我可以这样做。...文件的前面,优先加载。...> 但是有时候我想替换父主题的某些功能怎么办?别忘了子主题这个 functions.php 文件的引用机制,是在父主题的 functions.php 之前加载使用的。...需要注意一点,在 WordPress 3.0 之后的版本,子主题的 index.php 才能去覆盖父主题的 index.php。...这个功能通常用在下面几个场景: 添加一个父主题原来没有的模板文件 增加一个比父模板更加具体的模板文件 点击这里查看模板层次 替换父主题的某个模板文件 引用其他文件 子主题实质上就是一个独立的主题,不仅仅可以使用

1.5K21

WordPress子主题怎么保留修改的代码来避免升级覆盖?

每次升级主题总是有人问都修改了什么,因为很多人根据自己的喜好对主题进行了个性化修改,虽然我也作了记录,但具体修改了什么文件以及修改了哪个样式属性还真没办法详细记录。...2、将Ality主题的样式文件style.css和css目录(因为Ality主题有部分样式文件和字体图标在这个CSS目录中)及图片目录img,一起复制到新建的主题文件夹Ality-child中,也可以将之前修改过...3、打开复制过来的style.css文件,在文件头部添加:Template:Ality 这个是关键,其中的Ality名称必须与父主题文件夹名称相同,而且父主题Ality也必须与新建的子主题同在WordPress...父主题样式可以通过下面形式加载: @importurl(“../Ality/style.css”); 代码必须写在所有样式之前,也就是文件头的后面,子主题样式文件中只需添加自己修改的部分即可。...,可以在子主题中新建一个functions.php文件,增加新的功能,或者去掉父主题的部分功能。

1K110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何美化自己的博客,wordpress 主题编辑入门教程。

    本文不是高手教程,不过是自己在美化优化博客的过程中,边学边记录而已。 首先我的样式是默认的主题twenty fifteen 白色为主色调,左目录,右文章。...,很有用,第五个是需要一点设置就能在你的文章中显示阅读人数,因为别的都是直接安装启用就行,wp-postviews稍微复杂一点。...这里就是对应的文件以及显示,css是全部的样式表,想修改你任何页面的样式都在这里,右边是目录,可以跳转到任何的模板文件中。一般修改是index.php主页面的。。...那就呵呵了,请看size栏目中,就是整个页面所有加载项目的大小,我最大的就是背景图有60kb。...这个不是问题,只要加载时间不超过两三秒就可以接受,但是也可以看到有两个资源是无法加载的,哪个是你的头像问题,因为这个资源被墙了,,导致你的博客会不断处于加载中,这个其实很好解决,直接不显示任何头像就可以了

    3.5K10

    WordPress面试题

    下面是关于如何在 WordPress 源码中开发主题和插件的基本指南: 开发 WordPress 主题: 创建主题目录: 在 WordPress 的wp-content/themes/目录下创建一个新的文件夹...创建主题文件: 在主题目录下创建一个style.css文件,定义主题的基本信息,包括主题名称、作者、描述等。 创建一个index.php文件,作为主题的入口文件。...通常,主题文件存储在 wp-content/themes/your-theme 目录下。 创建子主题(可选): 为了确保你的修改不会在主题更新时丢失,你可以创建一个子主题。...-- Your HTML, CSS, and JavaScript code goes here --> 使用 WordPress 函数: 你还可以使用 WordPress 提供的函数来加载外部脚本和样式...例如,可以使用wp_enqueue_script和wp_enqueue_style函数来添加 JavaScript 和 CSS 文件。这有助于确保正确的加载顺序和避免冲突。

    40040

    erdaoo 的 WP Theme 教程学习笔记

    学习本教程,需要: 对PHP,WP,CSS,PS有一定的基础,懂得初步的应用。 你是一个想要表现自己的家伙,并且不想再使用别人制作的主题。 你要有耐心,细心,细心,耐心。...一个 WP 的主题是由几个 templates 文件组成的,每一个主题必有的二个文件是:index.php 和 style.css(样式表),除此之外还有一些其它的文件(不是必须),它们和 index.php...因为地形有限,所以侧边栏里的内容,多以列表的形式 排开。下面欢迎一对父子出场,他们的感情是相当的好,从来都是父子不分家,有父必有子,有子必有父,父中有子,子中有父。...至此,侧边栏中的内容结束,我们也可以把第三部分的代码另存为一个新的文件 -- sidebar.php,在index.php中填加一句代码就可以使用侧边栏 这是调用尾部文件 footer.php 的代码。我想你应该知道如何处理一个简单的 PHP 文件了,要么你就再重头学一次本教程。 再一次查看一下index.php有了哪些代码 <?

    60330

    Genesis框架从入门到精通(1):什么是框架?

    在开发传统的主题时,如果想自定义修改日志页面,可能首先就去会去找single.php,page.php或index.php这个几个文件,然后先把主要部分的代码复制到新文件中去。...但是在Genesis框架中,类似其他主题中这些文件并一定都存在,即使存在,里面也只包含一行代码,比如: ? 在子主题中,可能只有一个 style.css 和一个functions.php文件。...通过Genesis框架能更高效的编写代码,不过你必须得清楚地理解一些基本概念才行。所以,我希望能通过这个系列教程,来帮助你用Genesis框架快速开发主题或修改子主题。 框架是什么?...实际上,不光是这个文件,所有Genesis核心代码文件都不要动,不要编辑。所有的开发工作都应该在子主题内进行,Genesis核心代码的任何改动都会在升级时被自动覆盖。...只需几行代码就可以移动网站的各个部分。动作函数将在下次再讲。接下来,我还会讲解如何阅读Genesis的代码,以便快速定位到需要复制到子主题的部分。

    1K41

    wordpress 学习笔记 (一)

    核心知识 1.主题必须包含的文件: style.css index.php 注:文件夹里包含这两个的文件,就能被wordpress 识别。...主题的缩略图名称:screenshot.png 2.主题的信息显示 写在style.css头部,这里展示主要如下: /* Theme Name: 主题的名称 Theme URI: 主题的URL Author...: 作者名称 Author URI: 作者的URL Description: 主题的说明信息 Version: 版本号 */ 注:主题信息显示是在style的头文件上标注,能被wordpress识别...index.php 注:通过上面的加载的顺序,我们可以给特定的文章或者文章类型设置个性的模板 $custom.php 自定义模板名字任意取 加载顺序 1、404.php 2、index.php 12.搜索(search)页的层级加载顺序 search.php index.php 13.

    88430

    WordPress主题制作:开始前的准备

    前言 总是喜欢去尝试各种各样的主题,但寻找很久之后也没有找到一款适合自己的,总有一些地方不合自己的心意,于是萌生了制作子主题的想法,在创建了子主题之后才发现,在子主题的修改和过程中越发感觉子主题的并不是我想要的...在初步阅读了WordPress主题制作相关文档之后,我就开始了我的主题制作旅程,在这里,我将记录下我的制作过程,希望对后来者有所帮助。...如果您想跟着我一起制作一款适合自己的主题,那么您需要先掌握以下技能 熟悉HTML、CSS、JS或Jquery 熟悉PHP(嗯,这个是必须的,毕竟WP是基于PHP的博客系统呢) 开始制作主题之前,您必须准备好以下工具...每个主题是由多个模板文件组成的,比如:index.php,style.css,sidebar.php 等等。...sidebar.php WordPress主题制作(七):制作基础模板Index.php WordPress主题制作(八):制作文章单页模板single.php 计划: WordPress主题制作(九)

    71230

    WordPress首页简单广告框弹窗两种方法实现纯代码+插件

    如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用。说实话我挺喜欢这个功能的,但是一直未找到合适的代码,直到我看了“蝈蝈要安静”的博客。...DUX 主题丢到 main.css 文件中即可。...使用其他网站程序的添加到相应的css文件中 3、修改html代码: 这段代码是前端显示的 HTML ,将其放到你想要其显示的页面中即可,比如首页文件 index.php 、文章文件single.php...这样就可以实现为网站添加弹窗广告的功能了,有网站需要弹窗功能的朋友可以自己试一下。可能这样小小的修改有时候就能为你网站赚钱增加一个新的渠道!...专门针对移动版设置独立内容:这款插件还独立针对移动版进行了设置,你可以在移动版上设置完全不同的内容,如果不设置移动版则显示和pc版相同的内容。

    5.5K43

    Mirages主题帮助文档

    手动更新 将主题压缩包内的主题文件和插件文件解压出来,然后参照安装步骤对旧版主题进行上传覆盖即可。 强迫症同学可以将原有主题和插件进行删除,再参照安装步骤上传新的主题和插件。...在 Typecho 的 index.php 文件中(注意,不是主题的 index.php 文件),添加如下内容: error_reporting(E_ALL); ini_set('display_errors...背景图的添加方法见:主题自定义字段使用帮助 另外对于标题的位置,你可以以填写自定义字段 css 的方式修改。...不止这些,一些新加的且我觉得并不常用的设置项也可以在这里进行配置。 配置方法 和其他的一些多行配置一样,也是一行一个,每一个配置由设置名 + 设置值组成。...示例 themeSelectionBackgroundColor = #233333 主题字体加载方式 设置名:webFont 说明 不设置为使用主题(主机)内置字体,值设置为1则为使用Google字体

    10.1K20

    WordPress 主题教程 #3:开始 Index.php

    开始 Index.php 是从零开始创建 WordPress 主题系列教程的第三篇。...在你本地安装的 WordPress 主题文件夹下(应该在xampp/htdocs/wordpress/wp-content/themes),创建一个新的文件夹,命名为 tutorial。...第3步:创建 index.php 和 style.css 文件。 打开记事本或者你选择的文本编辑器,把下载到的教程源代码中 index.txt 这个文件的所有内容都拷贝到你的记事本。...保存为 index.php。这里最后提醒下点击这里下载从零开始制作 WordPress 主题的源代码,以后不再提醒了。 打开另外一个记事本,直接保存为 style.css 到相同的文件夹下....现在有两个文件了: index.php 和 style.css. index.php 解释: 点击上面的图片查看大图,下面将会解释每个红色圆圈区域是什么意思。

    1.1K20

    WordPress主题制作(二):模板和模板文件

    制作WordPress需要了解PHP,但是无论如何,最终呈现在用户面前的页面都是一张网页,网页之所以能够在浏览器中显示出来,是因为最终传送给浏览器的是HTML、CSS和JS等终端代码,最终由这些代码控制浏览器的显示结果...制作WordPress主题也不例外! 它们都是网页,网页最基本的是HTML。...要想制作WordPress主题,首先得设计主题界面,含蓄、简约、厚重、奔放……,风格完全随你,接着再将你的设计理念转化为html,并能在浏览器中正常显示出来,这些将您的理念转化为html的文件我们可以将其理解为模板文件...WordPress 博客的每个页面都是由多个模板文件组成的,下面以一个首页为例进行简单说明: 在上图中,我们可以看出主题的 index.php 是由 4 个模板文件组成: header.php,index.php...解释一下:为什么把图中的 index.php 所在的区域标为红色的。因为这块区域是会根据不同类型的页面而发生变化。

    1.7K30

    记录 | 元素周期表的开源网页

    但是非常恶心的是不能在config.js里面改(试过了,无效),需要: ? 修改箭头指向的数字,默认是8080 然后跑一把可以发现跑得起来,如果你只是想跑,这样其实就行了。...挂上VPS 由于我懒得给apache2配置二级域名与泛解析,所以想要直接在目录下新加一个文件夹直接解析,即:gyrojeff.top/periodicity/ 但是新的问题又产生了(烦),如果直接把dist...为了解决这个问题,分析dist目录中的index.html ? 可以发现是css和js引用的路径出了问题。 经过分析后,我发现作者在config/index.js当中给出了配置选项: ?...由于这个网站启用了pjax,跳转页面的时候虽然不会直接刷新,但是会修改地址栏,我们可以发现,加载完毕后会自动修改地址: ? image.png 而且,到别的子页面以后,一刷新就会404....后记 初次使用Vue,感觉这种设计模式是一种好文明((以后有时间一定学,以及,互联网真的是太伟大了(确信) 注:此项目使用的开源协议为MIT协议 之所以要放到自己的服务器上其实是因为原网站periodicity.io

    1.1K10

    RPO漏洞原理深入刨析

    其主要依赖于服务器和浏览器的解析差异性并利用前端代码中加载的css/js的相对路径来加载其他文件,最终使得浏览器将服务器返回的不是css/js的文件当做css/js来解析,从而导致XSS,信息泄露等漏洞产生.../index.php Step 3: "../ "在URL中会被理解成上一层目录,所以服务器实际上认为你访问的是下面的URL并把index.php的内容返回给天真的浏览器 http://192.168.204.134...,同时也能够提高网站的可访问性和SEO优化效果,URL重写通常是通过在Web服务器上配置规则来实现的,这些规则可以将原始URL转换为新的URL或者将URL中的某些部分替换为其他内容,例如:原始URL链接.../index.php Step 3:服务器返回index.php页面给浏览器 http://192.168.204.134/RPO/index.php Step 4:浏览器加载index.php文件并加载同目录下的.../styles.css"之类的 URL,但在这种情况下我们需要提供假目录的级别直到从当前文档加载样式,"..

    64520

    WordPress使用Redis和opcache为网站加速教程

    相信建站的朋友都十分关心网站速度问题了,玖柒的小窝一直在强调极速优化这次词语,同时在之前的很多文章中我也简单的介绍了子比主题的关于速度优化的一些原理。...理论上来讲使用子比主题搭配一个不是太差的服务器,那么就已经很快了,如果你想让你的网站变得更快,那么看了这篇文章,我相信完全够了。...子比主题在前台加载速度优化上做了哪些优化呢? 全局所有js文件,css文件动态按需加载,注意这个按需加载并不是你开启了这个功能就加载对应的文件,而是说这个页面有这个功能,才会加载这个文件。...大量的AJAX不刷新加载功能,AJAX就是不刷新加载内容,比如AJAX下一页,ajax tab等,有效的减少请求内容,提高页面加载速度,主题的AJAX功能全部使用在不影响SEO的内容中!...当然除了加载速度,同时主题也在用户浏览体验上做了很多的优化,主题90%的动画效果均采用基于硬件加速的动画参数,确保所有动画效果思思顺滑不掉帧,比如幻灯片、图片灯箱等。

    2.5K20

    WordPress 主题教程 #5b:日志内容

    再次强调一次,上一篇关于 WordPress 主循环介绍的课程非常重要,你需要彻底明白之后才能继续学习。 下面开始这篇课程。...首先还是打开 XAMPP,“tutorial”主题文件夹,浏览器并在浏览器地址栏输入:http://localhost/wordpress,最后打开 index.php。...还记得最开始说到的 style.css 这个文件吗?我们以后用它来控制所有页面元素的显示和布局。...我使用的是 Firefox浏览器,下面是在 FireFox 中显示的样子: 你注意到 index.php 文件和它的源代码之间的区别了吗?...但是不能重复任何 id,比如,不能在同一页面上有两个 id="header" 。当你想一遍又一遍重新利用一些东西如日志的标题,那么请使用 class。

    82680

    提升Typecho首页ttfb加载速度以及若干升级

    1.给网站页签加icon图片,效果如下 查看主题的index.php找header,顺势找到header.php文件,你会在看到如下代码: <link rel="icon.../'); 4.手动删除掉根目录的install.php文件 防止给黑客提供后门 更多安全防护 请移驾我的另一篇文章 Linux服务器安全防护 5.优化首页加载过慢问题 使用chrome发现Network...针对这个情况来进行一次优化 5.1找到首页代码 index.php,die掉所有代码,发现ttfb很快,调整定位,最终锁定是文章循环导致加载过慢的 5.2 继续调试。...我这里不关心浏览次数,所以直接注释掉了 5.4.同理发现分类页面也很卡,找到主题下面的archive.php文件,搜索下面代码即可,替换掉 ...> 6.启用GZIP压缩 ob_start('ob_gzhandler'); 找到安装包文件的index.php。

    81440

    编写自己的 WordPress 模板

    一个 WordPress 主题至少需要两个文件存在——style.css 和 index.php 所以进入 wpstart 文件夹并创建这两个文件。在 style.css 中,插入以下注释。...你会在主题集中找到WP Start。 继续并激活此主题,然后访问该站点。瞧!从技术上讲, 你自己创建了一个自定义主题。当然,它除了有一个空白的屏幕之外什么都不做。... 一体化 现在让我们回到 index.php 将上述所有部分整合为一个的地方。由于这个文件是我们主题的入口点,我们可以巧妙地选择放置这些部分。这就是我的做法。 style.css:现在我们已经更新了文件,让我们用 CSS 给 index.php 添加一些样式。...最后,我使用了相同的 is_single()概念来显示帖子的 the_excerpt()或 the_content()。 看,就是这么简单有趣。现在有了一点魅力 CSS,我得到了以下结果。

    1.4K30
    领券