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 30
guida wordpress

Come creare un tema WordPress: creazione di pagine specifiche

  • 30/08/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione, Wordpress
  • tema wordpress, wordpress, wordpress locale, wordpress pagine statiche, wordpress theme

Ciao 🙂

Web Hosting

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“.

WooCommerce tema
<?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:

Development Category (English)728x90

  • 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:

Deep Learning Specialization on Coursera
<?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.

Se hai 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: installare online31/08/2017
  • Come creare un tema WordPress: la pagina articoli31/08/2017
  • Come creare un tema WordPress: installazione automatica dei plugin30/08/2017
  • Come creare un tema WordPress: la homepage statica29/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...