給wordpress網站部分頁面添加密碼，并修改默認的密碼保護頁樣式

繼續分享wordpress建站教程教程，今天分享的是一個wordpress中內容保存的小技巧。如果我們網站中一些頁面不想讓用戶直接打開，那就可以用到wordpress自帶的一個密碼保護功能，在后面直接設置好密碼即可生效。接下來悅然wordpress建站就給大家分享密碼設置和密碼提示頁的樣式優化技巧。

步驟一：直接設置密碼

我們可以直接在文章或頁面發布時設置密碼，如果是已經發布的文章和頁面，可以在wordpress網站后臺打開文章或頁面列表，在需要加密的內容上點【快速編輯】，然后輸入密碼即可。

如果你對密碼提示頁的樣式沒什么要求，那么做到這一步其實就可以了。如果你想美化密碼提示頁，或者是修改文字提示，則繼續往下看。

步驟二：修改文字提示和頁面樣式

如上圖所示，這是悅然wordpress建站自己網站上設置的一個效果，在密碼提示頁默認的基礎上做了一些美化，同時替換了原來的文字提示，可以自定義修改，比如修改成讓客戶關注公眾號，回復關鍵字獲取密碼。（公眾號的關鍵字回復需要去公眾號自己設置，回復的內容就設置為你上一步設置的頁面密碼）

  
// 修改密碼保護提示和添加樣式  
function custom_password_protected_form() {  
    // 自定義提示信息  
    $output = '<div class="custom-password-form">';  
    $output .= '<p style="color: #ffffff; font-size: 16px;">為了防止惡意騷擾，請輸入密碼后查看。關注 <strong>【你的密碼】</strong>WX公眾號，回復<strong>【你的關鍵字】</strong> 獲取密碼。</p>';  
    $output .= '<hr style="border: 1px solid #FFEA00; margin: 20px 0;">'; // 添加分隔線  
    $output .= '<form class="post-password-form" action="' . esc_url( site_url('wp-login.php?action=postpass', 'login_post') ) . '" method="post">';  
    $output .= '<label for="post_password">輸入密碼：</label>';  
    // 添加預設默認文字  
    $output .= '<input name="post_password" id="post_password" type="password" size="20" placeholder="在此輸入密碼" style="color: #00000090;" />';  
    $output .= '<input type="submit" name="submit" value="' . esc_attr__('提交') . '" />';  
    $output .= '</form></div>';  

    // 輸出內聯樣式  
    echo '<style>  
        .custom-password-form {  
            background-color: #0E8FE4; /* 背景色修改為 #0E8FE4 */  
            padding: 20px; /* 增加內邊距 */  
            border-radius: 8px; /* 圓角效果 */  
            width: 300px; /* 設置表單寬度 */  
            margin: 50px auto; /* 設置外邊距為50px，并水平居中 */  
            text-align: center; /* 文字水平居中 */  
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 添加陰影效果 */  
        }  

        .post-password-form {  
            display: flex;  
            flex-direction: column;  
            justify-content: center;  
            align-items: center;  
        }  

        .post-password-form label {  
            margin-bottom: 10px; /* 輸入框與提示文字間距 */  
            color: #ffffff; /* 提示文字顏色 */  
        }  

        .post-password-form input[type="password"] {  
            width: 100%; /* 輸入框寬度 */  
            padding: 10px; /* 輸入框內邊距 */  
            margin: 10px 0; /* 在輸入框與按鈕之間添加間距 */  
            font-size: 16px; /* 增大輸入框中的字體 */  
            border-radius: 4px; /* 輸入框圓角 */  
            border: none; /* 去掉邊框 */  
            color: #00000060; /* 密碼提示的默認文字顏色 */  
        }  

        .post-password-form input[type="password"]::placeholder {  
            color: #00000060; /* 預設文字顏色 */  
        }  

        .post-password-form input[type="password"]:focus {  
            color: #000000; /* 激活后文字顏色 */  
            outline: none; /* 去掉輸入框的輪廓線 */  
        }  

        .post-password-form input[type="submit"] {  
            background-color: #ffffff; /* 按鈕背景色 */  
            color: #0E8FE4; /* 按鈕文字顏色 */  
            padding: 10px 20px; /* 按鈕內邊距 */  
            border: none; /* 去掉按鈕邊框 */  
            border-radius: 4px; /* 按鈕圓角 */  
            cursor: pointer; /* 鼠標指針 */  
            font-size: 16px; /* 按鈕字體大小 */  
        }  

        .post-password-form input[type="submit"]:hover,  
        .post-password-form input[type="submit"]:active {  
            background-color: #000000; /* 懸停及點擊時按鈕背景色 */  
            color: #ffffff; /* 懸停及點擊時按鈕文字顏色 */  
        }  
    </style>';  

    return $output;  
}  
add_filter('the_password_form', 'custom_password_protected_form');

實現的代碼大家可以參考上面，可以直接拿去用，一般不用做特別的修改，內容的文字提示、顏色值可以自行修改。（上面代碼可能會受到不同的主題或插件影響，有可能會不成功，或是顯示有差異，如果自行修改錯誤，代碼也有可能導致網站出錯打不開，所以建議修改前先備份，新手不要隨意嘗試，出問題自行負責，切記）

    // 添加圖片  
    $output .= '<img src="https://你的圖片地址/wp-content/uploads/2024/01/XXXX.webp" alt="Password Image" style="width: 100px; height: 100px; margin-bottom: 10px;">';  

如果你想再給上面添加一個圖片，或者添加上你的公眾號二維碼，則可以把上面的代碼添加到【 $output .= ‘<hr style=”border: 1px solid #FFEA00; margin: 20px 0;”>’; // 添加分隔線 】這一行的上面或下面，或者是其它位置，可自行調試。

總結

以上功能和效果非剛需，對一般網站可能沒啥用，只有必須要用到時才去添加，非必要建議盡量不要隨便折騰網站，平時主要做好內容更新就可以了。