(2023.02.16更新)WordPress和子比主題美化教學-☆Dream-NAS☆ 個人網站

美化說明

主題美化、小工具可能會有一定程度使網站載入緩慢、CSS全局污染等等一系列的問題，請一定要測試後在進行美化。
主題美化可能會對主題檔案進行變更，更新時請及時備份主題美化的檔案，或者收藏本網站，以免一些主題網頁或美化效果丟失。

美化教學

（最新版）CSS代碼加入到後台>子比主題設定>自訂代碼>自訂CSS樣式
（最新版）JS、javascript代碼加入到後台>子比主題設定>自訂代碼>自訂javascript代碼
（最新版）沒有特殊說明的小工具，自訂HTML小工具加入網站後台>外觀>小工具>點擊【自訂HTML】選擇放置的位置>把代碼複製進去，儲存即可。

1.(NEW)子比主題下載網頁美化

這是簡單的改動一下代碼，如果作者更新主題時下載網頁沒改動代碼的話，更新主題後【複製貼上代碼】進去就能用！（更新前記得備份！記得備份！記得備份！不然就被重置代碼了）

自訂 javascript 中加入以下代碼：

<!--下載網頁密碼複製-->
if(document.querySelectorAll(".but-download .badg")!=undefined){
    const reg = /[a-zA-z0-9]/ig;
    const copy = document.querySelectorAll(".but-download .badg");
    for (let i = 0; i < copy.length; i++) {
      copy[i].index = i;
      copy[i].setAttribute("data-toggle", "tooltip");
      copy[i].setAttribute("data-original-title", "點擊複製");
      copy[i].addEventListener("click", copyOperation);
    };
    function copyOperation() {
      var oInput = document.createElement("input");
      let text = this.innerText;
      text = text.match(reg).join("");
      oInput.value = text;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.setAttribute("data-original-title", "已複製");
    };
};

PHP代碼：（這是整個檔案的代碼，貼上時記得把那個PHP文件裡面的代碼清空）

<?php

/**
 * Template name: Zibll-資源下載
 * Description:   download page
 */

if (empty($_GET['post'])) {
  get_header();
  get_template_part('template/content-404');
  get_footer();
  exit;
}
get_header();
$post_id = $_GET['post'];

function zibpay_get_down_html($post_id)
{

  $pay_mate = get_post_meta($post_id, 'posts_zibpay', true);
  $html = '';
  if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {
    return get_template_part('template/content-404');
  };

  // 查詢是否已經購買
  $paid_obj = zibpay_is_paid($post_id);
  $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);
  $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;
  $pay_doc = $pay_mate['pay_doc'];
  $pay_details = $pay_mate['pay_details'];
  if ($paid_obj) {
    //已經購買直接顯示下載盒子

    $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);
    $paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>';

    $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';

    $dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>';
    if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {
      $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免費資源，請登入後下載</b></div>';
      $pay_extra_hide = '<div class="text-center pay-extra-hide">';
      $pay_extra_hide .= '<p class="box-body muted-2-color">歡迎登入</p>';
      $pay_extra_hide .= '<p>';
      $pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登入</a>';
      $pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>註冊</a>';
      $pay_extra_hide .= '</p>';
      $pay_extra_hide .= zib_social_login(false);
      $pay_extra_hide .= '</div>';
    }
    
    $html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 檔案下載</h3></div>';
        $html .= '<div class="download-wiui">';
        $html .= '<div class="download-sty"><img src="https://dreamnas.familyds.com/wp-content/uploads/2022/07/220623214708.png" /><p>收藏☆Dream-NAS☆ 個人網站</p></div>';
	$html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[檔案名稱] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';

    $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';
    $html .= '</div></div>';
    
  } else {
    //未購買
    $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';
    $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暫無下載權限</b></div>';
    $html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>';
  }

  return $html;
}

?>
<style>
.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
/*下載樣式*/
.download-article{
    padding: 0 10px;
}
.download-demo{
   margin: 10px 0;
  border: 1px dashed red;
    border-radius: 5px;
}
.download-wiui{
  padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.download-sty{
      text-align: center;
    height: 100%;
}
.download-sty p{
    font-size: 15px !important;
    text-align: center;
    margin: 0;
}
.download-sty img{
width: 140px;
    height: 100%;
}
.download-theme-box{
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.download-right{
margin-left: 20px;
}

.download-file-name{
    font-size: 20px;
}
</style>
<main class="container">
  <div class="content-wrap">
    <div class="content-layout">


      <?php while (have_posts()) : the_post(); ?>
        <?php echo zib_get_page_header(); ?>

        <div class="zib-widget article download-article" style="/*min-height: 600px;*/">

          <?php
          echo zibpay_get_down_html($post_id);
          $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);
          if ($page_links_content_s) {
            the_content();
            wp_link_pages(
              array(
                'before'           => '<p class="text-center post-nav-links radius8 padding-6">',
                'after'            => '</p>',
              )
            );
            echo '</div>';
          }
          ?>
          <!--開始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框顏色背景色*/
                .panel:hover h3,.download-demo:hover h3{color:#fff;}
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*邊框部分顏色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>

                <div class="panel">
                     <div class="panel-heading">
                          <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 下載說明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                      <li>1.管理員所提供的壓縮檔若無特別說明，解壓密碼均為<em>dreamnas.familyds.com</em></li>
                        <li>2.下載後檔案若為壓縮檔格式，請安裝7Z、RAR軟體或者其它壓縮軟體進行解壓縮</li>
                      <li>3.檔案比較大的時候，建議使用下載工具進行下載，瀏覽器下載有時候會自動中斷，導致下載錯誤</li>
                      <li>4.資源可能會由於內容問題被和諧，導致下載連結無法使用，遇到此問題，請到文章網頁進行回報，以便管理員及時進行更新</li>
                      <li>5.其他下載問題請自行搜索教學，這裡不一一講解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 管理員聲明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本網站大部分下載資源收集於網路，只做學習與交流使用，版權歸原作者所有，若為付費資源，請在下載後24小時之內刪除，若作商業用途，請到正版官網購買，由於未及時購買和付費發生的侵權行為，與本網站無關。本網站發表的內容若侵犯到您的權益，請聯絡本網站刪除，我們將及時處理！</span>
                     </div>
                    </div>
                <!--結束-->
          <?php ?>
        <?php endwhile; ?>
        </div>
        <?php comments_template('/template/comments.php', true); ?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</main>

<?php

get_footer();

PHP檔案位置：主題檔案夾/zibll/pages/download.php
有一些文字說明比如：管理員聲明、下載說明，自己在代碼中變更一下。
圖片+文字，代碼裡面有註釋提示的，自己改一下就好，可以上二維碼或者自己喜歡的樣式。

效果:

第二種下載網頁

檔案位置：zibll/pages/download.php
全部清空後貼上以下代碼儲存

<?php

/**
 * Template name: XY-資源下載
 * Description:   XY-獨立資源下載頁面
 */

if (empty($_GET['post'])) {
  get_header();
  get_template_part('template/content-404');
  get_footer();
  exit;
}
get_header();
$post_id = $_GET['post'];

function zibpay_get_down_html($post_id)
{
  $pay_mate = get_post_meta($post_id, 'posts_zibpay', true);
  $html = '';
  if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {
    return get_template_part('template/content-404');
  };
  
  //文章略縮圖
  $thumbnail = zib_post_thumbnail('full', '', true, $post_id);
  
  // 查詢是否已經購買
  $paid_obj = zibpay_is_paid($post_id);
  $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);
  $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;
  $pay_doc = $pay_mate['pay_doc'];
  $pay_details = $pay_mate['pay_details'];
  $user_qx = zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id);
  if ($paid_obj) {
    //已經購買直接顯示下載盒子

    $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);
    $paid_name2 = '<badge class="img-badge left jb-red" style="z-index: 2;font-size: 12px;padding: 2px 10px;line-height: 1.4;" img-badge="" left=""><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</badge>';
    if($paid_name =='推廣會員免費'||$paid_name =='代理會員免費'){
        $dowmbox = '<div style="/*margin-bottom:3em;*/">' . $user_qx . '</div>';
    }else{
        $dowmbox = '<div style="/*margin-bottom:3em;*/"><span class="badg c-red btn-block">免費資源不佔用會員的免費下載次數</span>' . $user_qx . '</div>';
    }
    $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';
    
    if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {
      $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免費資源，請登入後下載</b></div>';
      $pay_extra_hide = '<div class="text-center pay-extra-hide">';
      $pay_extra_hide .= '<p class="box-body muted-2-color">請先登入！</p>';
      $pay_extra_hide .= '<p>';
      $pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登入</a>';
      $pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>註冊</a>';
      $pay_extra_hide .= '</p>';
      $pay_extra_hide .= zib_social_login(false);
      $pay_extra_hide .= '</div>';
    }
    
    $html = '<div class="download-demo">';
    $html .= '<div class="download-xiyang"><div class="download-right">';
    /*獲取文章略縮圖*/
    $html .= '<div class="download-sty item-thumbnail">' . $paid_name2 . '<img src="'.$thumbnail.'" /></div>';
    
    $html .= '<span class="display">' . $paid_name2 . '</span><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name"></span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';

    $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';
    $html .= '</div></div>';
    
  } else {
    //未購買
    $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';
    $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暫無下載權限</b></div>';
    $html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>';
  }

  return $html;
}

?>
<style>
.mb10{display:none;}
.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
/*下載樣式*/
.but-download{display: table-cell;}.download-article{margin-bottom: 40px !important;padding: 0 10px;width: 100%;margin: 0 auto;}.download-demo{margin: 10px 0;}.download-xiyang{padding: 0 0 20px;display: flex;justify-content: center;align-items: center;}.download-sty{text-align: center;height: 260px;border-radius: 8px;position: relative;}@media (max-width:530px){.but-download {display: block;}.but-download>.but, .but-download>span{min-width: 100% !important;}}@media (max-width:700px){.download-sty{display: none;}.download-right{padding: 10px !important;height: 100% !important;width: 100%;}.download-theme-box{margin-top: 24px;}}@media (min-width:700px){.display{display: none;}}@media (min-width: 1100px){.download-article{width:900px;}}@media (max-width: 950px){.download-notice{display: flex;}.head h2{font-size: 30px !important;}}.download-sty img{position: relative;}.download-theme-box{margin:10px 0 20px 0;text-align: center;}.download-right{margin-left: 6px;border: 1px solid #f04494;padding: 24px;border-radius: 8px;position: relative;}.download-file-name{font-size: 20px;}
.but-download>.but,.but-download>span{min-width: 130px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
.panel{margin-bottom: 10px; background-color: #fff; border: 1px solid var(--theme-color); border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
.panel-heading{padding: 10px 15px;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #fff;background-color: var(--focus-color);}/*邊框部分顏色*/
.panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
.panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
.head{height: 80px;letter-spacing: 8px;color: #fff;background: url(//dreamnas.familyds.com/wp-content/uploads/2023/02/dl_head.png) center no-repeat;text-align: center;border-radius: 10px 10px 0 0;position: relative;top: -20px;margin: -10px;margin-bottom: 20px;}
.head h2{line-height: 90px;font-size: 40px;}
.download-notice {padding: 24px;border-top: 1px solid #e5e5e5;position: relative;margin: 0px -10px;border-radius: 0 0 8px 8px;}
.download-notice-title {width: 190px;height: 100px;margin-right: 18px;margin-top: 4px;padding-top: 32px;border-right: 1px solid #ccc;text-align: center;font-size: 28px;color: #999;font-family: microsoft yahei;font-weight: 700;}
.download-notice-ico {width: 36px;height: 29px;background-position: 0 -372px;}
.ico {background-image: url(//dreamnas.familyds.com/wp-content/uploads/2023/02/ico_png24.png);background-repeat: no-repeat;}
.fl {float: left;display: inline;}.red1 {color: #eb0064;font-size: 14px;}.mb5 {margin-right: 5px;margin-bottom: 5px;}.vertical-middle {vertical-align: middle;}.download-notice-detail p {font: 13px/1.25 "microsoft yahei",simsun,arial;}
.popTipBox {padding: 5px 10px;text-indent: 2em;border: 1px solid #ffd8c0;background-color: #fff9f3;font-size: 13px;color: #e10074;line-height: 22px;}
.but-download a{margin-left: 10px;margin-right: 4px;}
</style>
<main class="container">
  <div class="content-wrap">
    <div class="content-layout">
      <?php while (have_posts()) : the_post(); ?>
        <?php echo zib_get_page_header(); ?>

        <div class="zib-widget article download-article">
          <div class="head"><h2>資源下載</h2></div>
          <?php
          echo zibpay_get_down_html($post_id);
          $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);
          if ($page_links_content_s) {
            the_content();
            wp_link_pages(
              array(
                'before'           => '<p class="text-center post-nav-links radius8 padding-6">',
                'after'            => '</p>',
              )
            );
            echo '</div>';
          }
          ?>
        <!--開始-->
        <div style="padding:0 15px 15px 15px">
            <div class="popTipBox">本網站大部分下載資源收集於網路，只做學習與交流使用，版權歸原作者所有，若為付費資源，請在下載後24小時之內刪除，若作商業用途，請到正版官網購買，由於未及時購買和付費發生的侵權行為，與本網站無關。本網站發表的內容若侵犯到您的權益，請聯絡本網站刪除，我們將及時處理！。
            </div>
        </div>
        <dl class="download-notice clearfix zib-widget">
            <dt class="fl download-notice-title"><span class="inline-block vertical-middle mr5 mb5 download-notice-ico ico"></span>注意事項</dt>
            <dd class="download-notice-detail">
                 <li>1.管理員所提供的壓縮檔若無特別說明，解壓密碼均為：dreamnas.familyds.com</li>
                        <li>2.下載後檔案若為壓縮檔格式，請安裝7Z、RAR軟體或者其它壓縮軟體進行解壓縮</li>
                      <li>3.檔案比較大的時候，建議使用下載工具進行下載，瀏覽器下載有時候會自動中斷，導致下載錯誤</li>
                      <li>4.資源可能會由於內容問題被和諧，導致下載連結無法使用，遇到此問題，請到文章網頁進行回報，以便管理員及時進行更新</li>
                      <li>5.其他下載問題請自行搜索教學，這裡不一一講解。</li>
            </dd>
        </dl>
        <!--結束-->
          <?php ?>
        <?php endwhile; ?>
        </div>
        <?php comments_template('/template/comments.php', true); ?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</main>

<?php

get_footer();

效果

2.簡單徹底關閉WordPress上傳圖片自動生成縮略圖功能

後台>設定>媒體>圖片尺寸都設定 0，記得儲存！如圖：

訪問你的博客網址/wp-admin/options.php 進入後找到 medium_large_size_w，設定為0即可。記得儲存！

或是直接在數據庫裡面變更也是可以的，如圖：

3.加入背景特效

主題檔案夾>footer.php><footer class="footer">前方加入以下代碼

<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" 
	src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

或是點擊下載canvas-nest-2.0.1.zip把dist/canvas-nest.js上傳到WordPress媒體庫複製該檔案連結網址

下載

到主題檔案夾>footer.php><footer class="footer">前方加入以下代碼

PS:src=""></script>這裡面網址是你剛剛複製的

<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" 
	src="https://dreamnas.familyds.com/wp-content/uploads/2022/07/canvas-nest.js"></script>

效果:

4.留言框加入背景圖片

主題設定>自訂CSS樣式，加入下面的CSS代碼：

/*留言背景圖*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://dreamnas.familyds.com/wp-content/uploads/2022/05/f42066528a52.png) 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媒體庫複製該檔案連結網址後再替換代碼url()裡的網址即可，圖片大小（162 X 75，建議透明的png圖片）,自己加入喜歡的背景圖片

效果:

5.加入文章更新或過期失效提示

將下面的函數代碼加入到主題目錄下func.php檔案中

PS:若沒有此檔案直接建立一個裡面的最上面一定要打<?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="mailto:dream@dreamds918.hpc.tw"><b>Email</b></a>。</div >';
    }
        echo $custom_content;
    }

說明：請自己變更上面有關於本網站的訊息，圖示可以使用阿里矢量圖。

在主題目錄/inc/functions/zib-single.php檔案中，文章分頁函數（放在309行，參考以下圖片）中加入下方代碼即可。

article_time_update();//文章過期提示

效果:

6.變更go外部連結前往網頁

在主題目錄下go.php檔案裡面的全部代碼清空，然後把下面的代碼複製進去即可。替換原來的即可。
更新主題和修改前記得備份go.php。

<?php
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime: : 2021-04-27 17:54:39
 * @Email         : 770349780@qq.com
 * @Project       : Zibll子比主題
 * @Description   : 一款極其優雅的Wordpress主題
 * @Read me       : 感謝您使用子比主題，主題源碼有詳細的註釋，支持二次開發。歡迎各位朋友與我相互交流。
 * @Remind        : 使用盜版主題會存在各種未知風險。支持正版，從我做起！
 */

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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
    //禁止其他網站使用我們的跳轉網頁
    var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
    if (!MyHOST.test(document.referrer)) {
         location.href="http://" + MyHOST;
    }
    location.href="<?php echo $url;?>";
}
//延時1S跳轉，可自行修改延時時間
setTimeout(link_jump, 2250);
//延時50S關閉跳轉網頁，用於文件下載後不會關閉跳轉頁的問題
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style>html, body { width: 100%; height: 100%; margin: 0; background: #270F34; overflow: hidden; display: flex; align-items: center; justify-content: center } css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } :container { perspective: 30vmin; } :after, :before { content: ''; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m(2, (0 0 50px var(--color))); background: @m(100, (radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat)); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg)); } } ) }</style></head>
  <body>
    <css-doodle use="var(--rule)"></css-doodle>
    <script src='https://dreamnas.familyds.com/wp-content/uploads/2022/07/go-min.js'></script>
  </body>
</html>

說明：上方go-min.js檔案是使用我自己網站的，你自己可以下載上傳到WordPress媒體庫複製該檔案連結網址後再替換代碼。

效果:

7.網頁下方加入藍色波浪

在主題目錄/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>

效果:

子比主題設定—>文章&列表—>文章頁—>版權提示內容處加入以下代碼：

<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>☆Dream-NAS☆ 個人網站</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本網站永久網址：<font color="#09ace2">https://dreamnas.familyds.com</font><br />
      <span class="btn-info btn-xs">3</span> 本網站的部分內容來源於網路，僅供學習與參考，如有侵權，請聯絡管理員 Email:<a href="mailto:dream@dreamds918.hpc.tw" target="_blank">dream@dreamds918.hpc.tw</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 />
      <span class="btn-info btn-xs">7</span> 破解軟體有機會被防毒軟體偵測有毒，打開時請先把防毒軟體關閉。<br />
	  <span class="btn-info btn-xs">8</span> 軟體僅供測試，請支持購買正版！<br />
    </fieldset>
  </div>

說明:請自行變更代碼中的文字內容

效果:

9.頂部進度條與右側下拉滾動條

頂部進度條

下載下方素材(上傳到WordPress媒體庫複製該檔案連結網址後再替換CSS代碼的url()網址)

後台>全局&功能>自訂代碼>自訂頭部 HTML 代碼加入以下代碼

<div class="scroll-line" style="width: 0%;"></div>

自訂 CSS 中加入以下代碼：

.scroll-line
{
    background:url(https://dreamnas.familyds.com/wp-content/uploads/2022/05/88ff4972fef4.gif);
    height:3px;
    top:0;
    position:fixed;
    width:0;
    z-index:10000;
    border-radius:0 1px 1px 0;
}

自訂 javascript 中加入以下代碼：

$(window).scroll(function () {
    var winTop = $(window).scrollTop(),
    docHeight = $(document).height(),
    winHeight = $(window).height();
    var scrolled = (winTop / (docHeight - winHeight)) * 100;
    $('.scroll-line').css('width', (scrolled + '%'))
});

右側下拉滾動條

自訂 CSS 中加入以下代碼：

/*滾動條開始*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
  border-radius:2em;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  border-radius:2em;
  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;
}
/*滾動條結束*/

效果:

10.首頁文章列表浮出

後台>全局&功能>自訂代碼>自訂 CSS 中加入以下代碼：

/*列表依次进入*/
posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}

自訂 javascript 中加入以下代碼：

// 列表依次進入
let lis = $('posts');
Array.from(lis).forEach((item, index) => {
    setTimeout(() => {
        $(item).addClass('fadeIn');
    }, 150 * index);
});

說明:請自行加入看效果

溫馨提示：本文最後更新於2023-09-22 16:46:12，某些文章具有時效性，若有錯誤或已失效，請在下方留言或聯絡Email。

------本頁内容已結束------

感謝您的來訪，獲得更多精彩文章請收藏本網站。

版權聲明 1 本網站名稱：☆Dream-NAS☆ 個人網站
2 本網站永久網址：https://dreamnas.familyds.com
3 本網站的部分內容來源於網路，僅供學習與參考，如有侵權，請聯絡管理員 Email:dream@dreamds918.hpc.tw 進行刪除處理。
4 本網站不承擔會員將本網站資源用於盈利和(或)非法目的之任何後果和(或)法律責任。
5 本網站一律禁止以任何方式發佈或轉載任何違法的相關訊息，訪客發現請向管理員舉報
6 本網站資源大多存儲在雲端，如發現連結失效，請聯絡管理員我們會第一時間更新。
7 破解軟體有機會被防毒軟體偵測有毒，打開時請先把防毒軟體關閉。
8 軟體僅供測試，請支持購買正版！
9 轉載請告知原文作者或是註明出處，本網站有權利刪除文章以及檔案。
10 本網站將保留變更版規及所有帖子之權益，怒不另行通知。