Ciao 🙂

In questo articolo ti descrivo come creare pagine specifiche in un tema WordPress. Se è la prima volta che visualizzi questa guida assicurati di essere partito dall’inizio: Come creo un tema WordPress?.

Se sei pronto ti insegnerò a creare pagine ad-hoc per il tema che stai creando. A questo punto darò per scontato che hai imparato la gerarchia di WordPress per le pagine php (se no puoi ripassarla in questo articolo).

Creazione della Home page

Negli ultimi articoli ti ho spiegato come fare in modo di installare plugins quando l’utente attiva un tema (vedi quì) e abbiamo iniziato a creare la home page che ora è visibile solo grazie al codice scritto nella pagina di index.

Quello che devi fare adesso è preparare il tuo editor di testo ed entrare nella cartella del tuo tema. Dunque crea un nuovo file chiamandolo “page-home.php“.

<?php get_header(); ?>
<div class = "container">
   <div class = "row">
      <div class = "col-xs-12 col-md-12 col-lg-12">
         <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
               <div <?php post_class(); ?>>
               <?php if (function_exists('get_field')) : ?>
                  <?php if (get_field('home_show_title')) : ?>
                     <h2><?php the_title(); ?></h2>
                  <?php endif; ?>
                  <?php if (get_field('home_image_admin')) : ?>
                     <div class = "row">
                        <div class = "col-xs-12 col-md-12 col-lg-12">
                           <div class="center">
                              <img src="<?php the_field('home_image_admin'); ?>" style = "max-width:100%"/>
                           </div>
                        </div>
                     </div>
                  <?php endif; ?> 
 
               <?php endif; ?> 
               <div class="entry">
                  <?php the_content(__('|| continua a leggere &raquo;')); ?>
               </div>
            </div>
         <?php endwhile; ?>
      <? endif; ?>
   </div>
  </div>
</div>
<!-- START SIDEBAR -->
<?php get_sidebar(); ?>
<!-- END SIDEBAR -->
<div class="clearer"></div>
<!-- START FOOTER -->
<?php get_footer(); ?>
<!-- END FOOTER -->
</div>
</body>
</html>

Molto di quello che vedi ormai non ti sarà più nuovo. Comunque tra le cose nuove da annotare c’è il controllo dell’esistenza della function “get_field” e dunque l’utilizzo di 2 campi:

• home_show_title
• home_image_admin

Questi 2 campi che possono essere recuperati tramite la function “the_field(nome_campo)” sono campi che andremo ad impostare tramite il plugin impacchettato con il tema. Per la precisione parlo di Advanced Custom Fields (se vuoi saperne di più ricordati di questo articolo).

Modificare functions.php

Se osservi il tuo sito web adesso vedrai che l’immagine che c’era l’altra volta e che avevi caricato come immagine in evidenza è sparita.

Devi andare ad aggiungere delle righe di codice al file functions.php. Posizionati prima della registrazione della sidebar nel file functions.php ed inserisci queste righe di codice:

<?php
   function get_ID_by_slug($page_slug) {
       $page = get_page_by_path($page_slug);
       if ($page) {
           return $page->ID;
       } 
       else {
           return null;
       }
   }
   
   if(function_exists("register_field_group"))
   {
       if(get_ID_by_slug("home") != null){
           register_field_group(array (
           'id' => 'acf_home-admin-fields',
           'title' => 'home admin fields',
           'fields' => array (
               array (
                   'key' => 'field_59821dadc7731',
                   'label' => 'home_image_admin',
                   'name' => 'home_image_admin',
                   'type' => 'image',
                   'save_format' => 'url',
                   'preview_size' => 'thumbnail',
                   'library' => 'all',
               ),
               array (
                   'key' => 'field_5932dd16cbeca',
                   'label' => 'home_show_title',
                   'name' => 'home_show_title',
                   'type' => 'true_false',
                   'required' => 0,
                   'message' => '',
                   'default_value' => 1,
               ),
           ),
           'location' => array (
               array (
                   array (
                       'param' => 'page',
                       'operator' => '==',
                       'value' => get_ID_by_slug("home"),
                       'order_no' => 0,
                       'group_no' => 0,
                   ),
               ),
           ),
           'options' => array (
               'position' => 'normal',
               'layout' => 'no_box',
               'hide_on_screen' => array (
               ),
           ),
           'menu_order' => 0,
       ));
       }
   
       register_field_group(array (
           'id' => 'acf_pages-admin-fields',
           'title' => 'pages admin fields',
           'fields' => array (
               array (
                   'key' => 'field_21821dadc7731',
                   'label' => 'page_image_admin',
                   'name' => 'page_image_admin',
                   'type' => 'image',
                   'save_format' => 'url',
                   'preview_size' => 'thumbnail',
                   'library' => 'all',
               ),
               array (
                   'key' => 'field_9122dd16cbeca',
                   'label' => 'page_show_title',
                   'name' => 'page_show_title',
                   'type' => 'true_false',
                   'required' => 0,
                   'message' => '',
                   'default_value' => 1,
               ),
           ),
           'location' => array (
               array (
                   array (
                       'param' => 'post_type',
                       'operator' => '==',
                       'value' => 'page',
                       'order_no' => 0,
                       'group_no' => 0,
                   ),
               ),
           ),
           'options' => array (
               'position' => 'normal',
               'layout' => 'no_box',
               'hide_on_screen' => array (
               ),
           ),
           'menu_order' => 1,
       ));
   }
?>

In queste righe di codice sta accadendo che:

1. Abbiamo una function che ci sa dare l’ID di una pagina dato lo slug
2. Controlliamo se esiste la function per la registrazione dei campi
3. Controlliamo di avere una pagina relativa alla Home
4. Se la risposta è positiva andiamo a registrare un gruppo di campi relativo alla home (con i campi descritti prima)
5. In ogni caso registriamo campi relativi alle pagine in generale

Ovviamente in questo caso ti sto facendo vedere un esempio. Osserva bene i campi relativi alla ‘location’. Nel caso della Home cerchiamo una pagina in particolare e, così come è strutturato il tema, vorrebbe dire che la pagina Home dovrebbe essere già presente prima dell’installazione. Al contrario per le pagine in generale i campi potranno essere inseriti sempre finché il “post_type” è “page”.

Ci siamo quasi

Dunque sei pronto per avere una HomePage più carina! Entra nel pannello wp-admin del tuo sito ed disattiva e riattiva il tema.

Entra nella pagina Home in modifica dal pannello di amministrazione e guarda cosa trovi in basso:

I campi che abbiamo inserito da functions.php. Carica un’immagine in “home_image_admin”, salva le modifiche e vai a visualizzare il tuo sito.

Ecco il risultato:

Le altre pagine

Per quanto riguarda le altre pagine utilizziamo un altro tassello della gerarchia di WordPress. In questo caso non saremo specifici per slug, ma nemmeno generici con la index. In questo caso crea il file “page.php” ed inserisci il seguente codice:

<?php get_header(); ?>
<div class = "container">
   <div class = "row">
      <div class = "col-xs-12 col-md-12 col-lg-12 custom-content">
         <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
               <div <?php post_class(); ?>>
                  <?php if (function_exists('get_field')) : ?>
                     <?php if (get_field('page_show_title')) : ?>
                        <h2><?php the_title(); ?></h2>
                     <?php endif; ?>
                     <?php if (get_field('page_image_admin')) : ?>
                        <div class = "row">
                           <div class = "col-xs-12 col-md-12 col-lg-12">
                              <div class="center">
                                 <img src="<?php the_field('page_image_admin'); ?>" style = "max-width:100%"/>
                              </div>
                           </div>
                        </div>
                     <?php endif; ?>  
                  <?php endif; ?>
                  <div class="entry">
                     <?php the_content(__('|| continua a leggere &raquo;')); ?>
                  </div>
               </div>
            <?php endwhile; ?>
         <? endif; ?>
      </div>
   </div>
</div>
<!-- START SIDEBAR -->
<?php get_sidebar(); ?>
<!-- END SIDEBAR -->
<div class="clearer"></div>
<!-- START FOOTER -->
<?php get_footer(); ?>
<!-- END FOOTER -->
</div>
</body>
</html>

E’ molto simile a quello di “page-home.php” quindi avrai meno problemi a capirlo. L’unica differenza sta nei campi da utilizzare. In questo caso utilizziamo i campi relativi alle pagine:

• page_show_title
• page_image_admin

Questi 2 campi sono stati già inseriti precedentemente nel file “functions.php”.

La pagina Chi Sono

Entra in questa pagina, scrivi un testo ed inserisci un’immagine nel campo “page_image_admin”. Vai a vedere il risultato. Interessante vero? Da adesso in poi tutte le pagine potranno avere un’immagine ed un contenuto.

Imposta anche a True il campo “page_show_title”. Ora vedrai anche il titolo della pagina ed a seguire immagine e contenuto.

Come puoi vedere tramite questi campi puoi impostare diverse cose interessanti e volendo in alcuni casi potresti anche farle impostare all’utente. Non è detto che tutto ciò che viene messo in questi campi debba essere visualizzato nella pagina. Pensa al booleano “page_show_title”. Lui serve per decidere se mostrare un qualcosa.

Potresti inserire campi adatti per decidere se vuoi vedere le immagini con uno slider, un’immagine singola, un contenuto random, ecc. Per saperne di più ti consiglio di leggere la guida ufficiale a questo indirizzo e di provare a giocare un po’ con il plugin direttamente dal wp-admin. Vedrai che ti permette di inserire diversi tipi di campi.

La pagina Contatti

Per quanto riguarda la pagina Contatti ho aggiunto a mano, da wp-admin, il plugin Contact Form 7. In questa pagina ho impostato quindi un modulo di contatto ed ho inserito un’immagine tramite “page_image_admin”.

Vuoi migliorare? Impara da solo, per questa volta, a fare in modo che il plugin Contact Form 7 venga richiesto all’utente in fase di attivazione del tema. La guida a questo indirizzo dovrebbe averti preparato per questa evenienza.

Ecco la mia pagina Contatti:

Lo screenshot riguarda la parte bassa poiché ho caricato un’immagine molto ampia. Se vuoi ovviare a questo problema perché anche tu hai immagini troppo grandi vai nel tuo tema ed apri “page.php”. Dove inserisci l’immagine dagli nello stile una “width” del 30%.

A questo punto credo che non hai problemi a modificare il tema come più ti piace 🙂

Conclusione

Bene. Stai andando molto avanti. Ormai la creazione di un tema per te non nasconde molti segreti, ma uno in particolare credo ancora di sì. Come gestisci la pagina articoli con commenti da parte degli utenti?

Nei prossimi articoli impareremo a gestire la pagina articoli ed infine a caricare il tema in remoto sul nostro servizio di hosting.