1

Sincronizzazione Gestionale Aziendale con WooCommerce

Introduzione

I titolari o gestori di un negozio fisico possono avere in progetto di avviare anche un e-Commerce per la vendita dei prodotti presenti nello store fisico. Uno degli elementi più complessi nella realizzazione di un e-Commerce è il caricamento dei prodotti e il relativo aggiornamento di quantità, prezzi e varianti. In questo articolo vedremo come automatizzare il processo di sincronizzazione del magazzino fisico con l’e-Commerce attraverso il plugin WpAll Import.

Sincronizzazione Magazzino con e-Commerce: Creiamo il Connettore

Il processo di sincronizzazione avviene tramite l’utilizzo di un file CSV/Excel che rappresenta il magazzino del nostro store, è possibile ottenere questo file estraendolo dal vostro gestionale aziendale. All’interno di questo file, oltre ai campi base come taglia, quantità, prezzo e varianti, è fondamentale avere un ID, ovvero un codice identificativo di ogni singolo prodotto. L’ID può essere o un numero oppure si può generare dinamicamente unendo più informazioni di prodotto, come ad esempio: codice articolo + taglia + colore = ID.

L’ID è molto importante sia per la prima importazione sia per i successivi aggiornamenti, in quanto l’aggiornamento utilizzerà come chiave univoca proprio l’ID per aggiornare, ad esempio, la quantità di ogni singola variante prodotto.

Quindi dobbiamo effettuare un’esportazione del magazzino in formato CSV o XLS/XLSX e al suo interno avere, almeno, i seguenti campi:

  • ID prodotto;
  • taglia;
  • colore;
  • quantità;
  • categoria merceologica (ci servirà per creare le categorie in WooCommerce).

WpAll Import: Set-up Plugin per la sincronizzazione

Come primo passaggio da compiere, effettuiamo il download e l’installazione di WpAll Import (link al download)  e dell’add-on per WooCommerce (link al download).

Effettuiamo l’installazione dei due plugin.

Nel menu laterale di WordPress clicchiamo sulla voce “All Import” e successivamente su “New import” e scegliamo la modalità di importazione “Upload a file”, quindi stiamo dicendo a WpAll Import che gli passiamo i dati tramite un file.

Effettuiamo l’upload del nostro file CSV, se vuoi fare una prova ti lascio il link al mio CSV di demo => import_magazzino_demo 

Selezioniamo dal menu a tendina “create new” la voce “WooCommerce Products”, in modo tale da comunicare al plugin che la tipologia di dato da caricare è “prodotti” e poi facciamo click su “Continue to Step 2”.

A questo punto ci appare una schermata di riepilogo, controlliamo che non ci siano anomalie e procediamo con lo step 3.

Allo step 3 vediamo la pagina di configurazione, si tratta di una fase molto importante e delicata, quindi procediamo con attenzione. Per comodità ti ho preparato  un template, che puoi direttamente caricare => Download template TXT se non riesci a scaricarti il file ma il tuo browser ti mostra il contenuto, puoi selezionare tutto il contenuto e aggiungerlo all’interno di un file con estensione .txt.

Per importare il template, devi aprire su una nuova scheda, la sezione “setting” del plugin (che trovi nel menu laterale di WordPress passando il mouse sulla voce “All Import”. Nella schermata che si apre, fai click sul pulsante “Import templates”. Salva tutto e torna allo step 3.

A questo punto, scorrendo tutto in basso, selezioniamo il template e procediamo allo step 4. Analizziamo tutti i campi di tutte le sezioni, in particolare il box relativo all’add-on di WooCommerce, ricordiamoci di modificare la URL delle immagini, in quanto indichiamo al plugin di caricare le foto dei nostri prodotti tramite URL (ovviamente le foto dovranno essere presenti e leggibili in quel percorso).

Procediamo con l’importazione e avviamo la sincronizzazione. In base alla quantità dei prodotti e al peso delle immagini, il processo può richiedere fino a qualche ora.

Se abbiamo seguito tutti i passaggi, verranno creati i prodotti variabili per il nostro WooCommerce. Se hai riscontrato problemi durante l’importazione, o se hai necessità di una configurazione del plugin differente, scrivimi e cercherò di supportarti.

Conclusioni

Questo articolo vuole essere una guida introduttiva per automatizzare la sincronizzazione del magazzino fisico con un e-commerce. Il vantaggio di lavorare con un file CSV/XLS oppure XML ci permette di avere una fonte standardizzata dei dati, in modo tale da poter utilizzare il processo con qualsiasi gestionale aziendale, anche il più datato o non comune. Lavorando con WpAll Import, ci rendiamo conto, man mano delle grandi potenzialità che il software ha. Possiamo integrare WooCommerce con qualunque tipologia di gestionale, è possibile avere add-on per i campi personalizzati, (custom field) per la gestione dei brand, per YOAST e molto altro. Se avete un minimo di conoscenze in programmazione, avrete a vostra disposizione un prodotto di altamente professionale.

Se hai dubbi, curiosità o vuoi ulteriori dettagli, scrivimi e approfondiamo. Trovi i miei riferimenti in basso. Grazie.




Funzione wp_is_mobile() – Definizione con Esempi Pratici di Utilizzo

La funzione booleana (quindi ci restituirà o vero o falso)

wp_is_mobile()

si occupa di controllare se il browser corrente funziona su un dispositivo mobile, quindi se l’utente sta visitando una pagina con uno smartphone o tablet.

Funziona attraverso il rilevamento della stringa user agent del browser

$_SERVER['HTTP_USER_AGENT']

wp_is_mobile(): quando e come utilizzarla

Non pensiamo a questa funzione come a un modo per rilevare i telefoni. Il suo scopo non è rilevare la larghezza dello schermo, ma piuttosto adeguarsi alle risorse potenzialmente limitate dei dispositivi mobili.

Un dispositivo mobile potrebbe avere meno potenza della CPU, memoria o larghezza di banda disponibile. Questa funzione ci restituirà true per un tablet, poiché è considerato un dispositivo mobile. Non sostituisce le query multimediali CSS o lo stile per piattaforma.

Un modo in cui questa funzione può essere utilizzata in un tema è produrre una versione molto leggera del sito che non ha il grande carico utile del sito desktop. Teniamo conto che sia la versione desktop che quella mobile della pagina dovranno comunque essere responsive, poiché un vecchio telefono verticale avrà una larghezza significativamente diversa rispetto a un moderno iPad in orizzontale.

wp_is_mobile() restituisce true sia per smartphone sia per iPad. Allo stesso modo, una finestra del browser desktop potrebbe non essere visualizzata a tutta larghezza. Essenzialmente questo approccio può raddoppiare la quantità di lavoro che dovremo investire nella realizzazione del tema. Tuttavia, per un tema strettamente ottimizzato o un’esperienza mobile unica, potrebbe essere essenziale.

In alcuni casi può tornarci utile anche per mostrare/nascondere elementi in pagina, senza utilizzare le media query da CSS. Vediamo alcuni esempi pratici:

if ( wp_is_mobile() ) {
   $testo_cta = "Leggi tutto";
}else{
   $testo_cta ="Leggi tutti i nostri articoli";
}
echo "<button class='btn btn-dark' type='button'>";

<?php echo $testo_cta; ?>

echo "</button>";

Ipotizziamo di voler gestire il testo di un pulsante in modo tale che, su dispositivi mobili sia più breve (dato lo spazio ridotto) e su device desktop, sia più lungo. Con il precedente codice cambiamo il valore della variabile $testo_cta al verificarsi di uno dei due casi.

Oppure nascondere una sezione intera utilizzando wp_is_mobile() combinato con una regola CSS:

if ( wp_is_mobile() ) {
   $display_sezione = "none";
}else{
   $display_sezione ="";
}
<footer class="footer" style="display: <?php echo $display_sezione; ?>">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

In questo esempio andiamo ad gestire dinamicamente la proprietà “display” del CSS, quando il dispositivo è mobile, diventerà:

display:none;

 




Rel Canonical SEO: cos’è e come si usa

Cos’è il Rel Canonical

Il Rel Canonical è un elemento HTML utilizzato per poter comunicare ai motori di ricerca, in caso di più URL con contenuto simile o uguale, qual è la pagina canonica, ovvero quella da ritenere la principale. In questo modo si prevengono le duplicazioni di dati. Bisogna specificare che è il webmaster a suggerire ai motori di ricerca quale URL considera la preferita, quindi più che una direttiva, si può dire che quello del webmaster è un consiglio per migliorare il modo in cui lo spider legge il nostro sito.

Quando bisogna utilizzarlo?

Il Rel Canonical ha come obiettivo quello di risolvere i problemi di duplicazione all’interno di un sito. Infatti, due o più pagine con contenuto simile possono recare al sito delle penalizzazioni ed è proprio per questo che bisogna far buon uso del Rel Canonical. In questo modo infatti si evita la possibilità che uno stesso testo/contenuto possa essere raggiunto con link differenti e possa competere in SERP per le stesse parole chiave target.

Due casi in cui si può usare il Rel Canonical sono:

  • Quando un contenuto simile è fornito da più URL
  • Quando lo stesso identico contenuto è fornito da più URL

Si implementa un link rel canonical quando, avendo due pagine da gestire, si desidera far indicizzare i contenuti della prima e, allo stesso tempo, si desidera che quei contenuti siano presenti nella seconda. Il link Rel canonical dovrà quindi essere implementato nella seconda. La prima pagina, invece, sarà la principale ovvero quella canonica, dove si indicizzeranno i contenuti.

Ma quali sono alcune particolarità del Rel canonical?

  • È possibile che una pagina venga canonizzata da un URL di protocollo http ad uno https e viceversa.
  • Lo si può inserire nelle intestazioni HTTP
  • Può essere utilizzato tra domini differenti o tra più sottodomini (quest’opzione viene chiamata in gergo tecnico cross domain)
  • Per far sì che i crawler dei motori di ricerca lo possano rilevare non bisogna bloccarne la scansione attraverso robots.txt

Come utilizzarlo

Per poter implementare sul proprio sito il Rel Canonical bisogna operare sulla tag head dove va specificato.

Esistono molti modi per poter utilizzare il Rel canonical, eccone alcuni:

Tag rel=canonical

In questo caso è necessario semplicemente aggiungere nel codice delle pagine un tag link in grado di indirizzare alla pagina principale. Quest’azione ha però dei pro e dei contro: esso permette infatti di mappare un numero illimitato di pagine, ma allo stesso tempo rischia di aumentare le dimensioni della pagina stessa, funziona solo per i siti HTML (quindi non per i PDF) e può compromettere, nelle pagine molto grandi, la gestione della mappatura.

Esempio:

<link rel="canonical" href="https://nomesito.tld/pagina-canonica" />

Intestazione HTTP rel=canonical

In questo caso devi inviare un’intestazione rel=canonical all’interno della risposta di una pagina Non Html, ad esempio per un PDF. Anche quest’azione riporta dei pro e dei contro, ma, a differenza della prima, in questo caso vi sono maggiori benefici ovvero: non si aumentano le dimensioni di una pagina e si può mappare un numero infinito di pagine duplicate. Come contro vi è una possibile complicazione nella gestione della mappatura su siti di grandi dimensioni o di cui i link vengono spesso modificati.

Es. Link:

<https://nomesito.tld/downloads/documento.pdf>; rel="canonical"

Sitemap XML

Con questo metodo potete identificare le pagine canoniche all’interno di una Sitemap XML. Questa tecnica è perfetta per implementare e gestire siti di grandi dimensioni o di cui i link e URL vengono spesso modificati. I contro sono però dati dal fatto che Googlebot deve identificare in ogni caso tutte le pagine duplicate per ogni pagina canonica dichiarata nella Sitemap. Inoltre per Googlebot rimane un indicatore decisamente meno efficace rispetto ai due precedenti.

Metodi alternativi

Come metodi alternativi troviamo l’utilizzo del Reindirizzamento 301 che indica a Googlebot che l’URL che è stato reindirizzato è quello da considerare migliore, e quindi da rendere canonico, rispetto all’URL prestabilito precedentemente. Questo metodo deve essere usato solo se si vuole rendere la pagina precedente obsoleta.

Se una delle varianti su cui si sta operando è una pagina AMP bisogna seguire le linee guida delle pagine di questo tipo. Le linee guida vi indicheranno passo per passo come designare la pagina canonica e come invece identificare la variante AMP. Inoltre, valuta di implementare HSTS per evitare che Google imposti erroneamente una pagina canonica.

Quando si adoperano i metodi sopra riportati bisogna anche fare attenzione ad alcuni passaggi che è meglio evitare. Tra questi troviamo

  • Evitare di utilizzare, per la canonicalizzazione, il file robots.txt
  • Evitare di utilizzare uno strumento per la rimozione degli URL perchè rimuoverà tutte le versioni di quel URL dal motore di ricerca.
  • Evitare di specificare diversi URL come canonici usando lo stesso o diversi metodi.
  • Quando crei il link evita di utilizzare l’URL duplicato ed utilizza subito quello canonico. Usando sempre lo stesso URL, infatti, si può aiutare Google a identificarlo come preferito.
  • Se vuoi impedire che una pagina canonica venga selezionata, evita di usare noindex: in questo modo, infatti, la pagina rischia di venire esclusa dall’indice.

Articolo a cura di Gabriele Rispoli, Consulente SEO dal 2011, particolarmente esperto in SEO tecnica e strategica per eCommerce, turismo e adult.




Come creare un sito WordPress da zero

Dopo tante ricerche, svariati ripensamenti e consigli finalmente hai deciso di aprire un blog tutto tuo in cui parlare di ciò che più ti piace, scrivere brevi articoli sulle tue ultime vacanze, condividere i tuoi interessi e i luoghi che hai visitato. Molte persone ti avranno sicuramente scoraggiato e sconsigliato di realizzare un sito Web, ti avranno detto che per fare alcune cose è indispensabile l’intervento di un esperto programmatore e che per questo motivo non saresti mai stato in grado. Le cose stanno proprio così?

Se non sei un “addetto ai lavori” ma vuoi mettere su ugualmente il tuo blog, non c’è cosa migliore che affidarsi a WordPress, il CMS più utilizzato al mondo e sicuramente tra i più semplici. In questo articolo troverai tutte le indicazioni più importanti su come creare un sito WordPress da zero, vedrai le operazioni che dovrai eseguire non sono affatto complicate e ti permetteranno di avere il tuo sito Web in pochissimo tempo.

Per CMS si intende un particolare sistema in grado di gestire i contenuti. Se ben ricordi, in passato, abbiamo già visto assieme come creare un mini sistema di gestione basato su Php e MySql.

Per chi ha intenzione di realizzare un piccolo ma efficace spazio online in cui scrivere ciò che preferisce, WordPress rappresenta sicuramente la scelta migliore e più economica. Creare un sito Web da zero può spaventare in un primo momento ma seguendo i giusti passaggi è un’operazione che si rivela meno complessa di quanto può sembrare.

Se stai cercando un modo per inserire articoli puoi avvalerti della piattaforma di WordPress. Certo, non diventerai di colpo un Web developer ma potrai utilizzare uno spazio Web per pubblicare gli articoli del tuo blog e condividere con altri utenti le tue passioni.

Se ti sei deciso a realizzare il tuo sito Web in completa autonomia devi sapere che non potrai di certo avere una grafica accattivante e curata nei minimi dettagli come quella dei siti Web realizzati da professionisti. Se non hai grandi pretese, con qualche indicazione un po’ di impegno riuscirai a creare il tuo sito WordPress già pronto all’uso.

Come creare un sito WordPress: dominio e hosting

Se hai deciso di affidarti al CMS di WordPress per il tuo primo sito in autonomia, ti basterà semplicemente acquistare un hosting ed inizia subito a realizzare il tuo sito Web attraverso la directory wordpress.org.

Pensa al nome che vuoi dare al tuo sito e inseriscilo nell’apposito campo di un qualsiasi hosting provider per verificare che il dominio sia libero, scegli l’argomento da trattare e preparati una scaletta di tutte le informazioni che riguardano il tuo nuovo progetto così da non tralasciare nulla al caso.

In genere per essere ricordato facilmente dagli utenti, il nome del sito Web dovrebbe riportare lo stesso nome dell’attività a cui fa riferimento. Facciamo un esempio, se il nome della tua attività si chiama Arcobaleno, il giusto dominio per il tuo sito dovrebbe essere in questo caso arcobaleno .com o .it. La stessa cosa vale per siti Web che si riferiscono a brand personali, in questo caso sarà il tuo nome (la tua identità) il tuo brand.

Dopo aver scelto accuratamente il dominio ti servirà un piano di Web hosting. Sai di cosa si tratta? Per hosting si intende un servizio online che permette al tuo sito (e a tutti i suoi contenuti) di essere visibile sul Web. Questo passaggio, quindi, è necessario per la buona riuscita del tuo sito. L’hosting non è altro che uno spazio virtuale che ospita i siti Web e le loro pagine.

Scegliere l’hosting migliore non è sempre facile. Le aziende che offrono hosting sono diverse e i piani commerciali tra cui scegliere altrettanti. Se non sai da dove iniziare, puoi prendere spunto da questo articolo dove trovi una lista dettagliata con i relativi prezzi così da individuare l’hosting ideale per le tue esigenze.

Scegli un tema

Un altro passo importante per creare un sito WordPress è sicuramente quello di scegliere un tema. Sai cosa si intende per tema WordPress? Per tema si intende il template delle pagine del tuo sito, la sua struttura, l’aspetto grafico, lo stile e le diverse funzionalità presenti. Scegliere il tema, quindi, non è un passaggio che deve essere sottovalutato se stai cercando di mettere su un sito Web professionale. Scegliere con cura il tema del proprio sito è un po’ come scegliere il giusto abito che calzi a pennello con cui il tuo progetto digitale si presenterà ai clienti.

Il tema definisce il layout delle pagine, l’impostazione del menù, le personalizzazioni da apportare ecc. Dopo aver acquistato il dominio e aver scelto l’hosting, definire il tema da utilizzare per il proprio sito WordPress è un’azione basilare a cui devi dedicare un po’ di tempo e attenzione.

I temi WordPress sono davvero tanti e per individuare quello giusto per il tuo sito puoi orientarti tra quelli realizzati per lo stesso settore del tuo portale. Puoi scegliere tra temi gratuiti e a pagamento, ti consigliamo di dare un’occhiata a siti come Themeforest e TemplateMonster per selezionare il tema che pensi possa fare al caso tuo tra i tanti proposti. In questi portali avrai l’imbarazzo della scelta e riuscirai a scegliere il template perfetto per le tue esigenze.

Crea la tua prima pagina

Dopo aver acquistato dominio, scelto hosting e tema non resta che passare alla pratica e iniziare ad esplorare il sito WordPress creato per la tua attività. Per lanciare il tuo sito Web non ti resta che creare la tua prima pagina. La pagina di WordPress è uno spazio in cui inserire notizie fondamentali su di te e sul sito, informazioni che non dovrai aggiornare costantemente ma che rappresenteranno un biglietto da visita per tutti gli utenti che arriveranno per la prima volta sul tuo sito.

Cosa offri, quali sono i tuoi servizi, di cosa parla e di cosa si occupa il tuo sito, quali sono i tuoi prodotti ecc. Queste le principali informazioni che deve contenere la prima pagina. Inizia a dare struttura al tuo sito con la prima pagina, la homepage dovrà catturare l’attenzione del visitatore e stuzzicare la sua curiosità. Cerca, quindi, di renderla accattivante e curala nei minimi dettagli.

Presentati e presenta la tua azienda/attività in modo professionale così da trasmettere fiducia e interesse. Descrivi chiaramente ciò che offri e quelli che sono i tuoi servizi. Inserisci i contatti utili e tutti i recapiti indispensabili ai clienti o a qualsiasi utente per inviarti richieste e messaggi.

Crea un articolo

Ultimate e perfezionate le basi puoi iniziare a scrivere il tuo primo articolo. Se sei un blogger e hai deciso di raccontare in modo creativo e originale tutti i tuoi viaggi, inizia a creare un articolo dell’ultimo viaggio fatto o di quello più emozionante.

Scrivere un articolo su WordPress è davvero molto semplice, ti basterà utilizzare gli strumenti messi a disposizione e scrivere il tuo testo corredandolo con foto e descrizioni delle tappe del tuo viaggio.

Dedica tempo e impegno per la creazione dei contenuti del tuo blog. Gli articoli, scritti in modo corretto e soprattutto in ottica SEO, aiuteranno ad ottimizzare i motori di ricerca e conquisteranno l’attenzione dei lettori. Non lanciare sul Web il tuo blog vuoto, scrivi quattro o cinque brevi articoli per presentare il tuo progetto o i tuoi servizi così da informare chi arriva per la prima volta sul tuo sito di cosa parlerai. Scrivi il tuo articolo e pubblicalo sul blog. Ricordati di inserire immagini ad alta risoluzione e copyright free per personalizzare il tuo articolo.

Conclusioni

In questo articolo ti abbiamo fornito alcune semplici ma fondamentali indicazioni per realizzare un sito WordPress partendo da zero. Come avrai notato leggendo i paragrafi precedenti, non importa che tu non sia un esperto Web Developer o Web Designer, con un po’ di informazioni e di pratica riuscirai a mettere in piedi un vero e proprio sito Web perfetto per la tua attività.

Segui le dritte che hai letto in questa breve guida e inizia a creare il tuo sito Web personalizzato. In pochi e semplici passaggi riuscirai nell’obiettivo che ti sei prefissato di raggiungere e realizzerai il tuo blog. Cura gli articoli con consigli e argomenti interessanti in linea con l’argomento che hai deciso di trattare e attira gli utenti che navigano sul Web con i tuoi contenuti.

 




Custom Field WordPress: Cosa Sono e Perché Sono Importanti

Introduzione

Quando scriviamo un articolo o un contenuto in generale, notiamo la presenza di alcuni dettagli di base che vengono visualizzati in basso, come ad esempio il nome degli autori, date etc. Questi dati vengono salvati come “meta dati” e prendono il nome di “custom field”; WordPress, di solito, li aggiunge automaticamente ma necessitano di essere abilitati.

Con i custom field (CF) è possibile modificare e aggiungere informazioni ulteriori all’interno della pagina con l’obiettivo di personalizzare ulteriormente il contenuto.

Per l’aggiunta di campi personalizzati è possibile procedere sia tramite plugin sia tramite l’aggiunta di codice direttamente nel tema. In questo articolo vedremo come aggiungere CF direttamente da codice.

Campi Personalizzati o Custom Field: a Cosa Servono?

L’utilità di un campo personalizzato è quella di poter mostrare, all’interno della pagina, informazioni aggiuntive oltre al contenuto principale e alle informazioni di base (come data di pubblicazione e autore).

Possiamo utilizzare i campi personalizzati in WordPress per aggiungere ad esempio un’informazione di approfondimento o una curiosità relativa al contenuto da mostrare in un determinato punto nella pagina.

Un custom field può anche essere utilizzato per prendere una decisione su una parte di contenuto da mostrare o nascondere in pagina. Ad esempio potremmo aggiungere un custom field di tipo “text” per stabilire se mostrare la sidebar nel front-end del nostro sito web (vedremo tra poco come fare).

Oppure con un campo relazionale per mettere in relazione due tassonomie e restituire un valore in base al verificarsi di un dato evento.

Supponiamo di dover creare un sistema di gestione dipendenti, avremo bisogno di alcune informazioni di base:

  • nome e cognome (li abbiamo già in WordPress)
  • data di nascita
  • email (l’abbiamo già in WordPress)
  • codice fiscale
  • etc

queste informazioni non sono tutte disponibili all’interno del sistema di gestione utenti di WordPress, quindi dovremmo aggiungere dei custom field.

Custom Field WordPress: Come Implementarli?

I campi personalizzati sono, per impostazione predefinita di WordPress, disabilitati, quindi dobbiamo abilitarli. Dalle impostazioni schermata della nostra pagina di modifica articolo, aggiungiamo un flag nella casella “Campi Personalizzati”.

Dopo aver abilitato la casella, spostarsi in basso e compilare il campo personalizzato con un nome descrittivo. Vogliamo decidere, per ogni articolo, se mostrare la sidebar oppure no.

Assegniamo come nome “display_sidebar” e come valore “si”, quindi stiamo passando come stringa il valore “si” che WordPress memorizzerà in database.

A questo punto dobbiamo aggiungere del codice all’interno del file single.php che si occupa di mostrare i dettagli del singolo articolo. All’interno del loop che mostra i dati del singolo articolo, aggiungiamo il seguente codice PHP:

$display_sidebar_si_no = get_post_meta($post->ID, 'display_sidebar', true);

Abbiamo creato una variabile chiamata $display_sidebar_si_no e al suo interno aggiungiamo il valore del nostro campo personalizzato. A questo punto intercettiamo la classe CSS della nostra sidebar e aggiungiamo una condizione IF che la mostrerà se il valore del CF è “si”. Nel nostro caso la classe CSS è “sidebar_developress_article”.

<?php 
if ($display_sidebar_si_no == si) {
// Non facciamo nulla quando la variabile ha valore SI
}
else {
// Aggiungiamo uno style per nascondere la classe CSS
?>
   <style>
.sidebar_developress_article {
    display:none;
}
</style> 
<?php
}
?>

Se abbiamo la necessità di mostrare agli utenti il valore di un campo personalizzato è sufficiente aggiungere, all’interno del loop (nella posizione che vogliamo), il seguente codice:

echo get_post_meta($post->ID, 'display_sidebar', true);

In alternativa è possibile anche lavorare con gli hook di WordPress per decidere la posizione esatta in cui mostrare il Custom Field.

Se vuoi approfondire il tema degli hook di WordPress puoi leggere questo articolo:

Hook di Azione: Cosa Sono e Come si Creano

Campi Personalizzati: Crearli con Advanced Custom Field

Uno dei migliori plugin per la creazione di campi personalizzati è Advanced Custom Field (ACF), una soluzione professionale e molto potente anche nella versione gratuita.

ACF permette di creare e lavorare con CF avanzati, del tipo: campi relazionali tra custom post type e tipologie di campi HTML avanzati come ad esempio il caricamento di un file, color/data picker etc.

ACF non verrà affrontato in questo articolo ma vorrei dedicare una guida dettagliata con esempi pratici di lavori che ho effettuato, in uno dei prossimi articoli. Intanto potete vedere la documentazione ufficiale, molto ben fatta e ricca di esempi:

Documentazione Advanced Custom Field

Se hai bisogno di supporto, puoi contattarmi o tramite email (la trovi nel footer) oppure tramite i profili social (li trovi nella mio biografica qua in basso).




Genialità di un Tema Child

Introduzione

Un tema creato da alcuni anni può funzionare ancora bene ma mancheranno sicuramente alcune funzionalità più recenti e che possono essere per noi utili al progetto. In WordPress la compatibilità con le versioni precedenti è ben supportata ma non può esserlo per sempre. Quindi la compatibilità è un argomento molto delicato ed è una delle principali cause della creazione di temi base che vengono poi estesi con i temi child. Quindi l’utente può aggiornare il tema principale senza perdere nessuna modifica. Può esserti utile leggere prima questo articolo “Plugin o functions.php?“.

Child Theme WordPress

I temi child permettono di creare temi che si basano su temi genitori utilizzati come template, modificando parti del tema di partenza per adattarli alla proprie esigenze. Può capitare che, o a noi o ad cliente, piace un tema nel complesso ma non gli piacciono i font o i colori, in questo caso creare un child-theme può essere una valida soluzione. Oppure può verificarsi l’esigenza di avere un tema che ci soddisfa ma abbiamo bisogno di un nuovo template di pagina, anche in questo caso possiamo risolvere con un tema child.

Il tema child si trova in una cartella propria e divisa dal tema padre, così come tutti i suoi file, pertanto quando carichiamo la nuova versione del tema originale sulla quale abbiamo basato il nostro sito, sovrascriviamo soli i file di quel tema e non il tema child che contiene tutte le modifiche.

Quando possiamo utilizzare i child theme

I theme child possono essere utilizzati in molte situazioni e per le più disparate necessità ma vediamo quali sono  le principali per le quali ha veramente senso creare una tema child:

  1. Apportare delle modifiche al sito ma non alle sue funzionalità;
  2. abbiamo in uso un tema di terze parti o un tema che vogliamo utilizzare nello stato attuale;
  3. non vogliamo modificare direttamente il tema esistente nel caso in cui si possono creare problemi (in particolare se non siamo esperti di sviluppo in WordPress);
  4. nel nostro sito è in esecuzione un tema progettato per essere un parent theme (ad esempio se il tema è stato sviluppato partendo da un framework).

I child theme costituiscono un modo efficace e sicuro per aggiungere personalizzazioni ad un tema. Vediamo nel dettaglio come realizzarne uno.

Creiamo, all’interno della cartella themes, una nuova cartella chiamata: NomeTema-child, dove “NomeTema” è il tema genitore. Al suo interno andremo a creare due file principali (e obbligatori): style.css e functions.php.

Theme child: analizziamo i due file principali

Ogni child theme deve avere almeno due file:

  1. un foglio di stile, style.css
  2. file di funzioni, il functions.php

Il file style.css conterrà in alto il testo commentato che comunica a WordPress che questo è un child theme e qual è il suo tema genitore. Il file functions.php contiene una funzione che accoda il foglio di stile del tema principale.

Di seguito il codice da aggiungere all’interno del file style.css

/*
Theme Name:  Il mio tema child per Twenty Nineteen.
Theme URI:  https://developress.it
Description:  Questo tema ha molte più funzionalità del tema base come ad esempio la gestione dei custom field e dei CPT
Author:  Developress
Textdomain:  developress
Author URI:  https://developress.it
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Di seguito, invece, il codice per il file functions.php

<?php
/* enqueue script for parent theme stylesheeet */        
function developress_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'developress_parent_styles');

il codice sopra utilizza la funzione wp_enqueue_style() per accodare il foglio di stile del tema principale, con la funzione get_template_directory_uri() che individua la location dove è archiviato il file.

Il child theme non deve includere obbligatoriamente altri file. A differenza del tema principale, non è necessario il file index.php come fallback se non ci sono file più specifici nel tema (vedere la gerarchia dei temi per maggiori dettagli). Questo perché, se non esiste un template file nel child theme, WordPress utilizzerà il file presente nel tema principale.

Quindi, a seconda di quello che vogliamo fare nel nostro child theme, aggiungiamo un codice extra al foglio di stile, al file functions.php, oppure creiamo file extra nel child theme per sovrascrivere il tema genitore. Questi potrebbero includere uno o più di:

  • Template files per sovrascrivere lo stesso file del tema principale, come page.php, quando si desidera personalizzare la visualizzazione di pagine;
  • parti di template come header.php o footer.php, quando si desidera personalizzare queste parti del design del sito.
  • Template part extra invocate dai template file del child theme. Quindi, se vogliamo personalizzare l’intestazione durante la visualizzazione di pagine statiche, è necessario creare un file nel child theme denominato header-page.php e un template file denominato page.php, che sostituisca il page.php del tema genitore. Questo template file sarebbe identico a quello del tema principale, ad eccezione della chiamata al file header, che chiamerà il file header-page.php invece di header.php.
  • Inclusioni extra di file per altre funzionalità. Se abbiamo la necessità di aggiungere molto codice nel functions.php e organizzarlo, possiamo creare più file da includere per ogni gruppo di funzionalità e quindi richiamarli nel file functions.php del child theme.

Theme Child: quando non conviene utilizzarli?

Anche se i temi child rappresentano una buona pratica in fase di sviluppo, ci sono alcune situazioni in cui è sconsigliato utilizzarli in quanto è preferibile apportare modifiche seguendo altre strade. Vediamo quando è meglio non utilizzare i child theme:

  1. quando il tema è stato sviluppato da noi stessi e non abbiamo bisogno di pubblicarlo altrove;
  2. quando le personalizzazioni che vogliamo fare sono soltanto funzionali, come ad esempio l’aggiunta di un custom post type o l’utilizzo di filtri, in questi casi è meglio utilizzare un plugin.

Una volta completato il theme child è necessario attivarlo da backend in aspetto > temi

Questo articolo rappresenta una guida introduttiva ai temi child di WordPress, quindi se hai dubbi o curiosità di approfondire il concetto, non esitare a contattarmi.




Progettiamo un tema WordPress in modo avanzato

Introduzione

Per poter creare un tema WordPress e rilasciarlo alla community o venderlo è necessario lavorare in modo avanzato al suo sviluppo. In questo articolo vedremo come portare un tema di WordPress ad un livello successivo rendendolo più solido, aggiungendo uno stile al contenuto nel modo che vogliamo, aggiungere caratteristiche personalizzate come header, footer e lavorare con le tassonomie personalizzate quando i tag e le categorie predefinite non sono in linea con il nostro progetto. Infine vedremo l’aggiunta di hook personalizzati al nostro tema per aggiungere funzionalità supplementari. Iniziamo e vediamo come portare un tema al Next Level!

Progettiamo il nostro tema

Il primo step da compiere  quando iniziamo a lavorare alla creazione di un tema per WordPress è di fare una lista di tutte le funzionalità che dovrà avere e fare in modo tale che l’utente sia in grado di gestire in modo autonomo i dati che gli servono e far sì che il sito web abbia l’aspetto desiderato dall’utente e non l’aspetto del tema di default. Vediamo alcuni aspetti di base.

Organizziamo i contenuti

L’organizzazione e la classificazione dei contenuti riguarda la definizione delle categorie da scegliere e quali parti del sito web dovranno essere statiche e quali dinamiche (gestibili in modo autonomo da backend e non da codice). Definire, in generale, quali dovranno essere le tassonomie coinvolte e quali. configurazioni/funzionalità dovranno avere.

Pensiamo al layout

Personalmente procedo, in fase preliminare, con carta e penna per poi passare ai wireframe e poi mockup, per definire per quali sezioni, pagine o elementi è richiesto di progettare spazio all’interno di una pagina (template di pagina). Inoltre è importare definire da subito in che modo andremo a popolare questi spazi in quanto questo determina la realizzazione di loop dedicati e dei template-file necessari.

Funzionalità particolari

Individuare se ci sono delle funzionalità da aggiungere che non vengono gestite nativamente da WordPress. In questo caso dobbiamo vedere se esiste un plugin oppure dobbiamo crearlo noi oppure, in fine, se esiste un sito web che eroga un servizio da poter integrare nel nostro sito.

Funzione di commento

Valutare la convenienza di impostare la funzionalità di commento sul nostro sito web e chiediamoci se è un valore aggiunto per l’utente e ci potrebbe dare vantaggi a noi o al cliente. Se optiamo per l’aggiunta di tale sistema è necessario prevedere un sistema antispam o limitare la possibilità di commentare soltanto a utenti registrati.

Come gestire piccoli elementi

Valutare se abbiamo necessità di gestire elementi dinamici all’interno dei quali aggiungere, ad esempio, dei banner o moduli particolari. In questo caso è buona pratica gestirli tramite widget.

Le informazioni sopra riportate sono fondamentali per delineare un tema WordPress robusto e ben organizzato. Vediamo alcune best practices utili in fase di sviluppo di un tema.

Ottimizziamo la gestione delle categorie

Per dare ai contenuti un’organizzazione generale, l’utilizzo delle categorie è fondamentale ma non dovranno essere troppe specifiche. I tag possono esse anche molto precisi ma sempre mantenere una loro utilità. Ad esempio se creiamo un sito web informazionale sui “Libri”:

  • Libri, può essere il custom post type;
  • i tag potrebbero essere:
    • autore
    • genere
    • titolo
    • casa editrice

In questo modo, oltre ad avere una buona organizzazione dei contenuti e garantire una buona navigazione agli utenti, si hanno dei vantaggi tecnici in quanto possiamo creare aspetti personalizzati per gli elenchi delle categorie tramite i temple file category.php e category-ID; in questo modo possiamo creare un tipo di contenuto in un modo e un altro contenuto con un aspetto differente.

Per avere un maggior controllo sui contenuti possiamo valutare anche la creazione di tassonomie personalizzate che, inoltre, potrebbero anche essere tenute nascoste agli utenti. Le tassonomie personalizzate ci permettono di aggiungere un maggior controllo sugli stili dei post.

Quindi, teniamo a mente di:

  1. assegnare lo stile alle categorie;
  2. ordinare per tag;
  3. perfezionare con i formati dei post.

Impostiamo i campi personalizzati (Custom Field)

I campi personalizzati (custom field o CF) di WordPress sono molto utili, ci permettono di archiviare dati, immagini, file e realizzare anche soluzioni di campi calcolati e condizionali (integrandoli con PHP e Ajax). I campi personalizzati permettono di dare al CMS funzionalità in più, che vanno oltre un classico titolo, uno slug o in generale quando non vogliamo/possiamo fare uso delle tassonomie di WordPress.

Se decidiamo di aggiungere i CF all’interno del nostro tema WordPress dobbiamo progettare tutta la gestione in modo user-friendly in quanto dovranno essere gestiti dal cliente, quindi dobbiamo prepare il cliente ed istruirlo in modo dettagliato. Ideale è preparare una documentazione PDF da aggiungere come link nella pagina di modifica dei CF. Inoltre è buona pratica costruire dei metabox propri e adattarli in base alle nostre esigenze.

Se non vogliamo creare custom field direttamente da codice, è possibile utilizzare il plugin Advanced Custom Field (ACF) (link al download) molto avanzato e fornisce una documentazione (leggi documentazione) in inglese molto dettagliata; è disponibile anche la versione Pro del plugin (vedi versione pro ACF).

Pagine e tipi di post

Le pagine sono ottimo punto di forza di WordPress, possiamo crearne quante vogliamo e, per ognuna, possiamo assegnare un proprio stile grafico (template) e avere la gestione sullo sul permalink. Quando realizzo un tema WordPress, i template di pagina non includono il contenuto effettivo della pagina (ma soltanto il titolo e lo slug nel pannello di amministrazione), nè il loop di WordPress, quindi i template di pagina consentono piuttosto altre operazioni.

Il template di pagina è uno strumento molto potente, utilizziamo con cognizione di causa (e con prudenza).

Se abbiamo bisogno di un maggior controllo possiamo utilizzare i tipi di post personalizzati (leggi articolo) per adattarli alle nostre esigenze. Ad esempio se vogliamo creare una pagina di errore (404, not found o di errore server 500) possiamo ricorrere ai tipi di post personalizzati. I tipi di post permettono, quindi, di avere un controllo più stretto e puntuale sui contenuti.

Conclusioni

Per ottimizzare e portare i siti web tradizionali (costruiti con elementi base di WordPress) ad un livello successivo, dobbiamo conoscere alcune le caratteristiche avanzate del CMS. Avere padronanza dei template di pagina, delle custom taxonomy, dei formati dei post e dei campi personalizzati, ci permette di realizzare siti web aziendali di alto livello, altamente personalizzati e facilmente gestibili (anche in fase di aggiornamento). In questo articolo abbiamo visto una serie di funzionalità che ci permettono di realizzare un tema solido e ben strutturato, assegnando stili personalizzati ai contenuti e organizzando i contenuti con una logica molto chiara, flessibile e resilente.

Con le funzionalità viste in questo articolo, possiamo fare veramente molto con WordPress, senza utilizzare necessariamente dei plugin. Ovviamente non è tutto ma questi sono i punti principali da affrontare in fase iniziale di creazione di un sito web. Restano da affrontare, ad esempio, tutti gli aspetti di user experience e design, che richiedono competenze dedicate.




Creiamo Errori 404 Utili per gli Utenti

In fase di progettazione e sviluppo di un sito web è buona pratica creare dei template supplementari, come ad esempio un template 404 per tutti quei casi in cui un utente arriva a un URL che non esiste più. Vediamo come creare un template 404.

Template 404.php

Il file PHP che mostra il template di pagina è 404.php, vediamo un esempio molto semplice di questo file:

<?php get_header(); ?>

<div id="container">
   <section id="content-container">

        <article id="post-0" class="post no-results not found">

             <H1 class="entry-title"> 404 pagina non trovata<H1>

<p>
Contenuto non trovato, probabile che il link sia sbagliato?
prova a cercare qualcosa utilizzando il modulo di ricerca
</p>

<?php get_search_form(); ?>
        <article>

Si tratta di un semplice template che mostra un messaggio di avviso quando l’utente visualizza una pagina che non esiste. Vediamo ora come creare errori 404 utili per gli utenti.

Errori 404 Utili per gli Utenti

Anche una pagina 404 come quella vista in precedenza è utile ma per renderla veramente utile per gli utenti deve avere alcune caratteristiche, vediamole:

  • deve essere subito chiaro che la pagina che stanno cercando non esiste più, quindi è utile aggiungere un’immagine appropriata sopra al testo;
  • forniamo agli utenti dei link interni utili, come ad esempio, le categorie principali di un e-commerce e la pagina FAQ;
  • aggiungere un modulo di ricerca interna e monitorare le ricerche che effettuano da questa pagina. Può esserci utile per individuare possibili errori di configurazione tecnica;
  • possiamo aggiungere dei “box intelligenti” intercettando l’URL. Ad esempio se all’interno dell’URL c’è la parola “mouse” allora mostro una sezione HTML con il loop WordPress che mostra soltanto i prodotti relativi ai mouse. Stessa impostazione può essere fatta per gli articoli di un magazine;
  • mostriamo una sezione HTML con gli ultimi prodotti o articoli;
  • utilizziamo un linguaggio simpatico in quanto un pò di umorismo può addolcire l’utente arrabbiato che non ha trovato un contenuto;
  • aggiungiamo in modo chiaro i riferimenti aziendali e contatti (e-mail, cellulare o numero fisso).



Abilitiamo il supporto alle thumbnails

Le features images (immagini in evidenza) o miniature dei post sono una caratteristica dei temi che permette agli utenti di selezionare un’immagine per ogni post nella schermata di modifica del post. In fase di realizzazione del nostro tema dobbiamo abilitarla (almeno che non partiamo da un framework o tema di base); per farlo dobbiamo utilizzare:

add_theme_support();

e passargli il parametro post-thumbnails nel file functions.php

add_theme_support( 'post-thumbnails' );

con il codice sopra, abilitiamo il riquadro “Immagine in Evidenza” nell’interfaccia di amministrazione. Per le immagini in evidenza è possibile aggiungere una dimensione con

add_image_size()

e registrare le nuove dimensioni che vogliamo, che verranno create a ogni caricamento analogamente alle dimensioni in miniatura o medie.

Vediamo ora, un codice da utilizzare con l’hook

after_setup_theme

per aggiungere una dimensione di immagine chiamata developress-slider scalata a 2000 x 300 pixel, aggiungiamo nel functions.php

add_image_size('developress-slider', 2000, 300);

A questo punto, abbiamo abilitato la caratteristica e ora dobbiamo visualizzarla nel nostro tema. Per visualizzare un’immagine all’interno del loop (nel template di pagina, ad esempio), utilizziamo:

the_post_thumbnail()

Se vogliamo aggiungere un controllo condizionale aggiungiamo:

has_post_thumbnail();

Utilizzato in questo modo, abbiamo la versione in miniatura dell’immagine ma, passando uno di questi parametri: thumbnail, medium o large, abbiamo l’immagine in formati differenti. In questo caso, passando come parametro developress-slider avremmo l’immagine scalata a 2000 x 300 px.

Possiamo anche passare una classe CSS (che deve essere già definita) per ottenere un altro stile:

the_post_thumbnail( 'medium', array( 'class' => 'develop-dark' ) );

Cosa è successo? con il codice sopra abbiamo aggiunto la classe develop-dark al tag img che viene generato come output da

the_post_thumbnail()

Possiamo anche aggiungere un controllo condizionale per avere conferma che ogni post abbia l’immagine in evidenza:

if ( has_post_thumbnail() ) {

     the_post_thumbnail();
}

 




Lavoriamo con i formati dei post

A partire dalla versione 3.1 di WordPress sono stati introdotti i “formati dei post” e affiancano gli sticky post come metodo separato per aggiungere un determinato controllo sui contenuti. Vediamo i formati di post disponibili nel CMS:

  • gallery per i post delle gallery;
  • aside utilizzato per brevi aggiornamenti e, di solito, senza un titolo;
  • audio per i file audio;
  • video per visualizzare un video singolo.
  • chat per pubblicare le trascrizioni delle chat;
  • status si utilizza per aggiornamenti brevi dello stato;
  • image per visualizzare una singola immagine;
  • link per la lettura progressiva dei post;
  • quote utilizzato per le citazioni.

I formati dei post possono essere utilizzati per tutto ciò che vogliamo in base a ciò che fa il nostro tema, utilizzando CSS e tag condizionali. Andiamo nel dettaglio!

L’obiettivo di utilizzare i formati dei post è quello di avere classi CSS dedicate che automaticamente aggiungono stili all’elemento. Ad esempio all’interno del tema Twenty Thirteen, il formato aside aggiungerà la classe format-aside al post. La vera utilità dei formati di post si ottiene quando li utilizziamo abbinati ai tag condizionali all’interno del loop; possiamo verificare se un post ha un determinato formato e, se questa condizione è vera, modificarlo o in generare fare azioni su di esso. Facciamo un esempio:

<?php
     if (has_post_format('aside')) {
         echo 'Si tratta di un post aside, quindi mostrarlo in questo DIV oppure far comparire un messaggio di avviso';
}
?>

Il codice sopra ci fa vedere come possiamo, ad esempio, mostrare dei dati, soltanto se il tipo di formato è “aside”. Potremmo impostare un loop che ci mostra soltanto i post con questo formato oppure progettare un template di pagina, con stili CSS dedicati, soltanto per una tipologia di post. Per poter aggiungere questa funzionalità al nostro tema dobbiamo indicare nel functions.php quali sono i formati di post supportati dal tema, ecco come:

<?php
add_action( 'after_setup_theme', 'developresstheme_setup'  );
function developresstheme_setup() {

// qui aggiungiamo i formati, passandoli tramite Array
add_theme_support( 'post-formats', array (
'aside',
'gallery',
'video'
));

}
?>

Il codice sopra, aggiunge la funzione:

developress_setup()

all’hook:

after-setup_theme

che a sua volta eseguirà il codice

add_theme_support( 'post-formats', array (
'aside',
'gallery',
'video'
))

I formati dei post da abilitare sono passati tramite un’Array.

get_template_part() e formati dei post

Il mio suggerimento è quello di non inserire l’intero loop nel file loop.php ma utilizzare:

get_template_part()

anche per i frammenti di codice più brevi. Ad esempio il tema di default di WordPress Twenty Eleven lavora proprio in questo modo tramite l’output predefinito del post in content.php, se vediamo nel dettaglio i file di questo tema, scopriamo che ci sono file supplementari per i diversi formati di post, come ad esempio: content-aside.php e content-video.php. Questi file hanno delle funzionalità e degli stile che valgono soltanto per questi formati di post.

La grande potenzialità si ha quando uniamo:

get_template_part()

con

get_post_format()

Quindi all’interno di Twenty Eleven troviamo questo codice:

get_template_parte('content', get_post_format() );

Questo codice restituisce il formato del post a

get_template_part()

e l’aggiunge a content. Quindi se il post ha il formato aside, la funzione:

get_template_part()

includerà il file content-aside.php.

Conclusioni

I formati dei post sono molto utili in quanto permettono di avere un’organizzazione dell’ambiente di lavoro molto pulita e ci permettono di definire stili grafici e comportamenti del nostro tema molto avanzati, in particolare se utilizzati con get_template_part() e altre funzioni di controllo PHP. Per tutti i dettagli sui formati dei post, vi consiglio di leggere un articolo sul sito web ufficiale: https://wordpress.org/support/article/post-formats/