Italiano
Română
РусскийCargar Scripts / Estilos cuando el shortcode está presente
¿Cuál es la mejor manera de registrar/cargar scripts y/o estilos para usar en plugins?
Recientemente hice un plugin simple para añadir el avatar/gravatar del usuario con un shortcode. Tengo diferentes opciones de estilo para mostrar el avatar (cuadrado, redondo, etc.) y decidí poner el CSS directamente en el shortcode mismo.
Sin embargo, ahora me doy cuenta de que este no es un buen enfoque ya que repetirá el CSS cada vez que se use el shortcode en una página. He visto varios otros enfoques en este sitio y el codex de WordPress incluso tiene dos ejemplos propios, por lo que es difícil saber qué enfoque es más consistente y rápido.
Aquí están los métodos que conozco actualmente:
Método 1: Incluir directamente en el shortcode - Esto es lo que estoy haciendo actualmente en el plugin, pero no parece bueno ya que repite código.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simplemente cargar o imprimir los scripts/estilos en el shortcode mismo */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Método 2: Usar clase para cargar scripts o estilos condicionalmente
class My_Shortcode {
static $add_script;
static function init() {
add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
add_action('init', array(__CLASS__, 'register_script'));
add_action('wp_footer', array(__CLASS__, 'print_script'));
}
static function handle_shortcode($atts) {
self::$add_script = true;
// manejo del shortcode aquí
}
static function register_script() {
wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}
static function print_script() {
if ( ! self::$add_script )
return;
wp_print_scripts('my-script');
}
}
My_Shortcode::init();
Método 3: Usando get_shortcode_regex();
function your_prefix_detect_shortcode() {
global $wp_query;
$posts = $wp_query->posts;
$pattern = get_shortcode_regex();
foreach ($posts as $post){
if ( preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
&& array_key_exists( 2, $matches )
&& in_array( 'myshortcode', $matches[2] ) )
{
// css/js
break;
}
}
}
add_action( 'wp', 'your_prefix_detect_shortcode' );
Método 4: Usando has_shortcode();
function custom_shortcode_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'myshortcode') ) {
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');
Olvidé que hice esta pregunta el año pasado, pero de hecho también había comenzado a hacerlo de esta manera en muchos casos. Es como combinar el método 1 y 2.
Bryan Willis
Este método carga el CSS en el pie de página, lo cual seguramente tiene limitaciones, ¿no?
Jacob Raccuia
Esta es absolutamente la forma correcta de hacerlo. Usa este método cada vez que necesites cargar condicionalmente un script o hoja de estilo cuando el hook wp_enqueue_scripts ya haya ocurrido. (Los shortcodes se analizan durante the_content que es parte del hook the_post, lo que significa que encolarlos cuando se analizan es demasiado tarde a menos que ya hayas registrado el script).
JRad the Bad
Esto no es útil ya que crea FOUT cuando el estilo se carga en la función del shortcode. Es mejor usar el método has_shortcode.
Adeel Raza
Vale la pena mencionar aquí que las etiquetas <style> en el cuerpo del documento ahora son válidas según la especificación W3C. https://www.w3.org/TR/html52/document-metadata.html#the-style-element
Isaac Lubow
@IsaacLubow Actualmente (2023): Contextos en los que este elemento puede usarse: En un elemento noscript que sea hijo de un elemento head. Validé <style> dentro de <body> en https://validator.w3.org/nu/#textarea pero el resultado es Error: Elemento style no permitido como hijo del elemento body en este contexto.
vee
Pero <link> dentro de <body> pasa la validación.
vee
Este método carga estilos debajo del footer. Generalmente es mejor ponerlos en el head.
leclaeli