Realizzare un tema WordPress con il framework Pure CSS

In questo tutorial sperimenteremo insieme un framework molto leggero ma estremamente interessante: Pure CSS.

Ancora una volta ci avvarremo dello Starter Theme sviluppato dalla stessa Automatic, per cui colleghiamoci su underscores.me e generiamo un nuovo tema che chiameremo Pure WP.

Scarichiamo l’archivio appena generato all’interno della cartella ‘wp-content/themes‘ e scompattiamolo. Siamo pronti per cominciare, seguiamo la documentazione di Pure CSS, partendo dalla sezione Get Started dove leggiamo che possiamo includere il framework attraverso un CDN. Questa soluzione non mi piace per cui procedo con la seconda alternativa, scaricando il framework all’interno di una nuova directory del tema, chiamandola ‘css‘.

Il pacchetto che abbiamo appena scaricato contiene diversi fogli di stile, portiamoli tutti al livello superiore. Per capirci, i files devono trovarsi in questo percorso ‘themes/pure-wp/css‘.

Includeremo solamente il file pure-min.css che racchiude tutti i componenti di Pure CSS. Nella documentazione ci viene suggerito anche di includere il file normalize.css, un progetto open source che garantisce una migliore compatibilità cross-browser. Scarichiamolo e salviamolo all’interno della cartella ‘themes/pure-wp/css‘.

Adesso dobbiamo includere i nuovi fogli di stile all’interno dell’hook wp_enqueue_scripts. Nei tutorial su Bootstrap ho spiegato approfonditamente il discorso degli hooks di WordPress, ma ricordiamo che il CMS dispone di zone nevralgiche dove iniettare funzioni personalizzate. Nel caso specifico la funzione da ricercare è pure_wp_scripts. Subito dopo la parentesi graffa di apertura aggiungiamo queste due righe

wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
wp_enqueue_style( 'pure-base', get_template_directory_uri() . '/css/pure-min.css' );

Adesso che abbiamo incluso il framework nel tema vediamo velocemente gli aspetti principali da implementare.

Creazione del layout

Come Bootsrap, anche Pure CSS dispone di un sistema di griglia che permette di suddividere il layout in colonne. Prima di procedere apriamo il file style.css e definiamo una classe per racchiudere i contenuti del sito all’interno di dimensioni definite

.container {
  width: 1170px;
  margin: 0 auto;
}

@media screen and ( max-width: 1170px) {
  .container {
    width: auto;
  }
}

Apriamo il file header.php e cancelliamo tutto quello che si trova all’interno dei tag <header></header> sostituendo il contenuto con un <div> a cui assegnare la classe .container. Il nostro nuovo header dovrà avere questo aspetto

<header id="masthead" class="site-header" role="banner">
 <div class="container">

 </div>
</header><!-- #masthead -->

Operazione analoga per il file footer.php

<footer id="colophon" class="site-footer" role="contentinfo">
 <div class="container">

 </div>
</footer><!-- #colophon -->

Ripristineremo tutti gli elementi in seguito, per adesso rimaniamo concentrati sul layout. Ora dobbiamo racchiudere all’interno del container il blocco centrale del sito. Alla fine del file header.php apriamo un <div> con classe container

<div id="content" class="site-content">
 <div class="container">

E all’inizio del file footer.php chiudiamo il div

 </div><!-- container -->
</div><!-- #content -->

Vediamo adesso come funziona la griglia di Pure CSS. La documentazione ci dice che la griglia è molto semplice da implementare ma allo stesso tempo è uno strumento molto potente. È composta da due tipi di classe: la classe griglia (pure-g) e le classi di quota ( pure-u o pure-u-*)

L’asterisco è il segnaposto per le unità che rappresentano le larghezze delle colonne. Ad esempio pure-u-1-2 ha una larghezza del 50%, mentre pure-u-1-5 ha una larghezza del 20%.

In sostanza è lo stesso concetto di della griglia di Bootstrap ma Pure CSS dispone di due unità di misura: la prima basata su 5 colonne, la seconda su 24.

Chiaramente è disponibile anche la griglia responsive ma non è compresa nel core del framework. Dobbiamo includere nel tema anche il file grids-responsive-min.css. Il procedimento è identico a quanto abbiamo fatto per includere il core del framework, per cui aggiungiamo all’interno della funzione pure_wp_scripts questa dichiarazione:

wp_enqueue_style( 'pure-responsive', get_template_directory_uri() . '/css/grids-responsive-min.css' );

Ecco come dovrebbe presentarsi la funzione dopo tutte le modifiche effettuate

/**
 * Enqueue scripts and styles.
 */

function pure_wp_scripts()
{
 wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css');
 wp_enqueue_style('pure-base', get_template_directory_uri() . '/css/pure-min.css');
 wp_enqueue_style('pure-responsive', get_template_directory_uri() . '/css/grids-responsive-min.css');
 wp_enqueue_style('pure-wp-style', get_stylesheet_uri());
 wp_enqueue_script('pure-wp-navigation', get_template_directory_uri() . '/js/navigation.js', array() , '20151215', true);
 wp_enqueue_script('pure-wp-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array() , '20151215', true);
 if (is_singular() && comments_open() && get_option('thread_comments')) {
  wp_enqueue_script('comment-reply');
 }
}

A questo punto possiamo suddividere il layout in due colonne: due blocchi per il corpo centrale e uno per la sidebar. Apriamo il file sidebar.php e modifichiamo il parametro class del tag <aside>, aggiungendo questi valori

pure-u-1 pure-u-md-1-3

Di seguito il codice completo con la modifica effettuata

<aside id="secondary" class="widget-area pure-u-1 pure-u-md-1-3" role="complementary">
 <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Apriamo il file index.php e aggiungiamo questi valori all’attributo class del <div> con id primary

pure-u-1 pure-u-md-2-3

Il div deve presentarsi così

<div id="primary" class="content-area pure-u-1 pure-u-md-2-3">

Come detto in precedenza, dobbiamo includere le quote di griglia all’interno del loro contenitore. Subito prima del <div> appena modificato aggiungiamo:

<div class="pure-g">

Chiudiamo il <div> alla fine del file. Sostituiamo queste tre righe

<?php
get_sidebar();
get_footer();

Con il codice seguente

<?php get_sidebar(); ?>
</div><!-- pure-g -->
<?php get_footer();

Ripetiamo le operazioni effettuate per il file index.php anche per i seguenti files

  • archive.php
  • single.php
  • page.php
  • search.php

Utilizzando la classe pure-u-md-*, manterremo le colonne allineate fino a risoluzioni superiori o uguali a 768 pixel. Se vogliamo che i blocchi collassino anche sui tablet dobbiamo utilizzare la classe .pure-u-lg-*

Nella tabella sottostante vediamo le media query di Pure, applicate alle risoluzioni di default e il relativo nome di classe

Key CSS Media Query Applies Classname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .pure-u-xl-*

Dando un’occhiata al risultato sul frontend notiamo che, a differenza di Bootstrap, la griglia di Pure CSS non prevede un margine tra le colonne. Risolviamo il problema applicando nel file style.css un semplice padding per i diretti discendenti delle quote di griglia

.site-main, .widget{padding: 10px}

Operazione layout conclusa, adesso vediamo come modificare l’header e il menu di navigazione principale

Modifica Header e Navbar

Per aggiungere un header personalizzato e un menu di navigazione responsive, mi sono allontanato dalle indicazioni contenute nella documentazione.

Nell’esempio vediamo che l’header è composto da tre elementi: logo brand, un menu centrale e uno spostato sulla destra. Per la suddivisione è stata utilizzata la griglia, ma visto che a noi servono solamente due colonne, imposteremo le quote rispettivamente a 1-3 per il logo e 2-3 per un sola navbar.

Apriamo quindi il file header.php e all’interno del <div> con classe .container incolliamo tutto questo codice

<?php
 $logo = get_theme_mod('change_logo_setting') ?: get_template_directory_uri() . '/images/logo.png';
?>
<div class="custom-wrapper pure-g" id="menu">
   <div id="brand-container" class="pure-u-1 pure-u-md-1-3">
      <div class="pure-menu">
         <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="pure-menu-heading custom-brand">
         <img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>" />
         </a>
         <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
   </div>
   <div id="main-nav" class="pure-u-1 pure-u-md-2-3">
      <div class="pure-menu pure-menu-horizontal custom-menu custom-can-transform">
         <?php wp_nav_menu (array(
            'theme_location' => 'menu-1',            
            'container' => false,            
            'walker'     => new Pure_Walker(),            
            'items_wrap' => '<ul id="%1$s" class="pure-menu-list">%3$s</ul>'));            
            ?>
      </div>
   </div>
</div>

Analizziamo la situazione, innanzitutto definiamo una variabile $logo in cui controlliamo l’eventuale presenza dell’opzione change_logo_setting e in caso di esito negativo carichiamo l’immagine di default, denominata logo.png e collocata nella cartella ‘images‘ del tema.

Abbiamo poi definito un <div> con classe pure-g per definire il contenitore delle quote di griglia. La griglia è suddivisa in due colonne, nella prima abbiamo collocato il brand del sito e nella seconda richiamiamo la funzione wp_nav_menu che, in base al parametro specificato nella chiave theme_location, carica il menu registrato con la funzione register_nav_menus. Nella funzione wp_nav_menu abbiamo specificato la chiave walker che istanzia la classe Pure_Walker(). La classe la dobbiamo ancora creare, ci serve per aggiungere gli attributi di classe agli elementi <li> e <a> del menu. Generiamo un nuovo file all’interno della cartella del tema e salviamo come pure_walker.php. Questo è il contenuto del file:

<?php
class Pure_Walker extends Walker_Nav_Menu
{
 function start_el(&$output, $item, $depth = 0, $args = array() , $id = 0)
 {
  array_push($item->classes, 'pure-menu-item');
  $output.= '<li class="' . implode(' ', $item->classes) . '">';
  $output.= '<a class="pure-menu-link" href="' . $item->url . '">';
  $output.= $item->title;
  $output.= '</a></li>';
 }
}

Estendendo la classe Walker_Nav_Menu, possiamo aggiungere agli elementi <li> la classe pure-menu-item e agli elementi <a> la classe pure-menu-link.

A questo punto dobbiamo richiamare il nuovo file all’interno del tema, altrimenti si genererà un errore fatale. Apriamo il file functions.php e aggiungiamo questa dichiarazione alla fine

require get_template_directory() . '/pure_walker.php';

Passiamo adesso allo stile, apriamo il file style.css e aggiungiamo queste dichiarazioni

header#masthead {
  background: #000;
  color: #fff;
  height: 90px;
}

