最近把很多事情都搁置了，专心搞了一下网站，主要就是在于对主题模板的修改。原本打算花钱买一个博客主题，但是看了看那些付费主题的价格，还是将我劝退。于是就开始着手自己折腾主题样式。

其实以前也折腾过，但也只不过是很轻微的修改，而这次，我花了近半个月的时间，认真修改成一个目前还算满意的主题样式，之后就开始好好创作。

因为本文涉及建网站，就免不了谈一些计算机语言，比如html、PHP、CSS等，或许对大多数非专业人士看起来很头痛，但我要告诉各位，我也并非专业人士，我也没有进行过相应的代码学习，也并非毕业于计算机相关专业，我也仅仅是一个业余爱好者。但我之所以能够看得懂一些，并且能自行修改，靠得仅仅是我们上学以及平时学过的一些东西。

比如英语，如果你英语比较好，那么对于大多数计算机语言就能够有很直接的理解，如果英语不好，看到程序中的一个词，如content（内容），你不知道它的意思，那么就更不要说理解程序所表达的意思。当然还有一种情况，在计算机语言中也会有很多将英文缩写的，比如<p>这个标签，如果你第一次看到它，你一定不知道什么意思，但如果你了解之后，这个<p>就是一个缩写，它的原形是paragraph，如果你英语还可以，那么你就明白它是“段落”的意思，这个标签里的所有内容就是一段。

比如数学，if-else条件语句就是高中数学必学的内容，同样也应用到的编程中，这东西看起来其实并没那么难，我们只要找到程序语言中的if、else，就能明白这是一句条件判定语句。

再比如我们工作和日常生活中会用到的一些东西，像字体大小用px、em、rem，它们之间的区别是在适配不同设备显示出的字体大小，比如以px为单位的字体大小，仅能适配部分浏览器和少部分手机设备，其实我们使用的大部分文档软件，里边的字号就是px单位的。另外如果你对excel比较熟练的话，那么里边的很多函数你也会在编程中遇到。

其实总的来看，你会发现，编程这个东西就是东拼西凑而来的，各个领域都能涉及，只要用心一点，并不难。

好了，废话就不多说了，接下来就将我这次修改twentytwelve子主题的过程记录一下。

先列一下我都做了哪些修改吧。

• 1、创建子主题并链接父主题
• 2、网站整体字体设置以及禁用谷歌字体
• 3、网站页脚样式以及内容修改
• 4、网页整体宽度修改（并修改背景颜色为白色）
• 5、网页头部和底部间距修改
• 6、为首页等页面的文章添加摘要功能，设置摘要字数，并添加继续阅读
• 7、去除网址中的分类标识
• 8、修改文章模块间边框样式
• 9、修改（新增）小工具模块间边框样式
• 10、侧边栏小工具标题字体样式以及下横线
• 11、首页文章标题行高以及下横线
• 12、网页头部空白处添加搜索框
• 13、菜单导航样式修改并可支持svg小图标
• 14、添加分页导航功能并修改样式
• 15、设置新标签页打开链接
• 16、新增面包屑导航
• 17、标签云样式修改
• 18、新增返回顶部按钮
• 19、文章内代码部分样式修改（实现代码高亮）
• 20、首页和内容页的文章标题下、文章脚部添加描述元素（作者、发布时间等）并编辑样式
• 21、站点标题和副标题处变为logo图片（原为文字）
• 22、后台新增友链设置并设置样式
• 23、自定义aboutme和侧边栏小工具
• 24、在所有文章底部新增自定义固定内容（如打赏、内容版权等固定内容）
• 25、添加图片灯箱效果（点击图片可放大）
• 26、单篇文章结束后的上一篇和下一篇样式修改
• 27、禁用自动保存
• 28、所有文章类型的修订版本
• 29、发布、更新或删除日志后刷新首页
• 30、隐藏版本号
• 31、头像设置

1、创建子主题并链接父主题

先解释下什么是父主题和子主题。

所谓父主题，就是你在搭建网站时所选用的主题模板，比如我所使用的twenty twelve主题，那么网站就是根据这个主题的设置展示。

所谓子主题，就是父主题的延伸，父与子的关系，通过子主题可以修改、添加、覆盖父主题的一些样式。子主题存在的意义在于，当你通过子主题修改网站的样式，不会因为父主题的更新，而失去之前的修改。一般情况下，我们会将子主题命名为xxxx-child，如twenty twelve的子主题名就是twenty twelve child。

那么如何创建子主题呢？

首先，你要建立一个文件夹，可以命名为xxxx-child（就是在父主题名的基础上添加child），这个文件夹建议和父主题文件夹同级，方便操作。

接下来就是链接子主题和父主题，因为你要在父主题的基础上优先展示子主题样式，那么就不得不将它们链接在一起。有三个重要的文件：

• style.css——样式表
• functions.php——函数模板
• screenshot.jpg——子主题缩略图

首先是样式表style.css，在这个样式表中，你需要在开头添加以下说明内容：

这个不难理解，就是告诉程序，它就是twentytwelve主题的子主题，这段内容中，最重要的部分就是Template，后边的内容一定要和父主题的文件夹名一样，不然子主题将无法正常工作，其余部分你就可以改成自己的内容。

接下来便是调用子主题，需要用到functions.php，这里插一句，过去在调用子主题，一般是在子主题的style.css的说明内容下添加一句

@import url("../twentytwelve/style.css");

但现在不太建议这样去做，具体原因我不清楚。

如今的做法是，在functions.php开头添加以下内容：

<?php
/* Function to enqueue stylesheet from parent theme */
function child_enqueue__parent_scripts() {
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue__parent_scripts');

<?php
add_action( 'wp_enqueue_scripts', 'twentytwelve_enqueue_styles' );
function twentytwelve_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentytwelve-style' for the Twenty Twelve theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}

以上两种方法经过我的测试，都可用，具体用哪个，你可以根据自己的喜好选择。这段内容的意思就是告诉程序，我创建了子主题并且引用子主题的样式。切记，functions.php在内容的最开始一定有'<?php'这个函数头，这代表开始，如果不存在这个函数头，这个文件将没用。

再就是screenshot.jpg，子主题的缩略图，可以自己制作一个，就像我这篇文章题图的那样，建议尺寸是880x660。

将这个包含这三个文件的子主题文件上传到wordpress后台，在主题选项里，你就可以看到这个子主题了，点击启用即可。记住，千万不要删掉父主题哦，不然你的子主题也没用。

除了上面说的三个文件，其他还要修改什么，就从父主题文件夹里复制到子主题修改即可，比如你要修改网站页脚内容，就把footer.php文件复制到子主题，然后修改子主题footer.php的内容即可。这也是子主题比较便利的优点。

2、网站整体字体设置以及禁用谷歌字体

用wordpress新搭建的网站，是存在Google font的，但在国内，这种字体加载很慢甚至不能加载，严重拖累了网站的打开速度，那么我们就要禁用它，方式就是在functions.php内添加这样一段代码：

//禁用谷歌字体
function mytheme_dequeue_fonts() {
wp_dequeue_style( 'twentytwelve-fonts' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );

接着就是设置网站的字体，将以下代码添加到style.css中：

/* 整体字体设置 */
body {
font-family:"Segoe UI","Microsoft YaHei","Hiragino Sans GB",STXihei,"Heiti SC",Roboto,"Droid Sans Fallback",Tahoma,Verdana,Arial,"Segoe UI Emoji",sans-serif;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
body.custom-font-enabled {
font-family:"Segoe UI","Microsoft YaHei","Hiragino Sans GB",STXihei,"Heiti SC",Roboto,"Droid Sans Fallback",Tahoma,Verdana,Arial,"Segoe UI Emoji",sans-serif;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}

这里有三个注意点。

第一、font-family中的字体名要用英文，比如“微软雅黑”，我们就需要写成“

Microsoft YaHei”，这是为了支持更多的浏览器版本和设备；

第二、字体不一定要和我的一样，你也可以根据自己喜欢选择其他字体，比如思源宋体等；

第三、除了中文字体，也要有英文字体、特殊字体等，不然可能会出现显示问题。

3、网站页脚样式以及内容修改

此处需要用到footer.php和style.css这个文件，在第一部分修改中已经说到，直接复制父主题该文件到子主题即可，然后进行修改。

主要有两个方面：

第一是页脚内容修改，需要修改footer.php里的内容。因为wordpress默认的页脚内容是“proudly by wordpress”，很多人不想要带这个内容，那就改了，可以改成如“Copyright©2019-2021某某某某”这样的内容，这样别人可以看到建站时间以及版权所有。另外，如果你的网站进行了备案，建议把备案信息放在页脚，这也是国内互联网安全管理必要的。参考内容如下：

<p>
Copyright © 2019-2021
<a href="https://bgbiji.com"> 冰哥笔记 </a>|
<a href="https://bgbiji.com/sitemap.html"> 网站地图 </a>|
备案：<a href="网站备案链接" rel="external nofollow" target="_blank">这里填你的网站备案号</a> | 
<a target="_blank" href="公网安备号链接" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="https://bgbiji.com/wp-content/uploads/2019/07/beian.png" style="float:left;"/> 这里写公网安备号</a>
<br>虽然辛苦，我还是会选择那种滚烫的人生！任何反馈和建议，欢迎联系我。<br>
我的微博：<a href="https://weibo.com/5214143450/profile?topnav=1&wvr=6" rel="external nofollow" target="_blank">徐雁冰</a> | 公众号：冰哥笔记
</p>

第二是样式修改，放在style.css中，参考如下：

/* 页脚设置 */
footer[role="contentinfo"] {
margin: 24px 0 0 0;
text-align: left;
max-width: 1190px;
max-width: 85rem;
font-size: 13px;
padding: 28px 0 28px 0;
}

简单解释下，margin是外边距，padding是内边距，它们之后有四个值，按顺序分别是——上、右、下、左——至于为什么是这个顺序，而不是上下左右，我们可以理解为顺时针更方面记忆。另外，如是一个值，则代表四个边距相同；如果是两个值，则是上、右，而下左缺省，代表下=上、左=右；如果是三个值，则是上、右、下，左缺省，代表左=右（我们可以理解为，一边缺省，代表它与对边的值相等）。其他的就是对字体大小、内容的对齐方式和整体宽度修改。需要注意“{}”不要忘记。

最终效果如下：

4、网页整体宽度修改（并修改背景颜色为白色）

因为我个人感觉twentytwelve主题的内容宽度有点窄，所以我就修改了一下，而且默认的背景颜色是淡灰色，也被我改成了白色，如此两边就不会显得太过空荡荡了。

这里需要修改两个地方：

一个是style.css，把以下内容加到style.css中即可：

/* 网页宽度 */
.site {
margin: 0 auto;
max-width: 1190px;
max-width: 85rem;
overflow: auto;
}

另一处修改需要在网站后台自定义中调整，路径为：

“wordpress管理后台——外观——自定义——颜色——背景颜色——修改为纯白色即可”。这仅仅只是参考，如果你更喜欢原本的样式，可以不做修改。

5、网页头部和底部间距修改

这个比较简单，修改一下css，调整上下边距既可，代码如下：

/* 网页头部和底部间距 */
body .site {
margin-top: 0;
margin-bottom: 0;
}

6、为首页等页面的文章添加摘要功能，设置摘要字数，并添加继续阅读

如果你没有在编辑文章时添加摘要的习惯，那么系统就会自动抓取预设的字数展示成摘要（当然是从正文的开头抓取），如果预设的达不到你的要求，就需要修改了。

另外，系统预设的没有“继续阅读”这四个字，只有“continue reading”，你也可以根据自己喜好改成中文。

要实现这些，将以下内容加入子主题的functions.php中即可：

//添加截取摘要汉字字数为200个 
function custom_excerpt_length( $length ) { 
return 200;
} 
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
//为摘要添加继续阅读字样
// Remove the ... from excerpt and change the text
function change_excerpt_more()
{
function new_excerpt_more($more)
{
// Use .read-more to style the link
return ' [......]<span class="read-more"> <a href="' . get_permalink($post->ID) . '"><br/><br/>继续阅读&raquo;&raquo;&raquo;</a></span>';
}
add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more');

接着打开content.php，找到这段代码：

<?php if ( is_search() ) : // Only display excerpts for search. ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

修改为：

<?php if ( is_search() || is_category() || is_archive() || is_home() ) : //Display Excerpts for Search category archive home ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

最终效果如图：

另外，你想要多少字，也可以修改，将functions.php代码内的“200”修改为其他数字即可，下面的“继续阅读”和“[......]”以及“》》》”也都是可以修改的。

7、去除网址中的分类标识

这一步只是为了网址看起来没那么长，如果不进行这一步，会在所有网址中加入category，导致网址很长，看起来不美观，而且它的存在没有任何意义。那么，删掉。将以下内容加入functions.php中即可：

//去除分类标志代码
add_action( 'load-themes.php', 'no_category_base_refresh_rules');
add_action('created_category', 'no_category_base_refresh_rules');
add_action('edited_category', 'no_category_base_refresh_rules');
add_action('delete_category', 'no_category_base_refresh_rules');
function no_category_base_refresh_rules() {
global $wp_rewrite;
$wp_rewrite -> flush_rules();
}
add_action('init', 'no_category_base_permastruct');
function no_category_base_permastruct() {
global $wp_rewrite, $wp_version;
if (version_compare($wp_version, '3.4', '<')) {
// For pre-3.4 support
$wp_rewrite -> extra_permastructs['category'][0] = '%category%';
} else {
$wp_rewrite -> extra_permastructs['category']['struct'] = '%category%';
}
}
// Add our custom category rewrite rules
add_filter('category_rewrite_rules', 'no_category_base_rewrite_rules');
function no_category_base_rewrite_rules($category_rewrite) {
//var_dump($category_rewrite); // For Debugging
$category_rewrite = array();
$categories = get_categories(array('hide_empty' => false));
foreach ($categories as $category) {
$category_nicename = $category -> slug;
if ($category -> parent == $category -> cat_ID)// recursive recursion
$category -> parent = 0;
elseif ($category -> parent != 0)
$category_nicename = get_category_parents($category -> parent, false, '/', true) . $category_nicename;
$category_rewrite['(' . $category_nicename . ')/(?:feed/)?(feed|rdf|rss|rss2|atom)/?$'] = 'index.php?category_name=$matches[1]&feed=$matches[2]';
$category_rewrite['(' . $category_nicename . ')/page/?([0-9]{1,})/?$'] = 'index.php?category_name=$matches[1]&paged=$matches[2]';
$category_rewrite['(' . $category_nicename . ')/?$'] = 'index.php?category_name=$matches[1]';
}
// Redirect support from Old Category Base
global $wp_rewrite;
$old_category_base = get_option('category_base') ? get_option('category_base') : 'category';
$old_category_base = trim($old_category_base, '/');
$category_rewrite[$old_category_base . '/(.*)$'] = 'index.php?category_redirect=$matches[1]';
//var_dump($category_rewrite); // For Debugging
return $category_rewrite;
}
// Add 'category_redirect' query variable
add_filter('query_vars', 'no_category_base_query_vars');
function no_category_base_query_vars($public_query_vars) {
$public_query_vars[] = 'category_redirect';
return $public_query_vars;
}
// Redirect if 'category_redirect' is set
add_filter('request', 'no_category_base_request');
function no_category_base_request($query_vars) {
//print_r($query_vars); // For Debugging
if (isset($query_vars['category_redirect'])) {
$catlink = trailingslashit(get_option('home')) . user_trailingslashit($query_vars['category_redirect'], 'category');
status_header(301);
header("Location: $catlink");
exit();
}
return $query_vars;
}

为什么那么长？一是应对不同的wordpress版本，二是为了应对一些debug。

8、修改文章模块间边框样式

默认情况下，twentytwelve主题首页的文章是没有边框的，文章与文章之间只有一条横线，这样看起来不太方便，于是我做了以下修改，将这些代码放在style.css中即可：

/* 修改首页文章模块间边框样式 */
.site-content article {
border: 1px solid #ededed;
padding: 24px;
margin-bottom: 24px;
overflow: auto;
}

border是边框的意思，如果指定方向，比如border-top就是上边框，之后的solid是实线的意思，#ededed是颜色代码。下边的overflow当元素溢出的处理方式。这些可以自行查看css文档，修改成自己想要的样式即可。

9、修改（新增）小工具模块间边框样式

这一点原理同上，不做过多赘述，直接放代码，也是放在style.css中：

/* 修改（新增）小工具模块间边框样式 */
.widget-area .widget {
border: 1px solid #ededed;
padding: 24px;
margin-bottom: 24px;
}

10、侧边栏小工具标题字体样式以及下横线

默认情况下，侧边栏小工具的标题是灰色，不太符合我网站的配色方案，于是做了修改，直接上代码，放在style.css中即可：

/* 小工具标题字体样式以及下横线 */
.widget-title {
font-size: 18px;
font-weight: normal;
color: #21759b;
border-bottom: 1px solid #ededed;
}

11、首页文章标题行高以及下横线

直接上代码，放在style.css中即可：

/* 首页文章标题行高以及下横线 */
.entry-header .entry-title {
line-height: 2.181818182;
border-bottom: 1px solid #ededed;
}

第8和第11处修改后的综合效果如下：

12、网页头部空白处添加搜索框

默认情况下，网页右上角是一片空白，感觉空荡荡的，所以加个搜索框吧，虽然侧边栏小工具处可以添加搜索框，但并不好看。

需要两处修改：

第一处是header.php，在该php里找到</hgroup>，在它之后添加以下代码：

<div class="header-search"><?php get_search_form(); ?></div><!--网站头部添加搜索框-->

第二处打开style.css，添加以下代码：

/* 头部添加搜索框 */
.header-search {
float: right;
margin-top: -50px;
}
@media (max-width: 650px) {
.header-search {
display: none;
}
}

简单解释一下。这里有一个很巧妙的东西，就是@media(max-width:650px)这句，media是媒体的意思，max-width:650px是最大宽度650px，这句话的意思就是媒体设备的最大宽度为650px。为什么要加上这句？其实就是为了限制接下来的代码，在宽度650px以下的设备才会发挥效果。什么样的媒体设备最大宽度在650px以下呢？其实就是手机。整体意思就是，设定这个搜索框在手机端不显示。当然，你也可以根据自己喜好修改。

效果如图：

13、菜单导航样式修改并可支持svg小图标

这一步的修改就是修改一下导航栏，原本的样式虽然间接，但我并不太喜欢就修改了一下，并且改变了下拉菜单、字体等的样式，代码如下：

/* 只限于导航字体修改 */
.main-navigation .current_page_item > a {
font-size: 16px;
letter-spacing: 2px;
font-style: normal;
font-weight: 500;
}
/* 导航首页行高与外边距修改 */
.main-navigation li a {
line-height: 50px;
margin-left: 5px;
margin-right: 5px;
}
/* 导航其余菜单行高与外边距修改 */
.main-navigation li {
font-size: 16px;
letter-spacing: 2px;
font-style: normal;
font-weight: 400;
margin-left: 20px;
margin-right: 20px;
}
/* 导航下拉菜单字体与背景修改 */
.main-navigation li ul li a {
background: #76aac1;
border-bottom: 2px solid #fff;
font-size: 1rem;
width: 8rem;
color: #fff;
}
/* 导航下拉菜单外边距修改 */
.main-navigation li ul li {
margin-left: -10px;
margin-right: 0;
}

如果你想让这个样式只在电脑端显示，可以像上面那样加个@media的限制。如@media (min-width: 960px)——这里是设备最小宽度960px，一般的电脑设备都大于这个宽度。

再就是添加svg小图标了，需要在header.php添加以下代码，放在<head></head>之间即可：

<!-- font-awesome图标 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

当然了，并没有结束，你还需要在后台添加上小图标，位置在：后台——外观——菜单——菜单结构——导航标签处，如图：

添加类似这样的代码：

<i class="fa fa-home"></i>

其中“fa-home”是图标的名称，可以修改，那么，这样的名称在哪里找呢？

打开这个网站：https://fontawesome.dashgame.com/，这其中有很多小图标，复制对应的名称修改即可。

最终效果如图：

14、添加分页导航功能并修改样式

这一步的修改挺难的，我找了好多都修改不成功，而twentytwelve主题本身的修改也是挺难的，不过最终还是让我找到了。

首先，我们打开index.php（记住复制父主题到子主题中修改），找到这句代码：

<?php twentytwelve_content_nav( 'nav-below' ); ?>

删掉它！这是程序本身自带的导航，太low了，然后我们在同样的位置添加以下代码：

<!--设置新的分页导航-->
<div class="posts-nav">
<ul>
<?php echo paginate_links(array(
'prev_next' => 1,
'before_page_number' => '',
'mid_size' => 2,
));?>
<ul>
</div>
<!--设置完毕-->

这里解释一句，<!--设置新的分页导航-->这样的内容其实是对代码的备注，后续修改的时候，我们看一下代码就知道它是做什么的了，所以无论是修改代码还是写代码，都要养成“备注”的习惯，这样我们之后在维护的时候就简单多了。

接着再打开style.css，给分页导航添加个样式：

/* 分页导航样式 */
.posts-nav {
font-size:14px;
color:rgba(0, 0, 0, 0.44);
padding:10px 0;
margin:0 auto;
text-align:center;
}
.posts-nav .page-numbers {
border-radius:3px;
border:1px solid rgba(0, 0, 0, 0.15);
display:inline-block;
text-align:center;
width:30px;
line-height:30px;
margin:0 5px;
}
.posts-nav .page-numbers.current, .posts-nav .page-numbers:not(.dots):hover {
background:#3b5998;
border-color:#3b5998;
color:#fff;
}
.posts-nav .page-numbers.dots {
border-color:rgba(0, 0, 0, 0);
}
a.prev.page-numbers, a.next.page-numbers {
border-radius:3px;
border:1px solid rgba(0, 0, 0, 0.15);
display:inline-block;
text-align:center;
width:70px;
line-height:30px;
margin:0 5px;
}

代码很多，你可以试着慢慢修改调试，其中有个:hover，意思是当鼠标经过或覆盖在其上时的样式。

效果如下：

15、设置新标签页打开链接

关于这一点，我暂时也没找到更好的方式代替，只能用最简单粗暴的方式，设置了网站内所有链接在新标签页打开。

好处是可以实现新标签页打开链接了，坏处是所有的链接都要在新标签页打开了。

方法是，打开header.php，在<head>下添加以下代码：

<base target="_blank">

16、新增面包屑导航

首先打开functions.php，添加以下代码：

// 面包屑导航
function breadcrumb() {
// Check if is front/home page, return
if ( is_front_page() ) {
return;
}
// Define
global $post;
$custom_taxonomy = ''; // If you have custom taxonomy place it here
$defaults = array(
'seperator' => ' / ',
'id' => 'breadcrumb',
'classes' => 'breadcrumb',
'home_title' => esc_html__( '⚐ Home', '' )
);
$sep = '<li class="seperator">'. esc_html( $defaults['seperator'] ) .'</li>';
// Start the breadcrumb with a link to your homepage
echo '<ul id="'. esc_attr( $defaults['id'] ) .'" class="'. esc_attr( $defaults['classes'] ) .'">';
// Creating home link
echo '<li class="item"><a href="'. get_home_url() .'">'. esc_html( $defaults['home_title'] ) .'</a></li>' . $sep;
if ( is_single() ) {
// Get posts type
$post_type = get_post_type();
// If post type is not post
if( $post_type != 'post' ) {
$post_type_object = get_post_type_object( $post_type );
$post_type_link = get_post_type_archive_link( $post_type );
echo '<li class="item item-cat"><a href="'. $post_type_link .'">'. $post_type_object->labels->name .'</a></li>'. $sep;
}
// Get categories
$category = get_the_category( $post->ID );
// If category not empty
if( !empty( $category ) ) {
// Arrange category parent to child
$category_values = array_values( $category );
$get_last_category = end( $category_values );
// $get_last_category = $category[count($category) - 1];
$get_parent_category = rtrim( get_category_parents( $get_last_category->term_id, true, ',' ), ',' );
$cat_parent = explode( ',', $get_parent_category );
// Store category in $display_category
$display_category = '';
foreach( $cat_parent as $p ) {
$display_category .= '<li class="item item-cat">'. $p .'</li>' . $sep;
}
}
// If it's a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists( $custom_taxonomy );
if( empty( $get_last_category ) && !empty( $custom_taxonomy ) && $taxonomy_exists ) {
$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
$cat_id = $taxonomy_terms[0]->term_id;
$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0]->name;
}
// Check if the post is in a category
if( !empty( $get_last_category ) ) {
echo $display_category;
echo '<li class="item item-current">'. get_the_title() .'</li>';
} else if( !empty( $cat_id ) ) {
echo '<li class="item item-cat"><a href="'. $cat_link .'">'. $cat_name .'</a></li>' . $sep;
echo '<li class="item-current item">'. get_the_title() .'</li>';
} else {
echo '<li class="item-current item">'. get_the_title() .'</li>';
}
} else if( is_archive() ) {
if( is_tax() ) {
// Get posts type
$post_type = get_post_type();
// If post type is not post
if( $post_type != 'post' ) {
$post_type_object = get_post_type_object( $post_type );
$post_type_link = get_post_type_archive_link( $post_type );
echo '<li class="item item-cat item-custom-post-type-' . $post_type . '"><a href="' . $post_type_link . '">' . $post_type_object->labels->name . '</a></li>' . $sep;
}
$custom_tax_name = get_queried_object()->name;
echo '<li class="item item-current">'. $custom_tax_name .'</li>';
} else if ( is_category() ) {
$parent = get_queried_object()->category_parent;
if ( $parent !== 0 ) {
$parent_category = get_category( $parent );
$category_link = get_category_link( $parent );
echo '<li class="item"><a href="'. esc_url( $category_link ) .'">'. $parent_category->name .'</a></li>' . $sep;
}
echo '<li class="item item-current">'. single_cat_title( '', false ) .'</li>';
} else if ( is_tag() ) {
// Get tag information
$term_id = get_query_var('tag_id');
$taxonomy = 'post_tag';
$args = 'include=' . $term_id;
$terms = get_terms( $taxonomy, $args );
$get_term_name = $terms[0]->name;
// Display the tag name
echo '<li class="item-current item">'. $get_term_name .'</li>';
} else if( is_day() ) {
// Day archive
// Year link
echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . '年</a></li>' . $sep;
// Month link
echo '<li class="item-month item"><a href="'. get_month_link( get_the_time('Y'), get_the_time('m') ) .'">'. get_the_time('M') .'</a></li>' . $sep;
// Day display
echo '<li class="item-current item">'. get_the_time('jS') .' '. get_the_time('M'). '</li>';
} else if( is_month() ) {
// Month archive
// Year link
echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . '年</a></li>' . $sep;
// Month Display
echo '<li class="item-month item-current item">'. get_the_time('M') .'</li>';
} else if ( is_year() ) {
// Year Display
echo '<li class="item-year item-current item">'. get_the_time('Y') .'年</li>';
} else if ( is_author() ) {
// Auhor archive
// Get the author information
global $author;
$userdata = get_userdata( $author );
// Display author name
echo '<li class="item-current item">'. 'Author: '. $userdata->display_name . '</li>';
} else {
echo '<li class="item item-current">'. post_type_archive_title() .'</li>';
}
} else if ( is_page() ) {
// Standard page
if( $post->post_parent ) {
// If child page, get parents
$anc = get_post_ancestors( $post->ID );
// Get parents in the right order
$anc = array_reverse( $anc );
// Parent page loop
if ( !isset( $parents ) ) $parents = null;
foreach ( $anc as $ancestor ) {
$parents .= '<li class="item-parent item"><a href="'. get_permalink( $ancestor ) .'">'. get_the_title( $ancestor ) .'</a></li>' . $sep;
}
// Display parent pages
echo $parents;
// Current page
echo '<li class="item-current item">'. get_the_title() .'</li>';
} else {
// Just display current page if not parents
echo '<li class="item-current item">'. get_the_title() .'</li>';
}
} else if ( is_search() ) {
// Search results page
echo '<li class="item-current item">Search results for: '. get_search_query() .'</li>';
} else if ( is_404() ) {
// 404 page
echo '<li class="item-current item">' . 'Error 404' . '</li>';
}
// End breadcrumb
echo '</ul>';
}

接着打开header.php，在结尾添加以下代码：

<?php
// 文章页面添加面包屑导航
if ( function_exists('breadcrumb') ) breadcrumb();
?>

最后修改样式，打开style.css，添加以下代码：

/* 面包屑导航样式 */
.breadcrumb {
font-size: 12px;
color: #888;
margin:0 auto;
}
.breadcrumb a {
color: #888;
}
.breadcrumb a:not(.dots):hover {
color: #CC0033;
}
.breadcrumb li {
display: inline;
line-height:20px;
}

效果如图：

17、标签云样式修改

也不做过多的解释了，直接上代码，打开style.css，将以下代码加入即可：

/* 标签云样式修改 */
.tagcloud {
overflow:hidden;
line-height:20px;
}
.tagcloud a {
font-size: 13px!important;
border:1px solid rgba(0, 0, 0, 0.3);
padding:5px;
margin-right:5px;
margin-bottom:4px;
float:left;
display:block;
}
.tagcloud a:not(.dots):hover {
background-color: #336699;
color: #FFFFFF;
border:0;
}

具体样式，根据自己喜好修改即可，效果如图：

18、新增返回顶部按钮

一个小按钮，可以让你从底部直接到顶部，尤其是对于长篇内容，就比如这篇，这样的按钮的确太重要了。

关于这个返回按钮，我也找了很多版本测试，最终找到了可行的办法。可能你会觉得，需要添加在functions.php中，这次竟然出乎意料的不需要它了。

首先打开footer.php（你没看错），在适当的地方添加以下代码：

<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type='text/javascript'> backTop=function (btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; var b=document.body; window.onscroll=set; btn.onclick=function (){ btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=(d.scrollTop+b.scrollTop>300)?'block':"none"} }; backTop('gotop');
</script>
<!-- 返回顶部END -->

我选择了添加在<footer>标签之下。

接着打开style.css，添加以下代码：

/* 返回顶部 */
@media (min-width: 960px) {
#gotop{
width:40px;
height:40px;
position:fixed;
bottom:130px;
right:30px;
top:auto;
display:block;
cursor:pointer;
background: url(images/top.svg) no-repeat center center;
}
*html #gotop{
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
}

这里我设置了只在电脑端显示。其中，图片的路径很重要，我的方法是在子主题内新建一个images文件夹，在这个文件夹中放一个top.svg的图标，就是上面的路径，这个图标可以自行找一个。

19、文章内代码部分样式修改（实现代码高亮）

twentytwelve原本的文章内代码块是很不明显的，于是我修改了以下，只需要修改style.css即可：

/* 文章内代码块样式修改 */
.entry-content code {
display: block;
font-size: 13px;
line-height: 30px;
overflow-x: auto;
white-space: pre;
word-wrap: normal;
border-radius: 4px;
padding: 8px;
color: #d4d4d4;
background: #214555;
}

效果如图（其中的颜色等样式可自行修改）：

20、首页和内容页的内容标题下、文章脚部添加描述元素（作者、发布时间、标签、分类等）并编辑样式

这个分为两部分：首页元素和内容页元素。

第一部分：首页元素。首页的地方，我删除了标题下的“回复”，并在摘要下方添加了“时间、作者、分类、标签”的描述元素。

第二部分：内容页元素。在内容页的文章标题下，增加了“作者、时间、分类”的描述，并在文章脚部新增了“标签”描述。

这一步太过繁琐，我就把整个代码全部贴上，你可以自行研究下。

①首先打开content.php，找到以下代码：

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>

在<?php else: ?>的上面添加以下代码：

<p class="meta"><!--文章页标题下标签-->
Auth:<?php the_author_nickname(); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Date:<?php echo the_time('Y/m/j'); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Cat:<?php the_category('、'); ?>
</p>

②接着往下找到这段代码：

<?php if ( comments_open() ) : ?>
<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->
<?php endif; // comments_open() ?>

这段代码是首页文章标题下的回复链接，如果不想要，删掉即可。

③还是content.php，再继续往下，找到<footer></footer>，将这两个标签内（包括这两个标签）的所有内容删除，并替换为以下代码：

<?php if ( comments_open() ) : ?>
<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->
<?php endif; // comments_open() ?>

简单解释一下，<?php if ( is_single() ) : ?>这句是条件判定，意思是“如果是文章页面”，则会继续以下的判定；<?php else : ?>就是“否则”的意思，否则进行以下判定。我用这样的方式，来分别为首页文章脚部和文章页文章脚部做不同的修改。

④打开style.css，添加以下代码：

/* 文章页标题、meta块、和脚部样式修改 */
#content .title {
font-size: 24px;
padding-bottom: 24px;
text-align: center;
}
#content .meta {
font-size: 13px;
padding: 10px 0 10px 0;
border: 1px dashed rgba(0, 0, 0, 0.15);
text-align: center;
letter-spacing: 0.035rem;
}
#content .content-foot {
font-size: 13px;
padding: 10px 0 10px 24px;
margin: 0 -24px -24px -24px;
letter-spacing: 0.035rem;
background-color: #ededed;
}
/* 首页文章meta标签样式 */
#content .home-foot {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #757575;
}

以上就是这两部分的完全修改，上效果：

首页文章脚部——

文章页标题下——

文章页脚部标签——

21、站点标题和副标题处变为logo图片（原为文字）

twentytwelve主题的站点标题和副标题处原为文字，但我想更加简单一些，于是就换成了一个图片。

打开header.php，找到这段代码：

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

修改为图片的代码：

<hgroup>
<h1 class="site-title">
<a href="https://bgbiji.com" title="冰哥笔记" rel="home">
<img src="https://bgbiji.com/wp-content/uploads/2021/04/headerlogo.png" alt="冰哥笔记" width="200" height="70" />
</a><!--站点标题和副标题变为图片logo-->
</hgroup>

图片自己设计，图片要先上传到wordpress后台，然后复制图片链接即可。

22、后台新增友链设置并设置样式

友链是提高博客知名度和权重的一种方式，wordpress其实自带了友链，只不过没有用代码调用，需要我们自行调用激活。

打开functions.php，添加以下代码：

//调取友链
add_filter('pre_option_link_manager_enabled','__return_true');
//只显示在首页
function bgbj_friend_links($output){
if (!is_home()|| is_paged()){
$output = "";
}
return $output;
}
add_filter('wp_list_bookmarks','bgbj_friend_links');

再打开后台，就会多了一个“链接”的目录，如图：

之后友链都在这里添加，当然，你还需要在侧边栏小工具中将链接添加到侧边栏才能显示。

接着打开style.css，修改一下样式，添加以下代码即可：、

/* 友链样式（分两栏） */
.blogroll{
display: block;
overflow: auto;
zoom: 1;
}
.blogroll li{
float: left;
width: 50%;
display: block;
}

效果如图：

23、自定义aboutme和侧边栏小工具

每一个网站或博客，都需要一个关于网站或关于博客或关于我的介绍，这也能让别人更加了解网站或你。而wordpress是一个可以完全自定义的平台，这也是我选择它的原因之一。那么，我们就可以自定义一个aboutme。

首先，在子主题下新建一个xxx-page.php文件，前面的内容可自定，比如我新建的就是bg-page.php，之后用代码编辑软件打开它，加入以下内容：

<?php
/**
* Template Name: 自定义页面模板
*/
?>

那么你在后台新建页面时，就可以看到这个模板了。

当然了，我们还需要调取一些内容，比如和首页一样的页头，我们可以稍微修改一下上述代码：

<?php
/**
* Template Name: 自定义页面模板
*/
get_header();?>

这样，头部模板就被调用过来了。

如果你还想调取其他东西，比如页脚部分，我们可以在之后加入以下代码：

