Utilizzo di Shortcodes per accelerare la pubblicazione di servizi più popolari

Oggi vedremo come utilizzare gli shortcode in combinazione con una varietà di servizi popolari, inclusi siti come YouTube e Flickr, ricapitolando prima come creare uno shortcode e come convertire quel codice di terze parti in qualcosa che può essere ripetuto e manipolato.

Abbiamo già parlato di shortcode già qui su WPTuts +, discutendo i vantaggi del loro utilizzo e di come effettivamente, beh, li usiamo. Gli shortcode sono effettivamente scorciatoie (come definite dagli stessi WordPress) che consentono di ottenere un risultato ripetutamente con il minor lavoro possibile. Nella loro forma più semplice, uno shortcode include un codice che hai collegato a WordPress in un altro file, a volte il prodotto di una terza parte, come un video di YouTube o un flusso di Flickr.


Riepilogo: creazione di uno shortcode di base

Se non hai familiarità con gli shortcode, probabilmente dovresti smettere di leggere questo articolo e dare un'occhiata a uno degli altri articoli che abbiamo qui su Tuts + sugli shortcode in WordPress.

  • Guida introduttiva agli shortcode di WordPress
  • Shortcode WordPress: il modo giusto
  • Resoconto delle risorse! 20 Creazione di codici brevi da utilizzare nei progetti

Un codice corto viene creato aggiungendo una funzione al tuo functions.php file, quindi collegandolo come shortcode. L'esempio seguente crea un collegamento all'hub di AppStorm.

 function link_to_appstorm ($ atts, $ content = null) return 'AppStorm';  add_shortcode ('appstorm', 'link_to_appstorm');

Per usarlo, usiamo la forma più semplice di uno shortcode senza attributi.

 [AppStorm]

Possiamo portare avanti questa idea introducendo un attributo, nel quale specificare un sito AppStorm specifico a cui collegarsi.

 function link_to_appstorm ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'www'), $ atts)); ritorna 'AppStorm';  add_shortcode ('appstorm', 'link_to_appstorm');

Il tempo, lo shortcode è collegato a un sottodominio di AppStorm. Specifichiamo quale sottodominio aggiungendo il posto attributo. Se non è presente alcun attributo definito nello shortcode, lo shortcode lo imposta come predefinito www che collega semplicemente alla home page principale. L'esempio di utilizzo seguente si collegherebbe a iPad.AppStorm.

 [appstorm site = "ipad"]

Come puoi vedere, gli shortcode sono piuttosto auto-esplicativi. Ciò che vogliamo fare, tuttavia, è utilizzare lo stesso principio di base di un collegamento generato da uno shortcode con un attributo da utilizzare in combinazione con un servizio di terze parti come YouTube o Flickr.


Da Incorpora a Shortcode

La conversione di un pezzo di codice statico di terze parti in uno shortcode è molto simile al metodo utilizzato per creare un collegamento. Semplicemente, creeremo una funzione che restituisce il codice come shortcode e quindi inserisce alcuni attributi per personalizzarlo.


Passaggio 1. Creazione di uno shortcode non variabile

Il primo passo che dovremmo fare è prendere il normale codice di incorporamento e creare una semplice funzione di ritorno.

 function youtube_video ($ atts, $ content = null) return '';  add_shortcode ('youtube', 'youtube_video');

uso

 [Youtube]

Allo stesso modo abbiamo creato il primo collegamento non variabile nel primo esempio, la parte di codice precedente incorpora un video di YouTube che non cambierà affatto. E come funziona è abbastanza auto-esplicativo.


Passaggio 2. Introduzione di alcuni attributi

In sostanza, la parte di codice nel passaggio precedente produrrà un risultato identico a se il codice restituito è stato incollato nell'editor stesso. A meno che non si intenda incorporare regolarmente lo stesso video ancora una volta, questo shortcode è probabilmente inutile. Pertanto, vogliamo introdurre alcuni attributi da tradurre in parametri per il iframe.

Per ottenere questo, usiamo ancora una volta il estratto() funzione per estrarre gli attributi dallo shortcode. Nel codice seguente, lo facciamo in una forma base creando solo un attributo per sostituire l'ID del video.

 function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => "), $ atts)) return '';  add_shortcode ('youtube', 'youtube_video');

uso

 [Youtube]

E, proprio come sostituire l'ID del video, possiamo fare lo stesso per la larghezza e l'altezza. Questa è l'ora in cui dovrai assicurarti di fornire valori predefiniti, tuttavia, nel caso in cui l'utente non fornisca un valore di larghezza o altezza.

 function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360'), $ atts)) return '';  add_shortcode ('youtube', 'youtube_video');

uso

 [Youtube]

Passaggio 2b. Parametri aggiuntivi

YouTube ha parametri aggiuntivi che possono essere aggiunti all'URL, come ad esempio la riproduzione automatica. Ovviamente, questi possono essere applicati anche al codice restituito, con il loro attributo se necessario. Generalmente, questo è autoesplicativo ed è dimostrato sotto (le parti aggiunte sono in grassetto).

 function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts));';  add_shortcode ('youtube', 'youtube_video');

uso

 [Youtube]

Passaggio 3. Fatto!

È davvero così semplice e, come vedrai nel prossimo riepilogo, è possibile utilizzare lo stesso metodo di base per creare codici brevi per altri servizi di terze parti.


Ulteriori esempi

Tutti questi incorporamenti di terze parti sono stati creati utilizzando gli stessi passaggi precedenti. Naturalmente, come nel passaggio 2b, è possibile aggiungere ulteriori parametri a piacere.


Vimeo

Un video Vimeo è incorporato praticamente allo stesso modo di un video di YouTube, attraverso un video iframe con variabili di larghezza e altezza. L'unica aggiunta è la variabile cromatica per personalizzare il giocatore.

 function vimeo_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'color' => '59a5d1 '), $ atts));';  add_shortcode ('vimeo', 'vimeo_video');

uso

 [Vimeo]

Twitter (profilo)

Il widget profilo di Twitter è un pezzo di JavaScript, con una tonnellata di attributi diversi, tutti sostituiti da attributi shortcode nel codice qui sotto. Perché ce ne sono così tanti, potresti volerli rimuovere e sostituirli con valori costanti (come lo stile) nel JavaScript reale, o semplicemente cambiare gli attributi predefiniti nell'array e dimenticarti di usarli nel shortcode.

 function twitter_widget ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'width' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=>' cccccc ',' listbgcolor '=>' eeeeee ',' textcolor '=>' 333333 ',' linkcolor '=>' 639ee3 ',' hashtags '=>' true ',' scrollbar ' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts));  ';  add_shortcode ('twitter', 'twitter_widget');

uso

Tutti questi attributi shortcode hanno valori predefiniti, tranne il nome utente richiesto. Riguardo a cosa inserire effettivamente nell'attributo, sono tutti auto-esplicativi fino a hashtags in cui il resto è solo vero / falso.

 [Twitter]

Tweet (pulsante)

Il pulsante Tweet è un popolare pulsante di condivisione social per Twitter.

 function tweet_button ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'url' =>", 'style' => 'none'), $ atts)); ritorno 'Tweet';  add_shortcode ('tweetbutton', 'tweet_button');

uso

I primi due attributi del pulsante tweet non sono realmente ambigui. L'ultimo imposta lo stile anche per il pulsante tweet orizzontale, verticale o nessuna.

 [Tweetbutton]

Facebook come e pulsanti di invio

Come il pulsante Tweet, i pulsanti Mi piace e Invia sono i pulsanti di condivisione social per Facebook. Si noti che questi pulsanti richiedono anche l'SDK JavaScript a cui si fa riferimento da qualche parte nella pagina corrente.

 function facebook_buttons ($ atts, $ content = null) extract (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => 'arial'), $ atts)); ritorno '
'; add_shortcode ('like', 'facebook_buttons');

uso

I diversi attributi per l'uso sono spiegati sulla pagina associata di Facebook, ma in sostanza, la larghezza è scritta nello stesso formato di prima, showfaces è un valore vero / falso se mostrare i volti dei "mi piace", combinazione di colori è scuro o chiaro e il font è, beh, un font.

Poiché XFBML mira automaticamente alla pagina corrente, non è necessario avere attributi in uso, il che significa che lo shortcode può essere semplice come nell'esempio seguente.

 [piace]

Flickr Badge

Il badge Flickr è un modo per visualizzare le tue foto recenti da Flickr. Sfortunatamente, il widget Flickr ha il proprio CSS (anche se puoi facilmente spostarlo nel tuo foglio di stile) e usa le tabelle per il layout. Una volta che hai finito di sentirti molto frustrato per questa pratica, ecco lo shortcode.

 function flickr_widget ($ atts, $ content = null) extract (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'random', 'size' =>), $ atts)); return '  
www.colpo di frustar.com
'; add_shortcode ('flickr', 'flickr_widget');

uso

Il widget di Flickr ha quattro variabili di base, il ID utente è l'id dell'utente (nel formato 12345678 @ N01), il num è il numero di foto mostrate, il ordinare è o più recente o casuale e si riferisce a come le foto mostrate sono determinate e le taglia è s (un piccolo quadrato), t (una miniatura) o m (medio).

 [Flickr]

Incartare

Spero di aver spiegato come creare uno shortcode nel contesto di un servizio di terze parti. È abbastanza semplice, abbiamo solo bisogno di capire come funziona il codice originale e scambiare le variabili statiche per gli attributi. Ciò consente di risparmiare tempo, ma, cosa forse ancora più importante, significa che il codice può essere modificato in un secondo momento mantenendo i parametri che consentono di cambiare, ad esempio, la larghezza in una data successiva attraverso tutti gli usi del particolare shortcode.