Ciao 🙂

Se stai leggendo questo articolo è perché sei interessato a scoprire come iniziare ad inserire la homepage nel tema WordPress che stai creando. Hai seguito la guida dall’inizio? La trovi in continuo aggiornamento a partire da: Come creo un tema WordPress?.

Direi di partire spiegandoti come funziona la parte di codice che andrà a generare del contenuto da mostrare nella pagina. Non ti dimenticare di ripassarti lo schema della gerarchia dei file WordPress che ti avevo descritto in questo articolo.

Una pagina per tutti

Perché ho chiamato questo paragrafo “una pagina per tutti”? Beh, se hai ripassato la gerarchia dovresti capire al volo che la pagina che andremo a modificare per prima per inserire del contenuto è la pagina “index.php”.

Ti premetto che in questo tema la pagina di index conterrà solo un default in caso di pagine mancanti o con altri nomi. Nella realtà dei fatti verranno utilizzate pagine costruite in maniera specifica per ogni sezione e lo vedremo nei prossimi articoli. Questa guida si rivolge infatti a chi ha intenzione di creare un tema per un cliente su misura.

Setup della pagina Home

Per prima cosa inseriamo del contenuto nella pagina “Home” del sito che abbiamo in locale. Quindi entra nel tab Pagine del pannello wp-admin e seleziona la Home.

Se la pagina non è già presente creala chiamandola “Home”. A questo punto salva la pagina, entra in Impostazioni > Lettura ed imposta la Modalità di Visualizzazione della Prima Pagina come “Pagina Statica” e pagina iniziale uguale a “Home”:

Dunque torna nel tab “Pagine”, apri nuovamente la pagina Home ed inserisci in modalità Testo e non Visuale queste righe di codice:

<h1 style="text-align: center;">Sublime</h1>
<div class="row">
   <div class="col-xs-12 col-md-6 col-lg-3">
      Esteticamente colpisce chiunque e ti permette di fare ogni cosa senza problemi! <strong>Batteria con durata minima di 9 ore</strong>, che spettacolo.
   </div>
</div>

<div class="row">
   <div class="col-xs-12 col-md-6 col-lg-3 offset-xs-0 offset-md-6 offset-lg-9">
      Il particolare più interessante è sicuramente quell'alluminio che avvolge tutto, interessante e bello a colpo d'occhio.
   </div>
</div>


<div class="row">
   <div class="col-xs-12 col-md-6 col-lg-3 offset-xs-0 offset-md-2 offset-lg-4">
      Lo <strong>schermo retina</strong> è sicuramente qualcosa di altamente entusiasmante per l'esperienza utente che non rimane mai delusa da quanto svolto dal team Apple.
   </div>
</div>

Il contenuto della pagina Home è composto da un titolo (<h1>) e da diversi paragrafi suddivisi in righe. In ciascuna riga abbiamo un paragrafo inserito dentro ad una colonna che in caso di schermi ridotti occuperà tutta la larghezza, altrimenti occuperà metà riga in caso di schermo di medie dimensioni, altrimenti solo un terzo quando lo schermo è di grandi dimensioni. A seconda della dimensione che occupa si discosta dal bordo sinistro con un offset che varia a seconda dello schermo.

Deep Learning Specialization on Coursera

Se vuoi approfondire maggiormente la cosa, come ti ho già accennato in un altro articolo, vai direttamente sul sito di Bootstrap che trovi a questo indirizzo (ti ricordo che Bootstrap lo abbiamo incluso come stile nel file “header.php”).

Il codice

A questo punto abbiamo definito un contenuto per la pagina Home, lo so che è ancora un po’ bruttino, lo migliorerò in futuro.

Salva questa pagina e preparati a mettere le mani al codice. Entra nella cartella del tuo tema con l’editor di testo che preferisci, apri il file “index.php” e per prima cosa vai a rimuovere lo stile nel <div> con classe “container”. Ora infatti non ci servirà più un’altezza fissa.

Quindi inseriamo il codice per mostrare il contenuto delle pagine (parlo al plurale perché mettiamo mano al file di index quindi qualunque pagina che andrai a creare in assenza di pagine più specifiche secondo la gerarchia WordPress andrà ad utilizzare questo file per mostrare il contenuto):

