La guida completa agli shortcode di WordPress

Prima dell'editor di blocchi di WordPress, gli shortcode di WordPress erano una delle cose migliori per colpire l'editor di WordPress per semplificare l'aggiunta di plug-in e funzioni di temi a pagine, post e altre sezioni di un sito Web WordPress.

Con il passaggio all'editor di blocchi, cosa significa questo per la maggior parte dei vecchi plug-in e siti Web che sono ancora pieni di shortcode? Gli shortcode di WordPress funzioneranno ancora? C'è un modo per passare facilmente dall'uso degli shortcode di WordPress ai blocchi di WordPress?

Scopriamolo. In questa guida, esploreremo gli shortcode di WordPress nell'era dell'editor di blocchi di WordPress.

Cosa sono gli shortcode di WordPress?

Uno shortcode di WordPress è un bit di codice dinamico e riutilizzabile racchiuso tra [parentesi] . Gli shortcode ti consentono di inserire facilmente funzioni specifiche di WordPress stesso o di un plug-in o un tema in qualsiasi articolo, pagina, tipo di articolo personalizzato o widget. Pensa agli shortcode di WordPress come "scorciatoie" o come macro sul tuo sito web.

Puoi utilizzare gli shortcode di WordPress per visualizzare contenuti statici che sono troppo noiosi per continuare a codificare e ripetere. E puoi anche utilizzare gli shortcode per visualizzare contenuti dinamici, come gallerie di immagini, lettori audio per podcast, calendari di eventi o modifica delle statistiche per determinati dati.

Formato shortcode

Quando si tratta di inserire shortcode, il formato base [parentesi] può essere "esteso" in diversi modi, consentendo di personalizzare o aggiungere informazioni sulle impostazioni aggiuntive chiamate attributi . Inoltre, le scorciatoie possono avvolgere il testo (o HTML) o persino essere nidificate all'interno di un altro shortcode.

Ad esempio, uno shortcode può avere i seguenti formati:

[shortcode]

[shortcode]Some text[/shortcode]

[shortcode]<a href="http://mysite.com/">HTML content</a>[/shortcode]

[shortcode]Some text [another-shotcode] more text [/shortcode]

[shortcode icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/shortcode]

Attributi shortcode

Gli shortcode sono anche flessibili perché possono essere estesi con attributi . Con gli attributi, gli shortcode offrono ulteriore personalizzazione semplicemente aggiungendo frammenti di codice extra all'interno dello shortcode.

Plugin e temi offrono guide e rubriche extra per aiutare gli utenti a utilizzare gli snippet di shortcode corretti per aggiungere o rimuovere determinati elementi nell'output.

Ecco alcuni esempi di shortcode con attributi.

[[gallery id="123" size="medium"]]

[recent-posts posts="5"]

[recent-posts posts="5"]Posts Heading[/recent-posts]

Shortcode WordPress integrati

WordPress viene fornito con diversi shortcode integrati per il rendering di determinati tipi di contenuto.

[[audio]]

Lo shortcode audio ti consente di incorporare file audio e riprodurli.

[[caption]]

Utilizzato principalmente con singole immagini, lo shortcode della didascalia ti consente di avvolgere le didascalie attorno al contenuto.

[[gallery]]

Lo shortcode della galleria ti consente di aggiungere una o più gallerie di immagini ai tuoi post e alle tue pagine.

[[embed]]

Lo shortcode di incorporamento ti consente di avvolgere gli elementi incorporati con una larghezza e un'altezza massime (ma non fisse).

[[playlist]]

Lo shortcode della playlist implementa la funzionalità di visualizzazione di una raccolta di file audio o video di WordPress in un post.

[[video]]

Lo shortcode video consente di incorporare file video e riprodurli.

Plugin e codici brevi del tema

Temi e plug-in specifici di WordPress hanno shortcode già pronti all'uso che puoi inserire nel post o nell'editor di pagine e renderanno il risultato sul front-end. Ad oggi, molti temi e plugin utilizzano ancora gli shortcode.

