WordPress 站点的一些修改和优化

最后更新于 2021年12月10日,文中内容可能已发生变化

移除不必要的静态文件

移除 jetpack.css

安装了 Jetpack 插件后,只开启了静态文件 CDN 和图片懒加载功能,前端不需要加载任何 css 文件,但实际每次都会加载 jetpack.css,可通过在主题目录的 functions.php 中使用钩子函数 add_filter 将其移除:

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

移除 mediaelementplayer-legacy.min.css 和 wp-mediaelement.min.css

音视频播放器用到的样式文件,如果不使用播放器,也可将它们移除来减少资源请求,主题目录的 functions.php 中添加以下函数调用:

function deregister_media_elements(){
    wp_deregister_style('wp-mediaelement');
}
add_action('wp_enqueue_scripts','deregister_media_elements');

文章列表显示摘要

在主题目录的 content.php 中,调用 the_excerpt 方法:

<?php if ( is_search() || is_home() || is_category() || is_archive() ) : ?>
    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
<?php else : ?>

搜索页中显示数量

当前使用的主题是 Twenty Twelve,在主题目录的 search.php 中添加:

<?php global $wp_query; echo ',共 ' . $wp_query->found_posts . ' 条'; ?>
<!--search.php-->
<header class="page-header">
    <h1 class="page-title">
    <?php
    /* translators: %s: Search query. */
    printf( __( 'Search Results for: %s', 'twentytwelve' ), '<span>“' . get_search_query() . '”</span>' );
    ?><?php global $wp_query; echo ',共 ' . $wp_query->found_posts . ' 条'; ?>                
    </h1>
</header>

同样如果在标签归档页、分类归档页、日期归档页中也要显示,则分别添加到 tag.php、category.php、archive.php 中

侧边栏的分类和归档后面显示数量

分类是在 wp-includes/class-walker-category.php 中修改,去掉外层条件判断即可:

// if ( ! empty( $args['show_count'] ) ) {
    $link .= ' (' . number_format_i18n( $category->count ) . ')';
// }

归档在 wp-includes/blocks/archives.php 中修改:

$archives_args = apply_filters(
    'widget_archives_args',
    array(
        'type'            => 'monthly',
//      'show_post_count' => $show_post_count,
        'show_post_count' => true,
    )
);

侧边栏的标签改为随机颜色

在主题目录的 functions.php 中修改,为 wp_tag_cloud 函数添加过滤器,wp_tag_cloud 是 WordPress 中渲染标签的方法

function colorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
    return $text;
}
function colorCloudCallback($matches) {
    $text = $matches[1];
    $colors=array('ff3300','0517c2','0fc317','e7cc17','601165','ffb900','f74e1e','00a4ef','7fba00');
    $color=$colors[rand(0,8)];
    $pattern = '/style=(\'|\")(.*)(\'|\")/i';
    $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
    return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

添加单独的标签云页面

可以使用 shortcode 的方式实现。

在主题目录的 functions.php 中,定义一个 shortcode:

// 创建名为 wp_my_show_tags 的 shortcode,用 wp_tag_cloud 处理
add_shortcode('wp_my_show_tags', 'wp_tag_cloud');

WordPress 后台中添加一个页面,在内容中调用这个短代码即可显示标签云:

[wpb_popular_tags]

WordPress 中 wp_tag_cloud 提供了很多参数,可以更精细的控制标签云的输出。使用 wp_generate_tag_cloud 方法可以自定义一个新的 wp_tag_cloud,然后用它来处理短代码 wp_my_show_tags:

// functions.php
function wp_my_tag_cloud() {
    $tags = get_tags();

    $args = array(
        'smallest'                  => 10, // 标签字体最小值,默认8,单位由 unit 指定
        'largest'                   => 22, // 标签字体最大值,默认22,单位由 unit 指定
        'unit'                      => 'px', // 标签字体大小单位,默认 pt
        'number'                    => 10, // 标签输出个数,默认0输出所有标签
        'format'                    => 'flat', // 标签输出格式,默认 flat 以空格分隔
        'separator'                 => ' ', // 分隔标签的 html 或文本,默认 n 为换行符
        'orderby'                   => 'count', // 标签根据什么排序,默认 name 根据名称排序
        'order'                     => 'DESC', // 升序还是降序,默认 ASC 升序
        'show_count'                => 1 // 是否显示标签后的文章数量,默认0不显示
    ); 

    $tag_string = wp_generate_tag_cloud( $tags, $args );

    return $tag_string;
} 
add_shortcode('wpb_popular_tags', 'wp_my_tag_cloud');

发表回复

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