Products
GG网络技术分享 2025-03-18 16:14 0
大家好，这里是关于[WordPress子主题创建使用教程]，[WordPress新手必看的SEO优化技巧（一）：主题代码优化篇]问题的解答，希望对您有所帮助。如果你还想了解更多这方面的信息，请关注本站其他相关内容，共同学习吧！
教程大全wordpress,子主题
WordPress子主题官方就有个很详细的教程。
https://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98
这里就讲一下本站实际使用时侯的操作步骤例子吧。
很多时候我们需要修改主题的一些style.css之类的文件，或者在functions.php文件加一些功能代码。我们修改后，如果后期主题更新会将我们修改的文件同时更新掉。
子主题的功能就是能够保持主题正常更新的情况下，保留我们修改的功能可以正常使用。
以本站当前主题为例。
修改了：默认文章页面内容宽度、默认文章标题字体大小、底部footer距离文章主体内容的距离。
添加了：评论移除网址表单、百度快速收录 API 提交代码
这些修改在主题的style.cc和functions.php文件中。下面我就开始创建一个子主题。
原主题名字：Twenty Twenty-One
原主题目录名：twentytwentyone
子主题名字：Twenty Twenty-One Child
子主题目录名：twentytwentyone-child
我们需要先在WordPress的主题目录wp-content/themes内创建一个子主题的目录。该目录名设为twentytwentyone-child这样比较容易区分原主题和子主题目录关系。你给子主题目录改成其他的也没关系。
子主题必须包含一些文件：
style.css (必需)
functions.php (可选)
Template files (可选)
Other files (可选)
这里我们只需要在子主题目录里创建style.css和functions.php这两个即可。
子主题的style.css有着固定的要求。必须包含以下头部信息：
/*
Theme Name: 子主题名字（随便写）
Theme URI: 子主题URL（随便写）
Description: 子主题的描述（随便写）
Author: 主题作者名字（随便写）
Author URI: 主题作者URL（随便写）
Template: 原主题目录名（必须准确）
Version: 版本（随便写）
*/
本站子主题的头部文件代码如下：
/*
Theme Name: Twenty Twenty-One Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Twenty-One theme
Author: Cheshirex
Author URI: http: //www.cheshirex.com
Template: twentytwentyone
Version: 0.1.0
*/
然后将我在原主题修改的代码复制进去。复制后整个文件内的代码如下：
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://www.cheshirex.com
Description: Child theme for the Twenty Twenty-One theme
Author: Cheshirex
Author URI: http: //www.cheshirex.com
Template: twentytwentyone
Version: 0.1.0
*/
:root {
/* Spacing */
--global--spacing-unit: 20px;
--global--spacing-measure: unset;
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px;
/* Font Size */
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
}
@import url(\"../twentytwentyone/style.css\");
.widget-area {
margin-top: calc(1 * var(--global--spacing-vertical));
padding-bottom: calc(var(--global--spacing-vertical) / 3);
color: var(--footer--color-text);
font-size: var(--footer--font-size);
font-family: var(--footer--font-family);
}
@media only screen and (min-width: 482px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 1000px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1000px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
@media only screen and (min-width: 652px) {
:root {
--global--font-size-xl: 2.5rem;
--global--font-size-xxl: 3.5rem;
--global--font-size-xxxl: 9rem;
--heading--font-size-h3: 2rem;
--heading--font-size-h2: 3rem;
}
}
:root .is-huge-text,
:root .has-huge-font-size {
font-size: var(--global--font-size-xxl);
line-height: var(--global--line-height-heading);
font-weight: var(--heading--font-weight-page-title);
}
修改完成后保存这个文件就可以了。
functions.php文件比较简单，我们只需要在文件内加上php起始标签，然后标签内放入我们添加的代码即可。
本站代码示例：
<?php
// 移除网址表单
function url_filtered($fields) {
if(isset($fields[\'url\']))
unset($fields[\'url\']);
return $fields;
}
add_filter(\'comment_form_default_fields\', \'url_filtered\');
/* WordPress 百度快速收录 API 提交代码 */
if(!function_exists(\'Baidu_Submit\')){
function Baidu_Submit($post_ID) {
$WEB_TOKEN = \'隐藏内容\'; //这里请换成你的网站的百度主动推送的token值
$WEB_DOMAIN = get_option(\'home\');
//已成功推送的文章不再推送
if(get_post_meta($post_ID,\'Baidusubmit\',true) == 1) return;
$url = get_permalink($post_ID);
$api = \'http://data.zz.baidu.com/urls?site=\'.$WEB_DOMAIN.\'&token=\'.$WEB_TOKEN;
$request = new WP_Http;
$result = $request->request( $api , array( \'method\' => \'POST\', \'body\' => $url , \'headers\' => \'Content-Type: text/plain\') );
$result = json_decode($result[\'body\'],true);
//如果推送成功则在文章新增自定义栏目Baidusubmit，值为1
if (array_key_exists(\'success\',$result)) {
add_post_meta($post_ID, \'Baidusubmit\', 1, true);
}
}
add_action(\'publish_post\', \'Baidu_Submit\', 0);
}
?>子主题的style.css文件内代码和原主题是覆盖关系。一段代码我们修改后放入子主题，在我们访问网页时它会自动重写原主题style.css文件代码。
如果你在原主题内添加了一段代码，然后创建子主题后直接将这段代码剪切到子主题文件内。不要再原主题继续保留代码。否则可能会报错。
这里子主题代码和原主题仅是子主题代码执行优先，原主题的代码会在子主题之后继续执行。子主题在父主题文件加载之前先载入。
以上操作都完成后目录是这样子：
关于子主题的更多信息，请查看本文开头的官方教程链接。
虽然wordpress的免费主题在网络上已经有成千上万个了，但是在我看来，很多主题都是不符合SEO优化的。
这些主题不但不美观，而且大部分充斥着作者的暗链、广告，其实对站长们的伤害很大，为了帮助同学们更好的使用wordpress进行自己网站的优化，我决定出一个wordpress系列的教程，给大家做个参考，第一篇我们讲讲wordpress主题代码的优化。
WordPress主题代码优化
wordpress代码优化的核心在于：代码能少则少，以提高网站加载速度为核心目的！优化你的代码，如果你的网站是放在虚拟空间，不要让你的网站加载时间超过5秒以上；如果是放在VPS中，不要让你的网站加载时间超过3秒以上。
为什么我这样说呢？那是因为百度对网站的打开速度有硬性的审核标准，甚至在百度站长工具中还特地推出了页面优化建议工具。这意味着百度是希望站长优化自己网站的打开速度的。如果你的网站打开速度慢则很有可能被降权。
那怎么做主题代码优化呢？
请大家不要着急，我接下来给大家一个重要的解决方案：将我们的主题代码优化到最精简。其最重要的是优化table嵌套、header优化、js和css的合并分离优化。
1、 避免table嵌套：我看了很多的wordpress免费主题，为了简单，采用大量的table嵌套，而浏览器在加载table的时候，是需要将程序完全加载才能渲染出来的，有一些主题甚至缺少table的关闭标签，导致浏览器无法正常渲染而卡在table标签处。做网站，应该尽量少用table标签，采用div+css的方式来绘制表格可以更好的提高网站打开速度。
2、 header优化：大家可以查看一下自己网站的header标签，是否有一大堆不知道什么用的meta标签？如下图所示（某使用wordpress默认模版的网站）：
一大堆乱七八糟的链接和注释，甚至引用了其他网站的文件，众所周知，只要你的代码中引用了文件，那么浏览器就会去加载完这些文件才会继续执行之后的代码，如果其他网站的文件丢失了，那么浏览器将会花大量时间等待这个文件响应，而这些都是会增加网站打开时间的。而我的网站则通过精简，只保留搜索引擎需要的meta信息和必要的文件链接，从而使得header更加简洁和高效，如下图：
3、 js和css的合并分离优化：很多网站的所有js和css代码，都是写在一个文件里面的，这样虽然方便了管理，但是会导致页面加载的时候，需要加载很多不必要的代码，导致时间加长。
而我的解决方法就是将每个页面都需要的js和css分别放置在一个文件内，而其他每个页面特有的js和css，则自己独立创建文件，针对性的引用。比如共同的css都放在style.css中，首页才有的css就写在style-home.css中，只有在首页才引用，其他页面则不引用，这样就可以大大提高网站的加载速度了。
没有多余的代码，自然加载速度可以优化到最快。
Demand feedback
