{"id":1725,"date":"2013-02-28T06:30:34","date_gmt":"2013-02-28T05:30:34","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/?p=1725"},"modified":"2013-05-26T14:06:06","modified_gmt":"2013-05-26T13:06:06","slug":"wordpress-gestire-gli-shortcode-nel-content-degli-articoli","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/1725\/wordpress-gestire-gli-shortcode-nel-content-degli-articoli\/","title":{"rendered":"WordPress &#8211; Gestire gli shortcode per creare codici personalizzati nel content degli articoli"},"content":{"rendered":"<div id=\"attachment_1732\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a class=\"lightbox\" title=\"Le funzioni per lo shortcode di WordPress ci permettono di inserire codice personalizzato all'interno del content di un articolo\" href=\"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-content\/uploads\/2013\/02\/Wordpress-Shortcode.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1732\" class=\"size-medium wp-image-1732 \" style=\"margin-bottom: 5px;\" title=\"Wordpress - Shortcode\" alt=\"Wordpress - Shortcode\" src=\"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-content\/uploads\/2013\/02\/Wordpress-Shortcode-300x300.jpg\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-content\/uploads\/2013\/02\/Wordpress-Shortcode-300x300.jpg 300w, https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-content\/uploads\/2013\/02\/Wordpress-Shortcode-150x150.jpg 150w, https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-content\/uploads\/2013\/02\/Wordpress-Shortcode.jpg 768w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1732\" class=\"wp-caption-text\">Le funzioni per lo shortcode di WordPress ci permettono di inserire codice personalizzato all&#8217;interno del content di un articolo (1)<\/p><\/div>\n<p>Se fate spesso uso di WordPress e dei suoi plugin, prima o poi vi siete senz&#8217;altro imbattuti in uno <a title=\"Shortcode API descritti dal sito ufficiale di WordPress\" href=\"http:\/\/codex.wordpress.org\/Shortcode_API\" target=\"_blank\">shortcode API<\/a>.<br \/>\nDi cosa si tratta? Come spiega la documentazione, sono \u00abun insieme di funzioni per <strong>creare un macro codice all&#8217;interno del contenuto<\/strong> di un post\u00bb. Nella pratica, gli shortcode possono essere visti come <em>alias<\/em> da sostituire: quando nel testo di un articolo compare una determinata stringa, questa viene sostituita da un codice specifico.<\/p>\n<p>Per esempio, nel content di un post potreste trovare uno shortcode come questo, che permette di aggiungere una photo gallery nella pagina:<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"text\" style=\"font-family: monospace;\">[myshortcode-gallery id=1]<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Un sistema comodo per <strong>aggiungere codice all&#8217;interno di un articolo<\/strong>: basta scrivere lo shortcode nel punto voluto del testo e, alla stampa del content, WordPress si occuper\u00e0 di convertirlo.<\/p>\n<h3 style=\"margin-top: 50px; margin-bottom: 20px; color: #c00;\">Creare uno shortcode personalizzato<\/h3>\n<p>Esiste naturalmente la possibilit\u00e0 di creare uno shortcode personalizzato, che stampi un macro codice creato da noi.<\/p>\n<p>WordPress ci mette a disposizione delle <strong>funzioni per la gestione degli shortcode<\/strong>. Andiamo a vederle sommariamente:<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #666666; font-style: italic;\">\/\/registra un nuovo shortcode<\/span>\r\n<span style=\"color: #666666; font-style: italic;\">\/\/$tag \u00e8 lo shortcode scritto da noi, $func \u00e8 la funzione di conversione<\/span>\r\n<span style=\"color: #000000; font-weight: bold;\">function<\/span> add_shortcode<span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$tag<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000088;\">$func<\/span><span style=\"color: #009900;\">)<\/span>\r\n\r\n<span style=\"color: #666666; font-style: italic;\">\/\/rimuove un determinato shortcode ($tag)<\/span>\r\n<span style=\"color: #000000; font-weight: bold;\">function<\/span> remove_shortcode<span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$tag<\/span><span style=\"color: #009900;\">)<\/span>\r\n\r\n<span style=\"color: #666666; font-style: italic;\">\/\/rimuove tutti gli shortcode<\/span>\r\n<span style=\"color: #000000; font-weight: bold;\">function<\/span> remove_all_shortcodes<span style=\"color: #009900;\">(<\/span><span style=\"color: #009900;\">)<\/span>\r\n\r\n<span style=\"color: #666666; font-style: italic;\">\/\/esegue tutti gli shortcode che trova nel testo passato ($content)<\/span>\r\n<span style=\"color: #000000; font-weight: bold;\">function<\/span> do_shortcode<span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$content<\/span><span style=\"color: #009900;\">)<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><!--more--><\/p>\n<p>Prima di vedere un esempio concreto, consideriamo che l&#8217;uso degli shortcode <strong>ha anche qualche limitazione<\/strong>:<br \/>\n&#8211; gli shortcode devono essere univoci: se incontra due shortcode con lo stesso nome, il codice sovrascriver\u00e0 il primo e terr\u00e0 solo il secondo.<br \/>\n&#8211; gli shortcode non accettano l&#8217;uso di parentesi quadre nei suoi parametri (es: [tag attributo=&#8221;[valore]&#8221;] )<br \/>\n&#8211; uno shortcode pu\u00f2 internare un altro shortcode; ma uno shortcode non pu\u00f2 contenere se stesso (quindi non pu\u00f2 iterare se stesso).<\/p>\n<h3 style=\"margin-top: 50px; margin-bottom: 20px; color: #c00;\">Un esempio<\/h3>\n<p>Riprendiamo l&#8217;esempio della documentazione, che \u00e8 minimale e chiaro da capire, e vediamo come possiamo <strong>costruire uno shortcode personalizzato<\/strong>.<br \/>\nQuello che vogliamo realizzare \u00e8 uno shortcode di questo tipo:<\/p>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\ngoogle_ad_client = \"ca-pub-9984963620559913\"; \/* Sir Bit - post singolo rettangolare *\/ google_ad_slot = \"5334366715\"; google_ad_width = 336; google_ad_height = 280;\n\/\/ ]]><\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\/\/ <![CDATA[\n\n\n\/\/ ]]><\/script><\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"text\" style=\"font-family: monospace;\">[myshortcode foo=\"bar\" bar=\"bing\"]<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Quando richiamato nel content, sar\u00e0 convertito in un array associativo, le cui chiavi e valori saranno passati come parametri alla funzione che andremo a costruire:<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #990000;\">array<\/span><span style=\"color: #009900;\">(<\/span> <span style=\"color: #0000ff;\">'foo'<\/span> <span style=\"color: #339933;\">=&gt;<\/span> <span style=\"color: #0000ff;\">'bar'<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #0000ff;\">'bar'<\/span> <span style=\"color: #339933;\">=&gt;<\/span> <span style=\"color: #0000ff;\">'bing'<\/span> <span style=\"color: #009900;\">)<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Diamo un&#8217;occhiata adesso alla funzione da creare:<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #666666; font-style: italic;\">\/\/funzione shortcode personalizzata<\/span>\r\n<span style=\"color: #000000; font-weight: bold;\">function<\/span> bartag_func<span style=\"color: #009900;\">(<\/span> <span style=\"color: #000088;\">$atts<\/span> <span style=\"color: #009900;\">)<\/span> <span style=\"color: #009900;\">{<\/span>\r\n\t<span style=\"color: #990000;\">extract<\/span><span style=\"color: #009900;\">(<\/span> shortcode_atts<span style=\"color: #009900;\">(<\/span> <span style=\"color: #990000;\">array<\/span><span style=\"color: #009900;\">(<\/span>\r\n\t\t<span style=\"color: #0000ff;\">'foo'<\/span> <span style=\"color: #339933;\">=&gt;<\/span> <span style=\"color: #0000ff;\">'something'<\/span><span style=\"color: #339933;\">,<\/span>\r\n\t\t<span style=\"color: #0000ff;\">'bar'<\/span> <span style=\"color: #339933;\">=&gt;<\/span> <span style=\"color: #0000ff;\">'something else'<\/span><span style=\"color: #339933;\">,<\/span>\r\n\t<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000088;\">$atts<\/span> <span style=\"color: #009900;\">)<\/span> <span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n\r\n\t<span style=\"color: #b1b100;\">return<\/span> <span style=\"color: #0000ff;\">\"foo = <span style=\"color: #006699; font-weight: bold;\">{$foo}<\/span>\"<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\nadd_shortcode<span style=\"color: #009900;\">(<\/span> <span style=\"color: #0000ff;\">'myshortcode'<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #0000ff;\">'bartag_func'<\/span> <span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Il codice non \u00e8 complicato. Non fa altro che prendere come parametri i valori degli array (foo=&#8221;bar&#8221; e bar=&#8221;bing&#8221;) e li elabora. Notare che questi attributi sono opzionali: se non vengono passati, i valori degli attributi saranno <em>foo=&#8221;something&#8221;<\/em> e <em>bar=&#8221;something else&#8221;<\/em>.<br \/>\nIn questo caso la funzione non fa altro che ritornare \u00ab foo={valore passato all&#8217;attributo &#8216;foo&#8217;} \u00bb, ma possiamo personalizzarlo a piacere.<\/p>\n<p>Infine, <strong>con <em>add_shortcode()<\/em> lo facciamo registrare tra gli shortcode<\/strong>, in modo che WordPress sappia di doverlo interpretare.<\/p>\n<h3 style=\"margin-top: 50px; margin-bottom: 20px; color: #c00;\">Se dobbiamo estrapolare gli shortcode dal resto del content<\/h3>\n<p>Gli shortcode saranno inseriti all&#8217;interno dell&#8217;articolo e pertanto stampati a video insieme al content.<br \/>\nSpesso, per\u00f2, gli shortcode sono creati da plugin e personalizzarli risulta ostico.<\/p>\n<p>Nel mio caso, ho dovuto far ricorso a una slide creata da plugin: il cliente aveva necessit\u00e0 di personalizzare il foglio di stile, separando la slide dal resto del content. Come fare in questi casi?<\/p>\n<p>La cosa pi\u00f9 rapida \u00e8 <strong>estrarre lo shortcode e separarlo dal content<\/strong>, in modo da poterlo gestire autonomamente con i css. Nel mio caso era semplice: al cliente dicevo di inserire lo shortcode prima di tutto il testo, in modo da agevolarmi l&#8217;esportazione; ma con un piccolo miglioramento, potreste estrapolare lo shortcode da qualsiasi punto del content.<\/p>\n<p>Il trucchetto che ho usato \u00e8 immediato:<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #000088;\">$descrizione<\/span><span style=\"color: #339933;\">=<\/span>get_the_content<span style=\"color: #009900;\">(<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/intero content<\/span>\r\n\r\n<span style=\"color: #000088;\">$pos<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #990000;\">strpos<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$descrizione<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #0000ff;\">']'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">+<\/span><span style=\"color: #cc66cc;\">1<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/posizione della prima ]<\/span>\r\n<span style=\"color: #000088;\">$slide<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #990000;\">substr<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$descrizione<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000088;\">$pos<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/shortcode della slide<\/span>\r\n<span style=\"color: #000088;\">$description<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #990000;\">trim<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #990000;\">str_replace<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$slide<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #0000ff;\">''<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000088;\">$descrizione<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/descrizione senza la slide<\/span>\r\n\r\n<span style=\"color: #b1b100;\">echo<\/span> do_shortcode<span style=\"color: #009900;\">(<\/span><span style=\"color: #000088;\">$slide<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/converto lo shortcode della slide in codice html<\/span>\r\n<span style=\"color: #b1b100;\">echo<\/span> <span style=\"color: #000088;\">$description<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #666666; font-style: italic;\">\/\/stampo solo la descrizione senza la slide<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div style=\"margin-top: 100px; margin-bottom: 20px;\"><strong><em>Fonti esterne<\/em><\/strong><\/div>\n<p><a title=\"Documentazione ufficiale di WordPress sugli Shortcode API\" href=\"http:\/\/codex.wordpress.org\/Shortcode_API\" target=\"_blank\">Documentazione ufficiale di WordPress sugli Shortcode API<\/a><\/p>\n<div style=\"margin-top: 100px; margin-bottom: 20px;\"><strong><em>Copyright immagini<\/em><\/strong><\/div>\n<p>(1) http:\/\/www.masquewordpress.com\/ejecutar-widgets-con-shortcodes\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le funzioni per lo shortcode di Wordpress ci permettono di inserire codice personalizzato all&#8217;interno del content di un articolo, attraverso l&#8217;uso di semplici stringhe.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79],"tags":[39,4,23],"class_list":["post-1725","post","type-post","status-publish","format-standard","hentry","category-wordpress-2","tag-cms","tag-php","tag-wordpress","cat-79-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1725"}],"collection":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/comments?post=1725"}],"version-history":[{"count":11,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1725\/revisions"}],"predecessor-version":[{"id":1886,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1725\/revisions\/1886"}],"wp:attachment":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/media?parent=1725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/categories?post=1725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/tags?post=1725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}