❤WordPress子比主题美化教程❤【更新至2023-5-28】

573.8W+1999

主题美化说明：

  • 主题美化和小工具可能会引起一系列问题，如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。
  • 主题美化可能会修改主题文件。更新时，请及时备份主题美化文件，或收藏此站点，以免丢失部分主题页面或美化效果。

必看使用说明

  • CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式
  • JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码
  • 没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可
  • 其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
  • 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。
WordPress侧边栏信息统计小工具美化博客信息统计-青鹿云
WordPress侧边栏信息统计小工具美化博客信息统计-青鹿云
WordPress侧边栏信息统计小工具美化博客信息统计
6个月前
99983818

使用方法

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

自定义 javascript 代码：

// FPS 帧开始
// by：青鹿云-www.milubk.com
$('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：青鹿云-www.milubk.com
// FPS 帧结束

效果图

❤WordPress子比主题美化教程❤-青鹿云

使用方法

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

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：青鹿云-www.milubk.com*/
.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：青鹿云-www.milubk.com*/
/*文章随机彩色标签结束*/

使用方法

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

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by：青鹿云-www.milubk.com*/
::-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：青鹿云-www.milubk.com*/
/**彩色滚动条样式结束*/

CSS代码

/* logo 扫光开始 */
/*by：青鹿云-www.milubk.com*/
.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：青鹿云-www.milubk.com*/
/* logo 扫光结束 */

添加到自定 CSS 代码：

/*导航栏字体加粗开始*/
/*by：青鹿云-www.milubk.com*/
ul.nav {font-weight: 700;}
/*by：青鹿云-www.milubk.com*/
/*导航栏字体加粗结束*/

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：青鹿云-www.milubk.com*/
.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：青鹿云-www.milubk.com*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/
  • 样式一
❤WordPress子比主题美化教程❤-青鹿云
/*首页文章列表悬停上浮开始*/
/*by：青鹿云-www.milubk.com*/
@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：青鹿云-www.milubk.com*/
/*首页文章列表悬停上浮结束*/
  • 样式二
❤WordPress子比主题美化教程❤-青鹿云
  此处内容已隐藏，请评论后刷新页面查看.
WordPress设置网站动态标题方法-青鹿云
WordPress设置网站动态标题方法-青鹿云
WordPress设置网站动态标题方法
12个月前
043401216
WordPress滚动播报小工具两种样式[WP小工具]-青鹿云
WordPress滚动播报小工具两种样式[WP小工具]-青鹿云
WordPress滚动播报小工具两种样式[WP小工具]
12个月前
1378551832
文章底部添加更新时间或过期失效提示-子比主题-青鹿云
文章底部添加更新时间或过期失效提示-子比主题-青鹿云
文章底部添加更新时间或过期失效提示-子比主题
12个月前
090281301
  • 在 zibll 主题目录下，themes/zibll/footer.php 文件中的“”（重要）下面添加下面的代码：
<!--底部波浪开始-->
<!--by：青鹿云-www.milubk.com-->
<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：青鹿云-www.milubk.com-->
<!--底部波浪结束-->
  • 效果演示
❤WordPress子比主题美化教程❤-青鹿云

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

//透明复制提示
// by：青鹿云-www.milubk.com
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【青鹿云(WWW.MILUBK.COM)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

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

<!--透明复制提示开始--> 
<!--by：青鹿云-www.milubk.com-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->
  • 效果演示图
❤WordPress子比主题美化教程❤-青鹿云
WordPress网站字体更换教程-青鹿云
WordPress网站字体更换教程-青鹿云
WordPress网站字体更换教程
4个月前
03225185
WordPress更换网站字体-青鹿云
WordPress更换网站字体-青鹿云
WordPress更换网站字体
7个月前
09075922

样式一

❤WordPress子比主题美化教程❤-青鹿云
  • 在主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
  • 更新主题和修改前记得备份go.php
<!--by：青鹿云丨www.milubk.com-->
<?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:340px;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="/milu-svip/zibll-image/logo-qly.png" 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="javascript:history.back(-1);" class="link-btn__text" style="margin-left:30px;">回到上页</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：青鹿云丨www.milubk.com-->

样式二

❤WordPress子比主题美化教程❤-青鹿云
子比主题简约优雅GO跳转外链页面-青鹿云
子比主题简约优雅GO跳转外链页面-青鹿云
50子比主题简约优雅GO跳转外链页面【子比主题美化】
6个月前
02481349
网站全局变灰CSS代码操作方式及教程方法-青鹿云
网站全局变灰CSS代码操作方式及教程方法-青鹿云
网站全局变灰CSS代码操作方式及教程方法
6个月前
08814651

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

<!--by：青鹿云-www.milubk.com-->
<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：青鹿云-www.milubk.com-->

效果图

❤WordPress子比主题美化教程❤-青鹿云
  • 1、在 zibll 主题设置中—文章&列表—-文章页 处找到，版权声明添加以下代码
  • 2、如不是子比主题，样式可通用，放置在你的主题文章页底部即可

样式一（效果图+代码）

❤WordPress子比主题美化教程❤-青鹿云
<!--网站声明代码样式一 start-->
<!--by：青鹿云-www.milubk.com-->
  <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://www.milubk.com</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=10601213&site=qq&menu=yes" target="_blank">10601213</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：青鹿云-www.milubk.com-->
    <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://www.milubk.com</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=10601213&site=qq&menu=yes" target="_blank">10601213</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：青鹿云-www.milubk.com-->
  <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://www.milubk.com</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=10601213&site=qq&menu=yes" target="_blank">10601213</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子比主题美化教程❤-青鹿云
<style>.joe_div {
    color: #989898;
    word-break: break-all;
    line-height: 25px;
    border-radius: 10px;
    border: 1px solid #777777;
    padding: 28px 14px 14px 14px;</style>
<div class="posts-copyright"><div class="joe_detail" style="margin-top:20px;">
<legend align="center" style="width: 40%;margin: 0 auto -14px auto;border-radius: 999px;background: #777777;color: #fff;">版权声明</legend>
<div class="joe_div">
    		<div class="item">
            <svg t="1626845917242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4434" width="16" height="16"><path d="M737.41824 413.42976c0-74.9312-54.784-135.68-122.368-135.68s-122.368 60.74368-122.368 135.68 54.784 135.68 122.368 135.68 122.368-60.75392 122.368-135.68z m205.44512 433.97632c0-59.5968-144.27136-121.78432-328.48896-121.78432s-333.55776 66.81088-333.55776 126.40768S430.15168 913.6896 614.4 913.6896s328.46336-6.69184 328.46336-66.28864z" fill="#F4CA1C" p-id="4435"></path><path d="M516.6592 606.08c-134.25664 0-243.47648-119.86432-243.47648-267.19744S382.40256 71.68 516.6592 71.68s243.47648 119.86432 243.47648 267.20256-109.22496 267.19744-243.47648 267.19744z m0-471.28064c-99.5328 0-180.51072 91.55072-180.51072 204.0832s80.97792 204.07808 180.51072 204.07808 180.51072-91.5456 180.51072-204.07808-80.97792-204.0832-180.51072-204.0832zM517.7088 957.44C278.3744 957.44 71.68 957.44 71.68 841.728c0-108.71808 208.42496-204.0832 446.0288-204.0832 111.75936 0 219.136 19.57888 302.32576 55.13216C908.64128 730.624 957.44 781.312 957.44 835.40992 957.44 948.4544 766.85824 957.44 517.7088 957.44z m0-256.68096c-233.88672 0-383.05792 92.55936-383.05792 140.96384 0 17.57696 34.42176 32.65024 94.4384 41.344 71.79776 10.40896 173.18912 11.264 288.62464 11.264 104.09472 0 210.6368-1.73056 284.72832-14.28992 58.49088-9.91744 92.032-26.17856 92.032-44.6208-0.01024-47.48288-143.04768-134.66112-376.76544-134.66112z" fill="#595BB3" p-id="4436"></path></svg>
            <span>本站网络名称：</span>
            <span style="color: #3333ff"><span style="color: #FF6666; font-size: 18px"><strong style="color: #777777;">青鹿云</strong></span></span>
        </div>
            
		<div class="item">
            <svg t="1626845985384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4698" width="16" height="16"><path d="M493.12768 371.93216a158.45376 158.45376 0 1 0-158.45376 157.79328 158.12096 158.12096 0 0 0 158.45376-157.79328z m419.8656 345.97376a158.45376 158.45376 0 1 0-158.45376 157.79328 158.12096 158.12096 0 0 0 158.45376-157.79328z" fill="#F4CA1C" p-id="4699"></path><path d="M757.87776 447.93344V205.89568l157.33248 151.552a36.90496 36.90496 0 1 0 51.4048-52.96128l-193.98144-186.88a79.41632 79.41632 0 0 0-110.80192 1.09056l-131.02592 131.33312a246.272 246.272 0 1 0-273.96096 329.33376v79.46752H83.05664a36.864 36.864 0 1 0 0 73.6768h173.78816v160.256a36.97664 36.97664 0 0 0 73.95328 0v-160.256h152.064a246.40512 246.40512 0 1 0 275.01568-284.57472zM128.04608 337.73056a172.544 172.544 0 1 1 172.544 171.91424 172.42624 172.42624 0 0 1-172.544-171.91424z m353.5104 321.1008H330.79808v-77.42464a246.2208 246.2208 0 0 0 216.30464-243.2l136.82176-137.11872v248.32a246.48704 246.48704 0 0 0-202.368 209.42336z m244.2752 204.45184a171.90912 171.90912 0 1 1 172.544-171.90912 172.42624 172.42624 0 0 1-172.544 171.90912z" fill="#595BB3" p-id="4700"></path></svg>
            <span>本站永久网址：</span>
            <font color="#FF6666" style="color: #777777;font-weight: 600;">https://www.milubk.com</font>
        </div>
        <div class="item">
            <svg t="1626845999833" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4830" width="16" height="16"><path d="M964.30592 749.2352a215.07072 215.07072 0 1 0-215.07072 215.07072 215.07072 215.07072 0 0 0 215.07072-215.07072z" fill="#F4CA1C" p-id="4831"></path><path d="M488.40192 655.24736a77.96224 77.96224 0 0 1-50.53952-18.432l-104.27904-88.35584A35.328 35.328 0 0 1 379.22816 494.592l104.27392 88.3456a7.74144 7.74144 0 0 0 10.80832-0.81408l179.93216-206.21312a35.328 35.328 0 0 1 53.20704 46.41792l-179.92192 206.208a78.25408 78.25408 0 0 1-59.12576 26.71104zM514.56 952.32a437.76 437.76 0 1 1 437.76-437.76 438.272 438.272 0 0 1-437.76 437.76z m0-804.91008a367.1552 367.1552 0 1 0 367.1552 367.15008 367.56992 367.56992 0 0 0-367.1552-367.15008z" fill="#595BB3" p-id="4832"></path></svg>
            <span>网站侵权说明：</span>
            <span class="text" style="">本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权请联系站长删除处理。<br>
    <span class="btn-info btn-xs pink">1</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br>
<span class="btn-info btn-xs pink">2</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br>
<span class="btn-info btn-xs pink">3</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
            </span>
        </div>
	</div>
</div></div>

样式五（效果图+代码）

❤WordPress子比主题美化教程❤-青鹿云
  • 1.首先先加入自定义CSS代码
/*文章底部提示 开始*/
.miknio-bqts {
    background-color: rgb(245, 245, 245);
	border-radius: 12px;
	padding: 15px;
	color: #949ab1;
}
.miknio-bqts1 {
	display: flex;
	margin-bottom: 10px;
	font-size: 18px;
}
.miknio-bqts2 {
    font-size: 14px;
	/*padding-left: 28px;*/
}
@media screen and (max-width: 768px){
.miknio-bqts2 p {
    margin-bottom: 0px;
    font-size: 12px;
}
.miknio-bqts1{
    margin-bottom: 0px;
}
}
/*文章底部提示 结束*/

2.在文字页面 – 版权声明处添加html代码即可

<div class="miknio-bqts"><div class="miknio-bqts1">
<span>温馨提示：</span>
</div>
<div class="miknio-bqts2">
<p>1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：<a href="svip1060@qq.com">svip1060@qq.com</a>，我们将第一时间处理！</p>
<p>2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。</p>
<p>3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读<a href="https://www.milubk.com" target="_blank">网站声明</a>。</p>
</div>
</div>

外观–>小工具–>点击【自定义 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子比主题美化教程❤-青鹿云

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

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

<!--好看的鼠标点击爆炸效果 start-->
<!--by：青鹿云-www.milubk.com-->
<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子比主题美化教程❤-青鹿云

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

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

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

<!--全站樱花飘落 start-->
<!--by：青鹿云-www.milubk.com-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/yinghua/yinghua.js"></script>
<!--全站樱花飘落 END-->
❤WordPress子比主题美化教程❤-青鹿云

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://www.milubk.com" 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>

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

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

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

/*鼠标移动图片外发光*/
/*by：青鹿云-www.milubk.com*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}
❤WordPress子比主题美化教程❤-青鹿云
鼠标放上图片会出现颜色边框
  • 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。
  • 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：

自定义 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：青鹿云-www.milubk.com-->
<!--安全 1 结束-->

不要扒我了

网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：

  此处内容已隐藏，请评论后刷新页面查看.

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子比主题美化教程❤-青鹿云
  • 1、这两天在发布文章的时候突然发现好多图片展开放大的时候引用另外一张图片，而且我之前有习惯经常会用到中文名称的图片来上传。这么做的话，在下一次网站搬家的时候就会出现破图问题
  • 2、刚好找到了一个不错的方法，立马转来先分享给大家了再说。这个功能以后还是会用到的。虽然我博客不用，因为我有不用中文名称图片的好习惯，我都是自己命名的。
  • 3、同时这个方法也很好的避免之前有同名称图片再上传会覆盖的问题。毕竟图片上传后自动重命名。

操作步骤

在主题目录下functions.php文件里面最下面，然后下面的代码复制进去即可

//wordpress 上传文件图片 MD5 加密重命名
function rename_filename($filename) {
    $info = pathinfo($filename);
    $ext = emptyempty($info['extension']) ? '' : '.' . $info['extension'];
    $name = basename($filename, $ext);
    return substr(md5($name), 0, 20) . $ext;
}
add_filter('sanitize_file_name', 'rename_filename', 10);
WordPress文章添加设置隐藏内容关注公众号可见-青鹿云
WordPress文章添加设置隐藏内容关注公众号可见-青鹿云
WordPress文章添加设置隐藏内容关注公众号可见
12个月前
699331221

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

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

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

❤WordPress子比主题美化教程❤-青鹿云
  此处内容已隐藏，请评论后刷新页面查看.
  • 现在百度越来越注重图片的优化效果，网站优化不可避免的需要给图片添加 ALT 属性，
  • 在搜索排名中如何使用 alt 属性进行 SEO 优化：因为在 alt 属性中可以写文字，当因为图片的路径有错误而导致网页中的图片无法显示出来的时候，alt 中的文字就会显示出来，正是因为如此,我们可以在 alt 属性中写一些和文章主题或者网站主题相关的文字，这样就可以增加搜索引擎抓取的机率，有利于我们网站的排名。

教程

只需要在主题目录下functions.php文件里面最下面，然后下面的代码复制进去即可

/** 图自动加 alt 和 title 标签属性 */
function image_alt_tag($content){
    global $post;preg_match_all('/<img (.*?)\/>/', $content, $images);
    if(!is_null($images)) {foreach($images[1] as $index => $value)
    {$new_img = str_replace('<img', '<img alt="'.get_the_title().'-'.get_bloginfo('name').'" title="'.get_the_title().'-'.get_bloginfo('name').'"', $images[0][$index]);
    $content = str_replace($images[0][$index], $new_img, $content);}}
    return $content;
}
add_filter('the_content', 'image_alt_tag', 99999);
/** 自动给图片添加 alt 和 title 标签 www.milubk.com */

效果

❤WordPress子比主题美化教程❤-青鹿云

在写文章的时候，发布之前你会设置很多标签，比如模板啊，源码，等等，这些关键词，往往需要搜索才能找到，社长给大家分享这个是只要你的文章中包含了你网站的关键词，就会自动添加超链接，也是更好的协助网站收录优化，提高内页收录

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

// by 青鹿云文章添加关键词链接开始
function wpkj_auto_add_tag_link($content){
$limit = 1; // 设置同一个标签添加几次链接
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;
$cleankeyword = stripslashes($keyword);
$url = '<a target="_blank" href="'.$link.'" title="'.str_replace('%s', addcslashes($cleankeyword, '$'), __('View all posts in %s')).'">'.addcslashes($cleankeyword, '$').'</a>';
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s';
$content = preg_replace($regEx,$url,$content,$limit);
}
}
return $content;
}
add_filter( 'the_content', 'wpkj_auto_add_tag_link', 1 );  
// by 青鹿云文章添加关键词链接结束

