老郭种树 WordPress 博客主题 twentytwelve 优化

暂无留言

我大概对原生的twentytwelve主题做了以下修改和优化，下面的很多需求是可以用插件实现的，但这次决定不用插件，用代码去实现。

使用经典编辑器

image-20221224104817276

我之前都是用插件的（上图），这次不用插件，将以下代码添加到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) . '">继续阅读&raquo;</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 ，只不过我擅长搜索，能将我需要的找出来，希望以上能帮到你。如果没解决你的问题，自己在互联网搜索吧，你的需求应该不是独一无二，无非是多花一点时间，总能找到你需要的。

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注