会员登录 您是新人?

   

QQ登录

会员注册

       

WP管理员之家

wordpress二次开发主题如何不被更新[wordpress子主题教程详解]

为什么要使用子主题对WordPress主题二次开发

玩wp的人都知道,wp是一个有上千个钩子可以自由DIY的一个国外开源程序,一般对于主题的二次开发,我们一般有2种形式:

  1. 增加主题额外的内容,如增加模块,增加选项,增加功能等,以插件形式交付。
  2. 修改现有主题的内容,如修改内页模板、修改头部、底部等,以子主题的形式交付。

对于第一种形式大家比较好理解,但是对于第2种形式,也就是子主题形式很多新人朋友是不熟悉的,今天wp管理员之家就给大家详细说说。

什么是子主题

子主题允许您改变网站外观的小部分,但仍保留主题的外观和功能。 要理解子主题如何运作,首先要了解父主题与子主题之间的关系。

如概述所示,子主题继承父主题及其所有功能的外观,可用于对主题的任何部分进行修改。 以这种方式,自定义与父主题的文件保持分离。 使用子主题可以升级父主题,而不影响您对自己的站点的自定义。

子主题:

  1. 使您的修改便携和可复制;
  2. 保持定制与父主题功能分离;
  3. 允许更新父主题,而不会破坏您的修改;
  4. 让你利用这些努力和测试放在父母主题中;
  5. 节省开发时间,因为您没有重新创建轮子; 并且是开始学习主题发展的好方法。

说了子主题,当然要说说什么是父主题了,下面就来看看什么是父主题。

什么是父主题?

父主题是一个完整的主题,其中包含所有必需的WordPress模板文件和主题的资源。 所有主题 - 不包括子主题 - 被认为是父主题。

WordPress子主题修改原理

子主题需要有一个父级主题存在才能启用,根据WordPress主题的主要文件,子主题存在,WordPress则会自动使用子主题的文件,而放弃使用父主题。

这样,我们先要修改父级主题的哪一个文件,则可以复制这个文件到子主题中,然后再修改这个文件,这样就可以达到修改的目的了。

当然,WordPress的主题核心文件才能够被识别替换,而大部分主题除了主要文件,还有较多其他的文件是无法进行修改的。

下面我们就教大家如何使用子主题

如何创建一个子主题

首先,在您的主题目录中创建一个位于wp-content/themes的新文件夹。

该目录需要一个名称。 最好的做法是给子主题与父主题一样的名字,但是将-child附加到最后。 例如,如果您正在制作一个twentyfifteen的子主题,那么该目录将被命名为twentyfifteen-child。

1. 创建一个子主题文件夹
首先,在您的主题目录中创建一个位于wp-content/themes的新文件夹。

该目录需要一个名称。 最好的做法是给子主题与父主题一样的名字,但是将-child附加到最后。 例如,如果您正在制作一个twentyfifteen的子主题,那么该目录将被命名为twentyfifteen-child。

2. 创建一个样式表:style.css
接下来,您将需要创建一个名为style.css的样式表文件,该文件将包含控制主题外观的所有CSS规则和声明。 您的样式表必须包含文件顶部的以下必需的标题注释。 这告诉WordPress关于主题的基本信息,包括它是一个具有特定父项的子主题的事实。
需要以下信息:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Theme Name – 需要您的主题独特
Template – 父主题目录的名称。 我们的例子中的父母主题是“twentyfifteen”主题,所以模板将是twentyfifteen。 您可能正在使用不同的主题,因此进行相应调整。

概述,子主题能够被替换的文件(WordPress主题的核心文件)

WordPress子主题可覆盖的的核心文件列表如下:

主要文件

  • style.css -主样式表,WordPress主题信息存储(主题名称、版本、作者等)子主题必须含有,注意这个文件不会覆盖,而是增加样式
  • screenshot.jpg 子主题封面【最好是有,方便分别】
  • functions.php -主题功能文件,主题所需要使用的函数、方法、类均可在此文件输入注意这个文件不会覆盖,而是增加函数,或者类
  • index.php – 主题首页文件
  • header.php – 主题顶部文件
  • footer.php -主题底部文件

 

列表

  • archive.php -所有归档列表(如果没有tag.php、category.php、author.php、date.php等页面,则会使用这个作为默认列表)
  • tag.php -标签结果列表(点击一个标签,含有这个标签的所有文章列表)
  • category.php- 分类目录列表
  • author.php -作者文章列表
  • date.php – 时间归档
  • search – 搜索列表

 

页面/文章

  • page.php – WordPress页面(单页)
  • single.php -文章页

 

其他

  • 404.php -404状态页面
  • woocommerce文件夹(若主题支持woocommerce,则会在主题找到woocommerce模板文件夹,woocommerce文件子主题全部能够覆盖掉)

 

以上文件,子主题若存在,WordPress则会直接使用子主题的文件,而放弃使用父级主题,因此,如果你需要修改父主题的哪一个文件,则直接找到父级主题的文件,复制粘贴到子主题中进行修改即可。

ps.注意,子主题中,style.css 和functions.php 不是覆盖父级主题,而是增加:

  • style.css 输入css源码,在用WordPress钩子输出到head ,增加的css样式则会对网站产生影响
  • functions.php,输入函数、钩子、类,直接会对网站产生影响,但不影响父级主题的函数、钩子和类,这里需要注意,不要输入和父级主题相同的函数名、类名,否则会出现函数名冲突报错。

2.实例空子主题下载,利用此空子主题制作你自己的子主题

子主题(空)下载:子主题空模板下载

子主题空模板说明:

style.css

20190618113050

 

 

按照上面的说明进行修改成你自己的,即可正确的制作成你自己的子主题。

这个css文件是空的,除了这一段注释之外,没有任何css样式,在修改之后,你需要增加一些样式进去的话,直接增加是无效的,因为这个css样式没有在网站头部输出。

因此我们增加了一个函数文件 functions.php

这个里面包含一个主题挂载css的函数和钩子:

 

20190618113141

因此如果你直接使用我们所提供的这个子主题进行的话,style.css的样式会对网站直接产生作用。

使用WordPress子主题修改简述

本文上面的第一部分说明了所有可被直接替换的内容以及对应的文件,因此如果你想要修改任意上文所述的文件,则是直接复制父级主题的文件到子主题,然后直接修改即可。

还有很多的内容,直接替换是无法进行修改的,下面我们就来说一说,哪一些内容无法被替换,应该如何进行。

 

不可被替换的原因

不可被替换的文件,不是WordPress主题的核心文件,而是主题开发者增加WordPress主题的功能而写的一些文件,这些文件通常在functions.php中 使用php关联函数被关联了。

也就是说,实际上这些文件的代码都是可以放入functions.php的,为了方便维护和管理,分成了文件和文件夹,之后主题作者可以轻松的找到这些内容,而不是将所有的功能代码都放入functions.php中,这样难以维护。

而前文所说,functions.php是不可被替换的,而只能增加内容,因此,除了WordPress主题的核心文件,其他文件不可被替换。

 

1.额外的页面模板- page(?).php

WordPress提供了页面模板,你可以制作多个页面模板在后台进行选择,任意文件名称,带有如下php注释的,即可被识别为页面模板:

这个模板在后台显示:

php注释 Template Name: 可以让WordPress识别,

但是子主题中,不要直接覆盖,你可以复制此文件,修改Template Name后面的名称,制作成一个新的页面模板,在后台选择即可。

 

2.WordPress的小工具(widget)

WordPress的小工具,在子主题中是无法直接被替换的(上文已说明原因,此处不再重复)

因此,如果我们想要修改某一个主题提供的小工具,我们只能新建一个小工具,而非替换掉他。

新建小工具,首先你需要建立一个文件夹(分类好你的各种功能文件,养成良好习惯)widget

然后将你的父级主题的widget文件夹中对应的小工具文件复制到子主题的文件夹(或者其他文件夹,一般来说,widget就是小工具的意思)

然后打开这个文件,修改这个小工具的类名称、id、小工具名称和描述

此处 case_show 为类名称,上图所有case_show都需要修改(小工具注册,是使用类进行注册的)

$name变量后面是小工具的名称

description 后面 是小工具描述(填写描述请用单引号包裹)

最底部的注册函数类名称也需要修改,这样我们就复制了一个和父级主题一样的小工具,但这时候我们在后台还无法看到这个小工具,

因为还需要在functions.php中进行关联,打开子主题的functions.php

输入如下代码

include_once("widget/case_show.php");

这样,widget/case_show.php就被包含在functions.php里面了,这样小工具就能被后台识别出来了,现在可以随意进行修改,这个新增的小工具就可以修改为你想要的了。

 

3.其他的功能

其他的功能文件和小工具类似,你可以用同样的方法,比如seo的类、函数和钩子,你可以新建一个文件夹 seo 再放入文件,关联到functions.php内即可直接使用。

除了WordPress主题的核心文件之外,其余所有的功能、设置和函数,都是通过WordPress钩子实现的,因此,你可以放入任意你想要的内容,通过WordPress钩子去实现。

 

4.需要注意子主题的资源路径

我们知道获取到WordPress主题模板的路径是get_bloginfo(‘template_url’) 函数,如果你在子主题使用这个函数,他依然会调用父级主题的资源。

子主题的模板路径是get_stylesheet_directory_uri(),使用这个函数,才能调用子主题的资源,不要弄混淆了。

ps.这里是模板路径,一般调用静态资源,包含图片(jpg/png/gif)、视频(MP4)、脚本(js)、样式表(css),还有zip、pdf等等静态资源,而WordPress提供的get_template_part(),则没有此区别,在子主题中则是直接获取子主题的内容。

 

到此,使用WordPress子主题进行开发的详细说明就到这里了,如果你对于WordPress或者php有一定的基础,相信这篇文章非常清晰的说明了wordpress二次开发主题如何不被更新[wordpress子主题教程详解]

在线留言

您的昵称 *

您的邮箱 *

您的网站

评论内容

  1. 还没有任何评论,你来说两句吧

客服微信