Español
Română
РусскийCaricare Script / Stili quando è presente uno shortcode
Qual è il modo migliore per registrare/accodare script e/o stili nei plugin?
Recentemente ho creato un plugin semplice per aggiungere l'avatar/gravatar dell'utente con uno shortcode. Ho diverse opzioni di stile per visualizzare l'avatar (quadrato, rotondo, ecc.) e ho deciso di inserire il css direttamente nello shortcode stesso.
Tuttavia, ora mi rendo conto che questo non è un buon approccio poiché ripeterà il css ogni volta che lo shortcode viene utilizzato in una pagina. Ho visto diversi altri approcci su questo sito e il codex wp ha persino due esempi propri, quindi è difficile sapere quale approccio sia più coerente e veloce.
Ecco i metodi di cui sono attualmente a conoscenza:
Metodo 1: Inclusione diretta nello shortcode - Questo è quello che sto facendo attualmente nel plugin, ma non sembra buono poiché ripete il codice.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* semplicemente accoda o stampa gli script/stili direttamente nello shortcode */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Metodo 2: Utilizzo della classe per accodare script o stili condizionalmente
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;
// gestione shortcode qui
}
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();
Metodo 3: Utilizzo di 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' );
Metodo 4: Utilizzo di 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');
Ho dimenticato di aver fatto questa domanda l'anno scorso, ma in realtà avevo già iniziato a fare così in molti casi. È un po' come combinare il metodo 1 e il 2.
Bryan Willis
Questo metodo carica il CSS nel footer, il che sicuramente ha delle limitazioni?
Jacob Raccuia
Questo è assolutamente il modo giusto per farlo. Usa questo metodo ogni volta che hai bisogno di caricare condizionalmente uno script o un foglio di stile quando l'hook wp_enqueue_scripts è già avvenuto. (Gli shortcode vengono analizzati durante the_content che fa parte dell'hook the_post, il che significa che accodarli quando vengono analizzati è troppo tardi a meno che non hai già registrato lo script)
JRad the Bad
Questo non è utile in quanto crea FOUT quando lo stile viene caricato nella funzione dello shortcode. È meglio utilizzare il metodo has_shortcode.
Adeel Raza
Vale la pena notare qui che i tag <style> nel body del documento sono ora validi secondo le specifiche W3C. https://www.w3.org/TR/html52/document-metadata.html#the-style-element
Isaac Lubow
@IsaacLubow Attualmente (2023): Contesti in cui questo elemento può essere usato: In un elemento noscript che è figlio di un elemento head. Ho validato <style> all'interno di <body> su https://validator.w3.org/nu/#textarea ma il risultato è Errore: Elemento style non consentito come figlio dell'elemento body in questo contesto.
vee
Ma <link> all'interno di <body> supera la validazione.
vee
Questo metodo carica gli stili sotto il footer. Di solito è meglio inserirli nell'head.
leclaeli