如何创建WordPress主题的子主题?

如何创建WordPress主题的子主题
如何创建WordPress主题的子主题

每个WordPress网站,都需要搭配相应的主题,才能够正常的运行。而我们正在使用的主题,总是有些地方不能令我们满意。所以我们经常会根据自己的喜好,对正在使用的WordPress主题进行更改。如果直接在主题模板文件上做改动,一旦我们更新主题,我们所做的更改可能就会被更新所覆盖。使用WordPress子主题的方式,来更改主题模板文件,是一个不错的选择。因为在子主题上所做的更改,不会因主题更新而消失。

什么是子主题?

子主题不是一个完整的主题,它不能独立的起到主题的作用,它需要继承另一个主题(被称作父主题)的功能和样式。子主题也能够覆盖父主题的功能和样式,使用子主题对主题模板进行更改,是WordPress官方推荐的主题修改方式。

优点

父主题为子主题提供了大多数的功能,子主题可以添加、删除和扩展父主题的功能和外观设计。子主题的优点如下:

  • 子主题让我们对主题进行自定义的更改,变得更加的容易。因为我们对主题所做的更改,全部保存在子主题中,我们不用担心所做的更改在主题更新后消失。
  • 我们在子主题中所做的任何更改,都不会影响父主题的完整性。无论我们对子主题做了什么,父主题仍然让可以正常的运行。
  • 任何更改都可以快速的恢复到初始状态。我们对主题的更改,可能会导致各种各样的问题,如网站无法访问,或出现严重的错误。在这种情况下,我们只需要重新启用父主题,一切就恢复如初了。
  • 最后,因为更改子主题风险小,更适合我们学习WordPress各种功能,更适合我们做各种各样的尝试。

我需要子主题吗?

并不是每个人都需要使用子主题,在创建子主题前,我们可以问自己下面的问题:

  • 我需要增加主题的功能么?
  • 我需要对主题的功能做自定义的更改么?
  • 我需要对主题的外观做自定义的更改么?

如果你的回答是肯定的,那么牛奇网就建议你使用子主题。

创建子主题

有两种方式可以创建子主题,一个是通过手动的方式来创建,另外一个是通过插件来自动生成子主题。

手动方式

手动创建子主题,需要我们做以下的工作:

  • 创建子主题目录;
  • 在子主题目录内创建style.css文件;
  • 在子主题目录内创建functions.php文件。

比如,要创建主题“olsen”的子主题,我们只需要在WordPress主题目录 ./wp-content/themes下创建一个名为“olsen-child”的目录。

子主题目录
子主题目录

在子主题文件夹内,要创建如图所示的两个文件。

创建子主题文件
创建子主题文件

首先,创建一个“style.css”文件。这个文件是子主题必备的文件,我们要在该文件内部添加如下所示的标头,这样才能被WordPress正确识别。

/*
    Theme Name: Olsen Child
    Theme URI: https://www.cssigniter.com/ignite/themes/olsen-child
    Author: CSSIgniter
    Author URI: https://www.cssigniter.com
    Description: Child theme for the Olsen WordPress theme
    Version: 1.0.0
    Template: olsen
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: olsen-child
    Domain Path: /languages
*/

上面的标头内容很多,这里面我们只需要Theme NameTemplate两项就可以了,其余的可以根据需要来添加。

接下来,我们来创建functions.php文件,该文件以“<?php”作为起始,如下所示:

<?php
    // Place all your custom functions below this line.

我们需要通过如下的方式,来引入主题的样式表文件:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

注意:

  • 上述的引入方式,仅在父主题只有一个样式表文件的情况有效,如果父主题有多个样式表文件((例如ie.css,style.css,main.css),要体现所有的依赖关系。

截止现在,就已经成功创建了子主题,我们可以通过仪表盘的“外观”-“子主题”来启用子主题。

启用子主题
启用子主题

添加屏幕截图

如果没有在子主题内添加主题屏幕截图,那么子主题没有预览图片,对某些有强迫症的人来说,这是不可接受的。我们可以在子主题文件夹内,创建一个名为 screenshot.png的子主题屏幕截图,建议尺寸为1200x900px。当我们再次浏览的时候,子主题就有了自己的预览图片。

插件创建子主题

有很多的插件可以帮助我们创建子主题,各位可以在插件广场搜索子主题关键词,找到适合的插件来创建子主题。

子主题的使用

创建新的样式

要通过子主题来创建新的样式,我们只需要将自定义的CSS代码,添加到文件标头后面就可以了。如下所示:

/*
    Theme Name: Olsen Child
    Theme URI: https://www.cssigniter.com/ignite/themes/olsen-child
    Author: CSSIgniter
    Author URI: https://www.cssigniter.com
    Description: Child theme for the Olsen WordPress theme
    Version: 1.0.0
    Template: olsen
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: olsen-child
    Domain Path: /languages
*/

/* Child theme styles begin below this line */
.p { margin: 0 0 10px 0; }

添加自定义功能

要给主题添加新的功能,例如注册新的侧边栏,可以使用以下方式:

add_action( 'widgets_init', 'olsen_child_widgets_init' );
function olsen_child_widgets_init() {
    register_sidebar( array(
        'name' => __( 'My Sidebar', 'olsen-child' ),
        'id' => 'my-new-sidebar',
        'description' => __( 'This is my new awesome sidebar!', 'olsen-child' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
    ) );
}

将上述代码添加到 functions.php文件的末尾即可。

覆盖父主题模板文件

我们可以通过覆盖父主题模板文件的方式,来更改父主题的页面布局。例如,我们想要在文章页和页面页启用上一步中注册的侧边栏。我们可以在子主题的文件夹内,创建一个名为“sidebar.php”的侧边栏模板文件,文件内添加如下代码:

<div class="sidebar sidebar-right">
    <?php dynamic_sidebar( 'my-new-sidebar' ); } ?>
</div><!-- /sidebar -->

这个新建的侧边栏会覆盖掉父主题的侧边栏。

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/how-create-wordpress-child-theme/

发表评论

登录后才能评论