如何访问或传递php变量到JavaScript?

Question

我是Stackoverflow的新手，也是WordPress的新手。我一直在尝试构建一个自定义的WordPress主题，它还允许您在WordPress仪表板中插入类别的图像。到目前为止，我已经能够使用以下代码将图像URL保存到数据库中:

update_term_meta($term_id, 'custom_image_data', $image_data);

($image_data是一个数组，包含图像的ID和URL)

然而，现在我想检索这两条信息，并与相应的Javascript文件共享它们。到目前为止，我有以下代码:

function image_uploader_js() {
wp_register_script('image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload'));
wp_enqueue_script('image_file_uploader_js');

wp_localize_script('image_file_uploader_js', 'customUploads', array('imageData' => get_term_meta(get_queried_object_id(), 'custom_image_data', true)) );   //**
}
add_action('admin_footer', 'image_uploader_js');

然而，当我进入谷歌Chrome控制台并输入CustomUploads时，它只显示一个空字符串。但是如果我要替换代码get_queried_object_id()与静态数字1(对应于$term_id的类别)，我得到CustomUploads {id: ##， URL: HTTPS://..…}，这是期望的结果。

我的问题是为什么原始代码不工作，我如何能够与我的Javascript文件共享id和URL或我的类别图像?

Answer 1

确保您在类别页面上，然后get_queried_object_id()将返回术语id。在其他页面中，您将获得与该页对应的不同id。

您可以使用is_category()检查您是否在分类页面。

function image_uploader_js() {
if( is_category() ){
wp_register_script('image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload'));
wp_enqueue_script('image_file_uploader_js');
wp_localize_script('image_file_uploader_js', 'customUploads', array('imageData' => get_term_meta(get_queried_object_id(), 'custom_image_data', true)) );   //**
}
}
add_action('admin_footer', 'image_uploader_js');

或者你可以得到所有的条款，并推入一个数组，然后你可以访问js文件。

function image_uploader_js() {

$category = get_terms( array(
'taxonomy' => 'category', // your custom taxonomy name
'hide_empty' => false
) );

$imageData = array();
if( !empty( $category ) ){
foreach ( $category as $key => $cat ) {
$imageData[$cat->term_id] = get_term_meta( $cat->term_id, 'custom_image_data', true );
}
}
wp_register_script( 'image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload') );
wp_enqueue_script( 'image_file_uploader_js');
wp_localize_script( 'image_file_uploader_js', 'customUploads', array( 'imageData' => $imageData ) );   //**

}
add_action('admin_footer', 'image_uploader_js');