WordPress è il CMS più utilizzato al mondo, e avere un tema personalizzato può fare la differenza per un sito unico e performante. Ma come si crea un tema WordPress da zero? Se vuoi imparare, sei nel posto giusto! In questa guida passo passo, scoprirai tutto ciò che serve per la creazione di temi WordPress da zero.
Cosa serve per creare un tema WordPress?
Prima di iniziare, assicurati di avere:
- Un ambiente di sviluppo locale (MAMP, XAMPP o Local by Flywheel)
- WordPress installato in locale
- Conoscenze base di HTML, CSS, JavaScript e PHP
- Un editor di codice (VS Code, Sublime Text, ecc.)
- Un browser con strumenti per sviluppatori
Ps. prima di continuare leggi i 5 errori da evitare nella costruzione di un sito web, varranno anche per la creazione di un tema wordpress!
Ora che abbiamo tutto il necessario, iniziamo la nostra creazione temi WordPress! 🎯
Struttura Base per la creazione temi wordpress
Un tema WordPress è composto da diversi file essenziali. Creiamo una nuova cartella in wp-content/themes con il nome del nostro tema, ad esempio mio-tema.
All’interno della cartella, creiamo questi file base:
style.css→ Definisce il nome del tema e gli stiliindex.php→ Il file principale del temaheader.php→ Contiene l’intestazione del sitofooter.php→ Contiene il footerfunctions.php→ Aggiunge funzionalità al temascreenshot.png→ Un’anteprima del tema (opzionale)
✍️ Esempio di style.css
/*
Theme Name: Mio Tema
Theme URI: https://esempio.com
Author: Il Tuo Nome
Author URI: https://iltuosito.com
Description: Un tema WordPress personalizzato
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
Questo file è fondamentale per far riconoscere il tema a WordPress.
Creazione Temi WordPress: Il File Principale index.php
Il file index.php è il cuore del tema e visualizza il contenuto delle pagine. Per ora, inseriamo un codice base:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else:
echo '<p>Nessun contenuto trovato</p>';
endif;
?>
</main>
<footer>
<p>© <?php echo date('Y'); ?> - Tutti i diritti riservati</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Questo codice mostra il titolo del sito, la descrizione e il contenuto dei post.
Aggiungere il Supporto agli Stili CSS e JavaScript
Per caricare il CSS e i file JavaScript nel nostro tema, apriamo functions.php e aggiungiamo:
function carica_risorse_tema() {
wp_enqueue_style('stile-principale', get_stylesheet_uri());
wp_enqueue_script('script-custom', get_template_directory_uri() . '/js/script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'carica_risorse_tema');
Ora creiamo una cartella js e all’interno un file script.js per aggiungere interazioni con JavaScript.
Creazione Temi WordPress: Strutturare Header, Footer e Sidebar
WordPress permette di organizzare meglio il codice separando header e footer in file dedicati.
🏗 Esempio di header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<nav><?php wp_nav_menu(array('theme_location' => 'main-menu')); ?></nav>
</header>
Nel file index.php, sostituiamo il codice dell’header con:
<?php get_header(); ?>
Lo stesso vale per footer.php, che richiameremo con <?php get_footer(); ?>.
Aggiungere un Menu Navigabile
Durante la creazione temi wordpress ci servirà aggiungere un menu, quindi apriamo functions.php e inseriamo:
function registra_menu() {
register_nav_menu('main-menu', 'Menu Principale');
}
add_action('after_setup_theme', 'registra_menu');
Ora possiamo gestire il menu da Aspetto > Menu nel pannello di WordPress.
Creare un File per la Pagina dei Post (blog)
Per gestire le pagine degli articoli, creiamo home.php:
<?php get_header(); ?>
<main>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
<?php endwhile; else: ?>
<p>Nessun articolo trovato.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
Questo file mostra gli articoli del blog con titolo e riassunto.
Conclusione
Abbiamo creato un tema WordPress da zero! 🚀 Ovviamente, ci sono molte altre funzionalità che puoi aggiungere, come:
- Template personalizzati per pagine specifiche
- Widget e sidebar
- Supporto ai Custom Post Types
- Aggiunta di un Customizer per la personalizzazione dinamica
Ma ora hai le basi per sviluppare e personalizzare un tema WordPress su misura! 🔥
Se ti è piaciuta questa guida sulla creazione temi WordPress, lascia un commento e condividila! 😊
Un tema WordPress è un insieme di file che determinano l’aspetto e la struttura grafica di un sito. Può essere personalizzato o creato da zero.
Per installare un tema personalizzato, carica la cartella del tema in wp-content/themes, poi attivalo dal pannello Aspetto > Temi di WordPress.
Sì, WordPress è basato su PHP. Anche se puoi usare HTML e CSS per la struttura, un minimo di PHP è essenziale per la logica dinamica del tema.
Bisogna registrare il menu in functions.php con register_nav_menu() e poi richiamarlo in header.php usando wp_nav_menu().
Puoi testarlo in un ambiente locale con software come XAMPP, MAMP o Local by Flywheel, prima di caricarlo su un hosting online.
Puoi aggiungere:
– Supporto ai widget e sidebar
– Template personalizzati
– Un Customizer per la personalizzazione dinamica
– Ottimizzazione per la velocità e il SEO
Articoli correlati