¿Cuál es la manera ideal de registrar / poner en cola los scripts y / o los estilos para usarlos en complementos?
Recientemente hice un complemento complemento simple para agregar el avatar del usuario / gravatar con un código corto. Tengo diferentes opciones de estilo para mostrar el avatar (cuadrado, redondo, etc.) y decidí poner el css directamente en el código corto.
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 códice wp tiene dos ejemplos propios, por lo que es difícil saber qué enfoque es más consistente y más rápido.
Estos son los métodos que actualmente conozco:
Método 1: incluir directamente en el código abreviado - Esto es lo que estoy haciendo actualmente en el complemento, pero no parece bueno ya que repite el código.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simply enqueue or print the scripts/styles in the shortcode itself */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Método 2: utilice la clase para poner en cola los scripts o los estilos de forma condicional
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;
// shortcode handling here
}
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: usar 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: usar 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');