摘要标识
摘要由FUNION通过智能技术生成
此内容由AI根据文章内容自动生成,并已由人工审核校验

大家都想要一个漂亮的文章置顶效果,今天本文为大家介绍实操如何在WP文章标题前添加置顶小图标效果,你可以学到如何快速制作技巧并实践。

大家好,我是飞小优,前不久写过一篇如何在文章标题前添加推荐小图标,今天为大家介绍如何在文章标题前添加置顶小图标,这样可以帮助文章点击量。

思路方式

WP自带文章置顶功能,因此可借助变量$is_sticky 进行处理;

在文章后台勾选置顶选项,具体入口两个位置:

入口一:快速编辑下

WP如何在文章标题前添加置顶小图标?

入口二:文章详情页右侧

WP如何在文章标题前添加置顶小图标?

纯代码实现方式

function add_top_title_icon($title, $id) {
    $is_sticky = is_sticky($id);
    $current_category = get_queried_object();
    if ($is_sticky && $current_category instanceof WP_Term && $current_category->taxonomy === 'category') {
        // 如果是置顶文章且当前页面是分类页面
        $title = '<span class="i-sticky">置顶</span> ' . $title;
    }
    return $title;
}
add_filter('the_title', 'add_top_title_icon', 10, 2);

前端呈现效果

前端置顶效果显示

以下是前端呈现效果,当然这里还需要进行下置顶图标的样式自定义,这个按照具体需求进行安排就行,样式代码就省略。

以上就是飞优为大家在国庆节首日准备的SEO前端干货教程,大家可以赶快试试吧!更多内容请持续关注该栏目!

* 文章内容很有用,那就5星好评吧!😘

0 / 5 好评 5

Your page rank:

数字人
微信

扫码了解更多服务

qr

1对1专家沟通

小程序

funion_xcx