避免POST循环中的函数名称重复(WP_FOOTER脚本)

时间：2012-10-17 作者：Joe

假设我创建了一个插件，将内容（用作短代码）注入到帖子中。我正在尝试将每个帖子的代码推到页面底部。

这很好，但是，当您在一个存档页面上有多篇文章使用同一短代码时，会出现明显的冲突，因为函数名会重复，并且只会输出一次页脚代码（activate\\u flex\\u slider）。

<?php
function your_function() {
    echo \'<p>This is inserted at the bottom</p>\';
}
add_action(\'wp_footer\', \'your_function\');
?>

我要做的是输出页脚脚本，以便有多个jQuery实例指向各自的ID。。。

<?php
    function flex_slider() {
        $output =\'<ul class="flexslider"><li>Slide Content</li></ul>\';
        return $output;
    }


    function activate_flex_slider(){
        ?>
    <script>
                ( function ($) {
             $(window).load(function(){

       //different number will be prepended to ID (matches post ID #)
      $(\'#carousel-<?php echo $post->ID ?>\').flexslider();
    });
        })(jQuery);
    </script>
<?php
    }

    // Hook into footer so slider becomes active after page loads
    add_action(\'wp_footer\',\'activate_flex_slider\');

    // Create the Shortcode
    add_shortcode(\'flex_slider\', \'flex_slider\');
    ?>

2 个回复

SO网友:Milo

我会将整个内容包装在一个类中，并将您的数据放入一个类var中。

class WPA69616_Plugin {
    private $data = \'\';

    public function __construct() {
        add_shortcode(\'my_shortcode\', array($this, \'add_content\'));
        add_action(\'wp_footer\', array($this, \'output_content\'));
    }

    public function add_content($atts) {
        extract( shortcode_atts( array(
            \'content\' => \'\'
        ), $atts ) );
        $this->data .= $content;
    }

    public function output_content() {
        echo $this->data;
    }
}
$wpa69616_plugin = new WPA69616_Plugin();

SO网友:Johannes Pille

我以前使用过Flexslider，现在仍然有一个用于短代码的插件。它有点脏，但我已经将它上传到了我的开发安装中，现在我遇到了这个问题it still works （并且在同一页上使用多个滑块来实现），下面是主插件文件的内容：

带WP短代码的Flexslider

/**
 * Holds the URL
 *
 * @since 1.0
 */
if ( ! defined( \'WPSE69616_RELPATH\' ) )
    define( \'WPSE69616_RELPATH\', plugin_dir_url( __FILE__ ) );

if ( ! class_exists( \'WPSE69616_SLIDER\' ) ) :
class WPSE69616_SLIDER {

    /**
     * Scripts & Styles
     *
     * @since 1.0
     */
    public function init() {
        /* default flexslider stylesheet */
        wp_register_style( \'wpse69616-default\', WPFS_RELPATH . \'css/flexslider.css\', false, \'1.8\' );
        /* few fixes for WP */
        wp_register_style( \'wpse69616-fixes\', WPFS_RELPATH . \'css/fixes.css\', false, \'1.0\' );
        /* the actual slider */
        wp_register_script( \'wpse69616-flexslider\', WPFS_RELPATH . \'js/jquery.flexslider-min.js\', array(\'jquery\'), \'1.8\', true );
        /* slider initialization */
        wp_register_script( \'wpse69616-flex-init\', WPFS_RELPATH . \'js/initialization.js\', array(\'wpse69616-flexslider\'), \'1.0\', true );
    }

    /**
     * Slider Shortcodes
     *
     * @since 1.0
     */
    public function slider( $atts, $content=\'\' ) {
        wp_enqueue_style( \'wpse69616-default\' );
        wp_enqueue_style( \'wpse69616-fixes\' );
        wp_enqueue_script( \'wpse69616-flexslider\' );
        wp_enqueue_script( \'wpse69616-flex-init\' );
        extract( shortcode_atts( array(
            \'id\' => \'\'
        ), $atts ) );
        $id = ! empty( $id ) ? \' id="\' . $id . \'"\' : \'\';
        $content = do_shortcode( $content );

        return \'<div\' . $id . \' class="flexslider">\' .
                \'<ul class="slides">\' . $content . \'</ul>\' .
            \'</div>\';
    }
    public function slide( $atts, $content=\'\' ) {
        $content = do_shortcode( $content );
        return \'<li>\' . $content . \'</li>\';
    }

    /**
     * Class Constructor
     *
     * @since 1.0
     */
    public function __construct() {
        add_action( \'wp_loaded\', array( &$this, \'init\' ) );
        add_shortcode( \'slide\', array( &$this, \'slide\' ) );
        add_shortcode( \'flexslider\', array( &$this, \'slider\' ) );
    }

} // class
endif; // class exists

$wpse69616_slider = new WPSE69616_SLIDER();

在这个插件中，我初始化了所有具有相同属性的滑块，对于初始化也是如此。js以上

jQuery(window).load(function() {
    jQuery(\'.flexslider\').flexslider( {
        slideshow: false,
        controlNav: true,
        prevText: "<",
        nextText: ">",
    });
});

就足够了。

请注意，如果希望每次使用具有不同属性的滑块，则只需要多个jQuery函数。否则，您可以通过使用类作为选择器（如上所述）以所有这些对象为目标。

不同的属性

如果您必须具有不同的属性，那么就是这样做的（我假设您在某处有一个属性数组-posmeta、options等等）。阵列如下所示：

$slider_properties = array(
    array(
        \'id\' => 53 // some post ID
        \'slideshow\' => \'false\',
        \'controlNav\' => \'true\'
    ),
    array(
        \'id\' => 101 // some post ID
        \'slideshow\' => \'true\',
        \'controlNav\' => \'false\'
    )
);

然后你可以添加

wp_localize_script( \'wpse69616-flex-init\', \'wpseSlider\', $slider_properties );

对于主插件类和js do

(function($) {
    $(window).load(function() {
        for( var i=0; i<wpseSlider.length; i++ ) {
            $( \'#carousel-\' + wpseSlider[i].id ).flexslider( {
                slideshow: wpseSlider[i].slideshow,
                controlNav: wpseSlider[i].controlNav,
                prevText: "<",
                nextText: ">",
            });
        }
    });
})(jQuery);

这样就有了滑块的多个实例，每个实例都有自己的参数集。

结束

小码农CODE

避免POST循环中的函数名称重复(WP_FOOTER脚本)

带WP短代码的Flexslider

不同的属性

相关推荐

Travel Blog Plugins