Poner en cola el estilo dentro del shortcode pero está cargado en la parte inferior de la página (antes de los scripts de pie de página)

Question

Poner en cola el estilo dentro del shortcode pero está cargado en la parte inferior de la página (antes de los scripts de pie de página)

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

4

Agregué / encolado un estilo dentro de shortcode, funciona bien pero se carga en el pie de página (antes de iniciar los archivos .js) en lugar de en el encabezado. Hice lo mismo que esta solución:

Poner en cola secuencias de comandos / estilos cuando el código abreviado está presente

¿Es normal en WP o cómo puedo cargar el estilo en el encabezado?

Código de ejemplo aquí:

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

plugins actions plugin-development shortcode hooks

pregunta Zinan 17.02.2017 - 14:19

4 respuestas

Lea otras preguntas en las etiquetas plugins actions plugin-development shortcode hooks

WordPress 4.7 - Encabezado de video personalizado - Detener reproducción automática ¿Puedo cambiar wordpress emoji src de http://s.w.org/ a mi sitio?

score 3 · Answer 1

Por qué se agrega en el pie de página:

Este es el comportamiento esperado.

Ya que ha puesto en cola el estilo dentro de su función Shortcode hook , en el momento en que se ejecuta, WordPress ya ha terminado de generar la sección <head> de su página, ya que WordPress solo ejecutará su función de shortcode una vez que haya encontrado el shortcode en su contenido.

Por lo tanto, no tiene otra manera que colocar su estilo en la sección de pie de página si pone en cola el estilo dentro de la función de gancho de código corto.

Cómo agregarlo en el encabezado:

Si desea publicarlo en la sección <head> , debe ponerlo en cola 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' );

Nota: esto agregará el estilo incluso si no tienes el shortcode en la página.

Nota-2: Una de las respuestas en la pregunta que mencionó ya tiene una explicación detallada sobre alternativas y pros & contras.

score 1 · Answer 2

Usted puede comprobar previamente la presencia del código abreviado en el contenido de la publicación y poner en cola el script en el encabezado si se encuentra.

Sin embargo, también debe volver a agregarlo en el pie de página porque el código corto puede ejecutarse desde otro lugar (por ejemplo, en un widget, una plantilla o mediante programación).

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

Deberías intentar esto:

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

respondido por el Arsalan Mithani 17.02.2017 - 14:42

score 0 · Answer 4

Prueba el siguiente código. Consulte 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 la ruta del directorio de su plugin use plugin_dir_url () y para el tema actual use get_template_directory_uri ()