Una delle prime domande di uno sviluppatore, che deve creare un sito in wordpress, è la seguente: meglio un tema premade o uno custom?
Potrebbe sembrare una domanda semplice o dalla risposta banale, tuttavia non è così. Vediamo di analizzare i pro ed i contro di entrambi per vedere se effettivamente possiamo dare una risposta definitiva.
Iniziamo partendo dalle basi, per poi andare a stabilire se sia meglio scegliere tra un tema premade o custom.

Cos’è un tema

 

Prima però, partiamo dalle basi, per poi andare a concentrarci su quella che è la domanda che ci siamo posti. Un tema è un insieme di file che definiscono il funzionamento e la grafica di un sito web. Oltre quindi ai color dei testi, dei link o delle varie sezioni, possiamo stabilire quanti, quali ed in che ordine siano i post che vogliamo far visualizzare, se deve esserci una pagina archivio per una determinata tipologia di post, se deve essere presente un portfolio e così via. Possiamo stabilire la struttura anche delle pagine oltre che il colore. Per esempio, vogliamo che la homepage abbia uno slider, una sezione con il calendario oppure gli ultimi articoli del nostro blog? Anche queste cose sono personalizzabili nel tema.

 

Le customizzazioni elencate vengono definite però prima di sviluppare il sito. A definirle può essere un web designer, lo sviluppatore stesso che ovviamente si confronta con il cliente oppure è il cliente stesso che, avendo in mente un’idea di come vorrebbe essere creato il sito, la spiega allo sviluppatore. Se il tema è stato ideato dal web designer, lo sviluppatore non deve fare altro che replicare quanto esposto graficamente nei mockup. In questo caso, il web designer potrebbe aver preso come base di lavoro un tema già esistente oppure potrebbe averla ideata di suo pugno. Se è lo sviluppatore stesso a decidere la grafica (assieme al cliente), può proporgli diversi temi tra cui scegliere (generalmente due o tre), oppure realizzare la grafica lui stesso.
Dopo aver pensato al come ideare la grafica per il sito, e aver quantificato i tempi di consegna,si sceglie se acquistare un tema oppure svilupparlo ad hoc.

 

Analizziamo i pro e i contro di entrambi, per comprendere se effettivamente è meglio acquistare un tema premade oppure svilupparne uno custom.

Temi acquistati

 

Per stabilire se sia meglio scegliere tra un tema premade o custom , analizziamo inanzitutto i primi. Per comprare un tema possiamo andare su uno dei tanti siti specializzati, come ad esempio themeforest. Una volta terminato l’acquisto, basta installarlo ed il gioco è fatto.

 

Ma è proprio così? In realtà no poiché molto spesso il cliente potrebbe cambiare idea sul colore, sul layout di una singola pagina, il posizionamento delle componenti che costituiscono la pagina stessa oppure è necessaria l’aggiunta di funzionalità che non sono presenti nel tema. In questo caso, pertanto, bisognerà agire sul tema stesso implementando classi css nel personalizer di wordpress. Questa soluzione tuttavia potrebbe creare qualche problema se non si pone attenzione.

Esempio

 

Vediamola con un esempio. Supponiamo di avere un elemento del dom che ha come margine 20px a destra in una classe chiamata .myClass. Per qualche ragione, dobbiamo cambiare questo margine ma l’elemento non offre, nel backoffice, la posssibilità di modificarlo. Potremmo pensare di ispezionare l’elemento con la console del browser, individuarne la classe e modificarla nel personalizer. Questa prima soluzione potrebbe essere valida, non fosse che la stessa classe .myClass potrebbe essere utilizzata anche in altre parti e pertando andremo questa modifica potrebbe influenzare anche altre sezioni del sito. Se è questo il risultato che vogliamo allora possiamo ritenerci soddisfatti, altrimenti dovremo trovare un altro modo, come ad esempio inserire, se possibile, una classe custom all’elemento a cui vogliamo cambiare il margine.

