Italiano
Español
РусскийÎnregistrare Scripts / Styles când este prezent un shortcode
Care este cea mai bună modalitate de a înregistra/încărca scripturi și/sau stiluri pentru utilizarea în plugin-uri?
Recent am creat un plugin simplu pentru a adăuga avatarul/gravatarul utilizatorului cu un shortcode. Am diferite opțiuni de stil pentru afișarea avatarului (pătrat, rotund etc.) și am decis să pun CSS-ul direct în shortcode.
Totuși, îmi dau seama acum că această abordare nu este bună deoarece va repeta CSS-ul de fiecare dată când shortcode-ul este utilizat într-o pagină. Am văzut mai multe abordări pe acest site și chiar codexul WP are două exemple proprii, așa că este greu de știut ce abordare este mai consistentă și mai rapidă.
Iată metodele de care sunt conștient în prezent:
Metoda 1: Include direct în shortcode - Aceasta este ce fac momentan în plugin, dar nu pare bine deoarece repetă codul.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* pur și simplu încarcă sau afișează scripturile/stilurile în shortcode-ul în sine */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Metoda 2: Folosește clasa pentru încărcarea condițională a scripturilor sau stilurilor
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;
// manipularea shortcode-ului aici
}
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();
Metoda 3: Folosind 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' );
Metoda 4: Folosind 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');
Am uitat că am pus această întrebare anul trecut, dar de fapt am început să fac și eu în felul acesta în multe cazuri. E un fel de combinație între metoda 1 și 2.
Bryan Willis
Această metodă încarcă CSS-ul în footer, ceea ce cu siguranță are limitări?
Jacob Raccuia
Aceasta este cu siguranță metoda corectă de a face acest lucru. Folosește această metodă ori de câte ori ai nevoie să încarci condiționat un script sau o foaie de stil după ce hook-ul wp_enqueue_scripts a avut deja loc. (Shortcode-urile sunt parsate în timpul the_content, care face parte din hook-ul the_post, ceea ce înseamnă că încărcarea lor în momentul parsării este prea târziu, cu excepția cazului în care scriptul a fost deja înregistrat)
JRad the Bad
Acest lucru nu este util, deoarece creează FOUT atunci când stilul este încărcat în funcția shortcode-ului. Este mai bine să folosești metoda has_shortcode.
Adeel Raza
Este important de menționat că etichetele <style> în corpul documentului sunt acum valide conform specificației W3C. https://www.w3.org/TR/html52/document-metadata.html#the-style-element
Isaac Lubow
@IsaacLubow În prezent (2023): Contexturi în care acest element poate fi utilizat: Într-un element noscript care este copil al unui element head. Am validat <style> în interiorul <body> pe https://validator.w3.org/nu/#textarea dar rezultatul este Eroare: Elementul style nu este permis ca descendent al elementului body în acest context.
vee
Dar <link> în interiorul <body> trece de validare.
vee
Această metodă încarcă stilurile sub subsol. De obicei, este mai bine să le plasați în head.
leclaeli