改進你的WordPress網站：使用JavaScript隱藏不需要的欄位

by Rain Chu | 12 月 20, 2023 | wordpress

在WordPress中利用JavaScript隱藏特定欄位是一種有效的方式來改善網站的用戶體驗和介面設計。這需要創建並嵌入自定義的JavaScript腳本到你的WordPress主題中。這個過程涉及幾個關鍵步驟，包括在主題資料夾中創建JavaScript檔案、編寫用於隱藏特定元素的JavaScript代碼、並透過functions.php檔案將這個腳本加入到WordPress網站中。

1.創建JavaScript檔案：

在你的主題資料夾（通常位於wp-content/themes/你的主題名稱）中創建一個新的JavaScript檔案。例如，你可以創建一個名為custom-script.js的檔案。

2.編寫JavaScript代碼：

在custom-script.js檔案中，寫下用於隱藏欄位的JavaScript代碼。例如，如果你想隱藏一個ID為my-field的元素，代碼可能如下：

document.addEventListener('DOMContentLoaded', function () {
    var field = document.getElementById('my-field');
    if (field) {
        field.style.display = 'none';
    }
});

3.將JavaScript檔案加入到WordPress：

在你的主題的functions.php檔案中，使用wp_enqueue_script函數將剛剛創建的JavaScript檔案加入到你的網站中。例如：

function add_custom_scripts() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/custom-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

這段代碼會將你的custom-script.js檔案加入到WordPress，並確保它在網頁加載時被執行。

4.更新並檢查你的網站：

更新你的WordPress網站並訪問前台，檢查欄位是否已被隱藏。

5.注意 js 的路徑

如果你使用的是子佈景主題，那需要把 get_template_directory_uri() 更改成 get_stylesheet_directory_uri()

function add_custom_scripts() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

這個技術對於希望定制其網站外觀和功能的WordPress用戶來說非常有用，特別是對於那些希望隱藏不必要元素以簡化頁面佈局的用戶。雖然這個過程可能需要一些基本的PHP和JavaScript知識，但它為用戶提供了增強和個性化其網站的機會。

值得注意的是，在進行這些更改時，應該小心操作，並在更改主題檔案之前進行備份。此外，如果你使用子主題，應在子主題中進行所有更改，以避免在主題更新時丟失定制的代碼。這種方法不僅提高了網站的專業程度，還有助於保持良好的用戶體驗。

延伸閱讀：