Ad esempio, gli shortcode vengono spesso utilizzati nei plug-in comuni per calendari, moduli, tabelle, abbonamenti, timer per il conto alla rovescia o virgolette. Esistono anche plug-in shortcode che ti consentono di creare shortcode per qualsiasi cosa.

I temi di WordPress possono anche utilizzare shortcode per eseguire il rendering di determinati contenuti dinamici pre-stilati o forniti da essi.

Shortcode personalizzati

La maggior parte degli sviluppatori esperti sceglie di creare i propri shortcode, essenzialmente riducendo il tempo necessario per codificare qualcosa che è ripetitivo. Tutto ciò che serve è un semplice file aggiuntivo nella directory dei file per creare il file custom-shortcodes.php . Se vuoi imparare le basi degli shortcode personalizzati, ecco una guida sulla creazione di shortcode personalizzati.

L'API degli shortcode di WordPress

Per gli sviluppatori che creano i propri shortcode personalizzati, l'API degli shortcode di WordPress fornisce un semplice set di funzioni per la creazione di shortcode di WordPress da utilizzare in articoli e pagine.

L'API Shortcode aiuta gli sviluppatori di plug-in a creare contenuti dinamici che gli utenti possono aggiungere a pagine o post aggiungendo lo shortcode corrispondente nell'area dei contenuti. Per fortuna, l'API gestisce tutte le complicate analisi, eliminando la necessità di scrivere un'espressione regolare personalizzata per ogni shortcode. Inoltre, sono incluse funzioni di supporto per l'impostazione e il recupero degli attributi shortcode predefiniti.

Gli sviluppatori possono consultare la documentazione dell'API di WordPress Shortcode per saperne di più su:

• Attributi di gestione
• Produzione
• Shortcode con chiusura automatica e con chiusura automatica
• Riferimento funzione
• Limitazioni
• sintassi formale

Shortcode nell'editor classico

In passato, gli shortcode venivano inseriti nell'editor classico di qualsiasi post o pagina, in questo modo:

Cosa sono i blocchi di WordPress?

Gli shortcode sono stati prima... ma poi è arrivato l'editing basato su blocchi. Con l'introduzione di WordPress 5.0 è arrivata l'implementazione del pianificato editor Gutenberg o WordPress Block Editor come pagina principale e editor di post per WordPress, sostituendo il classico editor di testo di WordPress che esiste da anni.

Ecco uno sguardo all'editor di contenuti prima di WordPress 5.5 (ah, quelli erano i giorni!)

L'editor Gutenberg è stato annunciato per la prima volta nelle versioni precedenti di WordPress, ma è rimasto facoltativo fino a WordPress 5.0, quando è diventato l'editor predefinito.

Non c'è niente di intrinsecamente sbagliato nel nuovo editor bloccato. In effetti, alla maggior parte degli utenti piace l'aspetto migliorato e più pulito, meno intimidatorio, del back-end di WordPress.

Ma con l'editor di blocchi di WordPress sono arrivati ​​i blocchi di WordPress. Sono finite le opzioni di formattazione in alto che ricordano le applicazioni di elaborazione testi come Microsoft Word. Invece, le opzioni di formattazione sono state sostituite con le opzioni della barra laterale destra a schede per ogni blocco.

I blocchi di WordPress sono essenzialmente contenitori di contenuti. Esistono molti blocchi diversi per diversi tipi di contenuto: immagini, video, testi, titoli, gallerie, lo chiami.

C'è anche un blocco WordPress per la formattazione, il distanziatore e il divisore e sono disposti casualmente in categorie per un facile accesso.

Tutte le opzioni e i controlli che erano in alto ora risiedono sul lato destro dell'editor di pagine/post, con le schede in alto che indicano se vuoi vedere le opzioni per il blocco corrente da solo o per l'intero documento.

