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

Question

我正在使用 Google map 插件，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>

现在我有一些选项，我可以通过我的 themes_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>'
});

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

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

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

更新

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

1. 我看不到我的图片，就像在断开的链接中一样，但根本看不到它
2. 出于某种原因，我的整个 URL 显示在标题中

这是我的 functions.php，我在其中调用了 wp_localize_script:

/**
 * 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' );

这是我调用 map 的 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 文件。所以基本上它会起作用。

上面我已经给出了如何实现的示例，请根据您的需要进行修改。

希望这能解决您的问题。