Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Ago 29
guida wordpress

Come creare un tema WordPress: la homepage statica

  • 29/08/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione, Wordpress
  • creazione tema, tema wordpress, wordpress, wordpress theme

Ciao 🙂

Web Hosting

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.

WooCommerce tema

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.

Development Category (English)728x90

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:

  1. La pagina ha contenuto?
  2. (Se la risposta è sì) Finché ha posts continua a fare un ciclo su di questi
  3. Abbiamo una riga, con una grande colonna
  4. All’interno un <div> che ha come classe quella eventualmente definita per il post (il contenuto della pagina in questo caso specifico)
  5. Mostro il titolo
  6. Se ha un’immagine in evidenza, ovvero la thumbnail, la vado a mostrare
  7. Paragrafo per indicare data e autore del post
  8. Paragrafo per il contenuto con messaggio “Continua a leggere” per vedere il post intero
  9. Categorie del post separate da virgola
  10. Commenti al post
  11. Dunque chiudiamo il post ed il ciclo
  12. Inseriamo la navigazione tra i post
  13. 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

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • Come creare un tema WordPress: installazione automatica dei plugin30/08/2017
  • Come creo un tema WordPress?17/08/2017

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...