效果

❤WordPress子比主题美化教程❤-青鹿云

最近看到很多朋友需要这个效果，因此分享给大家

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

其他的主题和网站添加方式一样的，只需要添加网站全局引用的文件当中就行，或者 footer.php 文件中

自行修改一下首页和百宝箱的链接改为自己的即可

<!-- 右键美化 by 青鹿云-www.milubk.com -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.98dou.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>        
        <li><a href="javascript:void(0);"  onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li style="border-bottom:1px solid gray"><a target="_blank" href="https://www.98dou.cn"><i class="fa fa-refresh fa-fw"></i><span>百宝箱</span></a></li>
        </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
 
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
</script>
<!-- 右键美化结束 by 青鹿云-www.milubk.com -->

效果预览

❤WordPress子比主题美化教程❤-青鹿云
子比主题评论区自动输入预设随机评论文字API功能-青鹿云
子比主题评论区自动输入预设随机评论文字API功能-青鹿云
积分3子比主题评论区自动输入预设随机评论文字API功能
12个月前
03919996

查看样式

❤WordPress子比主题美化教程❤-青鹿云

美化教程

复制下方代码，然后将代码粘贴至到子比主题设置→自定义代码→自定义CSS

/*青鹿云-悬浮按钮美化开始*/
span.float-btn.more-btn.hover-show.nowave {
    margin-top: 0px
}

