Articles

La Guida completa alla creazione di codici brevi personalizzati in WordPress

WordPress shortcodes sono utilizzati per 1) ridurre la quantità di codice è necessario scrivere; 2) semplificare l’utilizzo di plugin WordPress, temi e altre funzioni. Si comportano come macro, quando si inserisce uno shortcode, viene sostituito con un frammento di codice. Potrebbe essere qualsiasi cosa.

WordPress viene fornito con alcuni codici brevi predefiniti, come e, e sono inclusi anche con molti plugin e temi popolari. Puoi anche creare i tuoi codici brevi personalizzati per fare cose come creare colonne sul tuo sito web WordPress.

In questo post, ti porteremo passo dopo passo attraverso il processo di creazione e utilizzo dei tuoi codici brevi personalizzati. Ti guideremo attraverso l’intero processo di creazione di un nuovo shortcode e ti mostreremo come modificare e controllare gli attributi e le funzioni shortcode.

Si prega di notare che questo è un post più avanzato che entrerà nei dettagli su come creare codici brevi. Se lavorare con il codice è al di là della vostra esperienza tecnica, e si desidera solo il modo più semplice per iniziare con la creazione e l’utilizzo di codici brevi si consiglia di iniziare con un plugin shortcode.

Quando crei i tuoi shortcode, ci sono due cose che devi fare:

  1. Crea la funzione shortcode handler. Una funzione shortcode è una funzione che prende parametri opzionali (attributi) e restituisce un risultato.
  2. Registrare la funzione shortcode gestore. Utilizzare il built-in WordPress add_shortcut funzione per registrare codici brevi personalizzati.

Preparazione di WordPress per codici brevi personalizzati

Anche se non è necessario, è una buona idea mantenere i codici brevi personalizzati nel proprio file. In alternativa, puoi aggiungerli al file functions.php del tuo tema.

Per prima cosa, crea un nuovo file chiamatocustom-shortcodes.php e salvalo nella stessa cartella del filefunctions.php del tuo tema.

Quindi, all’interno del file appena creato, aggiungere il seguente blocco di codice:

<?php ?>

Quindi, aprire il file functions.php e aggiungere la seguente riga di codice:

include('custom-shortcodes.php');

Ora sei pronto per iniziare ad aggiungere i codici brevi personalizzati.

Codici brevi di base

In questo primo esempio, stiamo andando a creare un shortcode WordPress di base che inserisce il Giorno dell’immagine Indie avatar qui sotto.

Creazione dello shortcode

Il primo passo è creare la funzione shortcode. All’interno del file custom-shortcodes.php, aggiungere il seguente blocco di codice:

function dotiavatar_function() { return '<img src="http://dayoftheindie.com/wp-content/uploads/avatar-simple.png" alt="doti-avatar" width="96" height="96" class="left-align" />';}

Nell’esempio di codice precedente, la funzionedotiavatar_functionrestituisce un’immagine predeterminata denominataavatar-simple.png.

Il passo successivo è quello di registrare lo shortcode con WordPress utilizzando la funzione integrata add_shortcode. Ancora dentro custom-shortcodes.php, aggiungi la seguente riga di codice:

add_shortcode('dotiavatar', 'dotiavatar_function');

Quando si registra un shortcode utilizzando il add_shortcode funzione, si passa il shortcode tag ($tag) e che la funzione corrispondente ($func)/gancio che verrà eseguito ogni volta che viene utilizzato il collegamento.

In questo caso, il tag di scelta rapida è dotiavatar e il gancio è dotiavatar_function.

Nota: quando si nominano i tag, utilizzare solo lettere minuscole e non usare trattini; i caratteri di sottolineatura sono accettabili.

Utilizzando il Shortcode

Ora che avete lo shortcode creato e registrato, è il momento di provarlo! Ogni volta che si desidera che il DOTI avatar di apparire all’interno il contenuto del post, è possibile usare gli shortcode invece:

codici brevi con Parametri (Attributi)

Nell’esempio precedente, non c’era molto spazio per cambiare le cose. Diciamo che, invece di spingere una singola immagine, vorremmo essere in grado di impostare quale immagine usare usando un parametro. Puoi farlo aggiungendo alcuni attributi ($atts).

Ancora una volta, all’interno di custom-shortcodes.php, aggiungi un’altra funzione, in questo modo:

function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}

La funzione sopra accetta un singolo parametro: rating. Se un valorerating non viene passato, utilizza un valore di stringa predefinito di5. Lo fa scartando la matrice di attributi usando la funzione shortcode_atts incorporata e combinando i valori predefiniti con i valori che potrebbero essere stati passati nella funzione.

non dimenticare di registrare il codice:

add_shortcode('dotirating', 'dotirating_function');

Con il shortcode funzione creata, e il gancio aggiunto, shortcode è ora pronto per essere utilizzato all’interno il contenuto del post di:

in Alternativa, è possibile omettere il rating e basta andare con il valore di default:

E che è! Ora sai come creare codici brevi WordPress a chiusura automatica. Ma c’è un altro tipo che puoi creare.

Che racchiude Shortcodes

Fino ad ora, abbiamo lavorato con shortcodes auto-chiusura. Ma c’è un altro tipo di shortcode: che racchiude codici brevi.

I codici brevi che racchiudono consentono di utilizzare un formato in stile BBCode. Cioè, uno stile simile a questo:

content

I codici brevi che racchiudono sono utili per quando è necessario manipolare il contenuto incluso. Ad esempio, diciamo che hai un particolare stile di pulsante che usi il tuo sito web; è possibile utilizzare il codice HTML per generare quel pulsante / stile ogni volta che è necessario utilizzarlo, oppure è possibile impostare un shortcode personalizzato che racchiude invece.

Utilizzando un shortcode che racchiude, sei in grado di mantenere l’attenzione sul contenuto, piuttosto che sul codice.

Creazione dello Shortcode

Ancora una volta, all’interno del filecustom-shortcodes.php, aggiungere il seguente blocco di codice:

function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}

Nel blocco di codice sopra, il$content = null viene utilizzato per identificare questa funzione come un shortcode che racchiude. E, all’interno di quella funzione, stai avvolgendo il tuo contenuto ($content) all’interno del codice HTML.

OK, ora è il momento di registrare lo shortcode:

add_shortcode('dotifollow', 'dotifollow_function');

E il gioco è fatto! Il tuo shortcode è pronto per essere utilizzato.

Usare lo Shortcode

Usare uno shortcode che racchiude non è molto diverso dall’usare uno a chiusura automatica. Come HTML, devi solo assicurarti di avere un’istruzione di apertura e una di chiusura:

Follow us on Twitter!

Naturalmente, questo è solo un esempio di base. È inoltre possibile aggiungere parametri a un shortcode che racchiude, come si fa con un shortcode auto-chiusura.

all’Interno di custom-shortcodes.php, aggiungere una funzione più:

function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}

E poi registrare il codice:

add_shortcode('dotibutton', 'dotibutton_function');

Questa nuova funzione consente di impostare un link per il pulsante utilizzando la seguente sintassi:

Shop Now!

Con che racchiude shortcode, si può fare molto con poco codice.

Una parola sui widget

Per impostazione predefinita, i codici brevi sono supportati solo nei post, nelle pagine o nei tipi di post personalizzati; non sono supportati nei widget della barra laterale. Per aggiungere il supporto per i widget, è necessario aggiungere il seguente codice al filefunctions.php:

add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );

Una volta fatto ciò, è possibile utilizzare i codici brevi nei widget, proprio come si fa in post/pagine.

Avvolgere le cose

Aggiungere i propri codici brevi non richiede un grande sforzo, soprattutto una volta capito come vengono implementati. Se vuoi saperne di più, controlla il codice WordPress.