[免费][教程]子比主题美化，优化教程

254515

本教程大部分来源于优知新，子比官方论坛，只做完网站备份使用，并且都不需要付费

请不要付费转载

下面开始美化教程

1.夸夸功能

  • 自己重新编写了API组件，不需要引用自己的文档，减小服务器压力
  • CSS代码 
    .kuakua-first-box{
    margin: auto;
    width: 440px;
    border-radius: 16px;
    bottom: auto;
    min-height: 10rem;
    left: 50%;
    position: fixed;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 1032;
    box-shadow: 0px 0px 20px #0000001f;
    display: none;
}
@media screen and (max-width: 500px){.kuakua-first-box{width:94%;}}
.kuakua-ei{
    border-radius: 4px;
    overflow: inherit;
}
.kuakua-close{
    z-index: 9999;
    right: 14px !important;
    display: flex;
    position: absolute;
    right: 8px;
    top: 4px;
    padding: 16px;
    cursor: pointer;
}
.kuakua-column{
    position: absolute;
    width: 298px;
    height: auto;
    top: -28px;
    left: 0px;
    right: 0px;
    z-index: 6000;
    background: url(/sucai/kua-ribbon.png) 0% 0% / 298px 83px no-repeat;
    margin: 0 auto;
    text-align: center;
}
.kuakua-headerIcon{
    border-radius: 50%;
    position: relative;
    text-align: center;
    padding: 6px;
    background-color: rgb(255, 255, 255);
    width: 78px;
    height: 78px;
    margin: 0 auto;
}
.kuakua-icon{
    width: 60px !important;
    height: 60px !important;
    fill: currentcolor;
    transition: transform 0.3s ease 0s;
    cursor: pointer;
}
.kuakua-headerTitle{
    font-size: 20px;
    font-weight: 600;
}
.kuakua-modal-body{
    position: relative;
    background-color: transparent;
    text-align: center;
    border-bottom: none;
    border-top: none;
    border-radius: 0px;
    box-shadow: none;
    padding: 65px 30px 20px 30px;
}
.kuakua-contentBox{
    width: 100%;
    min-height: 102px;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
    background-color: rgb(244, 244, 244);
    text-align: center;
    border-bottom: none;
    border-top: none;
    box-shadow: none;
}
.kuakua-comment{
    margin-bottom: 10px;
    line-height: 26px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    word-break: break-all;
    transition: all 0s ease 0s;
    color: rgb(68, 68, 68);
    font-size: 18px;
}
.kuakua-cancelBtn{
    background-color: rgb(255, 255, 255);
    color: rgb(102, 102, 102);
    border: none;
    border-radius: 36px;
    transition: all 0.3s ease 0s;
    padding: 4px;
    width: 80px;
    display: inline-block;
    margin-top: 10px;
}
.kuakua-confirmBtn{
    background: rgb(255, 227, 0);
    width: 118px;
    height: 36px;
    display: inline-block;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: rgb(255, 227, 0);
    color: rgb(68, 68, 68);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    box-sizing: border-box;
    margin-top: 20px;
}
.form-control:focus {
    border: 1px solid rgb(148 148 148) !important;
    box-shadow: none !important;
}
  • func.php/functions.php 文件代码 
    //夸夸功能
function kuakua(){
   echo'<link rel="stylesheet" type="text/css" href="这里放CSS文件路径">
   <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
     <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" role="img">  
  <image href="svg地址" width="14px" height="14px" />  
</svg>  
<span class="hide-sm">夸夸</span>
   </a>
   <div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div>
   <div class="kuakua-first-box">
           <div class="kuakua-ei">
       <span class="kuakua-close" title="关闭">
             <div>
                 <svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg>
             </div>
         </span>
       <div>
         <div class="kuakua-column">
           <section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true">
             <image href="svg地址" width="65px" height="60px" /></svg>
           </section>
           <span size="16" color="black4" class="kuakua-headerTitle">夸夸</span>
         </div>
       </div>
       <div  style="position: relative;display: block;">
         <div>
           <section class="kuakua-modal-body">
             <section class="kuakua-contentBox">
                 <span size="18" color="black4" class="kuakua-comment">还有吗！没看够！</span>
               <button type="button" class="kuakua-cancelBtn">换一换</button>
             </section>
             <button type="button" class="kuakua-confirmBtn">夸夸TA</button>
           </section>
           </div>
       </div>
     </div>
   </div>
   <script>
       $(function(){
       $(".kuakua-cancelBtn").click(function() {
         $.getJSON("api地址",function(data){
           $(".kuakua-comment").html(data.text);
           $("#comment").text(data.text);
         });
       });
     });
     $(".kuakua-confirmBtn").click(function() {
       $("#submit").trigger("click");
       $(".kuakua-first-box").hide(150);//隐藏速度
       $(".kuakua-div").hide(150);//隐藏速度
       });
     $("#kuakua").click(function (e) {//
         /*阻止冒泡事件*/
         $(".kuakua-first-box").show(150);//显示速度
       $(".kuakua-div").show(150);//显示速度
       $.getJSON("api地址",function(data){
         $(".kuakua-comment").html(data.text);
         $("#comment").text(data.text);
       });
       e = window.event || e;
       if (e.stopPropagation) {
         e.stopPropagation();
       } else {
           e.cancelBubble = true;
       }
     });
     $(".kuakua-close").click(function () {
       $(".kuakua-first-box").hide(150);//隐藏速度
       $(".kuakua-div").hide(150);//隐藏速度
       $("#comment").text("");
     });
       </script>';
}
  • api代码

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

  • 调用代码
    子比主题下/template/comments.php中约88行后（提交评论之前）插入下面这行代码 
    <!--夸夸功能开头--> 
<?php kuakua()?> 
<!--夸夸功能结尾-->

    [免费][教程]子比主题美化，优化教程-小绵羊的小窝

  • SVG文件下载

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

  • 本教程来源
    https://www.hxino.com/1183/

2.时间进度胶囊

  • func.php/functions.php 文件代码 
    /*胶囊*/

function zbfox_necessary() {
    echo '<div class="c-yellow"><i class="fa fa-copyright"></i><b> &#x6B64;&#x5C0F;&#x5DE5;&#x5177;&#x7531;&#x3010;&#x72D0;&#x72F8;&#x5E93;&#x3011;&#x5F00;&#x53D1;&#xFF01;</b></div>';
    echo '<a href="h&#x74;&#x74;&#x70;&#x73;&#x3A;&#x2F;&#x2F;&#x68;&#x75;&#x6C;&#x69;&#x6B;&#x75;&#x2E;&#x63;&#x6F;&#x6D;">&#x5B98;&#x65B9;&#x7F51;&#x7AD9;</a> | <a href="h&#x74;&#x74;&#x70;&#x73;&#x3A;&#x2F;&#x2F;&#x68;&#x75;&#x6C;&#x69;&#x6B;&#x75;&#x2E;&#x63;&#x6F;&#x6D;&#x2F;&#x66;&#x6F;&#x72;&#x75;&#x6D;&#x2F;810&#x2E;&#x68;&#x74;&#x6D;&#x6C;">&#x95EE;&#x9898;&#x53CD;&#x9988;</a>';
}

$widgets_files = array(
    'zbfox_time_progress.php', /*小工具文件名*/
);
foreach ($widgets_files as $file) {
    require get_template_directory() . '/zbfox/widgets/' . $file;
}

/*胶囊*/
  • 需要使用的文件下载，直接解压进子比主题的主目录

  • 原作者
    https://www.hxino.com/1183/

3.鸿蒙字体引用

  • CSS代码 
    @font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}

4.底部波浪

  • 在 zibll 主题目录下，themes/zibll/footer.php 文件中的“</footer>”（重要）下面添加下面的代码： 
    <!--底部波浪开始-->
<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>
<!--底部波浪结束-->
  • 原作者
    https://www.uzhix.com/1377.html

5.MAC样式

  • 优化了样式导致文章框动画抽风
  • CSS 样式 
    /*列表左上角MAC边框美化 */
.posts-item.card:last-child {
    margin-bottom: 8px !important;
}

.training-camp__wrapper .header__title-wrapper {
    font-size: 16px;
}

.sec-wrapper {
    margin-bottom: 10px;
}

.training-camp__wrapper .header__title-wrapper {
    color: #22ab80;
}

.training-camp__wrapper {
    background-image: linear-gradient(150deg, #cff0fb 20%, #cbf4e4 40%);
    padding: 0 12px 12px;
    border-radius: 16px;
}

button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
    background: #ffffff00;
    border: 1px solid #fc3c2d00;
    border-radius: 0px;
}

.training-camp__wrapper .training-camp__header {
    padding: 24px 0 24px 12px;
    display: -webkit-flex;
    display: flex;
    background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}

.training-camp__wrapper .header__title-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.training-camp__wrapper .title__img-wrapper {
    height: 20px;
}

.training-camp__wrapper .header__btn-wrapper {
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
}

.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
    height: 20px;
    line-height: 20px;
    padding: 0 12px;
}

.training-camp__wrapper .header__btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 14px;
    color: #22ab80;
}

.medium---OGt5iw {
    height: 36px;
    padding: 8px 24px;
    font-size: 14px;
}

.outlined---BKvHAe,
.text---pn4pHz {
    background-color: initial;
    color: #3e454d;
}

.button---AUM5ZP {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 8px 24px;
    border-radius: 22px;
    cursor: pointer;
    border: unset;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ke-icon---zeGrGg+i {
    display: inline-block;
    vertical-align: middle;
}

.training-camp__wrapper>div.sec-bd {
    background-color: var(--body-bg-color);

}

.sec-wrapper .sec-bd {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}

.training-camp__wrapper .sec-bd {
    padding: 12px;
    border-radius: 16px;
}

img.title-macyingyong {
    /* width: 120px; */
    height: 50px;
}

.posts-item.card {
    padding: 35px 10px 10px 10px !important;
}


.posts-item.card::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 13px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: relative;
}
.enlighter::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
    padding: 35px 0 12px 0;
}
/*列表左上角MAC边框美化 */

6.加入浏览按钮

  • 引用文件，在子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php 的大概268行 
    $get_permalink = get_permalink();//添加文章链接

    [免费][教程]子比主题美化，优化教程-小绵羊的小窝

  • 引用按钮，在子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php 的大概310行 
    $html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮

    [免费][教程]子比主题美化，优化教程-小绵羊的小窝

  • CSS 样式代码 
    /*文章卡片下载按钮 tfbkw.com*/
a.down {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: linear-gradient(to right, #4f6dee, #67bdf9);
    color: #fff;
    text-align: center;
    cursor: pointer
    text-shadow: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

7.私密评论

  • functions.php 代码 
    function zyx_scripts(){
  if (!is_admin()) {
        $script = array(
            'smminjs' => '改为你的js链接',
        );
        foreach( $script as $k => $v ){
            wp_register_script( $k, $v, array(), '2.4.0', true);
        };

        wp_enqueue_script('smminjs');
        
        if (is_singular()) {
            wp_enqueue_script('smminjs');
        };

    }
}
add_action('wp_enqueue_scripts', 'zyx_scripts');

function zyx_private_message_hook( $comment_content , $comment){
    $comment_ID = $comment->comment_ID;
    $parent_ID = $comment->comment_parent ? $comment->comment_parent : '';
    $parent_email = get_comment_author_email($parent_ID);
    $is_private = get_comment_meta($comment_ID,'_private',true);
    $email = $comment->comment_author_email;
    $current_commenter = wp_get_current_commenter();
  $current_user = wp_get_current_user();
    $html = '<span style="color:#558E53"><i class="fa fa-lock fa-fw"></i>该评论为私密评论</span>';
  if ( $is_private ) {
      if ( !is_user_logged_in() && $current_commenter['comment_author_email'] == '' ) {
        return $comment_content = $html;
      }else
    if ($current_commenter['comment_author_email'] == '' && $current_user->user_email == $parent_email || current_user_can('delete_user') || $current_user->user_email == $email || $current_commenter['comment_author_email'] == $email || $parent_email == $current_commenter['comment_author_email'] && $current_commenter['comment_author_email'] !== ''){
      return $comment_content = '#私密# ' . $comment_content;
    }
    return $comment_content = $html;
  }
    return $comment_content;
}
add_filter('get_comment_text','zyx_private_message_hook',10,2);

function zyx_mark_private_message( $comment_id ){
    if ( $_POST['is-private'] ) {
        update_comment_meta($comment_id,'_private','true');
    }
}
add_action('comment_post', 'zyx_mark_private_message');
//将某条评论设为私密评论
add_action('wp_ajax_nopriv_mrhe_private', 'zyx_private');
add_action('wp_ajax_mrhe_private', 'zyx_private');
function zyx_private(){
  $comment_id = $_POST["p_id"];
   $action = $_POST["p_action"];
  if ( $action == 'set_private'){
     update_comment_meta($comment_id, '_private', 'true');
    }
    if ($action == 'del_private'){
        delete_comment_meta($comment_id, '_private','true');
    }
    echo 'ok';
   die;
}
//挂载到评论底部
function zyx_footer_info_add_private($info, $comment) {
    if ( current_user_can( 'manage_options' ) ) {
        $comment_ID = $comment->comment_ID;
        $i_private = get_comment_meta($comment_ID, '_private', true);
        $flag = ''; // 初始化 $flag 为空字符串
        if (empty($i_private)) {
            $flag .= ' - <a href="javascript:;" data-actionp="set_private" data-idp="' . get_comment_id() . '" id="sp" class="sm">(<span class="has_set_private">设为私密</span>)</a>';
            $info = $info . $flag;
        } else {
            $flag .= ' - <a href="javascript:;" data-actionp="del_private" data-idp="' . get_comment_id() . '" id="sp" class="sm">(<span class="has_set_private">删除私密</span>)</a>';
            $info = $info . $flag;
        }
    }
    return $info;
}
add_filter('comment_footer_info', 'zyx_footer_info_add_private', 99, 2);
  • JS 代码 
    $(function() {
  $(".links-card ul.list-inline img").each(function() {
    if ("" == $(this).attr("data-src")) {
      var a = "" + $(this).parent().attr("href");
      $(this).attr("src", a)
    }
  }), $(document).on("click", ".sm", function() {
    var a = $(this);
    if (a.hasClass("private_now")) return notyf("您之前已设过私密评论", "warning"), !1;
    a.addClass("private_now");
    var t = a.data("idp"),
      e = a.data("actionp"),
      n = a.children(".has_set_private"),
      r = {
        action: "mrhe_private",
        p_id: t,
        p_action: e
      };
    return $.post("/wp-admin/admin-ajax.php", r, function(a) {
      n.html(a)
    }), !1
  })
});
  • 引用文件，在子比文件：/wp-content/themes/zibll/template/comments.php 的大概90行 
    <label class="but c-blue pw-1em" data-placement="top" data-toggle="tooltip" title="你的评论仅评论双方可见。" style="margin-bottom: 0px;">
                            <input name="is-private" type="checkbox">私密</label>

    [免费][教程]子比主题美化，优化教程-小绵羊的小窝

8.底进度条换色

  • CSS 代码 
    /**彩色滚动条样式*/
::-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;
}

9.各种提醒

  • 资源引入 
    <!-- 引入VUE -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/packages/theme-chalk/lib/index.css">
  • 复制提醒 
    /* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿！复制成功",
                message:"若转载请务必保留原文链接！爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})
  • 禁用右键菜单并提醒 
    /* 禁用右键菜单并提醒 */
document.oncontextmenu = function () {
new Vue({
    data:function(){
        this.$notify({
            title:"嘿！没有右键菜单",
            message:"复制请用键盘快捷键",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"warning"
        });
        return{visible:false}
    }
})
return false;
}
  • 禁用F12并提醒 
    /* 禁用F12按键并提醒 */
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿！别瞎按",
                    message:"坏孩子！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
};
  • 各种扩展 
    //禁用左键选择
      document.onselectstart = function () {
        return false;
      }

//禁用复制
      document.oncopy = function () {
        return false;
     }

//禁用Ctrl+Shift+I
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }
  • 原作者：https://www.uzhix.com/8493.html

10.杂七杂八的美化

  • CSS 代码 
    /*导航栏字体加粗*/
ul.nav {font-weight: 700;}
/*导航栏字体加粗*/

/*文章随机彩色标签*/
.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}
/*文章随机彩色标签*/

/*评论区背景图*/
textarea#comment {
    background-color: transparent;
    background-size: 12%;
    background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url(https://m1.miaomc.cn/uploads/20231027_653b313bcbd06.gif) right 10px bottom -1px 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;
}
/*评论区背景图*/

/*文章卡片下载按钮*/
a.down {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: linear-gradient(to right, #4f6dee, #67bdf9);
    color: #fff;
    text-align: center;
    cursor: pointer
    text-shadow: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
/*文章卡片下载按钮*/

/*自动隐藏标题文件*/
.forum-posts.detail .content {
    overflow: hidden;
    /* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
    width: 11em;
    /* 显示省略符号来代表被修剪的文本。 */
    text-overflow:ellipsis;
    /* 文本不换行 */
    white-space:nowrap;
}
/*自动隐藏标题文件*/
  • JS 文件 
    /* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿！复制成功",
                message:"若转载请务必保留原文链接！爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})

11.私信站长

  • 后台增加按钮，zibll主题设置》全局&功能》悬浮按钮》更多按钮》添加按钮 
    <div style="text-align: center;line-height: 20px;padding: 6px">
                    <div style="font-size: 16px;font-weight: 600;margin-bottom: 6px">
                        <div>私信站长</div>
                    </div>
                    <div>工作日：18:00-24:00</div>
                    <div>周末：10:00-24:00</div> <a data-remote="私信框调用地址" href=";" data-toggle="RefreshModal" style="color: #fff">
                        <div style="line-height: 32px;border-radius: 30px;font-size: 12px;background: #6b74e6;width: 130px;margin: 0 auto;margin-top: 10px">
                            立即私信</div>
                    </a>
                </div>
  • 私信框调用地址：https://网站地址/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=用户ID

12.背景图片调用

  • CSS 代码 
    body {
    width: 100%;
    height: 100%;
    color: #4c331e;
    line-height: 1.8;
    background: url(图片地址) top left,#fff;
    animation: bgLoop 30s linear infinite;
}
@-webkit-keyframes bgLoop {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -1366px 768px
    }
}

@keyframes bgLoop {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -1366px 768px
    }
}

@media screen and (max-width: 900px) {
    @-webkit-keyframes bgLoop {
        100% {
            background-position:-683px 384px
        }
    }

    @keyframes bgLoop {
        100% {
            background-position: -683px 384px
        }
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}
  • 图片

    [免费][教程]子比主题美化，优化教程-小绵羊的小窝

13.评论区无评论背景图片修改

剩下的代码根据网站更新情况更新

温馨提示： 本文最后更新于2024-08-04 11:25:50，某些文章具有时效性，若有错误或已失效，请在下方 留言或联系 小绵羊的小窝 。
© 版权声明
本文链接：
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0
THE END
工具教程
# 教程# 免费# 子比主题# 美化# 优化
喜欢就支持一下吧
点赞15 分享
是小绵羊咩的头像-小绵羊的小窝
Flyme9 For LGV30 LTSC 2023.1.1-小绵羊的小窝
Flyme9 For LGV30 LTSC 2023.1.1
Flyme9 For LGV30 LTSC 2023.1.1
1年前 1069
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）-小绵羊的小窝
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）
1年前 684
QQ群 群规 Ver20231115-小绵羊的小窝
QQ群 群规 Ver20231115
QQ群 群规 Ver20231115
1年前 470
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件-小绵羊的小窝
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件
10个月前 450
关于站长 ~-小绵羊的小窝
关于站长 ~
关于站长 ~
1年前 298
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件-小绵羊的小窝
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件
4个月前 200
相关推荐
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）-小绵羊的小窝
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）
[教程][服务器]在阿里云服务器上卸载AliYunDunMonito（阿里盾）
1年前 684
[免费][教程]子比主题美化，优化教程-小绵羊的小窝
[免费][教程]子比主题美化，优化教程
[免费][教程]子比主题美化，优化教程
3个月前 545
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件-小绵羊的小窝
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件
[免费][插件]将WordPress图片上传到LskyPro蓝空图床的插件
10个月前 450
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件-小绵羊的小窝
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件
[免费][二开插件]Zibll子比主题投稿考试答题&注册答题考试插件
4个月前 200
使用EasyN2N/小黄鸭进行局域网联机游戏，内含免费服务器-小绵羊的小窝
使用EasyN2N/小黄鸭进行局域网联机游戏，内含免费服务器
使用EasyN2N/小黄鸭进行局域网联机游戏，内含免费服务器
1个月前 175
评论 共2条

请登录后发表评论

    只看作者
    • 3320354293a的头像-小绵羊的小窝3320354293a等级-LV1-小绵羊的小窝0
      Robbie 等级-LV1-小绵羊的小窝 0 美在盛世烟火，人间喧嚣，他们终成遗憾。
      2个月前广东
    • Robbie的头像-小绵羊的小窝Robbie等级-LV1-小绵羊的小窝0
      美在盛世烟火，人间喧嚣，他们终成遗憾。
      3个月前
哈喽~
全站积分可通过签到和每日任务获取，可别错过哦！
默认头像
哇哈哈的头像-小绵羊的小窝

哇哈哈43天前0

哇塞，快看看
jiuan333的头像-小绵羊的小窝

jiuan3331个月前0

我到底要以怎么样的速度生活才能与你再次相遇？
3320354293a的头像-小绵羊的小窝

3320354293a2个月前0

Robbie 等级-LV1-小绵羊的小窝 0 美在盛世烟火，人间喧嚣，他们终成遗憾。
Essay的头像-小绵羊的小窝

Essay2个月前0

125215
Robbie的头像-小绵羊的小窝

Robbie3个月前0

美在盛世烟火，人间喧嚣，他们终成遗憾。
标签云
阿里云服务器阿里云资源说明蓝空图床联机考试美化网站维护笔记破解疑难杂症游戏服务器教程插件工具局域网小绵羊公益图床
积分排行
TOP1
TOP2
TOP3
TOP4
TOP5