web-dev-qa-db-fra.com

Eviter les noms de fonction en double dans la post-boucle (script WP_Footer)

Disons que j'ai créé un plugin qui injecte du contenu (utilisé comme shortcode) dans un post. J'essaie de pousser ce code pour chaque poste au bas de la page.

Cela fonctionne bien, cependant, lorsque vous vous trouvez sur une page d'archive avec plusieurs publications utilisant le même shortcode, il existe un conflit évident, car les noms des fonctions deviennent dupliqués et le code de bas de page (activate_flex_slider) ne sera généré qu'une fois.

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

Ce que j'essaie de faire, c'est un script de pied de page de sortie afin qu'il y ait plusieurs instances jQuery pointant vers leur ID respectif ...

<?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

Je voudrais emballer le tout dans une classe et mettre vos données dans une classe 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();
2
Milo

J'ai déjà utilisé Flexslider et j'avais toujours un plugin pour les codes courts. C'est un peu poussiéreux, mais je l'ai téléchargé sur mon installation de développeur maintenant que je suis tombé sur cette question et cela fonctionne toujours (et le fait avec plusieurs sliders sur la même page), voici donc le contenu du fichier du plugin principal:

Flexslider avec WP Shortcodes

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

Dans ce plugin, j'initialise tous les curseurs avec les mêmes propriétés, donc pour l'initialisation .js ci-dessus

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

suffira.

Notez que vous n'avez besoin de plusieurs fonctions jQuery que si vous souhaitez utiliser le curseur avec des propriétés différentes à chaque fois. Sinon, vous pouvez tous les cibler en utilisant une classe comme sélecteur (comme ci-dessus).

Propriétés variables

Si vous devez avoir différentes propriétés, voici comment cela serait fait (je supposerai que vous avez un tableau de propriétés quelque part - postmeta, options, peu importe). Le tableau ressemblerait à ceci:

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

Et puis vous pourriez ajouter

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

à la classe de plugin principal et comme pour le 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);

Et avec cela, vous auriez plusieurs instances du curseur, chacune avec son propre jeu d'arguments.

1
Johannes Pille