web-dev-qa-db-fra.com

Plugin Chargement de scripts et de styles sur chaque page, même lorsque vous ne l'utilisez pas

J'ai un plugin qui utilise la programmation de style de classe. Je suis complètement bloqué - les scripts sont chargés sur chaque page, même si le plugin n'est pas utilisé sur cette page.

Etant donné que le plug-in ne devrait fonctionner que lorsqu'un de ses codes abrégés est appelé, je ne comprends pas pourquoi ils sont toujours mis en file d'attente. Le code est:

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

add_action( 'plugins_loaded', array ( 'Lipstick_Consultation', 'init' ));

if (!class_exists('Lipstick_Consultation')){

//used for the script loader, to load custom jquery at the footer
$plugin_script = "";

class Lipstick_Consultation{

    public static function init() {
        $class = __CLASS__;
        new $class;
    }

    /**
     * @since 1.0
     */
    public function __construct() {

        //get contstants
        $this->setup_constants();

        //get file includes
        $this->includes();

        //register plugin shortcodes
        $this->register_shortcodes();

        //Register Styles
        add_action( 'wp_enqueue_scripts', array( $this, 'register_styles' ) );

        //Register Scripts
        add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );

        $this->page_scripts();

        return $this;
    }

    /**
     * Include our Class files
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    private function includes() {

        /****SHORTCODES****/
        //[slider_person]
        require_once LC_DIR . 'inc/shortcodes/slider.php';

        //[suggested_colors]
        require_once LC_DIR . 'inc/templates/tmpl-suggestedcolors.php';
    }

    /**
     * Setup plugin constants
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    private function setup_constants() {

        // Plugin information
        define( 'LC_VERSION',       '1.0.0' ); // Current plugin version
        define( 'LC_URL',           plugin_dir_url( __FILE__ ) );
        define( 'LC_DIR',           plugin_dir_path( __FILE__ ) );

    }

    /**
     * Register Styles
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    public function register_styles() {

        //main style file
        wp_register_style( 'consultation_style', LC_URL . "assets/css/style.css", array(), time(), 'all' );
        wp_enqueue_style( 'consultation_style' );

        //styles for full page plugin
        wp_register_style( 'lc_full_page_style', LC_URL . "assets/css/jquery.fullPage.css", array(), time(), 'all' );
        wp_enqueue_style( 'lc_full_page_style' );

    }

    /**
     * Register Scripts
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    public function register_scripts() {
        //Script that makes div have a scrollbar
        wp_register_script( 'lc_slim_scroll', LC_URL . "assets/js/jquery.slimscroll". SUFFIX . ".js", array( 'jquery' ), time() );
        wp_enqueue_script( 'lc_slim_scroll' );


        //Script that makes full width/height/page divs
        wp_register_script( 'lc_full_page', LC_URL . "assets/js/jquery.fullPage". SUFFIX . ".js", array( 'jquery' ), time() );
        wp_enqueue_script( 'lc_full_page' );

    }

    private function register_shortcodes(){
        //slider for "Choose You" Slider
        add_shortcode("lipstick_person", array('Lipstick_Consultation', "shortcode_person_slider"));

        //Template for lipstick color suggestions
        add_shortcode("suggested_colors", array($this, "suggested_colors_template"));
    }

    private function page_scripts(){

        //load fullPage jquery code
        $this->add_full_page_script();

    }

    /*
    *function to echo the script that triggers the plugin
    */
    public function add_script_footer(){
        echo $this->plugin_script;
    } 

    /**********************************************************************/
    /**********************************************************************/
    /*************MAY BE BETTER TO INCLUDE THIS IN ITS OWN FILE************/
    /**********************************************************************/
    /**********************************************************************/

    /*
    * Add script to get the full page effect on all page elements (this is for the page content)
    */
    private function add_full_page_script(){
        ob_start();
    ?>
        <!--jQuery Function to Trigger the plugin for this page-->
        <script type="text/javascript">
        //on document ready
        jQuery(document).ready(function($){
            $('#fullpage').fullpage({
                anchors:['instructions', 'choose-you', 'consultation-suggested-colors', 'all-colors'],
                scrollOverflow: true

                //look into the menu option https://github.com/alvarotrigo/fullPage.js

            });
        });


        </script>

    <?php
        //get jQuery script, set it as global script variable and call the WP callback
        $script = ob_get_contents();
        ob_end_clean();

        //set variable to the script above
        $this->plugin_script = $script;

        //call hook to add script to footer.
        add_action('wp_footer', array($this,'add_script_footer'),20); 

    }
}
}
?>

Si je comprends ce qui se passe, sur le hook plugins_loaded, le plugin est en cours d'instanciation. Lorsque la méthode construct est appelée, elle enque les scripts. Tout cela a du sens.

Quand on regarde d'autres plugins, on dirait qu'ils utilisent une structure similaire, pourtant - leurs fichiers de script ne sont chargés que lorsque leur plugin est appelé sur cette page.

Qu'est-ce que je fais mal? Merci!

UPDATE # 1

Les gars, je ne peux tout simplement pas comprendre comment faire cela. J'ai apporté les modifications suivantes au code:

    public function __construct() {

        //get contstants
        $this->setup_constants();

        //get file includes
        $this->includes();

        //register plugin shortcodes
        $this->register_shortcodes();

        return $this;
    }

    /**
     * Registers the styles and scripts for the shortcodes
     */
    private function register_shortcode_requirements() {

        //Register Styles
        add_action( 'wp_enqueue_scripts', array( $this, 'register_styles' ) );

        //Register Scripts
        add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );

    }

    /**
     * Register Styles
     */
    public function register_styles() {

        //main style file
        wp_register_script( 'consultation_style', LC_URL . "assets/css/style.css", array(), time(), 'all' );
        wp_enqueue_script( 'consultation_style' );

        //styles for full page plugin
        wp_register_script( 'lc_full_page_style', LC_URL . "assets/css/jquery.fullPage.css", array(), time(), 'all' );
        wp_enqueue_script( 'lc_full_page_style' );

    }

    /**
     * Register Scripts
     */
    public function register_scripts() {
        //Script that makes div have a scrollbar
        wp_register_script( 'lc_slim_scroll', LC_URL . "assets/js/jquery.slimscroll". SUFFIX . ".js", array( 'jquery' ), time() );
        wp_enqueue_script( 'lc_slim_scroll' );


        //Script that makes full width/height/page divs
        wp_register_script( 'lc_full_page', LC_URL . "assets/js/jquery.fullPage". SUFFIX . ".js", array( 'jquery' ), time() );
        wp_enqueue_script( 'lc_full_page' );

    }

    private function register_shortcodes(){
        //slider for "Choose You" Slider
        add_shortcode("lipstick_person", array($this,"shortcode_person_slider_caller"));

    }
    /*
    * Calling Function to include scripts and then fire the actual shortcode function contained in separate .php file
     */
    public function shortcode_person_slider_caller($atts, $content){

        //register styles/scripts
        $this->register_shortcode_requirements();

        //run actual function for rendering
        $content = shortcode_person_slider($atts);
        return $content;
    }

Ensuite, dans la fonction appelant, le shortcode_person_slider est une fonction incluse dans l'un des fichiers chargés require_once.

La fonction est activée (testée avec un var_dump) dans cette fonction et elle s'affiche. Pourtant, le contenu ne s'affiche pas sur la page (même si $ content a tout le balisage html).

De plus, les fichiers de script/style ne sont pas mis en file d'attente.

Lors du test, la register_shortcode_requirements() se déclenche, mais chacun des hooks wp_enqueue_script ne le sont pas.

Aucun conseil? Je vous remercie!

plugin-developmentwp-enqueue-script
1
W00tW00t111

Comme Rarst l'a déjà noté, vous avez répondu à votre question. Vous dites au logiciel de charger ces scripts tout le temps. Vous devez contrôler ce processus. Le logiciel est stupide. Il ne peut pas décider quand le bon moment est de charger le code. ALORS...

Comme le plugin ne doit être exécuté que lorsqu'un de ses codes courts est appelé, ...

Puisque vous dites que le script ne devrait se charger que lorsqu'un shortcode est utilisé, allez-y, enregistrez vos scripts mais mettez-les en file d'attente puis dans le gestionnaire de shortcode, comme ceci à partir d'une autre question :

function my_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
            'title'  => '',
           ), $atts));
    static $counter = 0;
    echo $counter++;
    wp_enqueue_script('wp-mediaelement'); 

}
add_shortcode('enq','my_shortcode');

Votre script se chargera dans le pied de page, alors assurez-vous que Javascript peut gérer ça.

Quant à votre feuille de style,

  1. Vous pouvez les charger dans le pied de page de la même manière que les scripts. Ce balisage est invalide mais a tendance à fonctionner.
  2. Vous pouvez charger les styles en ligne dans le shortcode, ce qui est une option décente, peut-être la meilleure.
  3. Vous pouvez avoir le javascript insérer les styles de manière dynamique
  4. Vous pouvez "pré-traiter" le shortcode, de la même manière que pour cette solution (qui nécessite beaucoup de ressources): https://wordpress.stackexchange.com/a/101515/21376
2
s_ha_dum

Vous répondez à votre propre question - les scripts sont mis en file d'attente parce que c'est ce que le plug-in effectue chaque chargement sans condition .

Il n'y a pas de logique qui contrôle quand cela doit arriver ou non, cela se produit toujours.

Si vous regardez de plus près un plugin qui le fait plus intelligemment, vous remarquerez généralement l'une de ces choses:

  • il existe une vérification conditionnelle pour les méthodes d'accrochage ou les méthodes internes
  • les crochets utilisés sont spécifiques à certains contextes
  • la file d'attente est appelée à partir de code avec une fonction associée; par exemple, les scripts requis par shortcode peuvent être mis en file d'attente lorsque vous les utilisez dans le gestionnaire de shortcode
0
Rarst