{"id":2237,"date":"2015-04-22T09:45:32","date_gmt":"2015-04-22T07:45:32","guid":{"rendered":"http:\/\/www.wppratico.com\/?p=2237"},"modified":"2015-05-11T14:31:31","modified_gmt":"2015-05-11T12:31:31","slug":"come-creare-grafici-con-wordpress","status":"publish","type":"post","link":"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/","title":{"rendered":"Come creare grafici con WordPress"},"content":{"rendered":"

Siamo nell’era del visuale: tutti noi chiediamo velocit\u00e0, immediatezza e troviamo nelle immagini un’ottima risposta a queste necessit\u00e0. Penso sia proprio per questo che negli ultimi anni grafici e infografiche hanno spopolato<\/strong>.
\nQuesti “modi di trattare<\/em>” dati e informazioni sono veramente utili, consentono un rapido inquadramento di una situazione oppure consentono di avere sott’occhio tutti i dati importanti di un determinato argomento.<\/p>\n

Certo niente sostituisce un buon testo!<\/p>\n

Infatti molto spesso i grafici servono per attirare l’attenzione<\/strong>, per focalizzarsi su un topic e dopo, chi \u00e8 veramente interessato, pu\u00f2 approfondire.
\nOppure possiamo usare un grafico al contrario rispetto la precedente soluzione: prima spieghiamo approfonditamente<\/strong> un concetto e infine mostriamo dati a supporto di tale concetto, cos\u00ec da fissare il nostro ragionamento nelle menti dei lettori<\/strong>.<\/p>\n

\u00c8 quello che faccio io nel mio corso wordpress<\/a>: quando spiego che WordPress \u00e8 il software per creare siti pi\u00f9 usato nel web, do qualche motivazione e mostro i dati di utilizzo dei cms.<\/p>\n

Ma come possiamo creare agevolmente questi grafici?<\/p>\n

Beh abbiamo diverse soluzioni: la pi\u00f9 completa e personalizzabile, non vi nascondo, \u00e8 quella di creare tutto con un programma di grafica professionale<\/strong> come Illustrator o Photoshop. Ma ci\u00f2 richiede competenze, un investimento di denaro e tempo che a mio avviso \u00e8 sostenibile solo a certi livelli.
\nUn’altra soluzione \u00e8 quella di creare il grafico con Excel e poi esportare l’immagine<\/strong> e importarla nel nostro sito wordpress.<\/p>\n

Ma se mi conoscete preferisco sempre trovare una soluzione veloce e immediata: se dobbiamo creare diversi grafici sul nostro sito \u00e8 meglio farlo direttamente dal backend di wp<\/strong>.<\/p>\n

Per farlo possiamo usare dei plugin<\/strong> (ne consiglio due perch\u00e8 gli altri sono poco pratici) oppure possiamo importare un grafico direttamente da un foglio di calcolo Google Drive<\/strong> (senza salvare l’immagine).<\/p>\n

1. Visualizer<\/a>
\n2. WordPress Chart<\/a>
\n3. Foglio di calcolo Google Drive<\/a>
\n4. Considerazioni<\/a><\/p>\n

1. Visualizer<\/a><\/h2>\n

https:\/\/wordpress.org\/plugins\/visualizer\/<\/a><\/p>\n

Come sempre possiamo installare e attivare il plugin con il noto procedimento. Il plugin non ha pagine di configurazione e possiamo inserire un grafico direttamente su un articolo o pagina<\/strong> semplicemente cliccando su Aggiungi Media<\/em> (come se stessimo inserendo una nuova immagine). <\/p>\n

Aperto il popup che gi\u00e0 conosciamo, clicchiamo su Visualizations<\/strong> (sulla sinistra) e da qui possiamo inserire un nuovo grafico.
\nCome possiamo notare, ci sono diversi tipi di grafici disponibili<\/strong> come il “noto” grafico a linea o a barra, oppure il grafico a torta ma anche dei grafici pi\u00f9 complessi che mostrano una cartina della terra (molto utile per mostrare la diffusione nel mondo di una determinata cosa) oppure degli indicatori simili a quelli del cruscotto di un’automobile, ottimi per visualizzare delle prestazioni.<\/p>\n

\"visualizer<\/p>\n

Scelto il tipo di grafico dobbiamo inserire i dati caricando un file CSV che contiene le informazioni per creare il grafico. Consiglio di scaricare il file csv demo e di compilare il nostro file prendendo esempio da questo, ovviamente possiamo usare Excel per creare\/modificare agevolmente un csv.<\/p>\n

\"visualizer<\/p>\n

Il passo successivo \u00e8 di scegliere colori e altre impostazioni grafiche del visual creato.<\/p>\n

\"visualizer<\/p>\n

Finita la configurazione possiamo inserire il grafico nel punto che vogliamo, nel backend comparir\u00e0 un semplice shortcode come [visualizer id=\"417\"]<\/code>.
\nMa se pubblichiamo l’articolo, o se visualizziamo l’anteprima, possiamo vedere i grafici e notare la loro peculiarit\u00e0: essi infatti sono interattivi cio\u00e8 allo spostamento del mouse mostrano i dati dell’area relativa.<\/p>\n

Ecco il risultato della mia prova.<\/p>\n

\"visualizer<\/p>\n

 <\/p>\n

\n

2. WordPress Charts<\/a><\/h2>\n

http:\/\/wordpress.org\/plugins\/wp-charts\/<\/a><\/p>\n

Il plugin \u00e8 molto “minimal”: non ha n\u00e9 impostazioni e n\u00e9 una procedura d’inserimento agevolata. Infatti esso funziona solamente via shortcode configurabile “a mano”. Per tutte le info su come costruire i grafici vi rimando alla documentazione ufficiale<\/a>.<\/p>\n

Ad esempio questo \u00e8 il codice per visualizzare un grafico a torta<\/p>\n

[wp_charts title=\"mypie\" type=\"pie\" align=\"alignright\" data=\"10,32,50,25,5\"]<\/code><\/p>\n

Potete vedere il tipo di grafico “type<\/strong>“, l’allineamento e infine i dati che verranno automaticamente converti in percentuale (quindi preso 100 come totale).<\/p>\n

\"wordpress<\/p>\n

Certo questo non \u00e8 un metodo semplicissimo, se paragonato alle altre due soluzioni, ma sicuramente con il plugin possiamo creare dei grafici su un sito wordpress in modo molto veloce e soprattutto il risultato estetico \u00e8 molto accattivante<\/strong>.
\nI grafici sono molto minimal, con dei bei colori e appena la pagina viene caricata essi hanno anche un’animazione molto carina.<\/p>\n

 <\/p>\n

\n

3. Fogli di calcolo Google<\/a><\/h2>\n

https:\/\/docs.google.com\/spreadsheets\/<\/a><\/p>\n

Questo metodo permette di importare un grafico direttamente da un foglio google, quindi non sto parlando di salvare l’immagine e caricarla semplicemente, ma di incorporare il codice html del grafico<\/strong>.<\/p>\n

Utilizzano gli strumenti di Google, molto utili come sempre, possiamo creare un grafico partendo da una tabella normalissima.
\nQuando abbiamo creato il grafico come vogliamo, con etichette, dati e colori che ci piacciono, possiamo cliccare sul menu che troviamo in alto a destra (freccetta) sulla finestra del grafico.<\/p>\n

\"foglio<\/p>\n

Selezioniamo poi “Pubblica grafico”. Si aprir\u00e0 un popup nel quale selezioniamo Incorpora<\/em> e quindi uscir\u00e0 il codice da copiare e incollare nel nostro articolo wordpress.<\/p>\n

\"codice<\/p>\n

Ricordiamoci di incollare il codice sulla parte Testo<\/em><\/strong> di un articolo o pagina.<\/p>\n

\"codice<\/p>\n

Ed ecco quindi il risultato: un grafico interattivo e configurabile dal foglio di calcolo su Google Drive.<\/p>\n

\"grafico<\/p>\n

 <\/p>\n

\n

4. Conclusioni<\/a><\/h2>\n

Se sappiamo gi\u00e0 il nostro grafico sar\u00e0 l’unico del nostro sito sconsiglio di installare un plugin<\/strong>. Infatti possiamo creare il grafico con Excel e poi esportare l’immagine e riportarla sulle pagine di WordPress.
\nOppure, come abbiamo visto, possiamo creare un grafico tramite Google Documents e importare il codice direttamente sul sito.
\nCos\u00ec eviteremo di installare plugin che, per quanto semplici, possono rallentare il nostro sito e renderlo meno reattivo.<\/p>\n

Se invece pensiamo di usare spesso questo strumento cos\u00ec potente dal punto di vista comunicativo, possiamo senza dubbio installare il plugin che preferiamo e creare dei grafici fantastici, direttamente dalle pagine del sito.<\/p>\n

 <\/p>\n

Anche questo articolo ha richiesto diverse ore di ricerche, prove e scrittura. Se ti ha aiutato o se vuoi semplicemente ringraziarmi<\/strong>, puoi farlo con un semplice click qui sotto! Grazieeee! \ud83d\ude00<\/p>\n

<\/div>\n
<\/div>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Siamo nell’era del visuale: tutti noi chiediamo velocit\u00e0, immediatezza e troviamo nelle immagini un’ottima risposta a queste necessit\u00e0. Penso sia proprio per questo che negli ultimi anni grafici e infografiche hanno spopolato. Questi “modi di trattare” dati e informazioni sono veramente utili, consentono un rapido inquadramento di una situazione oppure consentono di avere sott’occhio tutti […]<\/p>\n","protected":false},"author":2,"featured_media":2598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[11],"tags":[154],"yoast_head":"\nCome creare grafici con Wordpress<\/title>\n<meta name=\"description\" content=\"Se dobbiamo creare dei grafici sul nostro sito possiamo farlo direttamente dal backend di wp grazie a dei semplici plugin o grazie al Foglio di Google Drive\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare grafici con Wordpress\" \/>\n<meta property=\"og:description\" content=\"Se dobbiamo creare dei grafici sul nostro sito possiamo farlo direttamente dal backend di wp grazie a dei semplici plugin o grazie al Foglio di Google Drive\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress Pratico\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WordpressPratico\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/andreagiavara\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-22T07:45:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-11T12:31:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/04\/Come-creare-grafici-con-Wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n<meta property=\"fb:app_id\" content=\"221729387867650\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@giavara\" \/>\n<meta name=\"twitter:site\" content=\"@giavara\" \/>\n<meta name=\"twitter:label1\" value=\"Scritto da\">\n\t<meta name=\"twitter:data1\" value=\"Andrea\">\n\t<meta name=\"twitter:label2\" value=\"Tempo di lettura stimato\">\n\t<meta name=\"twitter:data2\" value=\"4 minuti\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.wppratico.com\/#organization\",\"name\":\"WP Pratico\",\"url\":\"https:\/\/www.wppratico.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/WordpressPratico\",\"https:\/\/instagram.com\/andreagiavara\/\",\"http:\/\/it.linkedin.com\/in\/giavara\",\"https:\/\/it.pinterest.com\/giavara\/\",\"https:\/\/twitter.com\/giavara\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/#logo\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/05\/logo-wppratico.png\",\"width\":360,\"height\":120,\"caption\":\"WP Pratico\"},\"image\":{\"@id\":\"https:\/\/www.wppratico.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wppratico.com\/#website\",\"url\":\"https:\/\/www.wppratico.com\/\",\"name\":\"Wordpress Pratico\",\"description\":\"Realizza da solo il tuo Sito con Wordpress\",\"publisher\":{\"@id\":\"https:\/\/www.wppratico.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.wppratico.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#primaryimage\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/04\/Come-creare-grafici-con-Wordpress.jpg\",\"width\":1200,\"height\":675,\"caption\":\"Come creare grafici con Wordpress\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#webpage\",\"url\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/\",\"name\":\"Come creare grafici con Wordpress\",\"isPartOf\":{\"@id\":\"https:\/\/www.wppratico.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#primaryimage\"},\"datePublished\":\"2015-04-22T07:45:32+00:00\",\"dateModified\":\"2015-05-11T12:31:31+00:00\",\"description\":\"Se dobbiamo creare dei grafici sul nostro sito possiamo farlo direttamente dal backend di wp grazie a dei semplici plugin o grazie al Foglio di Google Drive\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.wppratico.com\/#\/schema\/person\/3adea1f91e6d88f8addf29abe7832412\"},\"headline\":\"Come creare grafici con WordPress\",\"datePublished\":\"2015-04-22T07:45:32+00:00\",\"dateModified\":\"2015-05-11T12:31:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.wppratico.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#primaryimage\"},\"keywords\":\"grafici\",\"articleSection\":\"Plugin\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.wppratico.com\/come-creare-grafici-con-wordpress\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wppratico.com\/#\/schema\/person\/3adea1f91e6d88f8addf29abe7832412\",\"name\":\"Andrea\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/#personlogo\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/278d8fda036301e57b833517c1e735f0?s=96&d=mm&r=g\",\"caption\":\"Andrea\"},\"description\":\"Sono Andrea Giavara, imprenditore con Growers e appassionato di Business e Digital. Ho creato WP Pratico nel 2010, la guida step-by-step per creare siti che funzionano, senza programmare. Puoi contattarmi oppure seguirmi @giavara\",\"sameAs\":[\"http:\/\/www.wppratico.com\/\",\"https:\/\/www.facebook.com\/andreagiavara\",\"https:\/\/twitter.com\/giavara\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts\/2237"}],"collection":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/comments?post=2237"}],"version-history":[{"count":0,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts\/2237\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/media\/2598"}],"wp:attachment":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/media?parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/categories?post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/tags?post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}