Style de file d'attente dans le shortcode, mais il est chargé au bas de la page (avant les scripts de pied de page)

4

J'ai ajouté / mettre en file d'attente un style à l'intérieur du shortcode, cela fonctionne bien mais chargé en pied de page (avant de démarrer les fichiers .js) plutôt qu'en-tête. J'ai fait la même chose comme cette solution:

Scripts / Styles de mise en attente en présence d'un shortcode

Est-ce normal dans WP ou comment puis-je charger le style dans l'en-tête?

Exemple de code ici:

class Cbwsppb_Related {

    public function __construct() 
    {
        add_shortcode('cbwsppb_related', array($this, 'shortcode_func'));
    }

    public function shortcode_func($atts, $content = null) 
    {
        $atts = shortcode_atts( array(
          'style'    => '',
          'display_style'    => '',
          'show'    => '',
          'orderby' => ''
        ), $atts );

        if ($atts['display_style'] === 'carousel') {
            wp_enqueue_style('flexslider-style');
        }

        $show = (!empty($atts['show'])) ? $atts['show'] : 2;
        $orderby = (!empty($atts['orderby'])) ? $atts['orderby'] : 'rand';

        $output = '';
        ob_start();

            if ($atts['style'] === 'custom') {
                $output .= woocommerce_get_template( 'single-product/related.php', array(
                        'posts_per_page' => $show,
                        'orderby' => $orderby,
                    ) 
                );                 
            } else {
                $output .= woocommerce_get_template( 'single-product/related.php');                
            }

            $output .= ob_get_clean();
        return $output;
    }
}
    
posée Zinan 17.02.2017 - 14:19

4 réponses

3

Pourquoi l'ajouter dans le pied de page:

C’est le comportement attendu.

Puisque vous avez mis en file d'attente le style dans votre fonction de raccordement Shortcode , au moment de son exécution, WordPress avait déjà terminé de générer la section <head> de votre page, car WordPress n'exécutera votre fonction de shortcode qu'une fois le shortcode trouvé dans votre contenu.

Donc, il n’ya pas d’autre moyen que de placer votre style dans la section de pied de page si vous mettez le style en file d’attente dans la fonction de raccourci.

Comment l'ajouter dans l'en-tête:

Si vous voulez le sortir dans la section <head> , vous devez le mettre en file d'attente avec:

function enqueue_your_styles() {
    // the following line is just a sample, use the wp_enqueue_style line you've been using in the shortcode function 
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/css/your-style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_your_styles' );
  

Remarque: cela ajoutera le style même si vous n'avez pas le shortcode dans la page.

     

Note 2: Une des réponses à la question que vous avez mentionnée a déjà une explication détaillée sur alternatives et pros & contre.

    
réponse donnée Fayaz 17.02.2017 - 14:34
1

Vous pouvez vérifier au préalable la présence du shortcode dans le contenu de la publication et mettre en file d'attente le script dans l'en-tête s'il est trouvé.

Cependant, vous devez également vous attendre à l'ajouter dans le pied de page car le shortcode peut être exécuté ailleurs (par exemple, dans un widget, un modèle ou par programme).

public function __construct() {
    add_shortcode('cbwsppb', array($this => 'shortcode_func'));
    add_action('wp', array($this => 'shortcode_check'));
}

public function shortcode_check() {
    if (is_single() && (is_product()) {
        global $post; $content = $post->post_content;

        // global $wpdb;
        // $query = "SELECT 'post_content' FROM "'.$wpdb->prefix.'"posts WHERE ID = '".$post->ID."'";
        // $content = $wpdb->get_var($query);

        // quick and dirty check for shortcode in post content
        if ( (stristr($content,'[cbwsppb')) 
          && (stristr($content,'display_style')) 
          && (stristr($content,'carousel')) ) {
            add_action('wp_enqueue_scripts', array($this,'enqueue_styles'));
        }
    }
}

public function enqueue_styles() {
    wp_enqueue_style('flexslider-style');
}

public function shortcode_func($atts, $content = null) {

   // ... $atts = shortcode_atts etc ...

   // change this to:
   if ( ($atts['display_style'] === 'carousel')
      && (!wp_style_is('flexslider-style','enqueued')) ) {
       wp_enqueue_style('flexslider-style');
   }

   // ... the rest of the shortcode function ...
}
    
réponse donnée majick 18.02.2017 - 01:57
0

Vous devriez essayer ceci:

function prefix_add_styles() {
    wp_enqueue_style( 'your-style-id', get_template_directory_uri() . '/stylesheets/somestyle.css' );
};
add_action( 'get_header', 'prefix_add_styles' );
    
réponse donnée Arsalan Mithani 17.02.2017 - 14:42
0

Essayez ci-dessous le code. Reportez-vous à la wp_enqueue_style .

   function my_shortcode_style(){
      wp_enqueue_style( 'my_css', plugin_dir_url( __FILE__ ).'style.css', array( '' ), false, 'all' );
   }
   add_action('wp_enqueue_scripts', 'my_shortcode_style');

Remarque: utilisez plugin_dir_url () pour le chemin du répertoire du plugin et utilisez > get_template_directory_uri ()

    
réponse donnée AddWeb Solution Pvt Ltd 17.02.2017 - 14:49

Lire d'autres questions sur les étiquettes