由于 Wordpress，我需要在 javascript 文件中使用 PHP，我该怎么做或有什么更好的选择

Question

我正在使用谷歌地图插件，确切地说是This One。

无论如何，谷歌地图插件为我提供了更改某些设置的选项，例如自定义标记和许多其他有用的东西。所以我用自己的图片更改了主标记，它在我的静态 HTML 网站上运行良好，但在 Wordpress 中却不行，这就是原因。

假设我是这样加载插件的：

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="js/gmaps.js"></script>

现在我有了一些选项，我可以通过我的 theme_js 在页脚或 WORDPRESS 中进行更改，并将其加载到我的 functions.php 中，它们是：

var map = new GMaps({
    div: '#map',
    lat: 94.09454,
    lng: -219.35574
});

map.drawOverlay({
    lat: 94.09454,
    lng: -219.35574,
    content: '<div class="map-logo"><img src="images/logo.png" alt=""></div>'
});

现在问题出在内容上，当我尝试更改我的图像时 Wordpress 将无法获取图像，如果它只是 src="images/logo.png" 它必须是 src="<?php bloginfo('template_directory'); ?>/images/logo.png" 并且问题是我调用所有 javascript 的 theme.js 文件不会阅读 PHP，我需要使用 <?php bloginfo('template_directory'); ?>。

那么我该如何显示我的图像，因为我可以自定义它的唯一方法是通过他们通过 javascript 提供的参数，我不能只使用 HTML 来调用我的自定义标记图像，称为 logo。

我确定我不是唯一遇到此类问题的人。有人有想法吗？？

更新

所以我尝试了 wp_localize_script 方法并发生了两件事。

1. 我没有看到我的图片不是在断开的链接中，而是根本看不到它
2. 我的整个 URL 出于某种原因显示在标题中

这是我调用 wp_localize_script 的 functions.php：

/**
 * Enqueue scripts and styles.
 */
function loading() {

    global $wp_scripts;

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );

    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

    wp_enqueue_style( 'owlcarousel_css', get_template_directory_uri() . '/owl-carousel/owl.carousel.css' );

    wp_enqueue_style( 'owltheme_css', get_template_directory_uri() . '/owl-carousel/owl.theme.css' );

    wp_enqueue_style( 'animate_css', get_template_directory_uri() . '/css/animate.css' );

    wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );

    wp_enqueue_script( 'owl_js', get_template_directory_uri() . '/owl-carousel/owl.carousel.js', array('jquery'), '', true );

    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );

    wp_enqueue_script( 'viewport_js', get_template_directory_uri() . '/js/jquery.viewportchecker.js', array('jquery'), '', true );



    wp_enqueue_script( 'maps_js', get_template_directory_uri() . '/js/gmaps.js', array('jquery'), '', true );

    wp_enqueue_script('maps_custom', get_stylesheet_directory_uri() . '/js/maps-custom.js');

    wp_localize_script('maps_custom', 'mapsCustom', array(

    'templateUrl' => bloginfo('template_directory'),));



    wp_register_script ('html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );

    wp_register_script ('respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );

    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

}
add_action( 'wp_enqueue_scripts', 'loading' );

这是我调用地图的 maps_js：

jQuery(document).ready(function( $ ) {

    var href = mapsCustom.templateUrl + '/images/logo.png';

    var map = new GMaps({
    div: '#map',
    lat: 22.22222,
    lng: -22.22222
});

map.drawOverlay({
    lat: 22.22222,
    lng: -22.22222,
    content: $href

      }); 
});

Answer 1

使用wp_localize_script() 将任何类型的数据传递给您加载的脚本，在这种情况下，我们需要 bloginfo('template_directory')：

wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/my-script.js');
wp_localize_script('my-script', 'myScript', array(
'templateUrl' => bloginfo('template_directory'),));

现在您可以访问脚本文件中的 myScript.pluginsUrl：

var href = myScript.templateUrl + '/path/to/resource';

一般情况下，您不能在 JS 文件中使用 PHP。因此，对于该 wordpress，请提供 wp_localize_script()。借助它，您可以本地化您的路径，然后将该本地化传递给 JS 文件.所以基本上它会工作。

上面我已经给出了例子，你如何实现。根据你的需要修改它。

希望这能解决您的问题。