.float-right.round.position-bottom {
    background: #fff;
    border-radius: var(--main-radius);
    transition: 0s;
    right: 1px;
    bottom: 170px;
    border-radius: 20px 0 0 20px;
    box-shadow: -5px 3px 10px 0px rgb(5 5 5 / 15%)
}

.float-right.round .float-btn {
    border-radius: 8px 0px 0px 17px
}

.float-right .float-btn {
    background: #fff
}

.float-right.round.position-bottom::before {
    content: '';
    width: 30px;
    height: 60px;
    background: url(https://azpoqcom-1309298543.cos.ap-guangzhou.myqcloud.com/2022/04/20220416065818501.webp);
    background-size: cover;
    display: block;
    margin: 5px 3px 0 7px;
}


.dark-theme .float-right.round.position-bottom {
    background: #414141;
    border: 1px solid #4a4a4a;
    transition: 0s
}

.dark-theme .float-right .float-btn {
    background: #414141
}

.dark-theme .float-right.round.position-bottom a:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}

.dark-theme .float-right.round.position-bottom span:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}

span.newadd-btns.hover-show.float-btn.add-btn .hover-show-con.dropdown-menu.drop-newadd>a:hover {
    background-color: #d8d8d836;
    border-radius: 8px
}

a.float-btn.ontop.fade {
    display: none
}
/*青鹿云-悬浮按钮美化结束*/

网站文章在PC端新窗口打开固然好用，但是在手机端多开一些文章就会新建出来一堆页面，一个一个关闭是很麻烦的，点击下方文章查看添加代码方法

子比主题文章/论坛新窗口打开电脑手机判断代码-青鹿云
子比主题文章/论坛新窗口打开电脑手机判断代码-青鹿云
子比主题文章/论坛新窗口打开电脑手机判断代码
4个月前
03768871

这个代码是可以在网站顶部增加一个进度条的效果，挺好看的哦

❤WordPress子比主题美化教程❤-青鹿云
WordPress网站美化:在网站顶部添加彩色阅读进度条-青鹿云
WordPress网站美化:在网站顶部添加彩色阅读进度条-青鹿云
WordPress网站美化:在网站顶部添加彩色阅读进度条
6个月前
5573880
❤WordPress子比主题美化教程❤-青鹿云
效果图
  • 自定义CSS代码
  此处内容已隐藏，请评论后刷新页面查看.
  • 说明：图片背景是透明的，图片大小是1800*80、2000*80（后者感觉可能优于前者）
  • 素材（右键保存）
❤WordPress子比主题美化教程❤-青鹿云
点击下载此素材
❤WordPress子比主题美化教程❤-青鹿云
❤WordPress子比主题美化教程❤-青鹿云

有的用户想把文章发布时间给隐藏掉的需求，今天就给大家讲讲怎么隐藏。

在css中，可以使用visibility属性来隐藏元素但保留元素位置，只需要给元素设置“visibility: hidden;”样式即可；这样元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。

将下方代码添加到自定义CSS代码中即可，此方式适合子比主题，其他主题请自行修改

/*子比隐藏文章发布时间*/
.icon-circle{visibility: hidden;}
  • 效果图
❤WordPress子比主题美化教程❤-青鹿云
  • CSS样式代码
  此处内容已隐藏，请评论后刷新页面查看.
  • 演示图
❤WordPress子比主题美化教程❤-青鹿云
给你的网站侧边栏添加小姐姐视频-青鹿云
给你的网站侧边栏添加小姐姐视频-青鹿云
200给你的网站侧边栏添加小姐姐视频
4个月前
64413124

夏天来了，看见雪花就会凉爽；冬天来了，看见雪花就会很美。这个下雪的特效无论添加到什么类型的网站都很好看，马上把代码分享给大家！

❤WordPress子比主题美化教程❤-青鹿云
网站添加下雪特效-青鹿云
网站添加下雪特效-青鹿云
网站添加下雪特效
6个月前
72243603

这个弹窗很人性化挺好看的，有很多种限制各种网站中的操作代码，选择适合自己的复制即可，现在就分享给大家了，废话不多说！

❤WordPress子比主题美化教程❤-青鹿云
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒-青鹿云
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒-青鹿云
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒
7个月前
123467252

很久以前就想弄一个评论弹幕小工具了，大多数需要插件实现，但是效果都不是很佳，所以今天就分享一个用PHP调用SQL获取评论表，然后通过ajax来实现页面的渲染也是能够实现评论弹幕小工具 。

❤WordPress子比主题美化教程❤-青鹿云
WordPress子比主题用户评论弹幕小工具-青鹿云
WordPress子比主题用户评论弹幕小工具-青鹿云
WordPress子比主题用户评论弹幕小工具
6个月前
83419550

取评论用户IP属地依赖wordpress保存的ip地址，然后利用接口获取该用户所在地区！非常简单，看看效果图！

❤WordPress子比主题美化教程❤-青鹿云
WordPress获取评论用户的IP属地-青鹿云
WordPress获取评论用户的IP属地-青鹿云
WordPress获取评论用户的IP属地
6个月前
52132328

前言

经常逛各大佬博客的时候发现有一些博客的菜单图标一直在转，青鹿云站长觉得很不错。于是就查看了下样式，就把这个样式添加到我自己的网站，菜单图标旋转起来了，挺好玩的。现在分享给大家！

操作步骤

  • 1.在自己网站主题的CSS中加入以下代码：
/*icon图标旋转开始*/
.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}
/*icon图标旋转结束*/
  • 2.在WordPress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。
<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

在线演示

在线演示

效果图

❤WordPress子比主题美化教程❤-青鹿云

CSS代码

  此处内容已隐藏，请评论后刷新页面查看.

操作步骤

1.复制CSS代码

2.打开子比后台→全局&功能→自定义代码

3.将代码粘贴在 自定义CSS样式

❤WordPress子比主题美化教程❤-青鹿云
效果演示

css代码

  此处内容已隐藏，请评论后刷新页面查看.

想给页面换个背景，发现后台没有设置的功能，默认网站都是白背景该怎么办呢？

下方文章教你如何更换你的WordPress网站背景↓

WordPress 网站更换背景图片-青鹿云
WordPress 网站更换背景图片-青鹿云
WordPress 网站更换背景图片
4个月前
05806451

悬浮按钮效果是这样的↓

❤WordPress子比主题美化教程❤-青鹿云

点击“立即私信”直接弹出对话框↓

❤WordPress子比主题美化教程❤-青鹿云

复制下方代码粘贴在悬浮内容中即可，注意代码中有客服图标，可以换成你自己的

  此处内容已隐藏，请评论后刷新页面查看.
❤WordPress子比主题美化教程❤-青鹿云

很多使用子比主题的站长朋友都感觉付费资源图标显示太长，都有意想修改为图标显示，子比官网也有人分享过这方面的教程，但是需要付费购买，青鹿云找了下相关教程，做一下记录，也跟大家分享一下怎么改掉它！

效果演示

❤WordPress子比主题美化教程❤-青鹿云

使用方法

文件路径：zibll\inc\functions\zib-posts-list.php

搜索【$mark = zibpay_get_pay_mark();】后面添加以下代码

      $svg = '<symbol id="icon-points" viewBox="0 0 1024 1024">
<path d="M419.886252 370.432927c119.605022 0 243.995044-26.302516 318.706976-76.460106v91.304594h69.207683V185.366307C807.800911 65.18189 607.999688 0.289697 420.006126 0.289697S32.091467 65.18189 32.091467 185.366307v545.629859c0 120.184417 199.801223 185.076609 387.794785 185.07661V846.984967c-197.463666 0-318.706976-67.579385-318.706976-115.978811V566.977553c74.711932 50.037714 198.992069 76.460105 318.706976 76.460105v-69.217673c-197.463666 0-318.706976-67.569395-318.706976-115.968822V294.102686c74.711932 50.027725 199.111944 76.330241 318.706976 76.330241z m0-301.045432c197.473655 0 318.706976 67.579385 318.706976 115.978812 0 48.399426-121.24331 115.978811-318.706976 115.978811s-318.706976-67.579385-318.706976-115.978811c0.00999-48.399426 121.363185-115.978811 318.706976-115.978812z m310.056015 338.925849c-171.740545 0-261.536715 66.060971-261.536714 131.29281v350.623625c0 65.231838 89.906055 131.292809 261.536714 131.29281 170.461881 0 260.128186-65.121953 261.526725-129.894271h0.119875V539.616143c-0.119875-65.241827-89.906055-131.302799-261.6466-131.302799z m0 69.097799c126.967329 0 192.438916 43.604437 192.438917 62.195011s-65.471587 62.195011-192.438917 62.195011-192.438916-43.604437-192.438916-62.195011 65.471587-62.195011 192.438916-62.195011z m0 475.013648c-126.967329 0-192.438916-43.604437-192.438916-62.195012v-83.712527c43.844186 23.855073 108.26687 39.758456 192.438916 39.758456 84.172047 0 148.474855-15.893393 192.438917-39.758456v83.712527c0 18.590574-65.471587 62.195011-192.438917 62.195012z m0-175.366756c-126.967329 0-192.438916-43.614426-192.438916-62.195011v-83.712527c43.844186 23.855073 108.26687 39.748466 192.438916 39.748466 84.172047 0 148.474855-15.893393 192.438917-39.748466v83.712527c0 18.580585-65.471587 62.195011-192.438917 62.195011z m0 0"></path></symbol>';

搜索以下代码

<span class="em09 ml3">' . $mark . '</span>

替换为以下代码

<svg class="icon"><use xlink:href="#icon-points"></use></svg>

替换图示

❤WordPress子比主题美化教程❤-青鹿云

效果演示

❤WordPress子比主题美化教程❤-青鹿云

下面这段是弹窗背景头部，代码中的图片地址，可以把图片下载下来修改成你们的链接！

代码放到后台的全局&功能 >> 常用功能 >> 弹窗通知 >> 标题内容

<img style="width:50%;" src="https://www.milubk.com/milu-svip/zibll-image/logo-qly.png" alt="青鹿云-让新鲜资源早知道">

这段是修改进群的二维码链接

<div style="text-align: center;margin-bottom:15px;">
<div style="padding-bottom:10px;"><img style="width:40%;margin-bottom:10px;
    border:2px solid #edc890;" src="https://www.milubk.com/wp-content/uploads/2023/04/154caf339f203726.png">
<p style="color:#1f9c00;"><i class="fa fa-qq"></i> <span>QQ扫码进入青鹿云用户群</span><p>
<p>您可以在用户群跟群友交流哦～</p></div>
<img style="width:75%;" src="https://www.milubk.com/wp-content/uploads/2023/04/406858f48b203353.png" alt="快来加入吧～"></div>
❤WordPress子比主题美化教程❤-青鹿云
❤WordPress子比主题美化教程❤-青鹿云
  • 这个功能本身类似一个用户中心的样式，也可以认为是导航和投稿的样式，具体使用可自行根据自己需求修改代码中的链接和图片