Questo è un esempio banale, ma potrebbe essere esteso anche a elementi estetici più complessi come, per esempio, animazioni o effetti grafici vari che portano ad avere un’implementazione più difficile se non impossibile in alcuni casi.

 

Componenti aggiuntive

 

Un altro problema dei temi acquistati è che potrebbe esserci richiesta di una componente che il tema in questione non prevede. In questo caso, il metodo più semplice per risolvere questo problema è quello di installare un plugin che ci permetta di soddisfare le richieste del cliente. Questo però potrebbe comportare una maggiore pesantezza del sito oltre ad eventuali problemi di incompatibilità con i futuri aggiornamenti di wordpress per esempio.

Temi custom

 

Un tema custom è interamente realizzato “a mano”, partendo dall’esigenza specifica del cliente. Il tema si comporrà ovviamente dei file essenziali per il suo funzionamento, esattamente come un tema acquistato ma differirà dai temi comprati in quanto risponderà appieno alle esigenze del cliente. Il sito in questo caso sarà pensato per l’utente finale, mobile first, e soprattutto sarà progettato per convertire e ottimizzato da un punto di vista SEO. Tutto questo però, come già detto, richiede uno studio ed una progettazione di base. Pertanto, i tempi di rilascio del sito saranno sicuramente più lunghi rispetto a quelli di un sito realizzato con un tema comprato.

Ovviamente anche i costi saranno maggiori poichè dovremmo studiare il layout, la SEO e via dicendo. Indipendentemente che queste operazioni preliminari allo sviluppo siano fatte da noi stessi o da qualcuno che lavora per noi, vanno comunque stimate in termini economici ed incluse nel prezzo proposto al cliente. Questo comporterà sicuramente ad un prezzo maggiore rispetto a quello per un tema comprato. Oltre a questo, bisogna considerare la difficoltà nello sviluppo del tema, soprattutto per quel che concerne le personalizzazioni grafiche.

Di contro potremmo avere bisogno di meno plugin questo comporterà sicuramente una maggiore leggerezza ed una manutenzione che dovrà essere effettuata per meno componenti portando quindi ad una probabilità di conflitti minore rispetto ai temi comprati. Ovviamente anche la conoscenza del codice che abbiamo scritto, ci permette di modificare il tema più semplicemente e facilmente rispetto ad un tema comprato, andando ad agire anche sui file stessi che lo compongono.
Passiamo ora al processo creativo.

 

Processo creativo

 

Fin’ora abbiamo visto solo il lato puramente tecnico, ma per scegliere tra un tema premade o custom in realtà dobbiamo considerare anche quello “creativo”. Partiamo subito da un presupposto: scegliere un tema non è facile; non basta basarsi solo sulla presenza o meno di effetti grafici che saltano all’occhio. Quello che dobbiamo tenere ben presente è questo: il tema deve adattarsi al contenuto. Non viceversa. Pertanto tutto il processo che porta a consigliare una rosa di 3/4 temi ad un cliente ha un lavoro di conoscenza, studio ed analisi dietro, non meno importante o difficile di quello che c’è dietro un tema custom.

 

Conclusioni

 

Alla luce dell’analisi effettuata possiamo effettivamente stabilire se è meglio comprare un tema premade o realizzarne uno custom?

La risposta è semplice: non c’è una soluzione migliore in assoluto, ma bisogna stabilire quale scelta effettuare in base al contesto. Le domande che dovremmo porci per rispondere a questo quesito sono molteplici. Cosa deve ottenere il cliente dal sito? Quali sono i suoi contenuti? Come dobbiamo strutturare i dati che abbiamo? Qual’è il budget? C’è una tempistica specifica da rispettare? Se sì, quando è la deadline?

Pertanto, quando dobbiamo sviluppare un sito wordpress prima di scegliere tra un tema premade o custom dobbiamo rispondere alle domande che ci siamo posti. Solo dopo esserci risposti, possiamo passare alla fase di sviluppo del sito.

In questo articolo vedremo un tutorial su come creare una sidebar. Si tratta di una componente semplice da realizzare e che si rivolge, pertanto, soprattutto a chi si sta approcciando da poco alla programmazione web.
Per realizzare questa componente si farà uso anche di jQuery ma in misura molto limitata e di Bootstrap.

In questo tutorial realizzeremo il tutto in un unico file ma, ovviamente, è possibile suddividere le varie sezioni in diversi file.

Realizziamo come prima cosa la struttura di base del nostro file html.

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar</title>
   </head>
   <body>
     <h2>Content</h2>
   </body>
</html>

Importazione jquery e bootstrap

Ora procediamo ad inserire, all’interno del tag head i link per implementare le librerie di Boostrap e di jQuery. Questi tag li possiamo reperire tranquillamente sul sito di Bootstrap ad https://getbootstrap.com/

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar</title>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <!-- FONTAWESOME -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
        <!-- CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   </head>
   <body>
     <h2>Content</h2>
   </body>
</html>

Nello snippet precedente abbiamo inserito anche per completezza il link alle icone della libreria fontawesome.

Realizzazione wrapper

Il prossimo passo consiste nell’inserimento dell’html. Come prima cosa dobbiamo realizzare un wrapper, ovvero un elemento che dovrà contenere sia la sidebar che il contenuto della pagina. Ovviamente questo elemento dovrà avere delle regole di stile che inseriremo all’interno del tag style. Il primo passaggio nella definizione degli stili è quello di impostare l’altezza dei tag html e body al 100%, in modo tale da avere sia la sidebar che l’elemento contenitore alti quanto la finestra del browser che abbiamo aperto. L’elemento wrapper dovrà avere come valore della proprietà display flex, altezza e larghezza pari al 100% dell’elemento padre e gli elementi contenuti sarà allineati in modo tale da adattarsi al contenitore tramite la proprietà align-items ed il valore stretch. Questa proprietà si può utilizzare unicamente in combinazione con il valore flex, che crea elementi dal layout flessibile, della proprietà display. All’interno del wrapper vi è anche un ulteriore div contenitore avente id content. Di questo parleremo più avanti però.

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar</title>
        <!-- jQuery, CSS e Fontawesome -->
        <style>
            html,body{
                height: 100%;
            }
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch;
                height: 100%;
            }
        </style>
   </head>
   <body>
     <div class="wrapper">
         <div id="content">
            <h2>Content</h2>
         </div>
     </div>
   </body>
</html>

La sidebar

A questo punto cominciamo a realizzare la sidebar vera e propria. Il primo tag da aprire per realizzare il nostro obiettivo è il tag nav, che dovrà avere necessariamente un id. All’interno dei questo tag andremo ad inserire le voci del nostro menù laterale come meglio vogliamo. In questo caso, ho optato per una lista non ordinata al cui interno ho messo degli elementi che sono a loro volta liste non ordinate.

<nav id="sidebar" class="custom-color-sidebar">
    <div class="sidebar-header">
         <span class="size-font-sidebar"><span class="mt-4">Sidebar</span></span>
   </div>
   <ul class="list-unstyled components">
       <li>
          <a href=""><i class="fas fa-home mr-3"></i>Voce 1</a>
      </li>
      <li>
         <a href="#voce-2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-cog mr-3"></i>Voce 2</a>
         <ul class="collapse list-unstyled" id="voce-2">
                <li>
                    <a href="">Sottovoce 1</a>
                </li>
                <li>
                    <a href="">Sottovoce 2</a>
                </li>
            </ul>
       </li>
       <li>
           <a href="#voce-3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-cog mr-3"></i>Voce 3</a>
          <ul class="collapse list-unstyled" id="voce-3">
                  <li>
                      <a href="">Sottovoce 1</a>
                  </li>
                  <li>
                      <a href="">Sottovoce 2</a>
                  </li>
              </ul>
       </li>
       <li>
          <a href="#voce-4" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-cog mr-3"></i>Voce 4</a>
         <ul class="collapse list-unstyled" id="voce-4">
             <li>
                 <a href="">Sottovoce 1</a>
             </li>
             <li>
                 <a href="">Sottovoce 2</a>
             </li>
             <li>
                 <a href="">Sottovoce 3</a>
             </li>
         </ul>
      </li>
   </ul>
</nav>

Come potete vedere, il menù realizzato è una lista non ordinata le cui voci sono al loro volta delle liste non ordinate. Al click su una delle voci principali si apre il menù con le sottovoci cliccabili e eseguiranno delle operazioni (tipicamente reindirizzeranno ad altre pagine ma potrebbero anche aprire modali per esempio). Per ottenere questo effetto all’interno del tag li rappresentante la macrovoce bisogna mettere i data attribute data-toggle che avrà come attributo collapse e aria-expanded con attributo false. Come valore dell’attributo href invece metto l’id della lista non ordinata che vogliamo far aprire al click. La classe dropdown-toggle è una classe di bootstrap che non fa altro che stilizzare il pulsante.

Posizioniamo il pulsante ed il contenuto

La sidebar appena creata dovrà essere posizionata all’interno del wrapper ma fuori il div content poichè quest’ultimo, in caso volessimo nascondere la sidebar dovrà assumere la larghezza di tutta la finestra ma anche perchè l’altro contenuto gli andrebbe sotto compreso il pulsante che serve a nasconderla e visualizzarla.

<div id="content">
    <!-- TOP BAR -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <button type="button" id="sidebarCollapse" class="btn btn-dark">
                <i class="fas fa-align-center"></i>
           </button>
           <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>
    <!-- FINE TOPBAR -->
</div>

All’interno del div content dovrà essere posizionato il contenuto della pagina. In questo caso ho inserito una topbar con il pulsante per nascondere o visualizzare la sidebar. Viene pertanto aperto un nuovo tag nav al cui interno, dentro un div con la classe container-fluid di bootstrap, inseriemo il pulsante che servirà al nostro scopo. Questo pulsante dovrà avere necessariamente un id che ci servirà nelle poche linee di jquery che andremo ad implementare.

Le regole di stile della sidebar e del content

Il div content dovrà avere uno stile ben preciso. Pertanto all’interno del tag style nella head, definiamo quanto segue

#content {
      width: 100%;
      padding: 20px;
      min-height: 100%;
}

La larghezza deve sempre essere del 100% della finestra, così come l’altezza minima. Vediamo ora le regole minime che deve avere la sidebar.

#sidebar {
    width: 250px;
    background: #000 !important;
    color: #fff;
    transition: all 0.3s;
    height: 100%;
}

#sidebar.active {
    margin-left: -250px;
}

Analizziamo quanto riportato sopra. La sidebar ha una larghezza di 250px fissa, l’altezza del 100% della finestra del browser e la proprietà transition che definisce il tempo che impiegherà la sidebar a nascondersi o visualizzarsi. L’altra regola fondamentale è il margin-left in #sidebar.active. Questa permette di effettivamente nascondere la sidebar quando viene premuto l’apposito pulsante, spostandola a sinistra.

Il codice jQuery

<script type="text/javascript">
   $('#sidebarCollapse').on('click', function () {
       $('#sidebar').toggleClass('active');
   });
</script>

Terminiamo questo tutorial su come creare una sidebar inserendo il jQuery che effettivamente si occupa di nascondere o far visualizzare la sidebar. Al pulsante con id sidebarCollapse viene associato l’evento click in modo tale che ad ogni pressione, all’elemento con id sidebar viene tolta o rimossa la classe active che, come abbiamo visto sopra, nasconde o visualizza la sidebar. Questa componente la mettiamo appena prima della chiusura del tag body, fuori dai div.

Conclusioni

Questi sono gli elementi che servono per realizzare la sidebar. Come detto ad inizio articolo possiamo prendere ciascun elemento e metterlo in un file a parte per rispettare il principio di modularità ed evitare, pertanto, di dover modificare, qual’ora dovesse servire, ciascuna pagina in cui viene utilizzata.

Potete scaricare il file completo di questo tutorial su come creare una sidebar al seguente link: download_sample_sidebar