如何將自定義JavaScript添加到WordPress

WordPress無疑是當今世界上最流行的內容管理系統(CMS)。當前有超過4.5億個網站使用WordPress,以確保流暢,高效的載入,有效,無故障的導航,並提供乾淨,美觀的設計。但是,與WordPress一樣,由於功能豐富且易於使用,因此它可能無法說明每個網站所需的所有功能。WordPress背後的人們理解這一點,並為開發人員留有空間通過自定義JavaScript添加自己的獨特功能。

添加自定義JavaScript:它是什麼以及何時使用

在開始向WordPress網站添加自定義javascript的細節之前,我們需要快速瀏覽一下JavaScript,它的含義以及何時使用它。

什麼是JavaScript?

how-to-add-custom-javascript-to-wordpress-1024x1024-1

JavaScript是每個人的編程語言。也就是說,您將無法使用它來編程深空探測器以分析從火星表面收穫的土壤樣品。但是您可以將其用於諸如網頁上的表單驗證之類的事情。

JavaScript的起源可以追溯到1990年代初,並且是第一個獲得廣泛成功的Web瀏覽器Netscape Navigator的出現。Netscape背後的人們想要一種方法,可以向當時統一為靜態的網頁添加動態元素。

結果就是LiveScript,在將其發布為JavaScript之後不久,它的名字就被更改了。JavaScript通常與Java混淆,Java是一種更健壯的編程語言,在90年代初期非常受歡迎。但是兩者沒有什麼共同點。

何時使用自定義JavaScript

與25年前的情況一樣,今天的開發人員使用自定義JavaScript來創建新的或增強現有網站的功能。通常,JavaScript是瀏覽器在HTML和CSS(層疊樣式表)之後讀取的編程命令的最後「層」。這樣,實際上是在網頁上錦上添花。

這種「糖衣」可以採取幾種形式。例如:

  •  網站所有者可能希望在用戶滾動某段文本時出現一個信息框。這就是所謂的「事件」,而自定義JavaScript可以使其實現。
  • 或者他們可能需要存儲輸入到網站表單框中的值以進行驗證。自定義JavaScript通常用於執行此操作。
  • 如今,JavaScript通常用於檢測人們用來訪問網站的設備類型(PC或移動設備),以便可以提供適當版本的網站。
  • 如今,自定義JavaScript的另一種非常常見的用法是創建彈出式窗口,提示用戶訂閱網站,或在發布新內容時得到通知。
  • 在某些情況下,網站將在WordPress中使用自定義js來生成所謂的「應用程序編程介面」或API。API的一個示例是為用戶提供操縱嵌入在網頁上的音頻剪輯的能力。

這幾乎不是當今開發人員使用自定義JavaScript的多種方式的完整列表。但這應該使您對這種做法的普遍程度有所了解。如果您有任何網上衝浪的經驗,那麼您無疑會一次或一次地遇到以上大多數或全部情況。

自定義Javascript添加WordPress的正確和錯誤方法

how-to-add-custom-javascript-to-wordpress-1

現在,我們對JavaScript是什麼以及如何使用JavaScript增強Web體驗有了一個更好的了解,讓我們看一下將其添加到網站的正確方法和錯誤方法。

第一件事:錯誤的方式

添加自定義腳本可能是實現企業主所追求的功能的必要條件。但是,如果以匆忙或隨意的方式添加腳本,最終可能弊大於利。為了節省時間和麻煩,最好先解決應該在WordPress中部署自定義js的方法,然後再採取正確的方法。

只要有可能就不要將JavaScript添加到Header.php

將JavaScript添加到網頁的最簡單方法是將其添加到「 header.php」 WordPress文件中。這也是導致WordPress功能異常的最簡單方法 專業網站維修。這是因為,儘管WordPress是製作最先進網站的可靠且多功能的工具,但它載入頁面元素的順序卻幾乎是一成不變的。

當我們將WordPress的自定義js描述為網頁蛋糕的錦上添花時,我們在上面提到了這一點。換句話說,載入序列中的最後一項。如果開發人員通過將JavaScript放到header.php文件中而破壞了已建立的載入順序,則可以將扳手插入該載入順序。這可能會導致一系列效果,但沒有一個效果特別好。

「 footer.php」和「 template.php」文件也是如此。將JavaScript代碼添加到這些文件中可能會導致大量意外和不良影響。此外,如果您直接將自定義js添加到WordPress PHP文件中,那麼當主題進行自動更新時,這些腳本將丟失。

最後,也要記住,即使將JavaScript直接放入header.php或template.php文件的負面影響不是很明顯,Google的網路機器人也可能會選擇它們並將該網站標記為有問題的。這會對自然搜索結果中頁面的排名造成重大損害。那是最終的禁忌。

向WordPress添加自定義JS的正確方法

現在,我們知道了如何不向WordPress網站添加自定義JavaScript,讓我們看一下執行此操作的正確方法。由於不建議將js直接添加到PHP文件中,因此您需要A)創建單獨的JavaScript文件並將它們綁定到現有的網站框架,或者B)使用專門為添加自定義目的而設計的眾多WordPress插件之一JavaScript。

注意:在進行進一步操作之前,我們還應該強調 創建一個「兒童主題並對其進行任何修改。這樣可以確保萬一出了什麼問題,您就可以對網站進行完整備份了。

方法A:創建單獨的JavaScript文件

這種向WordPress添加自定義js的方法已有很長的歷史,並且被認為是安全有效的(當然,只要創建腳本的人知道他們在做什麼)。無論您想添加到特定頁面的任何功能,都應在單獨的JavaScript文件中明確定義。完成文件並命名後,您將其添加到網站的相應目錄,並在要使用腳本修改的頁面頂部添加呼叫行。該調用將如下所示:

