https://www.amitu.cn/xiaobaitu/tupian/qq.png

加入QQ群

https://www.amitu.cn/xiaobaitu/tupian/wechat.png

https://www.amitu.cn/xiaobaitu/tupian/about.png

联系我们

https://www.amitu.cn/xiaobaitu/tupian/updata.png

请求更新

31· 子比主题申请友链按钮+首页最新发布动态风车按钮美化

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

1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码

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

2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》选择你需要放的位置社长是放在首页-底部全宽度
3、然后在下图的 —》标题右侧按钮文案这里添加以下代码，注意要勾选上（显示框架盒子）

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

美化效果：

32· 利用阿里巴巴矢量图标美化-导航栏菜单

33· 在评论输入框中加入【快来说点什么吧！】背景样式

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;}
/*评论背景图*/

效果预览：

图片[4]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

34· 文章中自动添加关键词链接，协助收录内页优化

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

效果预览：

图片[5]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

35· 子比主题海报&幻灯片切换轮播图按钮样式美化

子比主题自带的轮播图按钮样式方方正正的不太好看，优化一下之后变得听贴近整个主题：如下图。

优化教程：

/*轮播幻灯片按钮样式美化开始 */
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*轮播幻灯片按钮样式美化结束 */

优化后效果演示：

36· 给网站右键添加自定义的按钮美化

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

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

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

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

<!-- 右键美化 by 零号资源网 -->
<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 零号资源网 -->

效果预览：

37· 网页添加一个音乐播放提示弹窗美化教程

38· 网站底部的网站地图和免责声明按钮美化教程

最近比较忙更新的频率少了一些，正好有朋友说想要这个底部的美化方法，至此分享给大家

原来的样式是这样的：比较单一不好看

优化之后是这样的:

图片[10]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

教程分为两步，添加 css 样式和添加 HTML 代码即可如下

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

/*CSS 代码网站底部按钮美化 */
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
}
.badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
    background-color: #007ec6;
}
.github-badge .bg-brightgreen {
    background-color: #4dc820;
}
.github-badge .bg-blueviolet {
    background-color: #8833d7;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
    background-color: orange;
}
/*CSS 代码网站底部按钮美化结束 */

2、子比主题设置—>页面&显示—>底部页脚—>板块二,添加以下 HTML 代码：

<!--网站底部按钮美化 html 开始 by 零号 www.0hao.cc-->
<div class="github-badge">

  <span class="badge-subject bg-blue">
     <a style="color:#fff" href="https://填写您的网址" target="_blank">友链申请</a>
  </span>-
  <span class="badge-subject bg-brightgreen">
     <a style="color:#fff" href="https://填写您的网址" target="_blank">网站地图</a>
  </span>-
  <span class="badge-subject bg-green">
     <a style="color:#fff" href="https://填写您的网址" target="_blank">本站主题</a>
  </span>-
  <span class="badge-subject bg-orange">
     <a style="color:#fff" href="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes" target="_blank">广告合作</a>
  </span>-
    <span class="badge-value bg-blueviolet">
     <a style="color:#fff" href="https://填写您的网址" target="_blank">免责申明</a>
  </span>-

</div>
<!--网站底部按钮美化 html 结束 by 零号 www.0hao.cc-->

39· 网站侧边栏添加新年倒计时小工具

1、在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置社长是放在首页-首页侧边栏

<div class="gn_box">
    <h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>3</font><font
            color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
            color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </center></h2>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2023/01/22 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>
<!--侧边栏新年倒计时 by 零号 www.0hao.cc-->

效果预览：

<div class="gn_box">
    <h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>3</font><font
            color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
            color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </center></h2>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2023/01/22 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>
<!--侧边栏新年倒计时 by 零号 www.0hao.cc-->

40· 【第二款】网站右上角添加复制弹出样式

1.子比主题设置—>自定义代码—>自定义底部 HTML 代码：,添加以下代码：
2.其他主题自行添加在主题的 head 或 food 文件底部即可

<!--第二款复制提示开始 by www.0hao.cc-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/fzts/ts.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/fzts/ts.css" />

<script type="text/javascript">
function copy_remind(){
  toastr.success("撰文不易，若要转载请务必保留原文链接，谢谢！", "复制成功！");
  clear_toastr(1600); 
   // 动态设置消息提示时间
  function clear_toastr(time){
       setTimeout(
           function(){ 
               toastr.clear();
       }, time);
  }
}
document.addEventListener("copy",function(e){
  if(window.getSelection(0).toString()){
      copy_remind();  //若所选文本不为空则显示
  }  
  else{
    toastr.info("啊噢...你没还没选择复制的内容呢！", "复制提示");  
  }
});  
</script>
<!--第二款复制提示结束 by www.0hao.cc-->

效果预览：

图片[11]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

温馨提示：本文最后更新于2024-10-12 21:46:42，某些文章具有时效性，若有错误或已失效，请在下方留言或联系兔子警长。

文章版权声明 1 本网站名称：小白兔技术部落
2 本站永久网址：https://www.amitu.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1738220177进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

------本页内容已结束，喜欢请分享------