Enfileire o estilo dentro do shortcode, mas ele é carregado na parte inferior da página (antes dos scripts de rodapé)

Question

Enfileire o estilo dentro do shortcode, mas ele é carregado na parte inferior da página (antes dos scripts de rodapé)

#1 resposta do Fayaz (3 votos)
#2 resposta do majick (1 votos)
#3 resposta do Arsalan Mithani (0 votos)
#4 resposta do AddWeb Solution Pvt Ltd (0 votos)

4

Eu adicionei / enfileirei um estilo dentro do shortcode, ele funciona bem, mas carregado no rodapé (antes de iniciar os arquivos .js) ao invés do cabeçalho. Eu fiz da mesma forma como esta solução:

Enfileirar Scripts / Estilos quando houver um shortcode

É normal no WP ou como posso carregar o estilo no cabeçalho?

Exemplo de código aqui:

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;
    }
}

actions plugins plugin-development shortcode hooks

por Zinan 17.02.2017 / 14:19

4 respostas

Tags actions plugins plugin-development shortcode hooks

Use $ query-set várias vezes com pre_get_posts? get_posts / WP_Query Tamanho da memória de 134217728 bytes esgotados

score 3 · Answer 1

Por que é adicionado no rodapé:

Esse é o comportamento esperado.

Como você enfileirou o estilo dentro da sua função Hook do Shortcode , no momento em que ele é executado, o WordPress já está gerando a seção <head> da sua página, O WordPress só executará sua função de código de acesso assim que encontrar o shortcode no seu conteúdo.

Portanto, não há outra maneira senão colocar o seu estilo na seção de rodapé se você enfileirar o estilo dentro da função de gancho de shortcode.

Como adicioná-lo no cabeçalho:

Se você deseja produzir na seção <head> , você deve enfileirá-lo usando:

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

Observação: isso adicionará o estilo mesmo se você não tiver o shortcode na página.

Nota-2: Uma das respostas na questão que você mencionou já tem uma explicação detalhada sobre alternativas e pros & contras.

score 1 · Answer 2

Você pode pré-verificar a presença do shortcode no conteúdo da postagem e enfileirar o script no cabeçalho, caso ele seja encontrado.

No entanto, você também deve fazer um fallback para adicioná-lo no rodapé porque o shortcode pode ser executado em outro lugar (por exemplo, em um widget, um modelo ou programaticamente).

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 ...
}

score 0 · Answer 3

0

Você deve tentar isto:

function prefix_add_styles() {
    wp_enqueue_style( 'your-style-id', get_template_directory_uri() . '/stylesheets/somestyle.css' );
};
add_action( 'get_header', 'prefix_add_styles' );

por Arsalan Mithani 17.02.2017 / 14:42

score 0 · Answer 4

Tente abaixo do código. Consulte 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');

Nota: Para o caminho do diretório de plugins, use plugin_dir_url () e para o caminho do tema atual use get_template_directory_uri ()