web-dev-qa-db-fra.com

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

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

Scripts/styles en file d'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;
    }
}
pluginsplugin-developmentshortcodehooksactions
3
Zinan

Pourquoi est-il ajouté dans le pied de page:

C'est le comportement attendu.

Puisque vous avez mis en file d'attente le style dans votre fonction de hook Shortcode , au moment de son exécution, WordPress a déjà fini de générer la section <head> de votre page, car WordPress ne sera exécuté votre fonction de shortcode 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 hook de shortcode.

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 en utilisant:

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: L'une des réponses à la question que vous avez évoquée contient déjà une explication détaillée des alternatives, des avantages et des inconvénients.

3
Fayaz

Vous pouvez pré-vérifier 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 recourir à l’ajout dans le pied de page, car le shortcode peut / s’exécute 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 ...
}
1
majick

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' );
0
Arsalan Mithani

Essayez ci-dessous le code. Reportez-vous à partir de 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');

Note: Pour votre chemin de répertoire de plugin, utilisez plugin_dir_url () et pour le chemin de thème actuel, utilisez get_template_directory_uri ()

0
AddWeb Solution Pvt Ltd