L'editor dei blocchi è più facile, veloce e facile da usare. Inoltre, gli sviluppatori di temi e plug-in stanno anche creando i propri blocchi che aggiungono più opzioni di blocco ai blocchi WordPress predefiniti.

Blocchi riutilizzabili e shortcode

Il vecchio modo per salvare una serie di output predefiniti nell'editor classico di WordPress era creare i propri shortcode. Ora, questo metodo è stato sostituito con blocchi riutilizzabili .

La possibilità di salvare blocchi predefiniti e pre-personalizzati ha anche reso più semplice salvare il layout e il design di un determinato blocco e utilizzarlo su un altro. Proprio come un modello di pagina.

Ad esempio, se aggiungi un blocco di pulsanti e lo stili con un certo colore, effetti al passaggio del mouse, ecc., Non vorrai continuare a farlo su ogni pagina a cui aggiungi quel pulsante. Se lo cambi in un blocco riutilizzabile, il pulsante viene salvato sul tuo sito WordPress e diventa un blocco a sé stante che puoi utilizzare su altre pagine o post.

Puoi anche aggiornare ulteriormente questi blocchi convertendoli in blocchi regolari, salvandolo come uno nuovo (con un nuovo nome) o aggiornando il design esistente del blocco.

Blocchi di gruppo

In WordPress 5.3 è arrivata anche l'introduzione di blocchi di gruppo e modelli.

In sostanza, ti viene data la possibilità di raggruppare determinati blocchi e spostarli o aggiornarli tutti insieme. Questo alla fine ha dato origine a schemi di blocco. I pattern a blocchi hanno semplificato la modifica del contenuto poiché gli utenti preferiscono di gran lunga scegliere un pattern e aggiornare il contenuto piuttosto che iniziare da una tela bianca.

Opzioni di stile dei blocchi

Con ogni tema vengono fornite diverse opzioni di stile. E normalmente lo stile del contenuto che aggiungi su ciascun sito è predeterminato dal tuo tema.

Con l'editor dei blocchi, hai la possibilità di aggiornare lo stile di ogni blocco individualmente, per distinguerlo o per renderlo più evidente.

Blocchi e modifica del sito completo

Con tutti questi progressi e cambiamenti nel modo in cui creiamo e costruiamo pagine su WordPress arriva l'idea e l'eventuale passaggio a ciò che viene chiamato Editing completo del sito .

Nella pasta, la maggior parte degli utenti può aggiornare solo il corpo effettivo di un post o di una pagina. Alcuni aspetti del sito Web, come l'intestazione, il piè di pagina, le barre laterali e i widget, dipendono ancora in gran parte dal tema. Questo ovviamente ha reso la ricerca del tema perfetto con la giusta quantità di opzioni l'ultima battaglia per sviluppatori e utenti di WordPress.

Con l'editing completo del sito e l'introduzione del Block Builder, la tendenza è quella di rendere tutte le sezioni di una pagina o di un post modificabili, in un certo senso, utilizzando i blocchi.

Ad esempio, l'ultimo tema Twenty-Twenty WordPress segue questo schema, offrendo ai creatori e ai proprietari di siti Web un maggiore controllo sul loro sito Web e su come vorrebbero che appaia.

Guardando al futuro, gli sviluppatori di plugin e temi dovranno adottare un approccio diverso durante lo sviluppo del loro software per adattarsi alla nuova esperienza di modifica del sito completo e di creazione di pagine dell'editor di blocchi di WordPress. Sebbene la piena applicazione di questo sia ancora all'orizzonte, è un cambiamento positivo che probabilmente vedremo prima piuttosto che dopo.

Il nuovo blocco shortcode

Prima dell'editor di blocchi, gli shortcode venivano inseriti direttamente nella pagina o nell'editor di pagine. Ora, l'editor di blocchi di WordPress include un nuovo blocco shortcode .

Il blocco shortcode semplifica la continuazione dell'utilizzo degli shortcode legacy all'interno di un articolo o di una pagina e mantiene l'integrità dell'output dello shortcode.

