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

31.子比主題文章快速留言

後台>全局&功能>自訂代碼>自訂 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>';
    }

效果

32.文章標題漸變彩色文字

後台>全局&功能>自訂代碼>自訂 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
  }
}

效果

33.雪花特效-冬季必加

後台>全局&功能>自訂代碼>自訂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>

效果

34.暱稱加入流彩文字效果

後台>全局&功能>自訂代碼>自訂 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%;
}

}

效果

35.子比主題小黑屋

下載下方的檔案

小黑屋.7z

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使用者封禁情況>放入側邊欄>填入資訊以及剛剛發佈的連結

效果

36.WordPress 文章發佈、更新時傳送信件通知

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');

2026.09.04更新版

/**
 * 步驟 1：文章發布時，不直接發信，而是建立一個背景排程工作 (WP-Cron)
 */
function schedule_new_post_notify($post_ID) { 
    // 排除修訂版本
    if (wp_is_post_revision($post_ID)) return; 

    $get_post_info = get_post($post_ID); 
    $original_status = isset($_POST['original_post_status']) ? $_POST['original_post_status'] : '';
    
    // 確保狀態是從「非公開」轉為「公開」
    if ($get_post_info->post_status == 'publish' && $original_status != 'publish') { 
        //  核心優化：只排程一個事件，把 post_ID 傳過去，然後「立刻」讓網頁完成更新，完全不卡網頁！
        if (!wp_next_scheduled('cron_new_post_notify_event', array($post_ID))) {
            wp_schedule_single_event(time() + 5, 'cron_new_post_notify_event', array($post_ID));
        }
    } 
} 
// 監聽發布文章動作，改為觸發排程
add_action('publish_post', 'schedule_new_post_notify');


/**
 * 步驟 2：背景排程真正執行發信的地方（使用者看不到這段的延遲，所以不會跳 JSON 錯誤）
 */
function do_background_new_post_notify($post_ID) {
    global $wpdb; 
    
    $get_post_info = get_post($post_ID);
    if (!$get_post_info || $get_post_info->post_status != 'publish') return;

    $blogurl = get_bloginfo('url'); 
    
    // 只撈取必要的欄位，節省記憶體
    $wp_user_email = $wpdb->get_results("SELECT ID, user_email, display_name FROM $wpdb->users"); 
    if (empty($wp_user_email)) return;

    $post_title = $get_post_info->post_title; 
    $post_permalink = get_permalink($post_ID);

    // 設定郵件為 HTML 格式
    add_filter('wp_mail_content_type', 'cron_set_html_mail_content_type');

    // 依次給每個 Email 發信件 
    foreach ($wp_user_email as $email) { 
        $user_id = $email->ID; 

        // 修正原代碼 return 的問題，改用 continue 跳過不接收的會員
        if (!zib_msg_is_allow_receive($user_id, 'posts')) {
            continue; 
        }

        $fsemail = $email->user_email; 
        $subject = '文章：' . $post_title; 
        
        $message = '尊敬的 ' . esc_html($email->display_name) . ' :<br>';
        $message .= '您瀏覽的【☆Dream-NAS☆ 個人網站】更新了一篇文章：<a href="' . esc_url($post_permalink) . '" rel="noopener" target="_blank">' . esc_html($post_title) . '</a><br><br>';
        $message .= '如有打擾，可在<a href="' . esc_url($blogurl) . '/user" rel="noopener" target="_blank">會員中心</a>中關閉文章通知。'; 

        // 發信件 
        wp_mail($fsemail, $subject, $message); 
    }

    // 移除 HTML 郵件過濾器
    remove_filter('wp_mail_content_type', 'cron_set_html_mail_content_type');
}
// 將後台排程事件綁定到實際的發信函式上
add_action('cron_new_post_notify_event', 'do_background_new_post_notify', 10, 1);

// 輔助函式：讓 wp_mail 支援 HTML
function cron_set_html_mail_content_type() {
    return 'text/html';
}

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

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

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

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

THE END

教學
 # 教學 # WordPress