Articles

Mastering WordPress Shortcode

by admin
  • 9 min leggere
  • WordPress,Essentials,codici brevi,Tecniche (WP)
  • Salvate per la lettura offline
  • Condividi su Twitter, LinkedIn
Introdotto in WordPress 2.5, i codici brevi sono potenti, ma ancora abbastanza sconosciuta WordPress funzioni. Immagina di poter digitare ” adsense “per visualizzare un annuncio AdSense o” post_count” per scoprire immediatamente il numero di post sul tuo blog.

WordPress shortcodes può fare questo e altro ancora e sarà sicuramente rendere la vostra vita di blogging più facile. In questo articolo, ti mostreremo come creare e utilizzare codici brevi, oltre a fornire codici brevi WordPress pronti all’uso che miglioreranno la tua esperienza di blogging.

Si consiglia inoltre di dare un’occhiata ai seguenti post correlati:

  • WordPress Shortcodes: Una guida completa
  • Inserimento di widget con codici brevi
  • 10 utili WordPress Loop Hack

Quali sono i codici brevi?

L’utilizzo di codici brevi è molto semplice. Per utilizzarne uno, creare un nuovo post (o modificarne uno esistente), passare l’editor alla modalità HTML e digitare uno shortcode tra parentesi, come ad esempio:

È anche possibile utilizzare gli attributi con codici brevi. Uno shortcode con attributi sarebbe simile a questo:

I codici brevi possono anche incorporare contenuti, come mostrato qui:

Smashing Magazine

I codici brevi sono gestiti da un insieme di funzioni introdotte in WordPress 2.5 chiamato Shortcode API. Quando un post viene salvato, il suo contenuto viene analizzato, e l’API shortcode trasforma automaticamente i codici brevi per eseguire la funzione che sono destinati a svolgere.

Creazione di un semplice Shortcode

La cosa da ricordare con shortcode è che sono molto facili da creare. Se sai come scrivere una funzione PHP di base, allora sai già come creare uno shortcode WordPress. Per il nostro primo, creiamo il noto messaggio “Ciao, Mondo”.

  1. Aprire le funzioni.file php nel tema. Se il file non esiste, crearlo.

  2. Per prima cosa, dobbiamo creare una funzione per restituire la stringa “Hello World”. Incolla questo nelle tue funzioni.file php:

    function hello() { return 'Hello, World!';}

  3. Ora che abbiamo una funzione, dobbiamo trasformarla in un shortcode. Grazie alla funzioneadd_shortcode(), questo è molto facile da fare. Incolla questa riga dopo la nostra funzionehello(), quindi salva e chiudi le funzioni.file php:

    add_shortcode('hw', 'hello');

    Il primo parametro è il nome shortcode e il secondo è la funzione da chiamare.

  4. Ora che viene creato lo shortcode, possiamo usarlo nei post del blog e nelle pagine. Per usarlo, basta passare l’editor alla modalità HTML e digitare quanto segue:

    Il gioco è fatto! Naturalmente, questo è uno shortcode molto semplice, ma è un buon esempio di quanto sia facile crearne uno.

Creazione di codici brevi avanzati

Come accennato, i codici brevi possono essere utilizzati con attributi, che sono molto utili, ad esempio, per passare argomenti alle funzioni. In questo esempio, vi mostreremo come creare un shortcode per visualizzare un URL, proprio come si farebbe con i BBCodes che si utilizza su forum come vBulletin e PHPBB.

  1. Apri le tue funzioni.file php. Incollare la seguente funzione in esso:

    function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}

  2. Trasformiamo la funzione in un shortcode:

    add_shortcode("url", "myUrl");

  3. Lo shortcode è ora creato. Puoi usarlo sui tuoi post e pagine:

    WordPress recipes

    Quando si salva un post, lo shortcode visualizzerà un link intitolato “WordPress recipes” e che punta ahttp://www.wprecipes.com.

Spiegazione del codice. Per funzionare correttamente, la nostra funzione shortcode deve gestire due parametri: $atts e $content$atts è l’attributo shortcode(s). In questo esempio, l’attributo è chiamato href e contiene un collegamento a un URL. $content è il contenuto dello shortcode, incorporato tra il dominio e la sottodirectory (cioè tra “www.example.com” e “/ sottodirectory”). Come puoi vedere dal codice, abbiamo dato valori predefiniti a content content e $atts.

Ora che sappiamo come creare e utilizzare codici brevi, diamo un’occhiata ad alcuni killer shortcodes ready-to-use!

Creare un “Invia a Twitter” Shortcode

Il problema. Sembra che a molti di voi sia piaciuto il mio hack “Invia a Twitter”. Mi è anche piaciuto molto quell’hack, ma ha un inconveniente: se si incolla il codice sul singolo.file php, il link” Invia a Twitter ” sarà visibile su ogni post, che potresti non volere. Sarebbe meglio controllare questo hack ed essere in grado di specificare quando aggiungerlo a un post. La soluzione è semplice: uno shortcode!

La soluzione. Questo shortcode è semplice da creare. Fondamentalmente, otteniamo il codice dall’hack” Invia a Twitter ” e lo trasformiamo in una funzione PHP. Incolla il seguente codice nelle funzioni.file php nel tema:

function twitt() { return '<div><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}add_shortcode('twitter', 'twitt');

Per utilizzare questo shortcode, è sufficiente passare l’editor in modalità HTML e quindi digitare:

e un link “Invia a Twitter” apparirà dove è stato posizionato lo shortcode.

  • Come: Creare un pulsante “invia questo a Twitter”
  • Strumenti di Twitter

Creare un Shortcode “Iscriviti a RSS”

Il problema. Sai già che un ottimo modo per guadagnare abbonati RSS è quello di visualizzare una bella scatola che dice qualcosa come “Iscriviti al feed RSS.”Ma ancora una volta, non vogliamo davvero codificare qualcosa nel nostro tema e perdere il controllo del modo in cui appare. In questo hack, creeremo un” Iscriviti a RSS ” shortcode. Visualizzalo in alcuni luoghi e non in altri, nei post o nelle pagine, sopra o sotto il contenuto principale, dipende tutto da te.

La soluzione. Come al solito, creiamo una funzione e poi la trasformiamo in uno shortcode. Questo codice entra nelle tue funzioni.file php. Non dimenticare di sostituire l’URL del feed di esempio con il tuo!

function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}add_shortcode('subscribe', 'subscribeRss');

Styling della scatola. Probabilmente hai notato la classerss-box che è stata aggiunta all’elemento div contenente il collegamento. Questo ti permette di modellare la scatola nel modo che preferisci. Ecco un esempio di alcuni stili CSS che puoi applicare alla tua casella “Iscriviti a RSS”. Basta incollarlo nello stile.file css nel tema:

.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}

Inserisci Google AdSense Ovunque

Il problema. La maggior parte dei blogger utilizza Google AdSense. È molto facile includere il codice AdSense in un file del tema come la barra laterale.PHP. Ma marketing online di successo sanno che la gente clicca di più sugli annunci che sono incorporati nel contenuto stesso.

La soluzione. Per incorporare AdSense ovunque nei tuoi post o pagine, crea uno shortcode:

  1. Apri le funzioni.file php nel tema e incollare il seguente codice. Non dimenticare di modificare il codice JavaScript con il tuo codice AdSense!

    function showads() { return '<div><script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; 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></div>';}add_shortcode('adsense', 'showads');

  2. Una volta salvate le funzioni.php, è possibile utilizzare il seguente shortcode per visualizzare AdSense ovunque sui tuoi post e pagine:

    Si noti che il nostro codice AdSense è avvolto con un adsense elemento div, possiamo stile nel modo che vogliamo nel nostro stile.file css.

Spiegazione del codice. Il codice di cui sopra viene utilizzato semplicemente per visualizzare gli annunci AdSense. Quando lo shortcode viene inserito in un post, restituisce un annuncio AdSense. E ‘ abbastanza facile, ma anche, sarete d’accordo, un vero e proprio risparmio di tempo!

Fonti:

  • Come: Incorporare AdSense ovunque sui tuoi post

Incorporare un lettore RSS

Il problema. Molti lettori sembravano anche godere del post “8 RSS Hacks for WordPress” pubblicato recentemente su Smashing Magazine. Ora, usiamo la nostra conoscenza di entrambi i codici RSS e shortcodes per incorporare un lettore RSS proprio nei nostri post e pagine.

La soluzione. Come al solito, per applicare questo hack, è sufficiente incollare il seguente codice nella funzione del tema.file php.

//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts)); return wp_rss($feed, $num);}add_shortcode('rss', 'readRss');

Per usare gli shortcode, tipo:

feed attributo è l’URL del feed da incorporare, e num è il numero di elementi da visualizzare.

Ottenere messaggi dal database di WordPress con un Shortcode

Il problema. Hai mai desiderato di poter chiamare un elenco di post correlati direttamente nell’editor di WordPress? Certo, il plug-in” Related posts ” può recuperare i post correlati per te, ma con uno shortcode puoi facilmente ottenere un elenco di qualsiasi numero di post da una particolare categoria.

La soluzione. Come al solito, incolla questo codice nelle tue funzioni.file php.

function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => ’ ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour;}add_shortcode("list", "sc_liste");

Per usarlo, è sufficiente incollare quanto segue nell’editor di WordPress, dopo il passaggio alla modalità HTML:

Verrà visualizzato un elenco di tre post della categoria con un ID pari a 1. Se non sai come ottenere l’ID di una categoria specifica, qui viene spiegato un modo semplice.

Spiegazione del codice. Dopo aver estratto gli argomenti e creata la variabile globale $postssc_liste() funzione utilizza il get_posts() funzione numberpostsorderorderby e category parametri per ottenere la X post più recenti dalla categoria Y. Una volta fatto, i post sono incorporati in un elenco HTML non ordinato e restituiti a voi.

Fonte:

  1. WordPress: Création de shortcode avancé

Ottieni l’ultima immagine allegata a un post

Il problema. In WordPress, le immagini sono abbastanza facili da manipolare. Ma perché non renderlo ancora più facile? Diamo un’occhiata a uno shortcode più complesso, uno che ottiene automaticamente l’ultima immagine allegata a un post.

La soluzione. Aprire le funzioni.file php e incollare il seguente codice:

function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata+2); $height = ($imagedata+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");

Per utilizzare lo shortcode, è sufficiente digitare quanto segue nell’editor, quando in modalità HTML:

Spiegazione del codice. La funzionesc_postimage() estrae prima gli attributi shortcode. Quindi, recupera l’immagine utilizzando le funzioni get_children()wp_get_attachment_image() e wp_get_attachment_image_src() WordPress. Una volta fatto, l’immagine viene restituita e inserita nel contenuto del post.

Fonti:

  1. WordPress Shortcode: visualizza facilmente l’ultima immagine allegata al post

Il problema. Anche se ti è piaciuto questo articolo, potresti esserti sentito un po ‘ frustrato perché, per impostazione predefinita, WordPress non consente di inserire shortcode nei widget della barra laterale. Per fortuna, ecco un piccolo trucco per migliorare la funzionalità di WordPress e consentire codici brevi da utilizzare in widget sidebar.

La soluzione. Un altro pezzo di codice da incollare nelle tue funzioni.file php:

add_filter('widget_text', 'do_shortcode');

Questo è tutto ciò che serve per consentire codici brevi in widget sidebar!

Spiegazione del codice. Quello che abbiamo fatto qui è abbastanza semplice: abbiamo aggiunto un filtro sulla funzione widget_text() per eseguire la funzione do_shortcode(), che utilizza l’API per eseguire lo shortcode. Pertanto, i codici brevi sono ora abilitati nei widget della barra laterale.

Smashing Editoriale (al)