#brand-container {
  position: relative;
}

.custom-wrapper {
  overflow: hidden;
}

.custom-menu {
  text-align: right;
}

.custom-toggle {
  width: 34px;
  height: 34px;
  display: block;
  position: absolute;
  top: 25%;
  right: 0;
  display: none;
}

.custom-toggle .bar {
  background-color: #777;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 100px;
  position: absolute;
  top: 18px;
  right: 7px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}

.custom-toggle .bar:first-child {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.custom-toggle.x .bar {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

header#masthead ul li a {
  padding-top: 35px;
  padding-bottom: 35px;
  line-height: 20px;
}

.custom-brand {
  padding-top: 20px;
  padding-bottom: 15px;
}

@media (max-width: 568px) {

  .custom-menu {
    text-align: left;
  }

  header#masthead {
    height: auto;
  }

  #main-nav {
    display: none;
  }

  header#masthead ul li a {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .custom-toggle {
    display: block;
  }
}

Non credo che ci sia molto da spiegare, al di la delle transizioni applicate sull’icona del menu, è importante sottolineare che il <div> contenente la navbar principale viene nascosto nelle risoluzioni inferiori a 568 pixel. Lo mostreremo attraverso Javascript (più precisamente con jQuery) nel momento in cui l’utente cliccherà sull’icona.

Creiamo quindi un nuovo file pure-scripts.js e salviamolo all’interno della cartella ‘js’ del tema. Questo è il contenuto del file

jQuery('#toggle').click(function(e)
{
 e.preventDefault();
 var nav = '#main-nav';
 if(jQuery(nav).is(":hidden"))
 {
  jQuery('.custom-can-transform').removeClass('pure-menu-horizontal');
 }
 jQuery('#main-nav').slideToggle();
 jQuery(this).toggleClass('x');
})