Il blocco shortcode può essere aggiunto a una pagina o a un post facendo clic sul pulsante Aggiungi blocco. In alternativa, puoi digitare /shortcode e premere invio.

Noterai che a differenza di altri blocchi comuni, il blocco shortcode non include alcuna impostazione specifica nella barra degli strumenti del blocco o nella barra laterale dell'editor, probabilmente a causa del fatto che gli shortcode possono essere personalizzati utilizzando i loro attributi.

Cosa significa l'editor di blocchi per gli shortcode di WordPress?

L'editor di blocchi di WordPress ha importanti implicazioni per gli shortcode. Copriamo alcune delle cose più importanti da notare sugli shortcode di WordPress nell'era dell'editor di blocchi.

1. L'editor di blocchi di WordPress cambia radicalmente la necessità e lo scopo degli shortcode per la maggior parte dei plugin e dei temi. Con un sistema di editing basato su blocchi, ogni "elemento" sulla pagina ha il proprio blocco, invece di essere contenuto in un editor WYSIWYG modificabile.

Poiché l'editor di blocchi è un approccio completamente diverso alla composizione di un articolo o di una pagina, le parti più dinamiche di una pagina generate da codici brevi possono esistere come blocchi che possono essere aggiunti individualmente.

2. I blocchi possono ora sostituire la maggior parte degli shortcode, eliminando la necessità per gli utenti di imparare a utilizzare gli shortcode. Il concetto e il formato degli shortcode potrebbero avere una curva di apprendimento ripida per alcuni utenti, quindi l'approccio a blocchi potrebbe essere più semplice.

Ad esempio, prendi il plugin Gravity Forms. Prima dell'editor dei blocchi, il processo per l'inserimento di un modulo in un articolo o in una pagina era diverso. Dall'editor classico, dovevi usare un pulsante per inserire un modulo nel tuo contenuto.

Dopo aver selezionato il modulo, lo shortcode del modulo è stato aggiunto al contenuto. A seconda delle opzioni selezionate, lo shortcode conteneva gli attributi per il titolo e la descrizione.

Ora, il plugin Gravity Forms offre un blocco di moduli incorporati. Dall'editor dei blocchi, seleziona il blocco Moduli.

Una volta selezionato il modulo, vedrai effettivamente un'anteprima migliore di come apparirà il modulo sulla tua pagina. Le impostazioni del modulo si trovano nelle impostazioni del blocco.

3. Gli sviluppatori di temi e plugin dovranno decidere il futuro delle loro implementazioni di shortcode e la conversione dei loro shortcode in blocchi. Come accennato in precedenza, centinaia di temi, plug-in e sviluppatori utilizzano ancora shortcode sui loro siti Web e applicazioni. L'adozione dei blocchi può essere lenta, ma man mano che gli utenti acquisiscono familiarità con il nuovo editor di blocchi, è probabile che gli utenti richiedano un'opzione di blocco.

Per quegli sviluppatori che sono ancora lontani dall'adottare il sistema di modifica dei blocchi di WordPress, il concetto di modifica del sito completo può andare di pari passo con i loro shortcode. Plugin come plug-in di revisione e valutazione, lettori audio, ticker di date, gallerie, moduli di contatto e la maggior parte di qualsiasi altra cosa che utilizzi ancora gli shortcode sono ancora "nel gioco".

4. Gli shortcode non scompariranno presto. Questo è probabilmente il motivo per cui l'editor di blocchi di WordPress offre il blocco shortcode per aiutare a mantenere l'utilizzo dello shortcode. Poiché gli shortcode avevano un utilizzo e un'implementazione così ampi prima di WordPress 5.0 e dell'editor di blocchi, è importante che le versioni future di WordPress supportino ancora gli shortcode.

5. Gli shortcode possono essere convertiti in un blocco . Hai un tema o un plug-in preferito che utilizza gli shortcode? È probabile che quegli shortcode verranno convertiti in un blocco ad un certo punto. Se sei uno sviluppatore di un plugin o di un tema, o crei siti Web WordPress e utilizzi shortcode in un tema personalizzato, è possibile ripensare gli shortcode come blocchi.