<script type="text/javascript" src="https://file.belovdigital.agency/scripts/whatever.js"></script>

頁面載入後,它將讀取此調用併到達「任何」文件以執行其中的腳本。如果這些腳本的格式正確,則它們應該在頁面上完美執行,並增強功能。如果您不確定如何將調用添加到頁面標題,則可以使用一些插件來完成。

方法B:使用WordPress的插件添加自定義JavaScript來的WordPress

how-to-add-custom-javascript-to-wordpress

WordPress和插件可以同時使用,例如蘋果和肉桂,或者花生醬和果凍。沒有一個,您真的無法完全欣賞一個。根據目前的估計,官方WordPress存儲庫中有超過55,000個插件,並且成千上萬的非官方插件在互聯網上閑逛,希望有人會喜歡它們。

有了那麼多插件,可以合理地假設那裡可能有一個或兩個設計用來產生您想要的事件或效果。如果要開發WordPress網站,您所要做的就是通過「 yoursite / wp-admin /」登錄界面登錄該網站,導航至插件頁面,然後在搜索框中輸入所需功能頁面頂部。

然後,您將看到一系列旨在產生所需效果,事件,API或其他功能的插件。選擇一個並單擊「安裝」。然後單擊「激活」並填寫任何可能需要填寫的變數以完成該過程。使用插件有幾個優點。

  • 首先,如果該插件位於WordPress存儲庫中,則您知道它已經過全面審核,並且既安全又有效。
  • 其次,如果您自己開發站點,而且您不是專業的編碼人員,則無需僱用任何人來獲得想要的效果。這樣可以為您節省很多錢。
  • 第三,通過插件添加功能是如此之快,這有點荒謬。

與JavaScript相關的WordPress插件的示例

正如我們所說,幾乎每個可想像的功能,事件或其他過程或效果都有許多WordPress插件可用。儘管他們傾向於採用不同的路徑到達同一目的地。讓我們看一下這些用於WordPress的插件用來發揮其魔力的方法。

插件以將調用添加到自定義JavaScript文件

我們建議您使用此方法向網站或網頁添加自定義JavaScript功能。它將JavaScript與PHP分開,從而大大減少了兩者之間無法解決的衝突的可能性。 

找到這樣的插件通常是一件簡單的事情。只需通過管理頁面登錄網站即可。從儀錶板轉到插件頁面,然後搜索「添加自定義JavaScript」。應該向您介紹許多插件。

因為術語經常重疊並且用於定義不同的過程,所以請確保您選擇的插件可以使您定義到適當的JavaScript文件的永久鏈接。

在大多數(不一定是全部)情況下,您將上傳js文件 通過FTP到wp-content /文件夾。並且您的插件應允許您輸入該文件的永久鏈接,然後將其作為調用而不是作為可執行代碼行添加到header或footer.php文件中。

插件將單個特定的JavaScript添加到您的WordPress網站

有時,開發人員要做的就是將單個JavaScript腳本添加到單個頁面。如果該腳本是由第三方創建的,則可能會安裝一個WordPress插件,它將該腳本無縫且輕鬆地集成到您的站點中。

任何人都會麻煩創建一個插件來將一個孤獨的js片段集成到網站上的單個頁面中似乎有些牽強,但這並不是全部。為WordPress創建自定義js的編碼人員通常會產生一個隨附的插件,以方便腳本的使用並提高聲譽。 

將JavaScript添加到頁眉或頁腳PHP文件的插件(不推薦)

最後,儘管我們開始說您絕對不應將JavaScript代碼直接添加到header.php,footer.php或template.php文件中,但仍有一些人堅持這樣做。對於他們來說,如果您覺得將JavaScript添加到WordPress PHP文件中的壓倒性要求,至少可以使用插件來幫助完成此過程。 

插件將使您添加的代碼不太可能造成級聯問題,這些問題可能會破壞您網站的功能以及在Google看來的生存能力。請記住,如果要添加要在其他頁面內容之前執行的腳本,則需要將其添加到header.php文件。並且,如果您要添加旨在在其他頁面內容載入後執行的腳本,則需要將其添加到footer.php文件中。

有許多插件可以為您執行PHP文件的這些修改。只需在您網站的插件頁面上搜索它們,然後安裝,激活並打開插件界面。在此將要求您輸入要執行的腳本。其中一些插件包括一個用於在頁眉中輸入腳本的框和一個用於向頁腳添加腳本的框。您可以選擇保留為空白,也可以同時將腳本添加到兩個PHP文件中。

我們僅重申一遍,我們不建議您不直接將自定義JavaScript添加到WordPress PHP文件中。但是,相反,創建一個單獨的JavaScript文件或使用一個為您創建該文件的插件,然後修改header或footer.php文件以調用該單獨的js文件。

結論

毫無疑問,WordPress是世界上最受歡迎的內容管理系統。它易於使用,可靠,通用和可定製,從而贏得了這一殊榮。但是,有將自定義JavaScript添加到WordPress網站的正確方法,並且有錯誤的(或至少不太理想的)方法。

使用以上指南中提供的信息,確定將自定義js添加到WordPress網站的方法最適合您的特定網站,或您正在為其他人開發的網站。並記住以下基本規則:

  •  始終創建一個子主題並對其進行任何修改。
  • 如果可以幫助,請勿將JavaScript直接添加到WordPress PHP文件中。
  • 使用插件可幫助確保您添加的JavaScript不會對WordPress網站造成問題。

祝好運!

相關文章