• 欢迎访问黑科技娃娃的博客,傻瓜式的wordpress外贸建站教程,好玩的黑科技干货,有趣的生活小百科,快来加入黑科技娃娃 QQ群
  • 如果觉得这个BLOG有意思,那么赶紧使用Ctrl+D 收藏 黑科技娃娃 的博客 吧!

如何自制WordPress子主题

Wordpress外贸建站 黑科技娃娃 4年前 (2021-02-26) 1967次浏览 0个评论
文章目录[隐藏]

如何自制WordPress子主题

大家都知道主题一升级,个别文件一更新,就会覆盖掉之前的一些自定义代码,比如你的GA跟踪码、JS、CSS修改码等都会被覆盖掉。

你不得不每次要去重新添加, 这样就很考验记忆力了,一两个代码还好,如果十几个代码甚至几十个,那就很麻烦了。

相信大部分人跟博主一样半路出家的建站人是不会自己制作主题的,所以只能看主题作者有没有贴心的出配套子主题了,一般付费的主题都是会出的,但是免费的主题就不一定了。

所以自己能懂点CSS知识,可以修改一些简单的样式制作一个子主题就很有必要了,所谓技多不压身,下面就开始介绍如何制作一个简单的子主题。

(下面这个会有些难度,成功率有些低,如果能用付费主题还是用付费主题,毕竟作者会做好配套的子主题。不过子主题也不是必须的,只对那些经常升级付费主题的人作用比较大。你也可以用一些代码插件来管理代码,让他们不会因为主题的升级而被覆盖。)

什么是Wordpress子主题?

子主题(Child Themes)也是一个主题,也跟其他主题一样,放在 wp-content/themes 目录下面的文件夹中,文件夹的名称可以自定义。

子主题可以继承主题的功能和样式,当父主题升级之后,子主题样式、功能不会被覆盖失效。所以从这个角度来说,如果你想修改一个主题,你应该用子主题这个功能,而不是直接修改原主题文件。

子主题的作用:

  • 使父主题的修改可移植且可复制
  • 使用子主题可以自由升级父主题,而不会影响对网站的自定义。
  • 节省新主题开发时间,是开始学习主题开发的好方法。

如何创建一个子主题

1、创建一个子主题文件夹

首先在服务器的主题目录wp-content/themes下创建一个新的子主题文件夹。最好的做法是为子主题指定与父主题相同的名称,用-child命名子主题。

例如,如果您要创建的子主题twenty,则目录将命名为twenty-child

 

2、制作子主题文件

在子主题中,一般有下面几个文件:下面文件都是以Astra主题为例

  • style.css (必在)
  • functions.php (必在)
  • screenshot主题图片(必在)
  • 其他主题文件 (非必须)

 

style.css 主题样式表文件

这是构建子主题中唯一必须有的文件,因为 WordPress 根据主题中的 style.css 头部信息来获取主题信息。

特别是子主题,除了像一般主题一样添加头部信息之外,还需要添加父主题的名称,这样 WordPress 才能获取父主题的资源文件。

style.css文件的头部信息通常如下:此内容是一段 CSS 注释,能被WordPress 识别,必须放在文件的最顶端。

/*Theme Name: AstraChild

Description: Child theme for the astra theme

Author: CooltechDoll 中文也可以

Author URL: https://www. cooltechdoll . com 随便写

Template: astra

Version: 1.0

Text Domain: AstraChild*/

 

/* Write here your own personal stylesheet */

这里写自己的自定义CSS代码,这样父主题被覆盖也不怕了

这段注释里包含了主题名、主题地址、描述、作者、作者名、模板(父主题)、主题版本号。在这些参数里面只有 Theme Name 和 Template 是必写的, Template用来指定父主题,只在子主题中用。在一般的主题中,是不会有 Template 这个参数的。

新建此样式表文件并把上面的这段代码写进 style.css 文件中,你也可以再写入一些自定义的CSS代码,这样以后父主题升级的时候CSS代码就不会被覆盖了。也可以通过修改子主题的样式文件来修改父主题样式表,子主题会覆盖父主题的样式。

 

functions.php 文件

能实现主题各种功能的PHP文件,当主题升级之后,我们增加的功能代码就被覆盖掉了,我们还需要再复制进去,这个时候就需要子主题来避免了。

我们需要利用子主题的 functions.php 文件的引用机制,来替换父主题的相关函数等。子主题可以在父主题的 functions.php文件之前优先加载。

我们可以新建一个子主题 functions.php文件,然后把自定义功能代码放在如下所示,这样即使是父主题升级了也没有关系。

<?php
/*This file is part of AstraChild, astra child theme.

All functions of this file will be loaded before of parent theme functions.
Learn more at https://codex.wordpress.org/Child_Themes.

Note: this function loads the parent stylesheet before, then child theme stylesheet
(leave it in place unless you know what you are doing.)
*/

if ( ! function_exists( ‘suffice_child_enqueue_child_styles’ ) ) {
function AstraChild_enqueue_child_styles() {
// loading parent style
wp_register_style(
‘parente2-style’,
get_template_directory_uri() . ‘/style.css’
);

wp_enqueue_style( ‘parente2-style’ );
// loading child style
wp_register_style(
‘childe2-style’,
get_stylesheet_directory_uri() . ‘/style.css’
);
wp_enqueue_style( ‘childe2-style’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘AstraChild_enqueue_child_styles’ );

/*Write here your own functions */

加入自定义功能代码

注意:你不需要把父主题的 functions.php 文件内容,全部复制到子主题的 functions.php 中,只需要复制自定义的功能代码就可以了,文件内容如下,就替代下子主题的名字就可以使用了。

 

screenshot主题图片

子主题的自定义屏幕截图,就是我们在WP后台选择主题时候看到的图片。该图片建议尺寸为1200×900,最好压缩一下再打包上传。


有了这三个文件后,你就可以把打它们打包上传到服务器的wp-content/themes子主题文件夹下了,接着再登陆 WordPress 后台,找到主题选项,就可以看到并且选择这个子主题了,注意父主题要保留着升级。

如果你不知道如何编写子主题文件,又怕父主题的有些文件会被升级覆盖,例如header.php,那你可以从父主题直接复制该文件到子主题,可以用插件 Advanced File Manager 办到。如何自制WordPress子主题

当然你觉得很难的话,也可以通过谷歌搜索 主题名+CHILD THEME ,找到自己的子主题压缩包直接上传到WP安装。

有些主题有自己的主题生成器,我曾经下载过,但是无法下载成功,也不知道怎么回事,最后还是自己随便编辑了下文件上传。

希望这篇文章可以解决大家的问题,如果实在解决不了,也可以花点小钱找人制作下。


本文标题:如何自制WordPress子主题
转载请保留原文链接:https://www.cooltechdoll.com/wordpress-child-theme/
黑科技娃娃, 版权所有
喜欢 (6)
[黑科技娃娃]
分享 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址