给wordpress文章列表添加缩略图功能

继续分享wordpress建站教程。默认情况下wordpress自带的文章列表中是不显示图片，但在woocommerce产品列表中是有的。这个一般来说影响不大，但如果一定要给wordpress文章列表添加缩略图功能，可以找找相关插件，我记得水煮鱼大神的那个插件可以开启。

如果你不想安装插件，也可以找找相关代码片段，网上挺多分享的，我也找了下，有些确实可以，但效果有些不太行，所以我参考woocommerce样式让AI修改了一下，最后成品代码为：

/**
 * 在文章列表页添加特色图像
 */
if (function_exists('add_theme_support')) {
    add_filter('manage_posts_columns', 'my_add_posts_columns', 5);
    add_action('manage_posts_custom_column', 'my_custom_posts_columns', 5, 2);
}

function my_add_posts_columns($defaults) {
    $new_columns = array();
    
    foreach ($defaults as $key => $value) {
        if ($key === 'title') {
            // 下面文字可以按需改
            $new_columns['my_post_thumbs'] = '<span style="font-size:12px;">特色图</span>';
        }
        $new_columns[$key] = $value;
    }
    return $new_columns;
}

function my_custom_posts_columns($column_name, $post_id) {
    if ($column_name === 'my_post_thumbs') {
        
        // 图片大小可以按需修改 注意不要太大
        echo '<div style="display:flex;align-items:flex-start;padding:5px 0;">';
        echo '<div style="flex-shrink:0;margin-right:8px;">'; 
        
        if (has_post_thumbnail($post_id)) {
            echo get_the_post_thumbnail($post_id, array(80, 60), array(
                'style' => 'width:80px;height:60px;object-fit:cover;border-radius:3px;display:block;'
            ));
        } else {
            // 无图时的占位符
            echo '<div style="width:80px;height:60px;background:#f5f5f5;border-radius:3px;display:flex;align-items:center;justify-content:center;">';
            echo '<span style="color:#bbb;font-size:10px;">无</span>';
            echo '</div>';
        }
        
        echo '</div></div>';
    }
}

把上面的代码直接添加到主题的functions.php文件中，或添加到wp code插件中即可，然后刷新页面或清空缓存就可以看到效果了。

好了，分享完毕。这个功能一般来说，如果你文章内容不多的情况下，没必要加，默认什么样就什么样吧。如果内容很多的情况下，也不建议加，可能拖慢后台加载速度，比如我自己的网站，有这个功能，但我禁用了。