子比主题 – 右上角随机访问文章功能

飞流 · 发表于 2025-10-10 17:06:52

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题的右上角随机访问文章功能，利用的子比自带的颜色和跳转图标，给自己的右上角加一个随机文章还是比较美观的，喜欢的自行部署吧！

tengfei_down - 2025-10-10T170443.539.webp

代码部署

一共两个部分的代码，跟着我的教程走不会有问题！

func代码

定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，将下面的代码直接丢里面即可！

function register_random_post_redirect_endpoint() {
register_rest_route('wp/v2', '/random-post', array(
'methods' => 'GET',
'callback' => 'handle_random_post_redirect',
'permission_callback' => '__return_true'
));
}
add_action('rest_api_init', 'register_random_post_redirect_endpoint');
function handle_random_post_redirect($request) {
// 获取所有已发布的文章
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'fields' => 'ids',
'posts_per_page' => -1,
);
$posts = get_posts($args);
if (empty($posts)) {
return new WP_Error('no_posts', '没有找到文章', array('status' => 404));
}
// 随机选择一篇文章
$random_post_id = $posts[array_rand($posts)];
$random_post_url = get_permalink($random_post_id);
// 直接重定向
if (!headers_sent()) {
wp_redirect($random_post_url);
exit;
}
// 如果无法重定向，返回JSON响应
return array(
'post_id' => $random_post_id,
'post_url' => $random_post_url,
'message' => '请手动访问上面的URL'
);
}
function zib_get_random_post_button($args = array()) {
if (!_pz('random_post_button', true)) {
return '';
}
$random_icon = '<svg t="1751112388719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5410" width="1000" height="1000" data-spm-anchor-id="a313x.search_index.0.i12.4dfa3a81Mc8lKy"><path d="M166.464 448.704l212.64 128.736a32 32 0 1 1-33.152 54.72L79.424 470.848a32 32 0 0 1 4.256-56.928l832-347.456a32 32 0 0 1 43.744 35.52l-145.76 768a32 32 0 0 1-48.576 21.056L494.88 719.712a32 32 0 0 1 34.24-54.08l230.464 146.112L885.44 148.48 166.464 448.704z" p-id="5411" data-spm-anchor-id="a313x.search_index.0.i14.4dfa3a81Mc8lKy"></path><path d="M416 632.096V896a32 32 0 0 1-64 0V617.376a32 32 0 0 1 11.2-24.32L752.192 260a32 32 0 0 1 41.6 48.64L416 632.064z" p-id="5412" data-spm-anchor-id="a313x.search_index.0.i13.4dfa3a81Mc8lKy"></path></svg>';
$defaults = array(
'class' => 'jb-blue radius-circle',
'text' => '随机文章',
'icon' => $random_icon,
'tooltip' => '随机阅读一篇文章',
'echo' => true
);
$args = wp_parse_args($args, $defaults);
$button = '<a href="' . esc_url(home_url('/wp-json/wp/v2/random-post')) . '" rel="external nofollow"
class="random-post-button but ' . esc_attr($args['class']) . ' ml10"
data-toggle="tooltip"
data-placement="bottom"
title="' . esc_attr($args['tooltip']) . '">'
. $args['icon']
. esc_html($args['text'])
. '</a>';
if ($args['echo']) {
echo $button;
}
return $button;
}

复制代码

zib-header.php代码

定位：/wp-content/themes/zibll/inc/functions/zib-header.php文件，我们到了这个文件之后搜代码

function zib_menu_button($layout = 1)

复制代码

将下面的代码放到里面，如下图我圈的地方即可！
tengfei_down - 2025-10-10T170553.721.webp

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

复制代码

角标颜色

可以看到我们func代码里面有一行'class' => 'jb-blue radius-circle'，里面的jb-blue，我们可以按照下面来自己弄自己喜欢的颜色即可！

class	样式	class	样式	class	样式
c-red	红色文字	b-theme	主题背景色	jb-red	渐变红色背景
c-yellow	橙色文字	b-red	红色背景	jb-yellow	渐变橙色背景
c-blue	蓝色文字	b-yellow	橙色背景	jb-blue	渐变蓝色背景
c-blue-2	深蓝色文字	b-blue	蓝色背景	jb-green	渐变绿色背景
c-green	绿色文字	b-green	深蓝色背景	jb-purple	渐变紫色背景
c-purple	紫色文字	b-purple	紫色背景	jb-vip1	渐变金色背景
				jb-vip2	渐变黑色背景

[/zhedie]

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 右上角随机访问文章功能

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn