WordPress和子比主题模板&网站美化方法教程

前言

  • 本页主题美化内容是觅知社长在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会持续的更新。

主题美化说明：

  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题，请一定要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

必要说明：（核心重点）

  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • （最新版子比主题）CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式
  • （最新版子比主题）JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码
  • （最新版子比主题）没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。
  • ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
  • 其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
  • 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

[zd-plane title="1、网站左上角添加 FPS 帧率显示"]

使用方法

你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码：

// FPS 帧开始
// by：活动资源网-jc.dhmip.cn
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
// by：活动资源网-jc.dhmip.cn
// FPS 帧结束

效果图

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="2、zibll 子比主题文章标签美化"]

使用方法

复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：活动资源网-jc.dhmip.cn*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by：活动资源网-jc.dhmip.cn*/
/*文章随机彩色标签结束*/

[/zd-plane]

[zd-plane title="3、网站添加侧边彩色滚动条"]

使用方法

一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！
如果主题没有 自定义代码 那么在 wordpress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by：活动资源网-jc.dhmip.cn*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by：活动资源网-jc.dhmip.cn*/
/**彩色滚动条样式结束*/

[/zd-plane]

[zd-plane title="4、主题 LOGO 扫光"]

CSS 代码：

/* logo 扫光开始 */
/*by：活动资源网-jc.dhmip.cn*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* by：活动资源网-jc.dhmip.cn*/
/* logo 扫光结束 */

[/zd-plane]

[zd-plane title="5、导航栏标题字体加粗"]

添加到自定 CSS 代码：

/* logo 扫光开始 */
/*by：活动资源网-jc.dhmip.cn*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* by：活动资源网-jc.dhmip.cn*/
/* logo 扫光结束 */

[/zd-plane]

[zd-plane title="6、用户头像呼吸光环+鼠标悬停旋转放大"]

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：活动资源网-jc.dhmip.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by：活动资源网-jc.dhmip.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

[/zd-plane]

[zd-plane title="7、首页文章列表悬停上浮开始"]

自定义 CSS 代码：

/*首页文章列表悬停上浮开始*/
/*by：活动资源网-jc.dhmip.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by：活动资源网-jc.dhmip.cn*/
/*首页文章列表悬停上浮结束*/

[/zd-plane]

[zd-plane title="8、网站动态标题"]

[postcard type="list"]788[/postcard]

[/zd-plane]

[zd-plane title="9、WP 主题侧边栏滚动播报小工具"]

[postcard type="list"]790[/postcard]

[/zd-plane]

[zd-plane title="10、首页左侧边栏添加【联系站长】按钮"]

[postcard type="list"]791[/postcard]

[/zd-plane]

[wxshow]

[zd-plane title="11、文章底部添加最后更新时间或过期失效提示"]

  • 分为三个步骤
  • 1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。
//文章过期提示开始
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="网站站长" href="http://wpa.qq.com/msgrd?v=3&uin=1667235636&site=qq&menu=yes"><b>觅知社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束
  • 说明：请自己修改上面有关于自己网站的信息，改成自己网站信息即可，图标可以用阿里矢量图。

2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 322 行，因为我的代码有改动，所有不确定行数，见下图）下面添加下方代码即可。

  • PHP 代码：
article_time_update();//文章过期提示

WordPress和子比主题模板&网站美化方法教程

3.CSS 代码：（在自定义 CSS 样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
  • 效果展示：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="12、整站底部添加好看的蓝色波浪"]

  • 在 zibll 主题目录下，themes/zibll/footer.php 文件中的“</footer>”（重要）下面添加下面的代码：
<!--底部波浪开始-->
<!--by：活动资源网-jc.dhmip.cn-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--by：活动资源网-jc.dhmip.cn-->
<!--底部波浪结束-->
  • 效果图演示：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="13、网站添加添加居中复制透明提示框"]

1.子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
// by：活动资源网-jc.dhmip.cn
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【活动资源网(jc.dhmip.cn)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

2.子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<!--by：活动资源网-jc.dhmip.cn-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->

[/zd-plane]

[zd-plane title="14、修改主题字体（网站字体美化）"]

待更新

[/zd-plane]

[zd-plane title="15、子比主题外链修改 go 外链跳转页面"]

  • 在主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
  • 更新主题和修改前记得备份go.php。

注意：修改代码内的第 108 行的 logo 地址，本教程适用于子比主题最新版，其他主题请自行测试。

<!--by：活动资源网-jc.dhmip.cn-->
<?php
if (
    strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
    strpos($_SERVER['REQUEST_URI'], "base64")
) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过 QUERY_STRING 取得完整的传入数据，然后取得 url=之后的所有值，兼容性更好

@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url =  base64_decode($t_url);
    }
    //防止 xss
    $t_url =  htmlspecialchars($t_url);

    //对取值进行网址校验和判断
    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    if ($matches) {
        $url = $t_url;
        $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url = 'http://' . $t_url;
            $title = '页面加载中,请稍候...';
        } else {
            $url = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误，正在返回首页...';
        }
    }
} else {
    $title = '参数缺失，正在返回首页...';
    $url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="robots" content="noindex, nofollow" />
    <title><?php echo $title; ?></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico">
    <script>
  function link_jump()
  {
    //禁止其他网站使用我们的跳转页面
    var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
    if (!MyHOST.test(document.referrer)) {
       location.href="https://" + MyHOST;
    }
    location.href="<?php echo $url; ?>";
  }
    //延时 1S 跳转，可自行修改延时时间
  //setTimeout(link_jump, 1500);
  //延时 50S 关闭跳转页面，用于文件下载后不会关闭跳转页的问题
  setTimeout(function(){window.opener=null;window.close();}, 50000);
  </script>
<style>
      *,:after,:before{box-sizing:border-box}body.reader-black-font,body.reader-black-font .history-mode .view-area,body.reader-black-font .history-mode .view-area pre,body.reader-black-font .main .kalamu-area,body.reader-black-font .main .markdown .text,body.reader-black-font input,body.reader-black-font select,body.reader-black-font textarea{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif}body{background:#f6f7f8}.ext-link__wrapper{position:absolute;width:620px;padding:40px 0;border-radius:6px;text-align:center;top:118px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;box-shadow:0 1px 3px rgba(27,95,160,.1);overflow:hidden}.title{font-size:22px;color:#2f2f2f}.sub-title{font-size:16px;color:#888;margin-top:8px}.link-bd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:460px;margin:12px auto 0;padding:10px;border-radius:4px;background:#ebf6ff;border:1px solid #dceaf5;zoom:1}.link-bd:after,.link-bd:before{content:" ";display:table}.link-bd .link-bd__icon{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:flex;align-items:center;width:40px;justify-content:center;height:40px;line-height:40px;font-size:20px;background:#bcc6d8;text-align:center;border-radius:2px}.link-btn{text-align:center;font-size:0;margin-top:24px}.link-bd .link-bd__text{font-size:14px;color:#006cbe;margin-left:10px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.link-btn__text{display:inline-block;width:144px;height:44px;line-height:43px;border-radius:22px;font-size:14px;color:#006cbe;border:1px solid #006cbe;cursor:pointer;text-decoration:none}.link-btn__text:hover{color:#fff;background:#006cbe}
.alert-footer {
  margin: 0 auto;
  height: 90px;
  width: 130px;
  padding-top: 30px;
}
.alert-footer-icon {
  float: left;
  margin-top: 10px;
  margin-right: 6px;
}
.alert-footer-text {
  float: left;
  border-left: 2px solid #EEE;
  padding: 3px 0 0 5px;
  height: 60px;
  color: #0B85CC;
  font-size: 12px;
  text-align: left;
  
}
.alert-footer-text p {
  color: #7A7A7A;
  font-size: 22px;
  line-height: 18px;
  margin-top: 0px;
}
</style>
</head>
<body>    
<div class="ext-link__wrapper">
        <img src="https://dh.mipjc.cn/uploads/images/20220518/20220518194925_685.png?1054151830" width="200" style="margin-bottom: 30px;"><!--可修改成自己的 LOGO--> 
        <div class="title">即将跳转到外部网站</div>
        <div class="sub-title">跳转网站安全性未知，是否继续</div>
        <div class="link-bd">
            <div class="link-bd__icon"><svg t="1585116627498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2855" width="32" height="32">
                    <path
                        d="M580.906667 682.496a8.96 8.96 0 0 0-12.501334 0l-129.109333 129.152c-59.818667 59.818667-160.682667 66.133333-226.688 0-66.133333-66.133333-59.733333-166.912 0-226.688l129.109333-129.152a8.917333 8.917333 0 0 0 0-12.544L297.514667 399.061333a8.917333 8.917333 0 0 0-12.544 0l-129.152 129.066667a240.256 240.256 0 0 0 0 340.053333 240.213333 240.213333 0 0 0 340.053333 0l129.066667-129.109333a8.917333 8.917333 0 0 0 0-12.586667l-43.989334-43.989333h-0.042666zM868.224 155.733333a240.554667 240.554667 0 0 1 0 340.138667l-129.109333 129.152a8.917333 8.917333 0 0 1-12.544 0l-44.202667-44.202667a8.96 8.96 0 0 1 0-12.629333l129.109333-129.066667c59.818667-59.818667 66.133333-160.597333 0-226.730666-66.005333-66.133333-166.869333-59.818667-226.688 0l-129.066666 129.194666a8.96 8.96 0 0 1-12.544 0L399.061333 297.514667a8.96 8.96 0 0 1 0-12.544l129.237334-129.152a240.213333 240.213333 0 0 1 339.925333 0v-0.042667z m-247.210667 201.045334l43.946667 43.989333a8.917333 8.917333 0 0 1 0 12.544l-251.562667 251.562667a8.917333 8.917333 0 0 1-12.544 0l-44.032-43.946667a8.917333 8.917333 0 0 1 0-12.544l251.690667-251.605333a8.96 8.96 0 0 1 12.544 0h-0.042667z"
                        fill="#006CBE" fill-opacity=".87" p-id="2856"></path>
                </svg></div>
            <div class="link-bd__text"><?php echo $url; ?></div>
        </div>
        <div class="link-btn">
            <a href="javascript:void(0);" onclick="javascript:window.location.href='<?php echo $url; ?>'" class="link-btn__text">继续前往</a>
      <a href="<?php echo $_SERVER['HTTP_HOST']; ?>" class="link-btn__text" style="margin-left:100px;">回到主页</a>
        </div>
        <div class="alert-footer">
        <svg width="46px" height="42px" class="alert-footer-icon">
          <circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"/>
          <path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"/>
          <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"/>
          <polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "/>
        </svg>
        <div class="alert-footer-text"><p>secure</p>安全加密 </div>
      </div>
    </div>
</body>
</html>
<!--by：活动资源网-jc.dhmip.cn-->

效果图：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="16、一行代码实现全站变灰一般用于悼念缅怀日"]

待更新

[/zd-plane]

[zd-plane title="17、给网站右侧边栏添加百度一下协助 SEO 优化"]

待更新

[/zd-plane]

[zd-plane title="18、在网站右侧边栏添加和风天气模块"]

后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可

<!--by：活动资源网-jc.dhmip.cn-->
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<!--by：活动资源网-jc.dhmip.cn-->

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="19、网站文章底部添加【我也是有底线的+图片】"]

1、在后台子比主题设置—自定义 CSS 样式 添加以下代码：

#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/*by：活动资源网-jc.dhmip.cn*/
/*底部可爱底线提示*/

2、在 zibll 主题目录下，themes/zibll/footer.php 文件中的“第一行”（重要）下面添加下面的代码：

<!--底部可爱底线提示-->
<!--by：活动资源网-jc.dhmip.cn-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://z3.ax1x.com/2021/08/25/hZZUjU.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
<!--底部可爱底线提示-->

[/zd-plane]

[zd-plane title="20、网站文章页底部添加【@版权声明】四种样式"]

1、在 zibll 主题设置中—文章&列表—-文章页 处找到，版权声明添加以下代码

2、如不是子比主题，样式可通用，放置在你的主题文章页底部即可

样式一：

<!--网站声明代码样式一 start-->
<!--by：活动资源网-jc.dhmip.cn-->
  <div>
    <fieldset  style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
      <legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;" >
        版权声明
      </legend>
      <span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>活动资源网</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://dh.mipjc.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=1667235636&site=qq&menu=yes" target="_blank">1426239465</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式一 end-->

WordPress和子比主题模板&网站美化方法教程

样式二：

 <!--网站声明代码样式二 start-->
<!--by：活动资源网-jc.dhmip.cn-->
    <div>
      <fieldset
        style="
          border: 1px dashed #008cff;
          padding: 10px;
          border-radius: 5px;
          line-height: 2em;
          color: #6d6d6d;
        "
      >
        <legend
          align="center"
          style="
            width: 30%;
            text-align: center;
            background-color: #008cff;
            border-radius: 5px;
           background-image: linear-gradient(to right, #0066FF, #FF99CC); text-align:center;" 
          "
        >
          文章版权声明
        </legend>
              <span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>活动资源网</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://dh.mipjc.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=1667235636&site=qq&menu=yes" target="_blank">1426239465</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
 <!--网站声明代码样式二 END-->

WordPress和子比主题模板&网站美化方法教程

样式三：

  <!--网站声明代码样式三 start-->
<!--by：活动资源网-jc.dhmip.cn-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>活动资源网</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://dh.mipjc.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=1667235636&site=qq&menu=yes" target="_blank">1426239465</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式三 end-->

WordPress和子比主题模板&网站美化方法教程

样式四

  <!--文章网站声明代码样式四 start-->
<head>
<style type="text/css">
.post-copyright {
    box-shadow: 2px 2px 5px;
    line-height: 2;
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    transition: box-shadow .3s ease-in-out;
    overflow: hidden;
    border-radius: 12px!important;
    background-color: var(--main-bg-color);
}
.post-copyright:before {
    position: absolute;
    right: -26px;
    top: -120px;
    content: '\f25e';
    font-size: 200px;
    font-family: 'FontAwesome';
    opacity: .2;
}
.post-copyright__title {
    font-size: 22px;
}
.post-copyright_type {
    font-size: 18px;
    color:var(--theme-color)
}
.post-copyright .post-copyright-info {
    padding-left: 6px;
    font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
    display: inline-block;
    width: fit-content;
    padding: 2px 5px;
    font-size: 15px;
}
.muted-3-color {
    color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
    <div class="post-copyright" style="max-width:800px;margin:0 auto;">
        <div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
        <div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
        <div class="post-copyright-m">
            <div class="post-copyright-m-info">
                <div class="post-copyright-a">
                    <strong>文章作者</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.98dou.cn/">活动资源网</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>隐私政策</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://dh.mipjc.cn">privacy-policy</a></strong>
                    </div>
                </div>
                <div class="post-copyright-u" style="margin:10px 20px">
                    <strong>用户协议</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://dh.mipjc.cn">agreement</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>许可协议 </strong>
                    <div class="post-copyright-cc-info">
                        <a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
                        <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--文章网站声明代码样式四 end by jc.dhmip.cn-->

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="21、网站侧边栏添加一款好看的粒子当前时间"]

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 ：我是添加在首页侧边栏

标题文本：☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>

WordPress和子比主题模板&网站美化方法教程

演示效果

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="22、点击网页出现好看的爆炸点击效果"]

1、 网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码

<!--好看的鼠标点击爆炸效果 start-->
<!--by：活动资源网-jc.dhmip.cn-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/meme.js"></script>

<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/anime.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/fireworks.js"></script>
<!--好看的鼠标点击爆炸效果 END-->

效果图：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="23、全站添加自适应樱花飘落的好看样式"]

1、 网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码

3、刚添加可能要等一会会自动显示

<!--全站樱花飘落 start-->
<!--by：活动资源网-jc.dhmip.cn-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/yinghua/yinghua.js"></script>
<!--全站樱花飘落 END-->

[/zd-plane]

[zd-plane title="24、文章页底部添加【感谢您的来访，获取更多精彩文章请收藏本站+图片。】"]

1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。

2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的

<center><span style="color: #ef0c7e;; font-size: 15px"><strong>------本页内容已结束，喜欢请分享------</strong></span></span><br /></center>
<br />
<h3 class="wp-block-zibllblock-biaoti title-theme"><strong>感谢您的来访，获取更多精彩文章请收藏本站。</strong></h3>
<a href="https://jc.dhmip.cn" target="_blank"  title="更多精彩文章，请关注“活动资源网”">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 9px;  -webkit-border-radius: 9px; -moz-border-radius: 9px;" src="https://cdn.jsdelivr.net/gh/1426239465/98tc@d0774e08f0a0463dcd0fc072406c38534c269d00/2021/08/31/88dbbdacf7bc69c8813ebfdb22c7f7b3.png">
</a>

