Question

我正在尝试在Wordpress中编写一个小部件插件，它会创建一个javascript标记并将其放在页面的页脚中。我知道我可以用wp_enqueue_script创建这个，没问题。但我需要将小部件设置中的参数传递给此脚本标记。

示例：

wp_enqueue_script( 'script-name', '/js/example.js' );

将呈现如下所示的标记：

<script type='text/javascript' src='/js/example.js'></script>

我想要的是创建一个如下所示的标签：

<script type='text/javascript' data-id='12345' src='/js/example.js'></script>

从小部件设置传入12345。

我该怎么做？

Answer 1

这是我想出来的。在创建前端显示部件的窗口小部件代码中，使用：

add_action('wp_footer',create_function( '', 'echo(\'<script type="text/javascript" data-id="' . $instance['widgetparamname'] . '" src="//someurl.com/some.js"></script>\');' ),1,0);

$ instance已经传入，并且包含小部件管理界面中的值。因此，无论您放入窗口小部件的任何值，都将显示在该数组中。然后简单地引用数组的正确元素。

此代码的作用是向wp_footer挂钩广告，而不需要其他功能（您无法传递任何值），因此您在此处放置的任何内容都将写入您网站的页脚区域。

值得注意的是，create_function的第一个参数必须为空，否则wordpress会抛出错误。

Answer 2

我意识到这是一篇较旧的文章，但是，老实说，我不知道以下是将参数从插件传递到javascript的可接受方法，但是我遇到了同样的问题，并且希望分享至少一种方法！也很高兴获得反馈！

无论出于何种原因，我最终都使用了两种不同的方法将参数从插件PHP代码传递到JS代码。

第一个使用wp_localize_script选项非常简单。

这是插件PHP代码段：

wp_enqueue_script(
    'dynamic-rss-scripts', /* Handle/Name */
    plugin_dir_url( __FILE__ ) . 'assets/js/dynamic-rss.js', /* Path to the plugin/assets folder */
    //array('jquery', 'xml2json', 'json2xml'), /* Script Dependencies */
    array('jquery'), /* Script Dependencies */
    null, /* null is any version, but could be the specific version of jquery if required */
    false /* if true=add to footer, false=add to header */
);


/*
    Pass any server-side vars down to JS.  These will be exposed as
    php_vars.variablename for example
*/
$jsarray = array(
    'exampleparam'               => 'Example Param Value'
);
wp_localize_script( 'dynamic-rss-scripts', 'php_vars', $jsarray );

我正在使用数组，因为就我而言，我通常会传递一些参数。

从上面的代码片段中可以看出，实际的参数值很容易在Javascript中使用。 请注意上述PHP的wp_localize_script行中的php_vars参考 。

因此，在Javascript中，通过执行以下操作很容易引用这些参数：

console.log('Hello to PHP variables', php_vars);

...并且就上述PHP代码段而言，我现在当然可以通过以下方式引用我的exampleparam参数：

console.log('Here is my specific param called exampleparam', php_vars.exampleparam);

我使用的第二种方法是简单地在DOM元素上构造数据属性（在我的情况下，这是一个容器DIV）。

在我的插件PHP中，我提取了插件/简码参数：

extract（shortcode_atts（array（

'url' => '',
'feed-type' => 'list', // This could be for Wordpress or Calendar etc.
'rows' => '5',
'cols' => '1',
'include-image' => 'false',
'image-align' => 'left',
'image-size' => '100',
'include-date' => 'true',
'date-format' => 'dd/mm/yyyy'

），$ attrs））;

我做了一些验证等。但是最终，我最终只是创建了如下的HTML数据形体：

$content = "<div id='dynamic-rss' class='dynamic-rss-container' ";
    $content .= "data-url='" . $attrs['url'] . "' ";
    $content .= "data-feedtype='" . $attrs['feed-type'] . "' ";
    $content .= "data-rows='" . $attrs['rows'] . "' ";
    $content .= "data-cols='" . $attrs['cols'] . "' ";
    $content .= "data-includeimage='" . $attrs['include-image'] . "' ";
    $content .= "data-imagealign='" . $attrs['image-align'] . "' ";
    $content .= "data-imagesize='" . $attrs['image-size'] . "' ";
    $content .= "data-includedate='" . $attrs['include-date'] . "' ";
    $content .= "data-dateformat='" . $attrs['date-format'] . "'";
$content .= "></div>";

然后，我在PHP中返回$ content，该$ content呈现具有数据属性的容器DIV。

Javascript / jQuery中的最后一步（我在这里使用jQuery，但可以是纯JS）是检索数据属性，然后可以在Java代码中的任何需要的地方使用它们：

const feedUrl = $('#dynamic-rss').data('url');
const feedType = $('#dynamic-rss').data('feedtype');
const rows = returnInt($('#dynamic-rss').data('rows')) != NaN ? returnInt($('#dynamic-rss').data('rows')) : 10;
const cols = returnInt($('#dynamic-rss').data('cols')) != NaN ? returnInt($('#dynamic-rss').data('cols')) : 1;
const includeImage = $('#dynamic-rss').data('includeimage');
const imageAlign = $('#dynamic-rss').data('imagealign');
const imageSize = $('#dynamic-rss').data('imagesize');
const includeDate = $('#dynamic-rss').data('includedate');
const dateFormat = $('#dynamic-rss').data('dateformat');

希望这会有所帮助，如果其他任何人迷路了！

Wordpress插件：如何传递参数以用作javascrtipt标记中的属性？

2 个答案: