Wordpress: ¿cómo agregar hojas de estilo solo a páginas con shortcode específico?

Adriana, parte de nuestro equipo de trabajo, nos hizo el favor de redactar esta sección ya que domina perfectamente este tema.

Solución:

Carga de scripts y estilos de forma dinámica mediante código abreviado

Ventajas

• No busca en todas las publicaciones cada vez que se llama al shortcode.
• Capaz de agregar estilos y scripts dinámicamente solo cuando el código corto está en la página.
• No usa expresiones regulares ya que tienden a ser más lentas que strstr() o strpos(). Puede cambiar a expresiones regulares si necesita aceptar argumentos.
• Reduce las llamadas de archivo

Explicación del Código

1. Encuentra los códigos cortos en la página usando el save_post gancho solo cuando la publicación no es una revisión y coincide con la especificada post_type.

2. Guarda los ID de publicación encontrados como un array usando add_option() con carga automática establecida en sí a menos que la entrada ya esté presente. Entonces se usará update_option().

3. usa gancho wp_enqueue_scripts llamar a nuestro add_scripts_and_styles() función.

4. Esa función luego llama get_option() para recuperar nuestro array de ID de página. si la corriente $page_id está en el $option_id_array luego agrega los scripts y estilos.

Tenga en cuenta: Convertí el código de las clases de espacio de nombres OOP, por lo que es posible que me haya perdido algo. Déjame saber en los comentarios si lo hice.

Ejemplo de código: encontrar ocurrencias de código abreviado

function find_shortcode_occurences($shortcode, $post_type = 'page')

    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $query_result = new WP_Query($args);
    foreach ($query_result->posts as $post) 
        if (false !== strpos($post->post_content, $shortcode)) 
            $found_ids[] = $post->ID;
        
    
    return $found_ids;


function save_option_shortcode_post_id_array( $post_id ) 
    if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) 
        return;
    
    $option_name = 'yourprefix-yourshortcode';
    $id_array = find_shortcode_occurences($option_name);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', 'yes')) update_option($option_name, $id_array);


add_action('save_post', 'save_option_shortcode_id_array' );

Ejemplo de código: Shortcode incluye secuencias de comandos y estilos de forma dinámica

function yourshortcode_add_scripts_and_styles() 
    $page_id = get_the_ID();
    $option_id_array = get_option('yourprefix-yourshortcode');
    if (in_array($page_id, $option_id_array)) 
        wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true );
        wp_enqueue_style( $handle, $src , $deps);
    


add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles');

Esto funciona para mí:

function register_my_css () 
    wp_register_style('my-style', plugins_url('styles.css', __FILE__));


function register_my_scripts () 
    wp_register_script('my-script', plugins_url('scripts.js', __FILE__));


// only enqueue the scripts / styles when the short code is called
function do_my_shortcode () 
    wp_enqueue_style('my-style');
    wp_enqueue_script('my-script');

    // do short code stuff...


// register css
add_action('wp_enqueue_scripts', 'register_my_css');

// register javascript
add_action('wp_enqueue_scripts', 'register_my_scripts');

// register shortcode
add_shortcode('my-shortcode', 'do_my_shortcode');

Más información aquí: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

Sección de Reseñas y Valoraciones

Recuerda algo, que tienes la opción de valorar este escrito si te fue útil.

---

---

Utiliza Nuestro Buscador