使用教程：

  • 将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
  此处内容已隐藏，请评论后刷新页面查看.
  • 添加路径：在后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置
  • 我是添加在首页侧边栏
  • 修改代码中的链接以及图片地址

我们做博客的喜欢在自己的站里嵌入其它网站链接，但是子比的古腾堡超级嵌入模块不太好用，虽然能设置尺寸，但是不如全屏展示页面美观，只需要加一串代码就能发布嵌入满屏的网站页面，效果展示↓

❤WordPress子比主题美化教程❤-青鹿云

教程：

zibll子比主题嵌入全屏网站页面教程-青鹿云
zibll子比主题嵌入全屏网站页面教程-青鹿云
积分5zibll子比主题嵌入全屏网站页面教程
11天前
12883771

在这个喜庆的新年季节，让我们为网站增添了华丽的新年灯笼装饰。红色和金色的灯笼飘扬在每个页面上，象征着热情、幸福和繁荣。让我们一起共享这个特殊的时刻，祝愿您新年快乐，万事如意！

❤WordPress子比主题美化教程❤-青鹿云
最新网站新年灯笼代码，给你的网站添加喜庆-青鹿云
最新网站新年灯笼代码，给你的网站添加喜庆-青鹿云
最新网站新年灯笼代码，给你的网站添加喜庆[教程]
4个月前
45807144
© 版权声明
版权声明
本站网络名称： 青鹿云
本站永久网址： www.milubk.com
网站侵权说明： 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
建站教程
# 主题美化# WordPress教程# WordPress美化# 子比主题美化# HTML代码# 主题美化教程
喜欢就支持一下吧
点赞1999 分享
相关推荐
苹果cms模板目录文件对照大全-青鹿云
苹果cms模板目录文件对照大全
苹果cms模板目录文件对照大全
6个月前 4275
怎么用JavaScript设置网站页面标题、关键词以及描述-青鹿云
怎么用JavaScript设置网站页面标题、关键词以及描述
怎么用JavaScript设置网站页面标题、关键词以及描述
4个月前 2791
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒-青鹿云
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒
利用element显示通知，复制提醒，禁用F12或右键左键菜单提醒
7个月前 3467
给你的网站侧边栏添加小姐姐视频-青鹿云
给你的网站侧边栏添加小姐姐视频
给你的网站侧边栏添加小姐姐视频
7个月前 4413
百度收录后又掉了是怎么回事？-青鹿云
百度收录后又掉了是怎么回事？
百度收录后又掉了是怎么回事？
6个月前 2074
WordPress纯代码自动生成sitemap.xml网站地图-免插件-青鹿云
WordPress纯代码自动生成sitemap.xml网站地图-免插件
WordPress纯代码自动生成sitemap.xml网站地图-免插件
7个月前 3004
评论 共57条

请登录后发表评论

    只看作者
    • Denver的头像-青鹿云Denver等级-LV1-青鹿云0
      hxxngdmfxidnus%看/洗：大家就觉得你姐姐试试
      39天前
    16. 1234
默认头像
开启精彩搜索
xyj2808的头像-青鹿云

xyj28083天前0

文章写得很通俗易懂，让我这个小白也能轻松理解，非常感谢！
xyj2808的头像-青鹿云

xyj28083天前0

真的很喜欢这篇文章的写作风格，让我有一种置身其中的感觉，赞一个！
mm2580的头像-青鹿云

mm25805天前0

非常喜欢这篇文章，作者的写作风格很吸引人，赞一个！
anjing的头像-青鹿云

anjing6天前0

这篇文章的实用价值太高了，感谢作者的分享，我要收藏起来！
kuyxia的头像-青鹿云

kuyxia7天前0

这篇文章对我来说真的帮助很大，非常感谢作者的无私奉献！
剑去了无痕的头像-青鹿云

剑去了无痕13天前0

987654edc
kevin的头像-青鹿云

kevin14天前0

支持一下表情[wunai]-青鹿云表情[touxiao]-青鹿云
cxr1314的头像-青鹿云

cxr131419天前0

感谢你的分享