目錄
使用wp_localize_script傳遞變量
直接輸出

在WordPress 中傳遞變量給JavaScript 的最推薦方法是使用wp_localize_script。首先註冊或加載腳本,然後通過wp_localize_script 傳遞數據,例如將ajax_url 和nonce 傳給前端腳本中的myData 對象。 1. 使用wp_enqueue_script 註冊腳本;2. 準備要傳遞的數據數組;3. 調用wp_localize_script 完成傳遞。對於簡單場景,也可以直接插入<script> 標籤定義全局變量,但需注意避免XSS 漏洞和合理選擇鉤子。兩種方式各有適用場景,推薦優先使用wp_localize_script。

在WordPress 中傳遞變量給JavaScript 是個常見的需求,比如你想把PHP 生成的動態數據傳給前端腳本使用。實現這個功能的關鍵方法是用WordPress 提供的wp_localize_script函數。

使用wp_localize_script傳遞變量

這是最推薦的方式。當你已經註冊或加載了一個腳本後,可以用wp_localize_script把PHP 數據傳到那個腳本中。

基本用法如下:

 wp_enqueue_script( &#39;my-script&#39;, plugin_dir_url( __FILE__ ) . &#39;js/my-script.js&#39;, array( &#39;jquery&#39; ), &#39;1.0&#39;, true );

$data = array(
    &#39;ajax_url&#39; => admin_url( &#39;admin-ajax.php&#39; ),
    &#39;nonce&#39; => wp_create_nonce( &#39;my_nonce&#39; ),
);

wp_localize_script( &#39;my-script&#39;, &#39;myData&#39;, $data );

這樣,在my-script.js文件中你就可以通過myData.ajax_urlmyData.nonce來訪問這些變量了。

注意:第二個參數是對象名,必須是合法的JavaScript 標識符,不能帶連字符或數字開頭。

直接輸出<script>標籤注入變量

如果你不想或者不方便用wp_localize_script ,也可以直接在頁面中插入一個<script>標籤來定義全局變量。

例如:

 function my_inline_script() {
    $user_id = get_current_user_id();
    ?>
    <script>
        var myVars = {
            userId: <?php echo intval( $user_id ); ?>
        };
    </script>
    <?php
}
add_action( &#39;wp_head&#39;, &#39;my_inline_script&#39; );

這種方式適合變量少、結構簡單的情況。但如果變量多或結構複雜,建議還是用wp_localize_script ,更清晰也更容易管理。

注意事項和常見問題

  • 確保腳本已加載:使用wp_localize_script前要確認目標腳本已經被正確註冊並加載。
  • 避免XSS 漏洞:如果傳遞的是用戶輸入內容,一定要做好轉義處理,比如用esc_js()json_encode()
  • 使用合適的鉤子:通常在wp_enqueue_scripts鉤子中調用wp_localize_script ,而不是隨便放在其他地方。
  • 調試時查看源碼:可以在瀏覽器中右鍵查看頁面源代碼,確認變量是否成功輸出。

總結一下

在WordPress 中傳變量給JS 最穩妥的方式就是wp_localize_script ,它安全又規範。如果只是簡單變量,直接寫<script>標籤也沒問題。關鍵是根據場景選對方法,別亂用全局變量就行。

基本上就這些,不復雜但容易忽略細節。

以上是如何將變量傳遞給WordPress中的JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

PHP教程
1596
276
如何手動清除WordPress緩存 如何手動清除WordPress緩存 Aug 03, 2025 am 01:01 AM

清除WordPress緩存需先確認緩存方式再操作。 1.使用緩存插件時,登錄後台找到插件提供的“清除緩存”按鈕(如“DeleteCache”或“PurgeAll”)點擊確認清除,部分插件支持按頁面單獨清除;2.無插件情況下,通過FTP或文件管理器進入wp-content下的cache目錄刪除緩存文件,注意路徑可能因主機環境不同而有所變化;3.控制瀏覽器緩存時,按Ctrl F5(Windows)或Cmd Shift R(Mac)強制刷新頁面,或清除瀏覽器歷史記錄和緩存數據,也可使用隱身模式查看最新內

如何將類別從循環中排除 如何將類別從循環中排除 Aug 07, 2025 am 08:45 AM

在WordPress中排除特定分類的方法有三種:使用query_posts()、利用pre_get_posts鉤子或借助插件。首先,使用query_posts()可在模板文件中直接修改主循環查詢,如query_posts(array('category__not_in'=>array(3,5))),適合臨時調整但可能影響分頁;其次,通過pre_get_posts鉤子在functions.php中添加函數更安全,如判斷首頁主循環時排除指定分類ID,不影響其他頁面邏輯;最後,可選用WPCate

如何使用get_template_part 如何使用get_template_part Jul 29, 2025 am 12:12 AM

get_template_part是WordPress主題開發中用於復用代碼塊的實用函數,通過加載指定模板文件減少重複代碼並提升可維護性。其基本用法為get_template_part($slug,$name),其中$slug為必填參數表示基礎模板名,$name為可選變體名,例如get_template_part('content')加載content.php,而get_template_part('content','single')優先加載content-single.php,若不存在則回退

如何將單個站點遷移到多站點 如何將單個站點遷移到多站點 Aug 03, 2025 am 01:15 AM

遷移WordPress單一站點到多站點模式需遵循以下步驟:1.在wp-config.php中添加define('WP_ALLOW_MULTISITE',true);啟用多站點功能;2.根據需求選擇子域或子目錄模式;3.進入“網絡安裝”界面填寫信息並按提示修改配置文件及.htaccess規則;4.重新登錄後台後檢查多站點管理界面是否正常;5.手動激活各站點的主題與插件,並測試兼容性;6.設置權限與安全措施,確保超級管理員權限受控;7.如需開放註冊應開啟對應選項並限制垃圾站點風險。整個過程需謹慎操作

如何顯示自定義用戶字段 如何顯示自定義用戶字段 Aug 05, 2025 am 06:43 AM

要實現論壇、CMS或用戶管理平台上的自定義用戶字段展示,需遵循以下步驟:1.確認平台是否支持自定義用戶字段,如WordPress可通過插件、Discourse通過後台設置、Django通過自定義模型實現;2.添加字段並配置顯示權限,例如在WordPress中設置字段類型和可見性,確保隱私數據僅授權用戶查看;3.在前端模板中調用字段值,如使用PHP函數get_user_meta()或Django模板語法{{user.profile.city}};4.測試字段顯示效果,驗證不同角色的訪問權限、移動端

如何手動安裝WordPress 如何手動安裝WordPress Jul 30, 2025 am 02:10 AM

安裝WordPress主要包括以下步驟:1.準備支持PHP和MySQL的主機、FTP登錄信息及FTP客戶端;2.從wordpress.org下載並解壓程序包,確保包含wp-config-sample.php文件;3.在主機控制面板創建數據庫,並用wp-config-sample.php創建配置文件wp-config.php,填入正確的數據庫信息;4.使用FTP或文件管理器將所有WordPress文件上傳至網站根目錄;5.在瀏覽器中訪問域名進入安裝嚮導,填寫站點標題、管理員賬號信息完成安裝;6.安

如何以編程方式進行評論 如何以編程方式進行評論 Jul 30, 2025 am 01:25 AM

要讓網站或應用評論區更乾淨,應結合程序自動管理,具體方法包括:1.設置關鍵詞黑名單過濾敏感內容,適用於基礎階段但易被繞過;2.使用AI模型識別不當內容,能理解語義並提升準確性;3.搭建用戶舉報 人工複審機制,彌補自動化盲點並增強用戶信任。這三者結合、動態調整,才能有效提升評論質量。

如何使用密碼保護WP-ADMIN 如何使用密碼保護WP-ADMIN Aug 05, 2025 am 04:04 AM

保護WordPress後台的方法有三種:1.使用.htpasswd和.htaccess添加服務器層密碼,通過創建加密憑證文件並配置訪問控制,即使知道登錄地址和賬號也無法進入;2.更改默認登錄地址,利用插件如WPSHideLogin自定義登錄URL,降低被自動化攻擊的風險;3.結合IP白名單限制訪問來源,在服務器配置中設定僅允許特定IP訪問wp-login.php,阻止非授權地點的登錄嘗試。

See all articles