您想在 WordPress 頁面或帖子中添加 JavaScript 嗎?有時您可能需要將 JavaScript 代碼添加到整個網站或特定頁面。默認情況下,WordPress 不允許您直接在帖子中添加代碼。在本文中,我們將向您展示如何在 WordPress 頁面或帖子中輕鬆添加 JavaScript。
什麼是 JavaScript?
JavaScript 是一種編程語言,不在您的服務器上運行,而是在用戶的瀏覽器上運行。這種客戶端編程允許開發人員在不降低網站速度的情況下做很多很酷的事情。
典型的 JavaScript 代碼段可能如下所示:
<script type="text/javascript">// Some JavaScript code</script><!-- Another Example: --!><script type="text/javascript" src="/path/to/some-script.js"></script>
現在,如果您將一個 javascript 代碼段添加到 WordPress 帖子或頁面,那麼當您嘗試保存它時,它將被 WordPress 刪除。雖然 WordPress 不允許直接添加 javascript 代碼段,但是我們還是有辦法在不破壞網站的情況下輕鬆地在 WordPress 頁面或帖子中添加 JavaScript。
方法一、直接添加到 WordPress 站點的頁眉頁腳中
有時,系統會要求您將 JavaScript 代碼段複製並粘貼到您的網站中,以添加第三方工具。這些腳本通常位於網站的</ body>標記之前的 head 部分或底部。這樣,代碼就會加載到每個頁面視圖上。
例如,Google Analytics安裝代碼需要出現在您網站的每個頁面上,只有這樣它才可以跟蹤您的網站訪問者。您可以將此類代碼直接添加到 WordPress 主題的 header.php 或 footer.php 文件中。但是,在更新或更改主題時,這些更改將被覆蓋。這就是為什麼我們建議使用插件在您的網站上加載 JavaScript。
首先,您需要安裝並激活“插入頁眉和頁腳(Insert Headers and Footers)”插件。激活後,您需要登錄 WordPress 後台 >> 設置 >> 插入頁眉和頁腳頁面。您將看到兩個框,一個用於頁眉,另一個用於頁腳部分。
您現在可以將複製的 JavaScript 代碼粘貼到其中一個框中,然後單擊“保存”按鈕。然後插入頁眉和頁腳插件就會自動在網站的每個頁面上加載以上添加的代碼。
方法二、使用代碼手動添加 JavaScript 代碼
首先,我們來看看如何將代碼添加到 WordPress 網站的頁眉中。您只需要根據以下情況添加相應代碼到主題的 functions.php 文件或特定於站點的插件中即可。
1、添加 JS 代碼整個網站頂部
function wpb_hook_javascript() {?><script>// your javscript code goes</script><?php}add_action('wp_head', 'wpb_hook_javascript');
2、添加 JS 代碼到指定的文章中
function wpb_hook_javascript() {if (is_single ('16')) {?><script type="text/javascript">// your javscript code goes here</script><?php}}add_action('wp_head', 'wpb_hook_javascript');
如果你仔細看看上面的代碼,你會發現我們已經在條件邏輯周圍包裝了 javascript 代碼以匹配特定的帖子 ID。您可以使用自己的帖子 ID 替換 16 來使用此功能。
3、添加 JS 代碼到指定的頁面中
function wpb_hook_javascript() {if (is_page ('10')) {?><script type="text/javascript">// your javscript code goes here</script><?php}}add_action('wp_head', 'wpb_hook_javascript');
4、添加 JS 代碼到站點的頁腳中
function wpb_hook_javascript_footer() {?><script>// your javscript code goes</script><?php}add_action('wp_footer', 'wpb_hook_javascript_footer');
方法三、使用插件在帖子或頁面內添加 Javascript 代碼
此方法允許您直接在 WordPress 帖子和頁面內的任何位置添加代碼。您還可以選擇要嵌入 javascript 代碼的內容的位置。
首先,您需要安裝並激活Code Embed插件。激活後,您需要手工編輯需要添加 javascript 的帖子或頁面,然後通過添加自定義字段的方式添加 javascript 代碼。更多關於自定義字段的文章,請參閱『實例講解 WordPress 自定義欄目及自定義字段』。
您需要使用 CODE 前綴(例如,CODEmyjscode)為自定義字段提供名稱,接着將 javascript 代碼粘貼到值字段中,然後點擊“添加自定義字段”按鈕以保存自定義字段。具體如下圖所示:
現在,您可以使用此自定義字段將 JavaScript 代碼嵌入此帖子或頁面中的任何位置。只需在帖子內容的任何位置添加此嵌入代碼即可。
{{CODEmyjscode}}
您現在可以保存帖子或頁面並查看您的網站。您可以使用 Inspect 工具或查看頁面源來查看 javascript 代碼。
小結
這些方法適用於初學者和網站所有者。如果您正在學習 WordPress 主題或插件開發,那麼您需要將 JavaScript 和樣式表正確地排列到您的項目中。