Guida introduttiva agli shortcode e agli snippet di esempio di WordPress

Gli shortcode di WordPress sono stati introdotti nella versione 2.5 e ti aiutano a creare codici macro da utilizzare all'interno dei tuoi contenuti. Se ci pensi, questo è un ottimo modo per creare qualcosa come uno spot pubblicitario dinamico o un pulsante di invito all'azione nei tuoi post.

Se utilizziamo l'esempio di invito all'azione, potresti aggiungere qualcosa di simile al tuo post sul blog per mostrare il pulsante e quindi modificare l'output nel tuo file functions.php dei modelli, a cui arriveremo tra un minuto.

 [button]

Per personalizzare il pulsante, potremmo semplicemente aggiungere qualcosa come:

 [button type="twitter"]

O per renderlo ancora migliore, potremmo usare uno shortcode che lo racchiude:

 [button type="twitter"]Follow me on Twitter![/button]

Con un po' di immaginazione, ti rendi presto conto del potenziale degli shortcode e di cosa si può fare con essi. In questo articolo, ti mostrerò come creare e utilizzare questi tre diversi tipi di codici brevi, quindi mostrerò alcuni codici brevi pronti per l'uso da utilizzare sul tuo sito WordPress.

Creazione di uno shortcode a chiusura automatica

Lo shortcode più semplice è quello a chiusura automatica. Creeremo un semplice collegamento al nostro account Twitter e lo aggiungeremo a un post del blog.

Tutto il codice va in functions.php , che si trova in /wp-content/themes/your-theme/ . Se non ne hai uno, crealo e inserisci il codice.

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

Utilizzo:

 [button]

Semplicemente usando la funzione add_shortcode() , possiamo collegare qualsiasi funzione PHP al nostro shortcode. In questo semplice esempio, tutto ciò che facciamo è restituire un collegamento al nostro account Twitter, ma facciamo un ulteriore passo avanti e aggiungiamo alcuni parametri.

Creazione di uno shortcode a chiusura automatica con parametri

Shortcode ha il supporto per i parametri, che ci consente di personalizzare l'output. In questo esempio, abbiamo due pulsanti diversi, quindi dobbiamo definire quale pulsante vogliamo mostrare.

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

Ora puoi scegliere quale pulsante visualizzare definendo il type nel tuo shortcode.

 [button type="twitter"] [button type="rss"]

Questo è fantastico. Ma se volessimo cambiare il testo? Potremmo continuare ad aggiungere tipi di shortcode come [button type="twitter-2"] e così via, ma non è molto dinamico, vero? Vediamo come farlo nel modo giusto.

Creazione di uno shortcode di inclusione

Lo shortcode che lo racchiude ti consente di incorporare il contenuto all'interno del tuo shortcode, proprio come BBCode se l'hai mai usato.

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Per utilizzare questo shortcode, incorpora il testo che desideri utilizzare in questo modo:

 [button]Follow me on Twitter![/button]

Per rendere questo pulsante ancora migliore, potremmo aggiungere parametri come abbiamo fatto nell'esempio precedente. Aggiungiamo due parametri questa volta, uno per il nome utente di Twitter e uno per lo stile del pulsante. Quindi possiamo avere diversi tipi di pulsanti e scegliere a quale account Twitter vogliamo collegare il pulsante.

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Utilizzo:

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>

Ora abbiamo un pulsante personalizzabile che possiamo collegare a qualsiasi account Twitter. Come sono sicuro che capirai, puoi creare codici brevi molto più avanzati di questo, ma questo è un buon inizio.

Shortcode nei widget e nei file modello

Ora, quando hai visto la potenza degli shortcode, probabilmente ti starai chiedendo perché non puoi usarli nei tuoi widget e nei tuoi file modello. Bene, si scopre che puoi.

Per attivare gli shortcode nei tuoi widget, inserisci il seguente codice in functions.php:

 add_filter('widget_text', 'do_shortcode')

E per utilizzare uno shortcode nei file modello, puoi accedervi utilizzando:

 do_shortcode("[button]");

Shortodi pronti all'uso

Ecco alcuni fantastici shortcode che puoi implementare subito.

Codice nei post

Se gestisci un blog incentrato sulla programmazione, probabilmente vorrai visualizzare il codice nei tuoi post.

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

Utilizzo:

 [code]<?php echo 'Hello World!'; ?>

Incorpora Adsense ovunque nei tuoi post

Con questo shortcode, puoi aggiungere un annuncio Google ovunque sui tuoi post semplicemente utilizzando [adsense] .

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

Incorpora il video di YouTube

Questo shortcode ti consentirà di incorporare i video di YouTube nei post del tuo blog.

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

Utilizzo:

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

Shortcode per la donazione di Paypal

Questo è uno shortcode che ti aiuta a creare link per le donazioni al tuo account Paypal.

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

Utilizzo:

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

Nota privata agli autori

Quest'ultimo è intelligente. Con questo shortcode, puoi creare note nei tuoi post che solo gli autori possono vedere.

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

Conclusione

Dopo aver letto questo articolo, spero che tu ami gli shortcode di WordPress tanto quanto me e spero che inizierai a implementarli nel tuo blog.