Creare un tema WordPress base

Wordpress

Per sviluppare un tema WordPress base dovresti eliminare dalla testa tutte quelle centinaia di file che vedi ogni volta dentro la cartella di un tema gratuito oppure a pagamento. Puoi sviluppare un tema base anche con pochi file ed in poche righe, l’importante è sapere da dove partire e quali sono i file importanti che non possono mancare all’interno di un tema WordPress.

FIle principali di un tema WordPress di base
FIle principali di un tema WordPress di base

01. style.css e index.php: due file fondamentali per un tema WordPress base

Il primo tema si sviluppa partendo dalla base: ti assicuro che saranno necessari poche righe di codice per creare templates per il tuo blog. I due file che non possono mancare assolutamente sono style.css e index.php, senza di essi non vai da nessuna parte.

Foglio di stile (style.css)

Il file style.css deve essere collocato obbligatoriamente nella cartella principale del theme (come lo chiamano in inglese) e deve contenere queste alcune righe di codice necessarie per identificare il nome del template, il nome ed il sito dell’autore, la versione del tema, ed altri elementi più o meno importanti.

/*
Theme Name: Tema base
Theme URI: http://www.gloriaingrassia.com/creare-un-tema-wordpress-base/
Description: Tema WordPress di base
Author: Gloria Ingrassia
Author URI: http://www.gloriaingrassia.com
Version: 1.0
License: GNU GENERAL PUBLIC LICENSE
*/

Quindi il primo passo da intraprendere è quello di creare un foglio di stile “style.css” ed incollare queste poche righe di codice, al di sotto del quale è possibile scrivere tutte le regole relative agli elementi presenti nel template.

Pagina principale (index.php)

index
Risultati della pagina iniziale (titolo + riassunto)

 

L’index.php mostra la pagina principale del blog e generalmente viene utilizzato per mostrare gli ultimi articoli pubblicati nel blog. Puoi utilizzarlo per mostrare pagine, widget, sidebar e quant’altro, ma in questo esempio ci limiteremo a mostrare gli articoli più recenti.

<?php get_header(); ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a></h2>
<?php the_excerpt(); ?>
<?php
endwhile;
else :
echo '<p>Nessun articolo</p>';
endif;
?>
<?php get_footer(); ?>

Ti spiego brevemente a cosa servono alcune funzioni richiamate dentro il file index.php:

  • the_permalink() è una funzione che richiama l’url dell’articolo
  • the_title() richiama il titolo dell’articolo
  • the_excerpt() mostra il riassunto di un articolo. Qualora volessi mostrare l’intero contenuto dell’articolo, puoi sostituirlo con the_content().
  • get_header() e get_footer() sono delle funzioni di WordPress che includono i file header.php e footer.php presenti nella cartella del tema. Se nel tema non fossero presenti questi due file, WordPress in automatico richiamerebbe le funzioni del tema di default. Vedremo più avanti, sempre in questo articolo, come utilizzarle.

Nel codice precedente ho scritto che se fossero stati presenti degli articoli if ( have_posts() ) :, WordPress avrebbe dovuto mostrare il titolo ed il riassunto dei post, altrimenti else : mi avrebbe restituito un errore con su scritto “Nessun articolo”.

Ricapitolando: style.css serve per definire un foglio di stile e per mostrare alcuni dati del tema come il titolo del tema ed il nome dell’autore, mentre index.php è utile per visualizzare gli ultimi articoli pubblicati nel blog.

02. header.php e footer.php: la testata ed il piè di pagina

Per chi sa come si crea una pagina web dal punto di vista html, conosce perfettamente i tag html che devono essere riportati dentro una pagina per far sì che questa possa essere validata.

<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<p>Qui dentro va tutto il contenuto della pagina</p>
</body>
</html>

Il tag <html> racchiude tutta l’intera pagina (sia la parte visibile all’utente che quella non visibile). Tutto ciò che viene scritto dentro il tag <head> non viene mostrato dentro la pagina del browser dell’utente. Serve a riportare alcuni dati da mostrare nella barra del browser (come ad esempio il titolo scritto nel tag <title>) ed altri elementi utili per i motori di ricerca, ecc…
Dentro il tag <body> viene riportato tutto il contenuto visibile all’utente tramite la finestra del proprio browser.

Quindi i tag fondamentali per creare un tema WordPress di base sono html, head, title e body. Adesso siamo pronti per riportarli dentro i file del nostro tema WP.

header.php <- get_header()

Per definire la funzione get_header() possiamo creare il file header.php sempre dentro la cartella principale del tema WordPress base che stiamo costruendo ed inseriamo questo codice:

<!DOCTYPE html>
<html>
<head>
<title><?php wp_title(''); ?></title>
<?php wp_head(); ?>
</head>
<body>

Dentro il tag <head> potremmo riportare tantissime altre cose come i meta tag, la favicon, l’url del pingback, il charset dei caratteri… ma per un primo esperimento possiamo farne a meno e vederli con calma in futuro.

Il tag <title> come abbiamo già visto, serve a mostrare il titolo nella barra del browser oppure nei risultati dei motori di ricerca, mentre la funzione wp_head() serve a richiamare un’azione e per ora ti basta sapere che va inserita sempre prima della chiusura del tag </head> e qualora non fosse presente, potrebbe causare dei problemi e degli errori.

footer.php <- get_footer()

Come nel caso dell’header, anche il file footer.php viene inlcluso dalla funzione get_footer() e va inserito nella cartella principale del tema. In questo file vengono richiamati alcuni tag di chiusura.

<?php wp_footer(); ?>
</body>
</html>

Il footer è la parte finale di ogni pagina web ed in questo caso la funzione get_footer() viene richiamata tramite il file footer.php. La funzione wp_footer() serve a richiamare tramite un’azione (action) alcune parti di codice all’interno del tema, riuscendo a posizionarli in automatico alla fine del codice, prima della chiusura del tag </body>.

[social type=”googleplus” text=”Fino a questo momento l’articolo ti sembra utile? Allora potresti per favore cliccare sul tasto +1 prima di arrivare a fine pagina? ;)”][/social]

03. sidebar.php: La colonna denominata “sidebar”

Ti sarà capitato di trovare una colonna a destra o a sinistra delle pagine di un blog. Nel caso del mio blog, faccio apparire la sidebar in ogni articolo nella parte destra. La sidebar serve a ricopiare in ogni pagin alcuni elementi come “ultimi articoli”, “lista delle categorie” e “bottoni social”.

Crea il file sidebar.php ed inseriscilo nella cartella principale del tema WP che stai sviluppando e poi incolla il codice seguente (che ti spiegherò meglio al punto 5, quando parlerò del file functions.php).

<?php
if ( is_active_sidebar( 'sidebar' ) ) :
dynamic_sidebar( 'sidebar' );
endif;
?>

04. single.php, page.php e archive.php

Forse ti sembrerà strano, ma abbiamo superato la metà del lavoro. Dopo aver creato l’header ed il footer della pagina, insieme alla pagina iniziale, possiamo creare i file single.php, page.php e archive.php.

  • single.php serve per mostrare il layout ed il contenuto di un singolo articolo
  • page.php mostra il layout ed il contenuto di una pagina
  • archive.php mostra il layout ed il contenuto di una categoria e di un tag, e non solo…

single.php

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_time( 'd M Y' ); ?>
<?php the_category(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  • get_header() ho richiamato l’header della pagina che è uguale in tutte le pagine, gli articoli, gli archivi, ecc… così come è uguale il footer;
  • the_title() ho richiamato il titolo dell’articolo;
  • the_time( ‘d M Y’ ) ho mostrato la data di pubblicazione dell’articolo ed ho specificato il formato da visualizzare, in questo caso è “giorno mese anno”. Volendo potresti modificare il formato ed aggiungere anche l’orario in ore, minuti e secondi;
  • the_category() ti restituisce la lista delle categorie associate all’articolo;
  • the_content() mostra tutto il testo dell’articolo;
  • get_sidebar() mostra il contenuto della sidebar;
  • get_footer() richiama il contenuto del footer;

page.php

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Il file page.php è molto simile al file single.php, in questo caso non ritenuto opportuno mostrare la data di pubblicazione della pagina.

archive.php

<?php get_header(); ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a></h2>
<?php the_excerpt(); ?>
<?php
endwhile;
else :
echo '<p>Nessun articolo</p>';
endif;
?>
<?php get_footer(); ?>

Se ci fai caso, ho fatto un copia ed incolla del codice che si trova dentro il file index.php perchè il concetto è lo stesso. Nella pagina di archivio voglio mostrare gli ultimi articoli pubblicati secondo la categoria od il tag selezionato.

05. functions.php : Le funzioni di WordPress

Il file functions.php (da notare la lettera “s” finale, perchè senza quella non funziona niente!!!) è il cuore pulsante del tema WordPress. Qui puoi includere tutte le funzioni che vuoi e puoi attivare alcuni elementi.

<?php
// Aggiungi la sidebar
function add_sidebar() {
$args = array(
'id'            => 'sidebar',
'name'          => 'Sidebar',
'description'   => 'Sidebar principale',
'before_widget' => '<div class="widget">',
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>'
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'add_sidebar' );

// Aggiungi il foglio di stile
function add_style() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_style' );

?>

In un corso più specifico imparerai ad utilizzare action e filter, ma fino a questo momento limitati ad utilizzare il file functions.php per riportare alcune funzioni basilari per poter far funzionare alcune parti del tema.

La funzione add_sidebar() serve ad attivare la Sidebar con id=”sidebar” all’interno di questo tema. Puoi specificare il suo nome, la sua descrizione e puoi anche decidere quale codice inserire prima e dopo del widget e del titolo del widget.

Con la funzione add_style() posso inserire dentro ogni pagina web del blog (articoli, pagine, categorie…) il foglio di stile principale. La funzione wp_enqueue_style() richiamata wp_enqueue_scripts() serve ad aggiungere il percorso del foglio di stile all’interno della sorgente html di tutte le pagine, e precisamente viene inserito dentro il tag <head>.

Risultati del tema WordPress base

Con la creazione di questo tema base ci siamo preoccupati soltanto di mostrare le parti essenziali del blog, come la lista degli articoli nella pagina principale e nell’archivio, la sidebar, il titolo ed il contenuto di un singolo articolo, ed ho volutamente tralasciato la parte grafica per evitare di mettere confusione tra il loop di WordPress ed i vari elementi in html.

 

Web Hosting
Pubblicato il 25 Feb 2015
Argomenti che potrebbero interessarti: , ,

Lascia un commento

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