子比主题添加HTML模块渐变色背景

效果预览

进入子比主题目录，创建 func.php 文件，把下面的代码添加进去

<?php
//实现侧边栏文本工具运行PHP代码
add_filter(‘widget_text’, ‘php_text’, 99);
function php_text($text) {
if (strpos($text, ‘<‘ . ‘?’) !== false) {
ob_start();
eval(‘?’ . ‘>’ . $text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}
 
/*底部统计开始*/
function dbtj(){
global $wpdb;
$users = $wpdb–>get_var(“SELECT COUNT(ID) FROM $wpdb->users”);
$count_posts = wp_count_posts();
$published_posts =$count_posts–>publish;
$count=0;
$views= $wpdb–>get_results(“SELECT * FROM $wpdb->postmeta WHERE meta_key=’views'”);
foreach($views as $key=>$value){
$meta_value=$value–>meta_value;
if($meta_value!=‘ ‘){
$count+=(int)$meta_value;
}
}
$today = getdate();
$query = new WP_Query( ‘year=’ . $today[“year”] . ‘&monthnum=’ . $today[“mon”] . ‘&day=’ . $today[“mday”]);
$postsNumber = $query–>found_posts;
$wdyx_time = floor((time()–strtotime(“2022-5-28”))/86400);
echo‘<div id=”caired”>
<div class=”cai”>
<ul>
<li>
<span>’.$users.‘</span>
<p>会员总数</p>
</li>
<li>
<span>’.$published_posts.‘</span>
<p>文章总数</p>
</li>
<li>
<span>’.$count.‘</span>
<p>浏览总数</p>
</li>
<li>
<span>’.$postsNumber.‘</span>
<p>今日发布</p>
</li>
<li>
<span>’.$wdyx_time.‘天</span>
<p>稳定运行</p>
</li>
</ul>
</div>
</div>’;
}
/*底部统计结束*/

进入后台—>ZiBll主题设置—>全局功能—>自定义代码—>自定义CSS样式

/*底部统计开始*/
/*背景图*/
#caired{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: “montserrat”;
background-image: -webkit-linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
background-size: 400%;
animation: bganimation 15s infinite;
}
 
@keyframes bganimation {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
#caired{border-radius: 10px;}
#caired .cai ul{display: flex;}
#caired .cai ul li{width: 20%; color: #fff; text-align: center;}
#caired .cai ul li span{font-size: 24px; font-family: Arial;}@media screen and (max-width: 768px){#caired .cai ul li span{font-size: 20px; font-family: Arial;}}
#caired .cai{font-weight:700;padding:20px 0 20px 0;}
/*底部统计结束*/

进入后台—>ZiBll主题设置—>全局功能—>自定义代码—>自定义javascript代码

//底部统计开始
document.getElementById(“caired”).parentNode.parentNode.style.padding=0
//底部统计结束

进入后台—>外观—>小工具—>首页底部全宽—>添加文本小工具

<?php echo dbtj()?>