<div class="container">
<?php if (have_posts()) : ?>
<!-- START LOOP -->
<?php while (have_posts()) : the_post(); ?>
<!-- BEGIN POST -->
<div class = "row">
   <div class = "col-xs-12 col-md-12 col-lg-12 custom-content post-content">
      <div <?php post_class(); ?>>
         <h2 class = "custom-post-title"><?php the_title(); ?></h2>

         <?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); } ?>
         <?php the_time('j F Y') ?> di <?php the_author() ?>
         

         <div class="entry">
            <?php the_content(__('|| continua a leggere &raquo;')); ?>
         </div>

         Pubblicato in <?php the_category(', ') ?>
         <?php comments_popup_link('Nessun commento &raquo;', '1 Commento &raquo;', '% Commenti &raquo;'); ?>
         </div>
     </div>
</div>

<!-- END POST -->
<?php endwhile; ?>
<!-- END LOOP -->

<div class="navigation">
   <div class="alignleft"><?php next_posts_link(__('&laquo; Precedenti')) ?></div>
   <div class="alignright"><?php previous_posts_link(__('Successivi &raquo;')) ?></div>
</div>

<?php else: ?>
<h2><?php _e('Non trovato'); ?></h2>
<?php _e('Siamo spiacenti, quello che stavi cercando non è su questa pagina'); ?>
<?php endif;>

Quindi in ordine stiamo eseguendo queste operazioni:

La pagina ha contenuto?
(Se la risposta è sì) Finché ha posts continua a fare un ciclo su di questi
Abbiamo una riga, con una grande colonna
All’interno un <div> che ha come classe quella eventualmente definita per il post (il contenuto della pagina in questo caso specifico)
Mostro il titolo
Se ha un’immagine in evidenza, ovvero la thumbnail, la vado a mostrare
Paragrafo per indicare data e autore del post
Paragrafo per il contenuto con messaggio “Continua a leggere” per vedere il post intero
Categorie del post separate da virgola
Commenti al post
Dunque chiudiamo il post ed il ciclo
Inseriamo la navigazione tra i post
Se non viene trovato nulla, quindi la risposta all’IF iniziale è “false” andiamo ad informare l’utente che non è stato trovato nulla

Una piccola aggiunta

Come avrai capito questa pagina è pronta per mostrare dei veri e propri posts. Nel caso della Home il post è unico ed è composto da quanto abbiamo inserito prima. Nel caso di una pagina per gli articoli i posts sono più di uno. Per questo motivo in futuro andremo a creare una pagina appositamente per gli articoli ed una appositamente per la Home.

Al momento rendiamo la nostra pagina index completa. Per farlo aggiungiamo la sidebar. Tramite la sidebar l’utente potrà inserire dei Widgets da mostrare lateralmente. Noi per adesso non imposteremo nulla perché non ci è necessario per la Home, però come passo preliminare per gli articoli successivi dobbiamo fare questa piccola operazione:

Crea un file “sidebar.php”
Inserisci in index.php dopo la chiusura del <div> “container”:
```
<?php get_sidebar(); ?>
```
Dunque inserisci in “sidebar.php”:
```
<div id="sidebar"> </div>
```

Lo stile

Abbiamo una pagina di index completa. Diamogli un po’ di stile e poi osserviamo il risultato.

Apri il file “style.css” ed inserisci sotto a tutto ciò che è già presente questo codice CSS:

/* Articles */
.attachment-thumbnail.size-thumbnail.wp-post-image {
 width: 50%;
 height: 50%;
}
p.author {
 font-style: italic;
 font-size: 12px;
}
.post-content .entry {
 text-align: justify;
 font-size: 22px;
 padding: 10px;
}
.entry p a:hover {
 text-decoration: none;
 font-size: 100%;
}
.post-content .postmetadata {
 padding-top: 10px;
}
p.postmetadata a:hover {
 text-decoration: none;
 font-size: 100%;
}
.custom-post-title {
 border-bottom: 1px solid grey;
}

Il CSS per gli articoli è pronto e visto che al momento la nostra pagina Home utilizza alcune di queste classi vedremo qualcosa di strutturato, con qualche bordino e qualche aggiustamento al layout.

Il risultato

Il risultato che ottieni, una volta conclusa la guida, è questo:

So che ancora non è il massimo. Per questo motivo nella prossima lezione ti insegnerò per prima cosa ad inserire dei plugin di default con il tema. Nel caso specifico a fare in modo che l’utente li installi non appena ha attivato il tema. Dunque utilizzeremo un plugin interessante per il setup dei campi così da poter definire immagini principali e testi importanti.

Dopo di che creeremo la pagina relativa solo alla Home e dunque tutte le altre pagine “Chi Sono”, “News” e “Contatti”. Non ti perdere nulla e continua a seguire l’articolo Come creo un tema WordPress?.

Per dubbi o domande non esitare a scrivermi nei commenti 🙂

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)

Commenti