home / WordPress: 4 Plug-in (e spiccioli) che non puoi non Installare!

WordPress: 4 Plug-in (e spiccioli) che non puoi non Installare!

Tempo fa abbiamo dedicato un articolo a WordPress, accennando anche ai plug-in disponibili per ampliare le funzionalità di base di questo CMS.

Oggi ti presentiamo 4 plug-in imprescindibili, che possono facilitare il tuo lavoro.

Contact Form 7

Con oltre 9 milioni di download, Contact Form 7 è il migliore plug-in per creare in pochi passi un form di contatto da posizionare nel tuo sito.
I vantaggi di questo plug-in sono dati dal supporto di Ajax, dall’integrazione con Akismet e dagli ulteriori plug-in che vanno ad estendere le funzionalità di Contact Form 7.

Dopo averlo installato e attivato il plug-in clicca su CF7 –> Aggiungi nuovo per creare un nuovo form.
Nell’immagine qui sotto puoi vedere le prime impostazioni che propone il programma.

contact-form-7-settings

settaggi di CF7 (clicca per ingrandire)

 

Prima di tutto devi scegliere il titolo (1), quindi subito sotto hai una schermata divisa in due.
A sinistra (2) sono già impostati i campi:

  • nome
  • email
  • oggetto
  • messaggio
  • pulsante invia
contact-form-7-form

Form di contatto di default

 

Come puoi vedere dall’immagine 1, CF7 ti permette di personalizzare l’output del form. Nell’esempio qui sopra ogni voce è inserita all’interno di un paragrafo ma puoi cambiare queste impostazioni tranquillamente, ad esempio posizionando tutto il form in un <div> oppure assegnando ciascun campo ad una lista.
La scelta dipende dalle tue esigenze.

L’asterisco accanto ad alcune voci indica che il campo è obbligatorio.
In caso di mancata compilazione, il sistema informa l’utente con un messaggio.
Vedremo dopo come personalizzarli.

Il lato destro ti serve per aggiungere nuovi campi al form.

Se la versione base per te è sufficiente, basta cliccare sul pulsante Salva.
A questo punto CF7 genera uno shortcode per il form. Ti basta copiarlo ed incollarlo dove vuoi: in un post, in una pagina o in un widget testuale.

shortcode-contact-form7

CF7 shortcode da incollare (clicca per ingrandire)

 

Tuttavia ti suggerisco di aggiungere sempre al form base almeno un campo CAPTCHA per evitare inutili email di spam.

Aggiungere campi a Contact Form 7

Il procedimento è molto semplice, basta scegliere il campo desiderato dal menù a tendina a destra.

Nel caso dell’esempio di poco fa, per il CAPTCHA è necessario installare un plug-in aggiuntivo, come ti mostra lo stesso CF7, fornendoti anche il link diretto per scaricarlo.

captcha-plugin-cf

Per il campo CAPTCHA è necessario installare un plug-in aggiuntivo

Una volta installato e attivato anche questo plug-in, il sistema ti propone una serie di campi da compilare.

captcha-plugin-cf2

impostazioni richieste dal campo CAPTCHA di CF7

Puoi assegnare una classe o un id sia all’immagine generata che ai campi dati, oltre che scegliere la dimensione dell’immagine.
Ovviamente questi campi variano in funzione del campo che vuoi inserire nel form.
Ad esempio, nel caso che tu voglia aggiungere un campo per caricare un file, puoi impostare la dimensione massima del file in bytes e le estensioni consentite.

contact-form-7-upload-file

campo di upload file di CF7

A questo punto per aggiungere effettivamente il campo al form devi copiare gli shortcode che il sistema ti propone.

Più in basso è possibile personalizzare il messaggio di posta che viene inviato e i messaggi di sistema (ad esempio se l’indirizzo mail è errato).

contact-form-7-mail

A destra puoi personalizzare mittente, oggetto, mail di invio; a sinistra il corpo della mail con i dati presi dal form

Come vedi si tratta di un plug-in molto facile da usare. E’ inoltre gratuito e localizzato in italiano.
Lo puoi scaricare da qui.

Se le opzioni che CF7 ti offre non sono sufficienti, su WordPress.org ci sono plug-in in grado di arricchire le sue possibilità.
Ad esempio grazie al plugin Contact Form 7 Modules abbiamo realizzato un form particolare per il sito noleggioautolungotermine.net. Oltre ai classici campi dove inserire la propria anagrafica, ce ne sono alcuni dedicati al noleggio mentre il campo Vettura viene dinamicamente popolato utilizzando il nome del post corrente.

contact-form-7-noleggioautolungotermine

Esempio di form personalizzato realizzato con CF7.

All in one seo pack

Questo ottimo plug-in ti permette di ottimizzare il tuo sito in wordpress per la seo.
E’ possibile personalizzare molti parti del blog, fra cui le più importanti sono:

  • title e descrizione della home page
  • title e descrizione per tutte le pagine e categorie
  • gestione noindex
  • canonical URLs

Cliccando sul menù All in one Seo –> General Settings è possibile configurare il plugin.
In alto ci sono i settaggi generali dove si abilita l’uso del Canonical URL (è già spuntato di default), la riscrittura dei titoli, l’abilitazione dei log.

all-in-one-seo-pack-general

Più in basso ci sono i settaggi dedicati all’home page del sito. Qui puoi specificare un meta title diverso da quello originale che hai impostato all’inizio dell’istallazione (Impostazioni > Generale > Titolo Sito), la metadescription e le keywords assegnate alla home.
Spendi un po’ di tempo per scrivere un titolo e una descrizione consona, prestando attenzione a non superare i 67 caratteri per il titolo e i 156 caratteri per la descrizione.
Puoi tralasciare le keywords.

all-in-one-seo-pack-home

All in one Seo Pack: homa page personalizzata.

Scendendo ancora troviamo la schermata dedicata alla gestione delle keywords, che è possibile impostare in modo dinamico. Qui ti suggerisco di disabilitare tutto e procedere a mano caso per caso.
Seguono i settaggi dedicati esclusivamente ai meta title di pagine e articoli.

all-in-one-seo-pack-title
Abilita queste funzioni e spendi qualche minuto per personalizzare i vari formati dei titoli.
Di default il sistema ti propone per tutte le pagine il titolo a cui si va ad aggiungere alla fine il titolo del blog, in modo da poter puntare anche sul brand nelle ricerche di Google.

La schermata successiva ti permette di abilitare All in one seo pack anche per i Custom post type. Si tratta di una funzione molto utile soprattutto se usata in combinazione con un altro plug-in di cui ti parliamo sotto, per creare campi aggiuntivi.

Sotto, invece, scegli su quali contenuti del sito abilitare la colonna dedicata alle impostazioni SEO nella schermata dedicata alla stesura dei contenuti.

all-in-one-seo-pack-display

In Webmaster verification puoi inserire il tuo codice di verifica per gli strumenti che Google,Bing e Pinterest dedicano ai webmaster.
Se hai un ID di Google WebmasterTools devi inserirlo qui per verificare la pagina.
Seguono i settaggi dedicati specificatamente a Google. Se hai una pagine su G+ da qui puoi collegarla automaticamente al sito.
Per tracciare le visite sul sito con Google Analytics non importa più inserire il codice a mano nel template, ti basta mettere il tuo ID in questo form.
In Noindex settings puoi scegliere di disbilitare l’indicizzazione delle categorie, degli archivi e dei tag.
Ti suggerisco di mettere il segno di spunta a tutte le voci per evitare contenuti duplicati.
L’ultima schermata è dedicata ai settaggi avanzati.
Lascia tutti i campi come da default e disabilita solo “Autogenerate descriptions” per poter aggiungere manualmente ai tuoi contenuti una description.

La sezione Performance ti mostra un riassunto della piattaforma con dettagli sul tipo di server, la ram, la versione php etc.
Puoi impostare alcuni parametri:

  • limite di memoria per php
  • tempo di esecuzione php
  • forzare il rewrites delle pagine

all-in-one-seo-pack-performance-status

Infine da Feature manager puoi attivare il monitor delle performance e soprattutto creare una sitemap in formato XML da inviare a Google Webmaster Tools.

Una volta attivato e configurato il plugin, all’interno della finestra di scrittura dei contenuti compare un nuovo pannello dove puoi personalizzare il meta title, la descrizione e alcuni parametri relativi al robots.txt.
Molto utile la funzione di anteprima che ti mostra come apparirà l’articolo nelle ricerche di Google.

All in one seo pack è gratuito, magari puoi fare una donazione allo sviluppatore, e si scarica di qui.

all-in-one-seo-pack-scrittura-post

Anteprima del post nella serp di Google

Nextend Facebook Connect

Oggi è sempre più importante cercare l’interazione con l’utente. Uno dei sistemi migliori, anche per crearsi un database di indirizzi da usare per comunicazioni mirate, consiste nell’invitare l’utente a registrarsi al sito.
Ci si registra per partecipare ad un concorso, scaricare un ebook, commentare o compiere una qualsiasi azione sul sito.
E per non complicare la vita all’utente la cosa più semplice è permettergli di collegarsi usando il suo account di Facebook, che sicuramente non dimenticherà!

WordPress offre un ottimo plug-in per questa operazione, Nextend Facebook Connect.
E’ gratuito e lo trovi sul sito ufficiale di wordpress.

Creare una App di base su Facebook

Unico requisito per usare il plug-in è quello di aver creato dalla pagine degli sviluppatori di Facebook un’applicazione. Per farlo devi andare su https://developers.facebook.com/apps.

Scegli il nome, il nome breve e la categoria per la tua app, quindi inserisci il codice di sicurezza quando richiesto.

facebook-creare-app

Primo passaggio per creare una App su Facebook. Clicca per ingrandire.

Nella schermata successiva inserisci il dominio del tuo sito senza usare il www, assicurati di aver disabilitato la modalità Sandbox quindi metti l’url completo della tua homepage al campo Sito web con accesso tramite Facebook.

facebook-creare-app2

settaggi per creare una app di base su facebook e per il nostro plug-in.

Una volta scaricato ed installato vai su Impostazioni –> Nextend FB Connect e inserisci i dati richiesti, ovvero l’ID della App Facebook e l’ID Secret che trovi in alto nella schermata di configurazione.

facebook app id

A questo punto il plugin è già funzionante. Nella schermata di login compare un nuovo pulsante per collegarsi con Facebook, così come nella pagina del profilo utente.

nextend-facebook-connect-login

il plug-in in funzione nella schermata di login

In alternativa è possibile inserire il pulsante di login in qualsiasi parte del template utilizzando il codice fornito, che trovi nei settaggi del plug-in.

Interessante la possibilità di personalizzare la pagina su cui atterra l’utente dopo il login o la registrazione.
E’ possibile personalizzare l’output HTML del plugin e – per i più pigri – la possibilità di generare anche bottoni personalizzati.

Advanced Custom Fields

E infine parliamo di Advanced Custom Fields. Prima una premessa: i custom fields (campi personalizzati) rappresentano lo strumento che WordPress offre all’utente per arricchire post e pagine di informazioni aggiuntive, utilizzabili all’interno del proprio tema.

I custom field possono essere utilizzati non solo entro i contenuti di default che offre Wordrpess (pagine e post) ma anche su contenuti creati ad hoc (custom post).
Ad esempio, sul sito di Leonardo Fiaschi, imitatore di Livorno, abbiamo creato un Custom Post Type per inserire in pochi click le imitazioni all’interno del sito, copiando semplicemente l’URL del video ospitato su YouTube.
In pratica questo plug-in trasforma WordPress in un CMS a tutti gli effetti, imitando la possibilità che offrono CMS più avanzati come Drupal.
Ti rimando al sito ufficiale di Advanced custom fields per una documentazione completa di tutte le possibilità che offre questo plugin.

Nell’immagine qui sotto puoi vedere la lista completa di tutti i tipi di campo che è possibile aggiungere attualmente.

advanced-custom-field-campi

I campi disponibili di advanced custom field

La sezione Location ti permette di decidere dove visualizzare i vari gruppi di Custom Field, offrendoti la massima libertà di personalizzazione.

advanced-custom-field-location

Nell’esempio i custom field sono visualizzati per i Post e per il contenuto personalizzato Imitazioni.

Puoi scegliere, ad esempio, di visualizzare i campo personalizzati solo nei post, in una determinata categoria oppure per un determinato utente.
Dal campo Opzioni puoi aggiungere ulteriori settaggi, come ad esempio scegliere di nascondere alcune funzionalità quando è visulizzato un determinato gruppo di custom field.

Come visualizzare i campi di Advanced Custom Field nel template

Per visualizzare nel template i custom field devi mettere mano al codice.
Per stampare un valore a video basta richiamarlo con la funzione apposita:

the_field(‘nome-del-campo’);

Puoi anche assegnare il campo ad una variabile in questo modo:

$miavariabile = get_field(‘nome-del-campo’);

Frequentemente capita di usare i custom field per aggiungere immagini al contenuto.
In questo caso puoi richiamarle in due modi:
Il più semplice è quello di restituire come valore URL immagine e inserire nel template questo codice:

<img src=”<?php the_field(‘nome-del-campo’); ?>” />

oppure puoi far restituire l’ID usando questo codice:

$miavariabile = wp_get_attachment_image_src(get_field(‘nome-del-campo’), ‘full’);
<img alt=”<?php echo get_the_title(get_field(‘nome-del-campo’)) ?>” src=”<?php echo $miavariabile[0]; ?>” />

Il plugin è gratuito e per un programmatore è semplice modificare il codice in base alle proprie esigenze.
Altrimenti dalla pagina dello sviluppatore è possibile acquistare degli add-ons che ti facilitano il lavoro. Per esempio l’utile Gallery Field per generare gallerie di immagini o Repeater Field per aggiungere più istanze del solito campo.

Scrivi un commento

Informativa cookie

Tonic is a Trademark owned by Dinamo S.r.l. - P.I./C.F. Pisa 01881080509