Question

我试图回应一些javascript，但它正在将其作为文本，它在我的测试页面上工作正常，但是当我将它添加到wordpress时，它将其转换为文本。但我有另一个部分，脚本运行正常。

    echo ' 
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: \'short_name\',
  route: \'long_name\',
  locality: \'long_name\',
  administrative_area_level_1: \'short_name\',
  country: \'long_name\',
  postal_code: \'short_name\'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(\'autocomplete\')),
      { types: [\'geocode\'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, \'place_changed\', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = \'\';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

if (typeof jQuery != \'undefined\') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

jQuery(document).ready(function () {initialize();});

    </script>
   <style>

      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }

    </style>

  </head>

  <div>

';

我知道代码可以工作，只是回声没有。请帮忙。

对于草率代码抱歉：[

输出：

<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&#038;sensor=false&#038;libraries=places"></script><br />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><br />
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.</p>
<p>var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};</p>
<p>function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}</p>
<p>// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();</p>
<p>  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }</p>
<p>  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]</p>
<p>if (typeof jQuery != 'undefined') {</p>
<p>    alert("jQuery library is loaded!");</p>
<p>}else{</p>
<p>    alert("jQuery library is not found!");</p>
<p>}</p>
<p>jQuery(document).ready(function () {initialize();});</p>
<p>    </script></p>
<style>
<p>      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }</p>
</style>

Answer 1

有几种不同的方法可以做到这一点。

1）创建一个包含所有javascript代码的变量heredoc字符串。然后回应那个字符串。测试看是否有效。

2）向WordPress添加脚本的正确方法是使用wp_enqueue_scripts函数（documentation here）并调用它是插件还是主题。

WordPress语法如下：

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

第1步：将脚本放入自己的js文件中，例如your-map-canvas.js。

第2步：创建新功能。

function your_map_canvas(){}

第3步：在函数中，创建自己的句柄（可以是任何东西）。对于此示例，我将使用map-canvas。您需要使名称足够独特，以便其他插件/主题不会使用相同的功能并导致冲突。

第4步：将源添加到文件中。如果它是一个插件（正如您所指示的那样），请使用plugin_dir_path();（documentation here）动态获取插件文件夹的路径。 $ src现在看起来应该是这样的：plugin_dir_path(__FILE__).'path/in/plugin/folder/to/your-map-canvas.js'。

这是你到目前为止应该拥有的：

function your_map_canvas(){ wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js'); }

第5步：使用wp_enqueue_scripts挂钩调用您的函数

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

最终代码应如下所示：

function your_map_canvas(){
    wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js');
}

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

Answer 2

Wordpress将其转换为文本，即使我将其直接添加到文本编辑器中，因为代码中的空格和换行符也是如此。所以我不得不使用一个原始的html插件，允许代码通过wordpress不受影响。所以我在插件片段之间添加了代码并且它有效。

PHP回声的javascript为文本？

2 个答案: