Ciao 🙂
In questo articolo proseguiamo la guida su Come creo un tema WordPress?. Imparerai a mettere le mani al codice per creare una piccola barra in alto nel tuo sito web dove riporterai il nome del tuo sito/blog.
Prima di iniziare però assicurati di aver installato MAMP o XAMP e WordPress sul tuo computer. Nel caso in cui ancora non lo hai fatto segui la guida: Come installare MAMP e WordPress su Windows e MacBook.
Passo preliminare
Per procedere con la creazione dell’header per prima cosa è importante aver attivato il tema sul nostro sito. Quindi come al solito accediamo al pannello wp-admin del nostro sito WordPress all’indirizzo “http://localhost/sitolocale/wp-admin”. Dunque vai in “Aspetto > Temi” e da quì attiva il tema che stai sviluppando.
Creazione dell’header
L’header rappresenta la barra in alto che contiene solitamente il logo del sito web ed il menù. Per procedere con la creazione aprite il vostro editor di testo e create all’interno della cartella del tema il file “header.php”:
In questo file andremo a mettere il codice necessario al sito web per avere la sua adorata barra orizzontale ed in più anche tutti i dati relativi al doctype, così come gli import all’interno del tag “head” di framework CSS come Bootstrap.
Impostazione del sito web nell’header
Il primo passo quindi è quello di definire i dati di base del nostro sito web. All’interno del file “header.php” andiamo ad inserire queste righe di codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" style = "margin-top:0px !important">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="alternate" title="<?php printf(__('%s RSS Feed', 'coursetheme'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" title="<?php printf(__('%s Atom Feed', 'coursetheme'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0-alpha.6%2Fjs%2Fbootstrap.min.js%22%20integrity%3D%22sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk%2B02D9phzyeVkE%2Bjo0ieGizqPLForn%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="custom-container">
<div class = "header-row">
<div class = "container">
<div class = "row">
<div class = "col-xs-8 col-md-8 col-lg-7">
<h3 class = "main-blog-title">
<a href="<?php echo home_url(); ?>/" title="Home Page">
<?php bloginfo('name'); ?>
</a>
</h3>
</div>
</div>
</div>
</div>
Cosa abbiamo scritto?
Vediamo la prima parte di codice che si conclude con la chiusura del tag head e poi il contenuto del body.
Prima Parte – <head>
Le prima riga definisce il tipo di documento e lo standard.
La seconda riga dà l’apertura al tag <html> specificando la lingua del file.
Dunque alla quarta riga abbiamo il tag <head> che viene aperto. Quì dentro andiamo a scrivere alcuni metadati ed in alcuni di questi utilizziamo delle funzioni di WordPress. Per esempio a riga 5 definiamo il Content-Type utilizzando la funzione bloginfo(‘html_type’) per l’attributo “content” e utilizziamo la funzione bloginfo(‘charset’) per definire il valore dell’attributo “charset”.
Alle righe 6 e 7 definiamo gli RSS Feed.
Alla riga 8 andiamo a definire il titolo del nostro sito. Questo titolo è quello che viene visualizzato nella linguetta della scheda del browser che stai usando. Questo attributo lo prendiamo dai dati del blog tramite la funzione bloginfo(‘name’) ed il risultato lo possiamo vedere nella scheda del nostro sito:
Alla riga 9 andiamo a caricare il foglio di stile “style.css” tramite la chiamata alla funzione di WordPress (echo) get_stylesheet_uri(). WordPress in automatico sa infatti di dover andare a cercare il file “style.css” quando chiamiamo questa funzione (“echo” ci serve per scriverne il contenuto come stringa all’interno del tag “href”).
Alla riga 10 carichiamo il file contenente il foglio di stile (CSS) di Bootstrap (vedremo in futuro come ci aiuterà).
Alla riga 12 vediamo il link relativo al pingback. E’ utile per essere avvertiti quando un altro blogger inserisce un url nel proprio articolo o sito che richiama il nostro sito/blog.
Alla riga 13 andiamo ad inserire la richiesta degli head, tramite chiamata a wp_head(), relativi ai plugin che abbiamo installato. Ogni plugin infatti si può portare con sé file css e javascript necessari al suo corretto funzionamento. Quando installiamo un plugin, WordPress sa che deve caricare questi file, ma non sa dove metterli. In questo caso noi stiamo definendo che li vogliamo caricare alla fine del tag <head>.
Dunque una volta chiuso l’head abbiamo quindi definito una posizione all’interno del codice del tema in cui verranno inseriti tutti i metadati possibili, gli script necessari, l’importazione di file CSS e javascript interni ed esterni.
Seconda Parte – <body>
Alla riga 16 del codice apriamo il <body> che conterrà ciò che è realmente visibile nella index del tema.
In queste righe definiamo alcuni <div> utilizzando le classi CSS fornite da Bootstrap che ci permettono di dividere in colonna il nostro header. Al momento creiamo alla riga 22 un “container” che ha alcune proprietà definite da Bootstrap, dunque alla riga 24 creiamo una riga (row) e dopo di che alla riga 26 creiamo la nostra prima colonna.
Se non conosci Bootstrap ti consiglio di apprendere meglio di cosa si tratta a questo indirizzo. In breve Bootstrap è un framework CSS che ti permette di utilizzare le sue classi per aiutarti nella costruzione di un sito web. Bootstrap può essere prelevato a blocchi o tutto intero. Molte aziende utilizzano Bootstrap in toto, molte altre per evitare di avere un sito troppo simile alla concorrenza prendono soltanto la divisione in colonne messa a disposizione da Bootstrap che offre un ottimo framework anche per siti responsive.
Quindi tra la riga 28 e la riga 32 andiamo ad impostare come “logo” il nome che abbiamo dato al sito ed al click impostiamo di portare l’utente alla home page del sito.
Cosa manca?
Manca sicuramente una cosa molto importante. Se adesso infatti provi ad aggiornare il browser non vedrai nulla ancora nel tuo sito web. A questo punto è necessario aprire il file “index.php” e dirgli di importare l’header:
<?php get_header(); ?>
</body>
</html>
Aggiungi questa riga di codice al file “index.php”. Stiamo recuperando l’header che abbiamo appena creato usando una funzione di WordPress che va appositamente a cercare un file denominato “header.php”.
Come puoi ben vedere abbiamo anche chiuso il tag body ed il tag html che erano stati aperti nel file “header.php”. Questo perché al momento il punto di chiusura del nostro tema è rappresentato dal file “index.php” e l’apertura del contenuto si trova nell’header.
Ultima cosa! Apri anche il tuo file “style.css” e copia, sotto al commento con le informazioni sul tema, il seguente codice:
/***********************************************************************
******************* RESET ******************************************
************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
a img {border:none;}
.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}
.center {text-align:center;}
Questo CSS al momento ci aiuta a fare il così chiamato “reset”. In questo modo non vedremo differenze tra i diversi browser. Chrome, Safari, Firefox e IE utilizzano infatti proprietà un po’ diverse. A volte il primo utilizza i margini, il secondo utilizza il padding, ecc. per uno stesso tag HTML. In questo modo saremo noi ad impostare il CSS in maniera univoca.
Il risultato finale
A questo punto possiamo entrare nel nostro pannello “wp-admin” del sito ed entrare in “Impostazioni > Generali”:
Dunque vedremo che quì possiamo impostare il titolo del nostro sito web:
Se abbiamo quindi riempito questo campo ed abbiamo attivato il tema che stiamo sviluppando sul nostro sito locale, il risultato finale sarà:
Cliccando su “Sito Testo Paolo Dell’Aguzzo” la pagina verrà ricaricata.
Conclusione
Giunto alla fine di questo articolo hai appreso come creare l’header in un tema. Ora sai importarlo nel file “index.php” e sai come richiamare alcune delle funzioni che WordPress mette a disposizione. Se vuoi maggiori dettagli su tutte le funzioni non solo ne vedremo molte nuove nei prossimi articoli, ma puoi anche studiare la “WordPress Reference” a questo indirizzo.
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!)
