本地化多个短码的变量

时间：2013-09-19 作者：Mohamed Badawy

我有flexslider Shortcode的代码

add_shortcode(\'flexslider\', function($atts){
global $post;
$ids = explode(\',\', $atts[ids]);

$uniqid = uniqid();
wp_enqueue_script( \'shortcode_flexslider\');
wp_localize_script( \'shortcode_flexslider\', \'slider\', array(\'id\' => $uniqid)); 

foreach( $ids as $id ) {
    $imgLinks       = wp_get_attachment_image_src($id, large);
    $imgThumb       = wp_get_attachment_image_src($id, thumbnail);

    $slider     .= \'<li><img src="\'.$imgLinks[0].\'">\'.$imgCaptionContent.\'</li>\';
    $carousel   .= \'<li><img src="\'.$imgThumb[0].\'"></li>\'; 
}
$structure =\'<div id="slider\'.$uniqid.\'" class="flexslider"><ul class="slides">\'
            .$slider.
            \'</ul></div>\'.

            \'<div id="carousel\'.$uniqid.\'" class="flexslider"><ul class="slides">\'
            .$carousel.
            \'</ul></div>\';   
});

我把uniqid 对于slider和carousel ID，可以在同一帖子中放置多个flexslider短代码，我将uniqid 对\\u flexslider JS文件进行快捷编码以查找滑块和旋转木马ID

$(\'#carousel\'+slider.id).flexslider({
  //
   asNavFor: \'#slider\'+slider.id
  //
});

$(\'#slider\'+slider.id).flexslider({
 //
  sync: \'#carousel\'+slider.id
//
});

问题是，当我在同一个帖子中放置多个flexslider短代码时，即本地化的可变滑块。id获取最后一个flexslider短代码uniqid，因此最后一个flexslider短代码只能起作用，如何传递所有flexslider短代码uniqid 不仅仅是最后一个？

2 个回复

最合适的回答,由SO网友:gmazzap 整理而成

你的问题是wp_localize_script 将javascript对象打印到html标记，类似于：

var slider = {"id":"a_unique_id_here"};

如果您多次调用它，例如在同一页中使用更多的短代码，那么html标记中的printend是什么

var slider = {"id":"a_unique_id_here"};
var slider = {"id":"another_unique_id_here"};
var slider = {"id":"third_unique_id_here"};

因此，您正在一次又一次地覆盖同一个变量。

您需要这样的东西，您应该将输出转换为如下形式：

var slider_ddAsfe2ser = {"id":"a_unique_id_here"};
var slider_fsdgffereR = {"id":"another_unique_id_here"};
var slider_d4frfAd1ej = {"id":"third_unique_id_here"};

即，必须为每个shorcode创建一个唯一的命名变量作为设置对象。

怎样类似于：

add_shortcode(\'flexslider\', function($atts) {
  global $post;
  $ids = explode(\',\', $atts[ids]);
  $uniqid = uniqid();
  wp_enqueue_script( \'shortcode_flexslider\');
  $token = wp_generate_password(32, false, false);
  wp_localize_script( \'shortcode_flexslider\', \'slider_\' . $token, array(\'id\' => $uniqid));
  foreach( $ids as $id ) {
    // ... your code here ...
  }
  $structure = \'<div id="slider\' . $uniqid. \'" class="flexslider"\';
  $structure .= \' data-token="\' . $token . \'">\'; // the token as data attribute
  $structure .= \'<ul class="slides">\' . $slider . \'</ul></div>\';
  $structure .= \'<div id="carousel\' . $uniqid . \'" class="flexslider">\';
  $structure .= \'<ul class="slides">\' . $carousel . \'</ul></div>\'
});

之后在你的js:

// cicle all the divs with \'flexslider\' class and id that starts with \'slider\'
$(\'div.flexslider[id^="slider"]\').each( function() { 
  var $div = $(this); // the sdiv jquery object
  var token = $div.data(\'token\');
  // use the bracket syntax to retrieve the unique named object
  // in the global (window) scope
  var settingObj = window[\'slider_\' + token];
  $div.flexslider({
    //
    sync: \'#carousel\' + settingObj.id
    //
  });
  $carousel = $( \'#carousel\' + settingObj.id); // the carousel div jquery object
  $carousel.flexslider({
    //
    asNavFor: \'#slider\' + settingObj.id
    //
  });
}); // end each cycle

SO网友:s_ha_dum

好

wp_localize_script( \'shortcode_flexslider\', \'slider\', array(\'id\' => $uniqid)); 
wp_localize_script( \'shortcode_flexslider\', \'carousel\', array(\'id\' => $uniqid));

或。。。

wp_localize_script( 
  \'shortcode_flexslider\', 
  \'slider\', 
  array(
    \'sliderid\' => $uniqid,
    \'carouselid\' => $uniquid
  )
);

您只需要避免覆盖变量，仅此而已。可能还有其他方法可以做到这一点，但这两种方法应该可以让你开始。我更喜欢后者。

结束

小码农CODE

本地化多个短码的变量

相关推荐

JQuery导入“jQuery-1.10.2.min.map”时出现错误404