花了一些时间，终于将 WordPress 博客主题 twentytwelve 优化完善成我比较满意的状态。折腾博客真的会上瘾，但相对来说，内容重要性大于形式。所以，以后我也不会再花时间去研究博客主题样式，希望这个主题可以陪伴我的博客久一点，接下来我会对优化修改的部分做个分享，希望能帮到你。
先说一个事，我的博客之前放在腾讯云，当时买了腾讯云三年的服务器套餐多花几百块，购买云服务器一定要跳过的坑，阿里云 腾讯云的选择，而在腾讯云之前，我用了一年的阿里云。所以，前面我花了很大功夫将博客从阿里云迁移到腾讯云。而这次，我又从腾讯云迁移到老薛主机，舍弃了很多东西，包括宝塔面板。如果你也有搬家迁移网站的需求，可以参考我的视频 Youtube、bilibili。
我大概对原生的twentytwelve主题做了以下修改和优化，下面的很多需求是可以用插件实现的，但这次决定不用插件，用代码去实现。
- 使用经典编辑器
- 显示文章摘要
- 修改置顶文章样式
- 显示小工具经典模式
- 修改标签云样式
- 回到顶部
- 面包屑导航
- 评论区显示本地头像
- 添加文章版权声明
- 相关文章推荐
- 浏览量
使用经典编辑器
我之前都是用插件的（上图），这次不用插件，将以下代码添加到functions.php尾部，一样可以将区块编辑器切换成老版本的经典编辑器。
/**
* 使用经典编辑器
*/
add_filter('use_block_editor_for_post', '__return_false');
remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
显示文章摘要
就上面效果，twentytwelve主题默认首页显示文章全文，但我不喜欢，所以将首页修改成只显示文章的摘要。这里我参考Twenty Thirteen首页显示摘要最简单方法对主题做了以下编辑和修改。
找到content.php的如下代码
<?php if ( is_search() ) : // Only display excerpts for search. ?>
替换
<?php if ( is_search() || is_home() || is_category () || is_author() || is_tag() || is_archive() ) : // 全部以摘要显示?>
接着编辑functions.php，将以下代码复制粘贴到尾部最后面。
/**
* 为摘要添加继续阅读字样
*/
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) . '">继续阅读»</a></span>';
}
add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more’);
修改置顶文章样式
主题默认将我置顶的文章显示成「特色文章」，而且样式不太好看。
对此我做了这些优化和修改，先将文本从「特色文章」改成「置顶」。找到content.php以下代码。
<div class="featured-post">
<?php _e( 'Featured Posts', 'twentytwelve' ); ?>
</div>
替换
<div class="featured-post">
<?php _e( '置顶', 'twentytwelve' ); ?>
</div>
接着修改样式，找到style.css，搜索featured-post，将样式替换成如下。
article.sticky .featured-post {
border: 1px solid rgba(0, 0, 0, 0.3);
padding: 5px;
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
将小工具切换回旧版经典模式
WordPress 新版本的小工具栏我用着不习惯，打在functions.php，将以下代码粘贴到尾部即可。
/**
* 切换经典小工具
*/
add_filter( 'gutenberg_use_widgets_block_editor', '__return_false' );
add_filter( 'use_widgets_block_editor', '__return_false' );
优化标签云样式
主题默认的标签云我觉得不太好看。
参考Customize The Size and Style of The Tag Cloud做了一些优化和修改，最终效果如下：
同样编辑打开functions.php，复制粘贴以下代码到尾部
// Fixed the tag cloud size
add_filter( 'widget_tag_cloud_args', 'change_tag_cloud_font_sizes');
/**
* Change the Tag Cloud's Font Sizes.
*
* @since 1.0.0
*
* @param array $args
*
* @return array
*/
function change_tag_cloud_font_sizes( array $args ) {
$args['smallest'] = '12';
$args['largest'] = '12';
return $args;
}
再调整标签云的样式，打开style.css，搜索tagcloud，将以下代码复制粘贴到文件。
.tagcloud a {
margin: 0 8px 8px 0;
text-decoration: none;
color: #999;
border: 1px solid #ccc;
display: inline-block;
padding: 5px;
border-radius: 3px;
line-height: 1;
font-size: 6px !important;
}
回到顶部
参考How to Create a Scroll Back-to-Top Button in WordPress，创建topbutton.js，将以下代码复制到文件。
jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});
将这个文件上传到主题/wp-content/themes/twentytwelve/js。再准备一个图标，用来被点击，我分享过很多免费图标库。
再将准备好的图标上传到图库，获取链接。打开style.css文件，将以下内容复制粘贴到底部。
.topbutton {
height:32px;
width:32px;
position:fixed;
right:6%;
bottom:8%;
Z-index:1;
background-image:url("https://guozh.net/wp-content/uploads/2022/12/scroll_to-top.png");
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
display:none;
}
打开functions.php，复制粘贴如下代码到底部。
/**
* 回到顶部
*/
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
面包屑导航
打开functions.php，将下面代码复制粘贴到底部。
/**
* 面包屑导航
*/
function get_breadcrumb() {
echo '<a href=""'.home_url().'"" rel=""nofollow"">首页</a>';
if (is_category() || is_single()){
echo " » ";
the_category (' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}
打开single.php，复制粘贴以下代码到对应位置。
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
随机显示本地头像 Avatar
评论区随机显示本地头像，先准备一套头像，我在这里下载的。将图片按照数字重新命名，其中另外一张给自己用，命名成admin。将整个图片文件夹命名成avatar，上传到主题/wp-content/themes/twentytwelve/。
再编辑functions.php，将以下代码贴到底部，按需修改$random = mt_rand(1, 14);，我这是 14 张图片，所以随机 1-14，然后图片格式是.png。
/**
* 随机显示本地头像
*/
add_filter( 'get_avatar' , 'local_random_avatar' , 1 , 5 );
function local_random_avatar( $avatar, $id_or_email, $size, $default, $alt) {
if ( ! empty( $id_or_email->user_id ) ) {
$avatar = ''.get_template_directory_uri().'/avatar/admin.png';
}else{
$random = mt_rand(1, 14);
$avatar = ''.get_template_directory_uri().'/avatar/'. $random .'.png';
}
$avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
return $avatar;
}
最后记得检查头像显示是否开启。
文章版权声明
/**
* WordPress 文章版权声明
*/
function add_after_post_content($content) {
if(!is_feed() && !is_home() && is_single() && is_main_query()) {
$content .= '<p>本文由<a href="'.get_bloginfo('url').'" target="_blank">'.get_bloginfo('name').'</a>原创，转载请注明：<a title="'.get_the_title().'" href="'.get_permalink().'" target="_blank">'.get_permalink().'</a></p>';
}
return $content;
}
add_filter('the_content', 'add_after_post_content');
显示阅读量
参考WordPress文章阅读量统计和显示(非插件, 刷新页面不累加)，将以下代码放到functions.php底部。
/**
* 浏览量
*/
function getPostViews($postID){
$count_key = 'views';
$count = get_post_meta($postID, $count_key, true);
if($count=='' || !$count){
return "0";
}
return $count;
}
function setPostViews($postID){
$count_key = 'views';
$count = get_post_meta($postID, $count_key, true);
if($count=='' || !$count) {
$count = 1;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, $count);
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
打开single.php，将下面代码贴到里面。
<?php
if(!isset($_COOKIE['views'.$post->ID.COOKIEHASH]) || $_COOKIE['views'.$post->ID.COOKIEHASH] != '1'){
setPostViews($post->ID);
setcookie('views'.$post->ID.COOKIEHASH,'1',time() + 99999999,COOKIEPATH,COOKIE_DOMAIN);
} ?>
再打开content.php，将显示阅读数的代码粘贴到合适位置。
<!--阅读数-->
<i style="margin-left:5px"></i>
<?php echo '阅读(' .getPostViews(get_the_ID()) .')';?>
相关文章推荐
参考WordPress添加相关文章的几种方法，将以下代码复制粘贴到functions.php底部。
/**
* 相关文章
*
* @global object $post
* @param array $args
* @return
*/
function wcr_related_posts($args = array()) {
global $post;
// default args
$args = wp_parse_args($args, array(
'post_id' => !empty($post) ? $post->ID : '',
'taxonomy' => 'category',
'limit' => 3,
'post_type' => !empty($post) ? $post->post_type : 'post',
'orderby' => 'date',
'order' => 'DESC'
));
// check taxonomy
if (!taxonomy_exists($args['taxonomy'])) {
return;
}
// post taxonomies
$taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));
if (empty($taxonomies)) {
return;
}
// query
$related_posts = get_posts(array(
'post__not_in' => (array) $args['post_id'],
'post_type' => $args['post_type'],
'tax_query' => array(
array(
'taxonomy' => $args['taxonomy'],
'field' => 'term_id',
'terms' => $taxonomies
),
),
'posts_per_page' => $args['limit'],
'orderby' => $args['orderby'],
'order' => $args['order']
));
include( locate_template('related-posts-template.php', false, false) );
wp_reset_postdata();
}
新建related-posts-template.php，我对相关文章的样式做了点优化，不满意可以使用参考文章中的原代码。
<?php if (!empty($related_posts)) { ?>
<div class="related-posts">
<h3 class="widget-title"><?php _e('相关文章推荐', ''); ?></h3>
<ul class="related-posts-list" style="margin:0px;padding:0px;width:100%;float:left;padding-bottom:20px">
<?php
foreach ($related_posts as $post) {
setup_postdata($post);
?>
<dl style="margin:0px;padding:0px;">
<a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (has_post_thumbnail()) { ?>
<div class="thumb">
<?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
</div>
<?php } ?>
<?php the_title(); ?>
</a>
</dl>
<?php } ?>
</ul>
<div class="clearfix"></div>
</div>
<?php
}
我再选择根据标签 TAG 来推荐，数字 6 自行修改，为展示文章数量。
<?php
wcr_related_posts(array(
'taxonomy' => 'post_tag',
'limit' => 6
));
?>
打开content.php，将上面代码贴到合适位置。
2023.2.21更新
添加导航数字分页，如果用插件参考它，如果用代码实现可以参考它，我发现这两个实现的效果都是如下，看起来还不错，但手机上显示不太好，会错位，将就用吧（我是用插件）。
搞定，以上就是我优化完善博客的整个过程，可以看到，其实我也不懂 PHP ，只不过我擅长搜索，能将我需要的找出来，希望以上能帮到你。如果没解决你的问题，自己在互联网搜索吧，你的需求应该不是独一无二，无非是多花一点时间，总能找到你需要的。
本文由老郭种树原创，转载请注明：https://guozh.net/wordpress-blog-theme-twentytwelve-optimized/
挺不错的，我也用的twenty twelve。
我刚跳过去看你的博客，发现你把WordPress玩的好6
审美相同啊，哈哈，才搭建的站，看到你的文章了。