在（WordPress的插件開發）PHP值傳遞給JavaScript文件在我的主plugin.php文件

Question

，我獲得/獲取基於自定義後類型ID

$ wpsv_save_metadata = get_post_meta wp_postmeta數據庫文件（$後> ID）;

然後基於該ID，我可以使用得到的值如wpsv_video_width，wpsv_video_height等：

$ wpsv_save_metadata [ 'wpsv_video_width'] [0];

但我無法將該值（wpsv_video_width，wpsv_video_height）傳遞給我的JavaScript文件。

如何將值傳遞給我的javascript文件，這樣我就可以改變寬度（win.style.width）和高度（win.style.height）動態：

function yScrollHandler(){ 
 
    var win = document.getElementById("styleku-video-container"); 
 
    if((window.pageYOffset + window.innerHeight) >= 1000){ 
 
\t \t //win.style.webkitTransition = "right 0.7s ease-in-out 0s"; 
 
\t \t win.style.transition = "right 0.7s ease-in-out 0s"; 
 
\t \t win.style.right = "0px"; 
 
\t \t win.style.position = "fixed"; 
 
\t \t win.style.bottom = "0px"; 
 
\t \t win.style.padding = "10px"; 
 
\t \t win.style.width = "400px"; 
 
\t \t win.style.height = "295px"; 
 
    } else { 
 
\t \t win.removeAttribute("style"); 
 
    } 
 
} 
 
window.onscroll = yScrollHandler;

請幫忙。謝謝。

Answer 1

我建議你使用wp_localize_script。

has a neat example類似於你的問題。如果從一個單獨的網站加載你的js

Answer 2

剛剛創建JavaScript變量第一，附上您的js文件後，使用js的你的JS文件中的全局變量。如下所示。

<?php 
    $width = $wpsv_save_metadata['wpsv_video_width'][0]; 
    $height = $wpsv_save_metadata['wpsv_video_height'][0]; 
?> 
<script> 
    var width = <?php echo $width; ?> // use width variable in your js file 
    var height = <?php echo $height; ?> // use height variable in your js file 
</script> 
<script src="your js file path"></script> 

Answer 3

替代方法。

如果你不加載你的JS到你的主題，那麼你就不能使用wp_localize_script，所以你需要一個備用的方式包括從WordPress的根文件夾中的wp-load.php文件。在你的插件文件夾中創建兩個文件：

JS-template.js

/wp-content/plugins/your-plugin/js/js-template.js

var mymessage = '[[my-message]]'; // in php use str_replace() to replace this 
console.log('mymessage', mymessage); 

GET -js.php

/wp-content/plugins/your-plugin/js/get-js.php

<?php 

// Drop this into your plugin folder and access it directly 
// https://example.com/wp-content/plugins/your-plugin/js/get-js.php 

// It will load a js file named js-template.js 

/** 
* Finds the wp root folder. 
* Navigate through the parent directories to find the wp-load.php file. 
* Stop after reaching 10 directories up, so we don't run into a 
* recursion error. 
* 
* @param $path directory to look into 
* @param $max_recursive the max number of parent directories to navigate into 
* 
* @return string|boolean Either a string of the path or false if the max recursion is reached 
*/ 
function find_parent_wp_root($path = './', $max_recursive = 10) { 

    if($max_recursive === 0) 
     return false; 

    if(file_exists(realpath($path) . '/wp-load.php')) { 
     return realpath($path) . '/'; 
    } else { 
     return find_parent_wp_root($path . '../', $max_recursive-1); 
    } 
} 

$www_root = find_parent_wp_root($path = './'); 

if(! $www_root) { 
    http_response_code(404); 
} else { 

    define('WP_USE_THEMES', false); 
    require($www_root . 'wp-blog-header.php'); 

    $js = file_get_contents('js-template.js'); 

    $js = str_replace('[[my-message]]', 'some new value', $js); 

    header('Content-Type: application/javascript'); 
    echo $js; 
}