WordPress和子比主题模板&网站美化方法教程

效果演示

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="25、 文章内图片鼠标移动到图片外边框自动发光"]

1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分，这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框

2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码，把下面的 css 代码复制粘贴到里面即可。

里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
/*by：活动资源网-jc.dhmip.cn*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

效果图：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="26、防止盗用代码禁止 F12 和打开网页控制台快捷键"]

  • 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。
  • 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：

WordPress和子比主题模板&网站美化方法教程

自定义 HTML 代码

<!--安全 1 开始-->
<script type="text/javascript">
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            document.oncontextmenu = function (){
                return false;
            }
        }
    </script>
<!--by：活动资源网-jc.dhmip.cn-->
<!--安全 1 结束-->

方法 二：不要扒我了

  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：
<!--安全 2 不要扒我了开始-->
<script type="text/javascript">
((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert('不要扒我了');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});
</script>
<!--by：活动资源网-jc.dhmip.cn-->
<!--安全 2 不要扒我了结束-->

[/zd-plane]

[zd-plane title="27、长文章分页按钮美化"]

wordpress自带的分页按钮是比较丑的很突兀，经过社长一段下面的 CSS 代码优化之后会变得更加美观

子比主题添加路径：

  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

自定义 CSS 代码

/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}

效果演示：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="28、WordPress 上传图片自动重命名无需插件"]

待更新

[/zd-plane]

[zd-plane title="29、友情链接右侧申请按钮动态美化"]

这个是一个小功能，也是为了留个备忘录，担心下次搬家这个给忘了

添加方法： 后台设置—>外观—>小工具—>添加 Zibll 链接列表(新版),加到标题右侧按钮即可

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="30、文章添加设置隐藏内容关注公众号可见"]

待更新

[/zd-plane]

[zd-plane title="31、友链图片圆角样式"]

未优化之前友链的图片是方方正正的，不太好看，优化一下之后顺眼很多

/*友链头像圆角*/
/*by：活动资源网-jc.dhmip.cn*/
.link-only-img img{border-radius: var(--main-radius);}
.link-img img{border-radius: var(--main-radius);}

效果演示：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="32、进入网站提醒来源地址和问候语客户端信息 9.16 已修复错位不显示问题"]

社长已经添加判断代码，添加之后只会在首页显示，其他页面不显示

1.将下面的 PHP 代码加入到主题目录下：themes/zibll/footer.php 文件中。

有两个版本，一个是精简代码版，一个是全 js 代码版，都是一样的，只不过社长有强迫症，代码太多看的很累

<!-- 进入网站提醒来源地址和问候语客户端信息开始精简版 -->
<?php if (is_home ()) : ?> 
<div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;">
</div>
<script type="text/javascript" src="https://98dou-cn.vercel.app/jsheji/fangwentishi/fetch.min.js">
</script>
<script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript"
charset="utf-8">
</script>
<script src="https://98dou-cn.vercel.app/jsheji/fangwentishi/ts.js" type="text/javascript"
charset="utf-8">
</script>
<?php endif; ?>
<!--by：活动资源网-jc.dhmip.cn-->
<!-- 进入网站提醒来源地址和问候语客户端信息开始 -->

 

