web-dev-qa-db-ja.com

ポストループ内で関数名が重複しないようにする（WP_Footerスクリプト）

たとえば、ショートコードとして使用されているコンテンツを投稿に挿入するプラグインを作成したとします。各投稿のコードをページの下部にプッシュしようとしています。

これはうまく機能しますが、同じショートコードを使用して複数の投稿があるアーカイブページにいる場合、関数名が重複し、フッターコード（activate_flex_slider）を一度だけ出力するため、明らかな衝突があります。

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

私がやろうとしているのは、それぞれのIDを指す複数のjQueryインスタンスがあるように、出力フッタースクリプトです。

<?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');
    ?>
pluginsplugin-developmentfunctionswp-enqueue-script
1
Joe

全体をクラスでラップして、データをクラス変数に入れます。

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();
2
Milo

私は以前Flexsliderを使ったことがありますが、それでも横になっているショートコード用のプラグインを持っていました。ちょっと埃っぽいですが、この質問に遭遇したので、私は自分の開発用インストールにアップロードしました。 それでもまだ動作します スライダーは同じページ上にあるので、メインのプラグインファイルの内容は次のようになります。

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();

このプラグインでは、すべてのスライダーを同じプロパティで初期化しています。上記のinitialization.jsの場合

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

十分であろう。

毎回異なるプロパティでスライダーを使用する場合は、複数のjQuery関数のみが必要です。そうでなければ、クラスをセレクタとして使うことでそれらすべてをターゲットにすることができます（上記のように）。

さまざまな特性

さまざまなプロパティが必要な場合は、これを行います（postmeta、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は

(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);

そしてそれを使用すると、スライダーのインスタンスが複数あり、それぞれに独自の引数セットがあります。

1
Johannes Pille