<?php get_footer(); ?>

现在再打开刷新一下，页脚也出现了。

接下来你还可以调取其他内容，比如侧边栏、内容等等，只需使用相应的调取函数即可。

但是，毕竟是自定义的介绍我或网站的页面，当然要和其他页面有所不同，我们可以只调取头部、页脚、内容、评论和自定义侧边栏，整体代码可以是这样的：

<?php
/**
* Template Name: BG Page Template
*
* Description: A page template that provides a key component of WordPress as a CMS
* by meeting the need for a carefully crafted introductory page. The BG page template
* in Twenty Twelve consists of a page content area for adding text, images, video --
* anything you'd like -- followed by bg-page-only widgets in one or two columns.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/

get_header(); ?>

<div id="primary" class="site-content">
<div id="content" role="main">

<?php
while ( have_posts() ) :
the_post();
?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // End of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>

这里仅仅做一个参考，你可以根据需要自行修改。

接着主要说一下自定义侧边栏。其实啊，twentytwelve主题自带了两种侧边栏，一种是首页侧边栏，另一种是静态页面下的侧边栏，而我们默认使用的是第一种首页侧边栏。

但如果还是调用首页侧边栏，自定义页面的侧边栏也会和首页的一样，这，满足不了我们，那么我们就将另一种静态页面下的侧边栏喊醒，调用它，来实现不同页面不同侧边栏。

其实，只需一段代码，平时调用侧边栏的代码是：

这就可以调用第二种侧边栏了（其实第二种侧边栏的文件就在父主题中，名字叫sidebar-front.php）。

24、在所有文章底部新增自定义固定内容（如打赏、内容版权等固定内容）

这一步可以分为两个部分，一部分是在所有文章底部新增自定义固定内容区域，一部分是打赏。

先是自定义固定内容区域，打开functions.php，添加以下代码即可：

这个固定内容常用于添加文章版权、作者介绍、赞赏等。

我就添加了一个赞赏的功能，其实很简单，就是加了一张图片，将自己的收款二维码放进去即可。

我完整的代码如下：

效果如图：

25、添加图片灯箱效果（点击图片可放大）

twentytwelve父主题默认不带这个功能，只能在图片上右键在其他页面打开，于是我就添加了一个点击图片可放大的功能。

①首先，在functions.php中添加以下代码：

②接着打开header.php在<head></head>之间添加以下代码：

③再打开footer.php，在<footer>标签下添加以下代码：

图片灯箱的效果就实现了，效果如图：

26、单篇文章结束后的上一篇和下一篇样式修改

这个比较简单，首先打开single.php，找到以下内容：

将它之下的内容稍作修改，整体修改为（其实也就增加了“上一篇”和“下一篇”的字样）：

接着打开style.css，添加以下代码：

27、禁用自动保存

自动保存有时是好事，但有时也是坏事，就像在wordpress中，每自动保存一次，就会在数据库中增加一条无用的数据，久而久之，数据库就会被垃圾堆满。所以，必须禁用。

方法也很简单，打开functions.php，添加以下代码即可：

28、禁用所有文章类型的修订版本

这个原理和上面的类似，每编辑一次文章，数据库就会记录一次，这也会给数据库增加很大负担。所以，禁用！

打开functions.php，添加以下代码即可：

29、发布、更新或删除日志后刷新首页

假如你发布了一篇文章，如果你想要让他立刻显示到首页，并让别人能看得到，就需要刷新，更新和删除同理，同样在functions.php下添加以下代码：

30、隐藏版本号

隐藏版本号是为了安全考虑，虽然我也不太明白它到底会导致什么结果，但为了网站的安全考虑，加上一段代码来隐藏版本号，也的确是很简单的一件事，同样在functions.php之下添加以下代码：

31、头像设置

wordorpess的头像是很让人头痛的一件事，因为它默认调用的是Gravetar头像，但该网站在国内是不能使用的，这就会拖累网站速度。

今天我在网上找到了一个方法，就是调用CDN加速平台上的的头像，在functions.php中添加以下代码即可：

另外，图片地址是别人七牛云上的图片地址，你也可以自己设置七牛云，而且有免费的空间，是很不错的一种选择。

于是，你的后台就可以看到头像了（但所有的头像都只能是默认的一个）。

最后说一些小提醒：

1、修改主题的难点在于找到它的位置，比如要修改某段文字的样式，你就需要找到它属于谁，推荐用火狐浏览器，按F12调出开发者工具，配合使用，这样可以帮助你更快地找到位置所在，之后再根据父主题的样式，在子主题做相应的修改；

2、请一定不要把任何分类、目录的别名命名为“ad”——意思为广告，倘若你或浏览者的浏览器安装了屏蔽广告的插件，那么打开的相应页面将会是空白，这也会把你吓一跳的；

3、如果你修改了样式没有任何反应，可能有以下几种情况：

第一、样式头不对，比如是页脚的内容，应该以footer作为样式头，而你写了.header，那肯定不会有反应；

第二、未删除缓存，安装了缓存插件，就会定时删除缓存，如果你需要及时看到样式的修改，就需要手动删除缓存；

第三、父主题没有更改为子主题，如果你找到的样式里带有“TEMPLATEPATH”，请一定记得改为“STYLESHEETPATH”，前者是作用父主题的样式，后者才是作用子主题的样式；

第四、我们也要容忍wordpress后台和数据库的迟钝，有时，即便你上述都没有任何问题，样式还是没有发生变化，那就是后台和数据库打了瞌睡，等一等，再等一等就好。4、在做修改之前，请记得做好备份，如果修改的不满意，或者出了一些问题，也可以及时恢复。另外，我强烈建议大家用本地搭建的方式来修改调试，这可以避免很多不必要的损失。

最后，感谢各位wordpress爱好者的智慧，因为有了你们，我才能做出如此修改。

广告栏+++++++蜜糖商店|大哥云| 搬瓦工JMS|红莓网络| Mielink|萌喵加速| 飞鸟云