<!-- 进入网站提醒来源地址和问候语客户端信息开始代码版 -->
<?php if (is_home ()) : ?> 
<div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js">
</script>
<script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript"
charset="utf-8">
</script>

<script>
  /*网站打开提醒代码开始*/
  $(function() {
    if (
    /*getCookie('msg') !=*/
    1) {
      var t = document.createElement("a");
      t.href = document.referrer;
      var msgTitle = t.hostname;
      var name = t.hostname.split(".")[1];
      if ("" !== document.referrer) {
        switch (name) {
        case 'bing':
          msgTitle = '必应搜索';
          break;
        case 'baidu':
          msgTitle = '百度搜索';
          break;
        case 'so':
          msgTitle = '360 搜索';
          break;
        case 'google':
          msgTitle = '谷歌搜索';
          break;
        case 'sm':
          msgTitle = '神马搜索';
          break;
        case 'sogou':
          msgTitle = '搜狗搜索';
          break;
        default:
          msgTitle = t.hostname;
        };
      };
      var time = (new Date).getHours();
      var msg = '';
      23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？": 5 < time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！": 7 < time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！": 11 < time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！": 14 < time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？": 17 < time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~": 19 < time && time <= 21 ? msg = "晚上好，今天过得怎么样？": 21 < time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~");
      $.ajax({
        type: "get",
        url: "https://api.gmit.vip/Api/UserInfo/",
        async: true,
        success: function(data) {
          window.info = data;
          layer.msg("Hi~ 来自" + data.data.location + '~<br/>通过 ' + msgTitle + ' 进来的朋友！<br/>使用 ' + data.data.os + "<br/>" + data.data.browser + ' 访问本站！' + '<br/>' + msg);
          var showFPS = (function() {
            var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
              window.setTimeout(callback, 1000 / 60);
            };
            var e, pe, pid, fps, last, offset, step, appendFps;
            fps = 0;
            last = Date.now();
            step = function() {
              offset = Date.now() - last;
              fps += 1;
              if (offset >= 1000) {
                last += offset;
                appendFps(fps);
                fps = 0;
              };
              requestAnimationFrame(step);
            };
            appendFps = function(fps) {
              var settings = {
                timeout: 5000,
                logError: true
              };
              //$('#fps').html('<span style="float:left;">' + fps + 'FPS</span><br/><span style="float:left">' + window.info.data.os + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.browser + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.location + '</span><br/><span style="float:left;margin-top:1px;"></span>');
            };
            step();
          })();
        }
      });
    };
  });
</script>
<?php endif; ?>
<!--by：活动资源网-jc.dhmip.cn-->
<!-- 进入网站提醒来源地址和问候语客户端信息开始 -->

 

效果预览：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="33、自动给图片添加 alt 和 title 标签"]

待更新

[/zd-plane]

[zd-plane title="34、网站常用的一些懒加载 loading 加载动态图"]

待更新

[/zd-plane]

[zd-plane title="35、文章页加一个百度收录判断子比主题觅知美化版"]

1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。

/* 百度收录查询-活动资源网子比主题美化版开始 */
function baidu_check($url){
global $wpdb;
$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
$baidu_record = get_post_meta($post_id,'baidu_record',true);
if( $baidu_record != 1){
$url='http://www.baidu.com/s?wd='.$url;
$curl=curl_init();
curl_setopt($curl,CURLOPT_URL,$url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
$rs=curl_exec($curl);
curl_close($curl);
if(!strpos($rs,'没有找到')){
if( $baidu_record == 0){
update_post_meta($post_id, 'baidu_record', 1);
} else {
add_post_meta($post_id, 'baidu_record', 1, true);
}
return 1;
} else {
if( $baidu_record == false){
add_post_meta($post_id, 'baidu_record', 0, true);
}
return 0;
}
} else {
return 1;
}
}
function baidu_record() {
if(baidu_check(get_permalink()) == 1) {
echo '<a target="_blank" title="点击查看" rel="external nofollow" href="http://www.baidu.com/s?wd='.get_the_title().'-觅知博客"><span class="but c-yellow"><i class="fa fa-paw" aria-hidden="true"></i>百度已收录</span></a>';
} else {
echo '<a style="color:red;" rel="external nofollow" title="一键帮忙提交给百度，谢谢您！" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename='.get_permalink().'"><span class="but c-grey"><svg class="icon" aria-hidden="true"><use xlink:href="#io-baidu1"></use></svg>百度未收录</span></a>';
}
}
 /* 百度收录查询-活动资源网子比<a target="_blank" href="https://www.98dou.cn/tag/%e4%b8%bb%e9%a2%98%e7%be%8e%e5%8c%96" title="View all posts in 主题美化">主题美化</a>版结束 */

2.最重要一步

将下面的 PHP 代码加入到主题目录下：themes/zibll/inc/functions/zib-single.php 第 255 行，

找不到的直接搜索私信字符-如下图

WordPress和子比主题模板&网站美化方法教程

效果演示：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="36、搭建侧边栏添加好看的 ip 签名档标签小工具"]

  • 1、先搭建属于自己的 IP 天气签名档，然后进行第二步
  • 2、在后台—》外观—》小工具—》 —》 自定义 HTML —》 选择你需要放的位置添加下面代码即可。
<img src="域名+img.php" width="100%" />

[/zd-plane]
[zd-plane title="37、子比主题申请友链按钮+首页最新发布动态风车按钮美化"]

此教程是一位朋友在群内提出的，因为子比主题默认的是下图这个样式，不太好看，因此给大家共勉一下直接上教程

WordPress和子比主题模板&网站美化方法教程

  • 1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码
<!--阿里图标库--> 
<script src="//at.alicdn.com/t/font_2820512_sco5ucv703.js"></script>
<!--阿里图标库-->
  • 2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》 选择你需要放的位置社长是放在 首页-底部全宽度
  • 3、然后在下图的 —》标题右侧按钮文案 这里添加以下代码，注意要勾选上（显示框架盒子）

友情链接动态风车图标代码及放置路径：

WordPress和子比主题模板&网站美化方法教程

首页最新发布风车动态图标代码及放置路径：

WordPress和子比主题模板&网站美化方法教程

美化效果：

WordPress和子比主题模板&网站美化方法教程

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

[zd-plane title="38、利用阿里巴巴矢量图标美化-导航栏菜单"]

待更新

[/zd-plane]

[zd-plane title="39、无需插件给网站添加一个永久的 HTML5 悬浮音乐播放器"]

待更新

[/zd-plane]

[zd-plane title="40、在评论输入框中加入【快来说点什么吧！】背景样式"]

1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://imgsa.baidu.com/forum/pic/item/d439b6003af33a871f7e3f0e9b5c10385343b597.jpg) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
/*评论背景图*/

添加效果：

WordPress和子比主题模板&网站美化方法教程

[/zd-plane]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[/wxshow]

赏 0

猜你喜欢

为WordPress站点添加历程时间轴
其他分享
wordpress教程

2022-11-27 32
WordPress全站左侧边栏添加联系站长按钮[WP教程]
其他分享
wordpresswp教程教程

2022-11-20 34
WordPress侧边栏添加滚动播报小工具两种样式[WP小工具]
其他分享
wordpresswp教程主题美化

2022-11-20 27
WordPress设置网站动态标题[WP教程]
其他分享
wordpresswp教程主题设置

2022-11-20 38
支付宝当面付接口RSA密钥配置及公钥&私钥获取教程方法
其他教程
当面付支付支付宝

2022-11-20 46
win10系统怎么开启3d（win10游戏3d设置）
其他教程
3DregeditWin10

2022-07-06 112

评论0

取消

没有账号？注册  忘记密码？