Vuoi imparare a creare uno shortcode in WordPress?
Imparare a creare uno shortcode in WordPress può essere un modo efficace per personalizzare i tuoi post e le tue pagine. Tuttavia, se sei nuovo nel processo, potresti avere difficoltà a capire come utilizzare tale funzionalità sul tuo sito web.
Ecco perché abbiamo messo insieme una guida per aiutarti a iniziare. Osservando come funzionano gli shortcode e come applicarli in modo efficace, puoi iniziare a personalizzare i tuoi contenuti a tuo piacimento senza la necessità di plug-in aggiuntivi.
In questo articolo, discuteremo cosa sono gli shortcode di WordPress e perché potresti considerare di utilizzarli. Quindi ti mostreremo come crearne uno tuo.
Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog
Quindi torniamo al perché siamo qui.
Cosa sono gli shortcode di WordPress?
Gli shortcode di WordPress agiscono come scorciatoie che ti consentono di incorporare rapidamente elementi in un post o in una pagina. Di solito si tratta di una singola riga di codice racchiusa tra parentesi quadre. Per esempio :
[exemplecodehortcode]Questo codice mostrerà una funzione predeterminata sul front-end del tuo sito web.
WordPress codici brevi introdotti per la prima volta con il rilascio di API di shortcode. Ciò ha reso facile per gli utenti aggiungere elementi interessanti ai propri post e pagine, ad esempio Google Maps o il pulsante "Mi piace" di Facebook.
Esiste in WordPress predefinitot sei codici brevi :
- didascalia: avvolgi le didascalie attorno al contenuto
- galleria : mostra le gallerie di immagini
- audio: incorpora e riproduce file audio
- vidéo : incorpora e riproduce file video
- playlist : visualizza una raccolta di file audio o video
- incastrare : avvolge gli elementi in linea
Ti imbatterai anche in due tipi di base di formattazione dello shortcode: self-closing et enclosing.
codici brevi self-closing possono stare in piedi da soli e non hanno bisogno di un tag di chiusura.
Nel frattempo, enclosing circonda il contenuto che desideri modificare e ti obbliga a chiudere manualmente il tag. Ad esempio, puoi incorporare un video di YouTube racchiudendo l'URL tra i tag embed et /embed :
Ad esempio, questo creerebbe il seguente risultato:
Alcuni dei migliori plugin di WordPress venire con i propri codici brevi. Per esempio, Moduli WP et Contattare 7 Modulo hanno codici brevi che ti consentono di incorporare rapidamente a modulo di contatto in un post o in una pagina. Puoi anche usare un plugin come MaxButtons per aggiungere uno shortcode del pulsante dove vuoi sul tuo sito web.
Perché dovresti considerare l'utilizzo di codici brevi di WordPress?
Ci sono molte ragioni per cui puoi utilizzare gli shortcode di WordPress. Ad esempio, è più facile e veloce dell'apprendimento e della scrittura di un lungo pezzo di codice in HTML. Inoltre, ti aiutano a mantenere i tuoi contenuti puliti e accessibili.
Gli shortcode possono essere utilizzati per automatizzare determinate funzioni che utilizzi ripetutamente. Ad esempio, se usi un pulsante invito all'azione (CTA) su ogni tuo articolo, avere uno shortcode dedicato pronto può essere una soluzione rapida e conveniente.
Va detto che Editore di Gutenberg funziona allo stesso modo, basandosi sull'uso di codici brevi. Consente agli utenti di WordPress di aggiungere diverse funzionalità interattive attraverso l'uso di blocchi.
Un tale metodo è molto più adatto ai principianti perché puoi aggiungere contenuti direttamente sull'interfaccia utente. Tuttavia, l'editor di blocchi di WordPress è ancora limitato in ciò che offre. Fortunatamente, viene fornito con un blocco Codice breve, che ti consente di aggiungere contenuti personalizzati alle tue pagine.
Come creare uno shortcode in WordPress
Se hai già conoscenze di programmazione, puoi creare i tuoi codici brevi personalizzati. Questo ti dà il pieno controllo sull'aspetto e sulla funzionalità del tuo sito web.
Vediamo come creare uno shortcode WordPress personalizzato. In questo tutorial, aggiungeremo i collegamenti ai social media a un articolo come esempio.
Passaggio 1: crea un nuovo file del tema
Prima di iniziare, è una buona idea eseguire il backup completo del tuo sito Web WordPress. Dovrai anche creare un file separato per il tuo shortcode personalizzato al di fuori del file functions.php vostre tema WordPress. Ciò fornirà una soluzione di riserva nel caso qualcosa vada storto.
Puoi usare un client FTP (File Transfer Protocol) come fileZilla per accedere ai file del tema del tuo sito web. Una volta effettuato l'accesso al tuo sito web, vai su wp-content> temi e individua la cartella del tema corrente. Nel nostro esempio, questo sarà gufo:
Apri la tua cartella tema WordPress, fare clic destro su di esso e premere Crea un nuovo file.
Assegna un nome al tuo nuovo file custom-shortcodes.php quindi fare clic su OK. È quindi possibile modificarlo facendo clic con il pulsante destro del mouse e selezionando l'opzione Visualizza/Modifica :
Questo aprirà il file nel tuo editor di testo predefinito. Quindi devi solo aggiungere il seguente blocco di codice:
<?php ?>
Ciò garantisce che il tuo nuovo file venga interpretato come PHP, che è il linguaggio di scripting su cui è basato WordPress.
È quindi possibile salvare le modifiche e chiudere il file. Assicurati di selezionare la seguente casella per assicurarti che venga aggiornata sul server e applicata al tuo sito web:
Quindi apri il file functions.php nella stessa cartella del tema e aggiungi la seguente riga di codice in fondo al documento:
include('shortcodes-personnalises.php');
Questo dirà al sistema di includere tutte le modifiche apportate al file custom-shortcodes.php all'interno functions.php pur permettendoti di separarli. Quando sei pronto, salva le modifiche e chiudi il file.
Passaggio 2: creare la funzione shortcode
Successivamente, dovrai creare la funzione shortcode, indicandogli cosa fare. Seleziona di nuovo l'opzione Visualizza/Modifica del tuo file custom-shortcodes.php. Usa il frammento di codice seguente per aggiungere un'azione a cui agganciare la tua funzione:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Successivamente, dovrai aggiungere una funzione di callback, che verrà eseguita quando l'azione hook viene attivata. L'aggiunta della seguente riga di codice subito dopo quella sopra menzionata indicherà a WordPress che la tua funzione è uno shortcode:
add_shortcode('sabonner', 'subscribe_link');Quando crei uno shortcode usando la funzione add_shortcode, assegni un tag shortcode “ ($tag) " e un corrispondente hook di funzione " ($func) che verrà eseguito ogni volta che viene utilizzata la scorciatoia.
In altre parole, se il tag shortcode è [subscribe], allora l'hook 'sottoscrivi_link' reindirizza il visitatore all'URL fornito.
Quindi l'intero codice che usi nel tuo file shortcodes-personnalises.php sarà simile a questo:
Va notato che quando si nominano i tag, è necessario utilizzare solo lettere minuscole, sebbene sia possibile utilizzare caratteri di sottolineatura. È anche cruciale evita di usare i trattini, poiché potrebbe interferire con altri codici brevi.
Passaggio 3: aggiungi lo shortcode a chiusura automatica al sito Web
Ora puoi testare il tuo codice iniziale come shortcode a chiusura automatica sul tuo sito WordPress. Utilizzando l'editor di blocchi di WordPress, puoi inserire il tag [subscribe] direttamente nel post:
Questo mostrerà i seguenti contenuti ai visitatori del tuo sito web:
Se sei soddisfatto di questo shortcode, non devi fare nient'altro. Tuttavia, se desideri personalizzarlo, puoi saltare al passaggio successivo.
Passaggio 4: aggiungere parametri allo shortcode
È possibile adattare lo shortcode "sottoscrivi" per funzionalità aggiuntive per visualizzare altri collegamenti ai social media. Puoi farlo aggiungendo un parametro per modificare l'URL.
Per aggiungere attributi di gestione, è necessario aprire il file custom-shortcodes.php e aggiungi il seguente codice:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Ciò ti consentirà di personalizzare i collegamenti nel tag shortcode per aggiungerli all'editor Gutenberg. Puoi incollarlo sul codice precedente nel file codici-brevi-personalizzati.php. Dovrebbe assomigliare a qualcosa di simile a questo:
Aggiungendo il funzione shortcode_atts() combinerà gli attributi utente con tutti gli attributi conosciuti e tutti i dati mancanti verranno sostituiti con i loro valori predefiniti. Quando sei pronto, salva le modifiche e chiudi il file.
Passaggio 5: verifica le impostazioni
Ora puoi testare lo shortcode aggiornato nell'editor blocchi di WordPress. Nel nostro esempio, stiamo testando i nostri collegamenti Twitter e Facebook con i seguenti codici brevi:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Questo produrrà il seguente risultato sul front-end:
Questo shortcode a chiusura automatica mostra ai visitatori gli URL diretti dei tuoi profili social. Tuttavia, potresti volere che questa funzione appaia un po' rifinita.
Ad esempio, potrai creare una versione allegata che ti consente di personalizzare completamente l'anchor text visualizzato dagli utenti quando stanno per fare clic su di esso. Ti mostreremo come farlo nel passaggio successivo.
Passaggio 6: creare uno shortcode di inclusione
Lo shortcode che lo racchiude verrà formattato come nell'esempio di chiusura automatica precedente. Tuttavia, includerà un parametro aggiuntivo per la funzione.
Per prima cosa, dovrai aggiungere $content = null, che identifica questa funzione come uno shortcode di inclusione. È quindi possibile aggiungere il do_shortcode da WordPress, che cercherà nel contenuto gli shortcode.
Nel file custom-shortcodes.php, aggiungi il nuovo shortcode di inclusione:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Quando sei pronto, il tuo file custom-shortcodes.php dovrebbe assomigliare a questo:
Il codice precedente ha un attributo " stile " aggiuntivo, che cambierà il testo di ancoraggio in un colore blu. Non dimenticare di salvare le modifiche quando hai finito.
Passaggio 7: aggiungi lo shortcode di inclusione al sito Web
Ora puoi inserire il tuo shortcode nell'editor di blocchi di WordPress per vedere il risultato finale:
Come hai notato, puoi facilmente modificare gli URL delle tue pagine di social media e il testo di ancoraggio visualizzato al visitatore utilizzando questo shortcode wrapper. In questo caso abbiamo scelto " Facebook " et "Twitter" :
Ecco ! Ora hai creato uno shortcode personalizzato per i link di iscrizione nelle tue pagine e post. Nota che tutti i passaggi sopra menzionati possono essere modificati per creare tutti i tipi di elementi diversi utilizzando la funzione di WordPress Codici funzione.
L'aggiunta di funzionalità aggiuntive al tuo sito Web WordPress è molto più semplice con gli shortcode. Puoi usarli per personalizzare i tuoi contenuti esistenti e aggiungere funzionalità interattive, come moduli di contatto, gallerie di immagini o link di iscrizione.
Altre risorse consigliate
Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.
- Come creare un pulsante mobile con indice Z con Elementor
- Quando e come installare WordPress in una sottodirectory
- Come creare un semplice plugin per WordPress a blocchi di Gutenberg
- Come aggiungere caratteri personalizzati a un sito Web WordPress
Conclusione
In questo articolo, abbiamo imparato come creare il tuo shortcode in WordPress. Se hai dubbi o suggerimenti, faccelo sapere all'interno commentaires.
Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
