WordPress genera un consistente numero di classi e ID che assegna automaticamente agli elementi della pagina. Ciò consente di modificare facilmente la presentazione delle pagine e di rifinire dettagliatamente l'aspetto di ogni singolo elemento. Una volta noto lo schema delle classi, sarà anche agevole produrre più versioni dello stesso tema.
Da qui in avanti si vedrà, quindi, come definire l'aspetto dei singoli elementi.
Il body del documento
WordPress assegna all'elemento body un numero variabile di classi a seconda della pagina richiesta dall'utente. Nessuna di queste è strettamente necessaria, ma ognuna consente di personalizzare la pagina a seconda che essa contenga un post, un archivio, o una pagina di errore. Le classi vengono assegnate grazie al tag body_class():
<body <?php body_class(); ?>>In un archivio-categoria, questa istruzione genera un codice simile a quello che segue:
<body class="archive category category-cms category-2 logged-in admin-bar ... ">Si avranno, quindi, a disposizione nomi di classe specifici per il tipo di pagina:
.home {}
.blog {}
.page {}
.archive {}
.search {}
.error404 {}Nomi di classe che individuano il tipo di archivio:
.category {}
.tag {}
.tax-{taxonomy} {}
.term-{term} {}
.post-type-archive {}
.author {}
.date {}E nomi di classe assegnati a pagine singole:
.single {}
.single-post {}
.single-author {}Nel file qui allegato è disponibile l'elenco completo delle classi generate dal tag body_class().
La testata della pagina
La testata della pagina viene racchiusa in un elemento header, generalmente inserito nel file header.php. Nel tema che ci si propone di sviluppare, l'header è strutturato come segue:
<header id="site-header" class="site-header" role="banner">
<a class="home-link" href="#" title="#" rel="home">
<h1 class="site-title">Title</h1>
<h3 class="site-description">Description</h3>
</a>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
...
</nav>
</header>L'header contiene il titolo, la descrizione del sito e il menu di navigazione, racchiuso in un elemento nav. Di seguito gli stili degli elementi:
.site-header {}
.site-header a {
color: #555;
text-decoration: none;
}
.site-header a:hover {
color: #222;
}
.site-title {
margin-top: 0;
margin-bottom: 0;
}
.site-description {
font-size: 1.2em;
}Il menu di navigazione
All'interno dell'header, particolare importanza riveste il menu di navigazione. Questo viene generato dal seguente template tag:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>Essp dispone di diverse decine di classi che vengono assegnate agli elementi del menu di navigazione a seconda del contesto. Il menu a cui si farà riferimento presenta la seguente struttura:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-79">
<a href=" ... ">CMS</a>
<ul class="sub-menu"> ... </ul>
</li>Per il tema che si sta sviluppando, si è pensato di utilizzare un menu Suckerfish nella sua versione originale, in puro CSS:
/* custom class added to nav element from header.php */
.primary-navigation {
float: left;
width: 100%;
border-top: 1px solid rgba(57, 114, 73, 0.6);
border-bottom: 1px solid rgba(57, 114, 73, 0.6);
background-color: rgba(199, 225, 186, 0.6);
}
.primary-navigation ul {
margin: 0;
background-color: rgba(57, 114, 73, 0.9);
}
.primary-navigation li {
min-width: 8em;
position: relative;
float: left;
line-height: 2.4em;
white-space: nowrap;
padding-right: .4em;
}
.primary-navigation a{
display: block;
text-align: left;
padding-left: .4em;
}
.primary-navigation ul ul {
display: none;
}
.primary-navigation li li {
float: none;
}
.primary-navigation ul ul ul{
display: none;
top: 0;
left: 100%;
}
.primary-navigation li ul {
display: none;
position: absolute;
/* old explorer versions */
top: 1em;
left: 100%;
}
/* all other browsers */
.primary-navigation li>ul{
top: auto;
left: auto;
}
.primary-navigation li:hover>ul, nav li.hover>ul{
display: block;
}
.primary-navigation ul li{
text-align: left;
}
.primary-navigation ul li a {
display: block;
width: 100%;
text-transform: uppercase;
line-height: 2.4em;
text-decoration: none;
}
.primary-navigation ul li a {
color: #397249;
}
.primary-navigation ul ul li a {
color: #c7e1ba;
}
.primary-navigation a:hover {
color: #000;
background-color: #c7e1ba;
}
.primary-navigation .current_page_item > a,
.primary-navigation .current_page_ancestor > a,
.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a {
color: #9cb770;
font-weight: bold;
}
Un menu a scomparsa, come il menu appena creato, non si adatta agli schermi touch dei dispositivi mobili, per questo sono necessarie una o più media queries:
@media screen and (max-width: 640px) {
.primary-navigation ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.primary-navigation li {
width: 100%;
padding: 0;
margin: 0;
}
.primary-navigation ul ul {
display: block;
}
.primary-navigation ul ul ul {
display: block;
top: auto;
left: auto;
}
.primary-navigation li ul {
display: block;
position: relative;
}
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-item > a {
}
.primary-navigation .current_page_item > a:before,
.primary-navigation .current-menu-item > a:before {
content: " \27AF ";
margin-right: .2em;
}
}Gli elementi che vengono nascosti con la proprietà display: none, vengono resi sempre visibili sugli schermi di larghezza superiore a 800px. Inoltre sono state adattate le dimensioni degli elementi delle liste, che andranno ad occupare tutta la larghezza disponibile (width: 100%). Per rendere più chiara la navigazione, infine, si è aggiunta una freccia verso destra alla voce corrente del menu (content: " \27AF "). L'immagine che segue mostra l'effetto a video.
Conclusioni e riferimenti
Si è, così, iniziato a progettare l'aspetto delle pagine. Va evidenziato che sono possibili molte alternative al menu presentato, il cui scopo è, quindi, solo quello di fornire uno spunto per ulteriori analisi.
Per approfondire gli argomenti trattati in questo capitolo, si rinvia alle seguenti risorse:
- Funzione body_class()
- Funzione wp_nav_menu()