Nella prossima sezione, tratteremo brevemente come convertire gli shortcode di WordPress in blocchi di WordPress.

Come convertire gli shortcode di WordPress in blocchi di WordPress

Proprio come puoi aggiungere shortcode personalizzati e blocchi riutilizzabili, puoi anche convertire facilmente shortcode WordPress personalizzati in blocchi WordPress.

Segui i primi passaggi di questa guida shortcode personalizzata.

Prendi questo esempio di base da Caldera Forms:

 <?php /** * Handler for [cl_post_title] shortcode * * @param $atts * * @return string */ function caldera_learn_basic_blocks_post_title_shortcode_handler($atts) { $atts = shortcode_atts([ 'id' => 0, 'heading' => 'h3', ], $atts, 'cl_post_title'); return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]); } /** * Output the post title wrapped in a heading * * @param int $post_id The post ID * @param string $heading Allows : h2,h3,h4 only * * @return string */ function caldera_learn_basic_blocks_post_title($post_id, $heading) { if (!in_array($heading, ['h2', 'h3', 'h4'])) { $heading = 'h2'; } $title = get_the_title(absint($post_id)); return "<$heading>$title</$heading>"; } /** * Register Shortcode */ add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

Questo codice prende l'ID del post e un livello di intestazione (h2, h3, he) e restituisce il titolo del post racchiuso nell'HTML per l'intestazione.

Una volta fatto questo e aver verificato che il codice funziona, devi registrare lo shortcode come blocco. Ecco la guida passo passo per convertire uno shortcode di WordPress in un blocco Gutenberg come esempio.

Altre risorse sulla creazione di blocchi WordPress

Ci sono numerosi plugin e risorse disponibili online che ti aiuteranno a raggiungere questo passaggio, inclusa la documentazione ufficiale di WordPress sulla scrittura del tuo primo tipo di blocco. Puoi controllare anche il post di Igor Benic su come creare un blocco per la visualizzazione dei post.

Dopo aver letto queste guide, sarai in grado di capire come creare i tuoi blocchi WordPress usando i tuoi shortcode personalizzati.

Il verdetto per gli shortcode di WordPress

Gli shortcode di WordPress sono e saranno ancora una delle parti più importanti di WordPress. Gli shortcode hanno aiutato molti sviluppatori di plugin a rendere i loro plugin più user-friendly e molti sviluppatori di temi estendono le funzionalità dei loro temi. Gli shortcode hanno anche ridotto il numero di grattacapi che molti creatori di contenuti e proprietari di siti web hanno dopo aver creato i loro shortcode personalizzati quando si tratta di aggiungere e aggiornare ripetutamente le cose che desiderano.

Detto questo, non c'è dubbio che l'editor di blocchi sia il futuro dell'esperienza di modifica di WordPress, quindi aspettati di vedere più sviluppatori contribuire a renderlo migliore e ancora più ricco di funzionalità, compresi quelli che stanno ancora utilizzando gli shortcode. Guardando al futuro, ci aspettiamo che più sviluppatori passeranno all'utilizzo e all'aggiunta di blocchi WordPress invece degli shortcode di WordPress.

Ci auguriamo che tu abbia imparato molto sull'importanza degli shortcode di WordPress, a cosa servono e quando usarli. Si spera che tu possa iniziare a creare i tuoi shortcode personalizzati e alla fine i tuoi blocchi, che sicuramente non scompariranno presto.

Kristen Wright

Kristen scrive tutorial per aiutare gli utenti di WordPress dal 2011. Di solito puoi trovarla mentre lavora su nuovi articoli per il blog iThemes o sviluppa risorse per #WPprosper. Al di fuori del lavoro, a Kristen piace scrivere nel diario (ha scritto due libri!), fare escursioni e campeggiare, cucinare e avventure quotidiane con la sua famiglia, sperando di vivere una vita più presente.