子比主题教程：顶部导航栏最右边添加随机文章功能

今天给大家分享一个子比主题实用小功能，导航栏添加随机访问文章按钮。

利用子比主题自带图标、配色体系，样式简洁百搭，完美贴合主题 UI。点击即可自动跳转随机文章，丰富网站浏览体验，操作简单，全程仅需两段代码，直接复制部署即可。

效果预览

添加右上角随机阅读按钮，调用 WordPress 接口自动抓取全站已发布文章，一键随机跳转。按钮样式沿用子比原生配色，支持自定义背景颜色、圆角样式，小巧美观，实用性拉满。

代码部署

第一部分：func.php 文件

文件路径：/wp-content/themes/zibll/func.php

如果文件不存在，手动新建func.php文件，必须添加 PHP 头部，避免报错。

<?php

将下方完整代码粘贴到func.php文件中：

第二部分：zib-header.php 文件

文件路径：/wp-content/themes/zibll/inc/functions/zib-header.php

1. 打开文件，搜索关键词：

function zib_menu_button($layout = 1)

2. 找到该函数代码，在代码下方第五行左右，添加下方代码：

$random_button = zib_get_random_post_button(array(
    'echo' => false 
));
if ($random_button) {
    $button .= $random_button;
}

添加完成后保存文件，刷新网站即可看到右上角随机文章按钮。

自定义按钮颜色

按钮样式由class参数控制，原代码默认：

'class' => 'jb-blue radius-circle'

可自由替换为子比原生样式代码，随心更换配色：

样式类型	样式代码	颜色效果
文字颜色	c-red	红色文字
文字颜色	c-yellow	橙色文字
文字颜色	c-blue	蓝色文字
文字颜色	c-blue-2	深蓝色文字
文字颜色	c-green	绿色文字
文字颜色	c-purple	紫色文字
纯色背景	b-red	红色背景
纯色背景	b-yellow	橙色背景
纯色背景	b-blue	蓝色背景
纯色背景	b-green	深蓝色背景
纯色背景	b-purple	紫色背景
纯色背景	b-theme	主题背景色
渐变背景	jb-red	渐变红色
渐变背景	jb-yellow	渐变橙色
渐变背景	jb-blue	渐变蓝色
渐变背景	jb-green	渐变绿色
渐变背景	jb-purple	渐变紫色
渐变背景	jb-vip1	渐变金色
渐变背景	jb-vip2	渐变黑色

部署注意事项

1. 所有文件修改完毕后，清空网站缓存与浏览器缓存；
2. 样式冲突可自行修改按钮 class 样式，调整大小与边距。

总结

这款随机文章按钮非常简约，贴合子比整体设计风格，无需复杂插件，纯代码实现，轻量化无冗余。

提升网站互动性，引导用户浏览更多文章，喜欢的朋友直接一键部署即可。