In sostanza, quando l’utente clicca sull’icona del menu blocchiamo la propagazione dell’evento, controlliamo che il menù non sia visibile (quindi si sta utilizzando una risoluzione inferiore a 568 pixel) e rimuoviamo la classe pure-menu-horizontal dal contenitore del menu. Infine, con il metodo slideToggle() di jQuery facciamo scorrere il menu e con il metodo toggleClass() aggiungiamo e rimuoviamo la classe x all’icona, per permettere che siano applicate le transizioni definite nel foglio di stile.

Non ci rimane che includere il nuovo file nel tema. Apriamo il file functions.php e all’interno della funzione pure_wp_scripts, definiamo un blocco condizionale per escludere il backend e includere jQuery e il file pure-scripts.js

if(!is_admin())
{
 wp_deregister_script('jquery');
 wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), array(), false, true);
 wp_enqueue_script('jquery');
 wp_enqueue_script( 'pure-scripts', get_template_directory_uri() . '/js/pure-scripts.js', 'jquery', false, true);
}

Salto la parte relativa al footer perché praticamente dobbiamo fare un procedimento molto simile: dividere il blocco in due colonne, piazzare sulla colonna di sinistra il disclaimer o copyright e nella colonna di destra un secondo menu di navigazione.

Modifica dei moduli elettronici

Vediamo l’ultima parte di questo tutorial: l’implementazione dei moduli elettronici. Questa è la pagina con tutti gli esempi del framework Pure CSS.

Procediamo con due modifiche: il widget per la ricerca interna e il modulo per inviare un commento. Cominciamo dal widget, creiamo un nuovo file nella root del tema e chiamiamolo searchform.php. Al suo interno definiamo completamente il modulo, formattandolo come il primo esempio della pagina linkata.

<form role="search" method="get" id="searchform"
   class="pure-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
   <fieldset>
      <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
      <input type="text" placeholder="Cerca qui..." value="<?php echo get_search_query(); ?>" name="s" id="s" />
      <input type="hidden" value="post" name="post_type" id="post_type" />
      <button type="submit" id="searchsubmit" class="pure-button pure-button-primary"><?php echo esc_attr_x( 'Search', 'submit button' ); ?></button>
   </fieldset>
</form>

Perfetto, adesso passiamo al modulo per l’aggiunta dei commenti, utilizzando un modello diverso. Apriamo il file comments.php e subito prima della funzione comment_form() definiamo un array per strutturare i campi del modulo

$fields = array(

 'author' => '<fieldset class="pure-group">
              <input type="text" name="author" id="author" class="pure-input-1" required="required" placeholder="Nome" />',

 'email'  => '<input type="email" name="email" id="email" class="pure-input-1" required="required" placeholder="Email" />',
 
 'url'    => '<input type="url" name="url" id="url" class="pure-input-1" placeholder="Url" />
             </fieldset>'
);

Ora definiamo una seconda array dove imposteremo tutti i parametri da passare alla funzione comment_form(). Richiamiamo l’array $fields, definiamo la classe del modulo, la classe del pulsante d’invio e strutturiamo la textarea per l’inserimento del commento vero e proprio.

$args = array(
 'class_form' => 'pure-form',
 'fields' => $fields,
 'comment_field' => '<fieldset class="pure-group">
                      <textarea rows="8" cols="45" required="required" name="comment" id="comment" class="pure-input-1" placeholder="Commento">
                      </textarea>
                     </fieldset>',
 'class_submit' => 'pure-button pure-input-1 pure-button-primary'
);

Non ci rimane che passare l’array alla funzione comment_form e il gioco è fatto

comment_form($args);

Conclusioni

In questo tutorial abbiamo visto come creare un tema WordPress utilizzando il framework Pure CSS. Abbiamo utilizzando lo starter theme sviluppato da Automatic e abbiamo incluso il framework per sfruttare le sue dichiarazioni CSS. Ci siamo occupati delle implementazioni più importanti: layout, header, navbar e moduli elettronici.

A mio avviso il framework Pure CSS è una buona soluzione per la creazione di un tema WordPress. Tuttavia lo considero nettamente inferiore a Bootstrap e pertanto continuerò a preferire quest ultimo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *