(2023.02.16更新)WordPress和子比主題美化教學

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

/*快速留言樣式*/
.wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)}
.wiiuii-words-li:hover{background:var(--float-btn-bg)}

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

// 快速留言JS
$('.wiiuii-words-li').on('click', function() {
   var $wiiuii_comment = $('#comment');
    var wiiuii_com_text = $(this).find('span').text();
    var wiiuii_com_original = $wiiuii_comment.val();
    $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + '  ' + wiiuii_com_text : wiiuii_com_text);
    $('.wiui_words').removeClass('open');
});

• 在主題目錄>template>comments.php再120行新增下面加入代碼：

// 快速留言函數
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}

• 在主題目錄>inc/functions/functions.php搜尋”表情”(大約在1739行)新增下面加入代碼：

    // 快速留言函數
    if ('wiui_words' == $type) {
        $but = '<a class="but btn-input-expand mr6" href="javascript:;"><i class="fa fa-fw fa-comment-o"></i><span class="hide-sm">常用語</span></a>';
        // 下面是自訂留言，自己自訂喜歡留言，最後不超過10條
        $wiiuii_words_args = array('謝謝樓主分享！', '謝謝樓主用心製作！', '感謝樓主分享！', '感謝大佬分享！', '教學超好用，謝謝！', '期待有下一版！', '終於等到他了！');
        foreach ($wiiuii_words_args as $wiiuii_word) {
            $wiui_word_index++;
            $wiui_words .= '<li class="wiiuii-words-li"><b>' . $wiui_word_index . '、</b><span>' .$wiiuii_word . '</span>' . '</li>';
        }
        $dropdown = '<div class="dropdown-code">';
        $dropdown .= '<span>請選擇留言常用語：</span>';
        $dropdown .= '<ul>';
        $dropdown .= $wiui_words;
        $dropdown .= '</ul>';
        $dropdown .= '</div>';
    }

效果

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

.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}

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

  100% {
    background-position: -100% 0
  }
}

效果

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

<script type="text/javascript" src="https://www.daozi.net/api/xuehua/snow1.js"></script>
<div class="snow-container" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;"></div>

效果

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

.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}

100% {
background-position: 0 -300%;
}

}

效果

• 下載下方的檔案

• xy_block.php放在子比主題根目錄、block_banned.php放在：zibll>pages
• 子比主題根目錄的func.php加入以下代碼

if (file_exists(get_theme_file_path('/xy_block.php'))) {
    require_once get_theme_file_path('/xy_block.php');
}

• WordPress後台>頁面>新增頁面>預設範本>使用者封禁>發佈
• WordPress後台>外觀>小工具>Zibll使用者封禁情況>放入側邊欄>填入資訊以及剛剛發佈的連結

效果

• func.php加入以下代碼

//信件通知
function newPostNotify($post_ID) {
     if( wp_is_post_revision($post_ID) ) return;
     global $wpdb;
     $blogurl   = get_bloginfo('url');    //取得首頁連結
     $get_post_info = get_post($post_ID);
     if ( $get_post_info->post_status == 'publish' && $_POST['original_post_status'] != 'publish' ) {
         // 讀數據庫，取得所有使用者的email
         $wp_user_email = $wpdb->get_results("SELECT DISTINCT * FROM $wpdb->users");
         // 依次給每個Email發信件
        foreach ( $wp_user_email as $email ) {
            $user_id = $email->ID;
            //使用者是否接收
            if (!zib_msg_is_allow_receive($user_id, 'posts')) return;
            $fsemail = $email->user_email;
             // 信件標題：博客有新文章
            $subject = '☆Dream-NAS☆ 個人網站有新文章';
             // 信件內容：新文章網址：+ URL
            $message = '您好！'.$email->display_name.'<br>您瀏覽過的☆Dream-NAS☆ 個人網站更新了一篇新文章：' . get_permalink($post_ID).'<br><br>如有打擾在<a href="'.$blogurl.'/user" rel="noopener" target="_blank">通知</a>中關閉掉文章留言選項即可';
             // 發信件
            wp_mail($fsemail, $subject, $message);
         }
     }
}
// 鉤子，一旦WordPress有新文章發佈或文章被變更即刻執行newPostNotify函數
add_action('publish_post', 'newPostNotify');