WordPress è un sistema di gestione dei contenuti (CMS) molto popolare per la creazione di blog, negozi di e-commerce e altri siti web. Si distingue per la sua flessibilità, supportando migliaia di temi gratuiti e a pagamento su diverse piattaforme, il che contribuisce ad accelerare il processo di creazione di un sito web.
Tuttavia, la vera forza di WordPress risiede nelle sue opzioni di personalizzazione: è possibile modificare l’aspetto del proprio sito con vari page builder e temi a blocchi per adattarlo ai propri gusti. Ma cosa succede se queste opzioni non soddisfano ancora le nostre esigenze specifiche? La buona notizia è che possiamo sviluppare il nostro tema da zero.
Questa guida descrive la creazione di un tema WordPress classico. Vedremo come costruire un tema passo dopo passo, gettando le basi per costruire temi più avanzati in futuro.
Prerequisiti
Lo sviluppo di un tema da zero è un processo tecnico che implica la scrittura di codice. È necessario avere familiarità con i seguenti elementi:
- PHP: è essenziale per aggiungere funzionalità e contenuti dinamici al tema. È la spina dorsale di WordPress.
- HTML: viene utilizzato per creare la struttura dei modelli del tema.
- CSS: è utilizzato per creare lo stile del tema e garantire un aspetto gradevole su diversi dispositivi e browser.
Inoltre, la creazione di un ambiente di sviluppo è fondamentale. Se volete, potete creare il vostro con DevKinsta, una suite di sviluppo locale per siti WordPress, seguendo questi passaggi:
- Visitate il sito web di DevKinsta per scaricare l’applicazione per il vostro sistema operativo.
- Seguite le istruzioni per l’installazione per il vostro sistema operativo.
- Aprite DevKinsta e cliccate su Nuovo sito WordPress.
- Quindi, selezionate l’opzione Nuovo sito WordPress e compilate i campi Nome del sito, Nome utente amministratore WordPress e Password amministratore WordPress.
- Infine, cliccate su Crea sito e attendete 30-60 secondi per la creazione del sito.
Una volta creato il sito, potrete visualizzarne l’anteprima, accedere alla bacheca di WP e persino vedere il percorso del file dell’installazione locale di WP sul vostro computer, che vi permetterà di accedere a tutto il codice.
La struttura dei temi di WordPress
Prima di immergerci nel processo di creazione passo dopo passo del nostro tema classico, è essenziale comprendere la struttura di un tema classico di WordPress e i file chiave coinvolti. Questa conoscenza ci fornirà una solida base per lo sviluppo del nostro tema.
La directory dei temi di WordPress
Tutti i temi di WordPress sono memorizzati nella cartella wp-content/themes directory di un’installazione di WordPress. Ogni tema risiede nella sua cartella all’interno di questa directory.
I file chiave di un tema WordPress
Ci sono due file principali che ogni tema classico di WordPress deve avere:
index.php: questo è il file del template principale che funge da fallback per tutti gli altri file template. È il file principale che WordPress utilizza per visualizzare i contenuti.style.css: questo file contiene i metadati del tema e gli stili CSS personalizzati. È fondamentale per definire l’aspetto del tema e fornire informazioni essenziali, come il nome, l’autore e la versione.
Per strutturare bene il nostro tema e aggiungere funzionalità, possiamo utilizzare file template aggiuntivi, come i seguenti, comuni ai temi classici e utilizzati nel tema di esempio creato in questa guida:
header.php: questo file può contenere la sezione dell’header del tema, compreso il logo del sito e il menu di navigazione.footer.php: questo file dovrebbe contenere la sezione footer del tema.functions.php: questo file può essere utilizzato per aggiungere funzioni, caratteristiche e opzioni di supporto al tema.single.php: questo file template viene utilizzato per visualizzare i singoli post del blog.page.php: il file template utilizzato per visualizzare le pagine statiche.
Ora che abbiamo analizzato i file essenziali e i loro ruoli, passiamo al processo di creazione passo dopo passo del nostro tema classico per WordPress.
Come creare un tema WordPress classico
Secondo un modo di dire molto popolare, il miglior modo per imparare è fare. Applichiamo questo principio creando un tema classico per blog che mostri i nostri post WordPress sulla homepage con uno stile CSS personalizzato e funzioni aggiuntive.
Passo 1: Creare una nuova cartella del tema
Creiamo una cartella all’interno della directory themes, ad esempio myblogtheme.
Passo 2: Aggiungere le informazioni sui metadati del tema
Quindi, impostiamo i dettagli del tema nel file style.css. Ecco un esempio di informazioni sui metadati che possiamo includere in style.css:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/Nel codice qui sopra:
- Theme Name: il nome del tema visualizzato nell’area di amministrazione di WordPress in Aspetto > Temi.
- Author: Mostra il nome del creatore del tema.
- Author URI: link al sito web o al profilo dell’autore.
- Description: fornisce una panoramica dello scopo e delle caratteristiche del tema.
- Version: indica la versione attuale del tema per gli aggiornamenti.
- License: specifica i termini di distribuzione.
- License URI: collega al testo completo della licenza.
Per maggiori informazioni su questi campi basta visitare il Manuale dei temi di WordPress.
Dopo aver aggiunto queste informazioni al file style.css, andiamo su Aspetto > Temi nell’area di amministrazione di WordPress. Vedremo il tema appena creato elencato. Facendo clic per visualizzare i dettagli del tema, noteremo che tutte le informazioni aggiunte sono presenti.
Ora che abbiamo creato il file style.css, passiamo alla creazione degli altri file essenziali del tema.
Passo 3: Creare il file del template principale del tema
Il file index.php è il file principale del tema. Il codice che aggiungiamo qui viene utilizzato per visualizzare il contenuto principale del nostro sito.
Ad esempio, se aggiungiamo qui del codice HTML di base, tutto viene visualizzato attivando e visualizzando l’anteprima del tema. Tuttavia, vogliamo estrarre le informazioni dal nostro CMS WordPress per visualizzarle attraverso il file template del tema, ed è qui che utilizziamo PHP per aggiungere le funzioni di WordPress.
Ecco come può apparire la struttura di base del file index.php:
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>Nella struttura qui sopra, get_header() e get_footer() sono utilizzati per estrarre le sezioni dell’header e del footer dai rispettivi file template (header.php e footer.php).
Il file index.php verrà popolato con il codice corretto, ma prima lavoriamo sulle sezioni dell’header e del footer del tema.
Passo 4: Creare il file di intestazione
Il file header.php mostra la sezione dell’intestazione del sito, che di solito include elementi come il logo del sito e il menu di navigazione. Include anche fogli di stile, script e meta tag. Ecco come appare il nostro file header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Vediamo di analizzare e spiegare ogni parte di questo file e di aggiungere le funzioni e glii hook corrispondenti a functions.php.
Iniziamo con la sezione <head>. Questa sezione include i metadati essenziali, il titolo del sito, la codifica dei caratteri e la funzione wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>La funzione language_attributes(); imposta gli attributi della lingua per il documento HTML. La funzione wp_head(); è fondamentale perché permette a WordPress e ai plugin di inserire elementi essenziali nella sezione <head>, come fogli di stile e script.
Inseriamo il foglio di stile aggiungendo quanto segue a functions.php:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');La funzione wp_enqueue_style() aggiunge il foglio di stile principale alla sezione head. Il prefisso della funzione è my_custom_theme per evitare conflitti con altri temi o plugin. Possiamo decidere di aggiungerlo direttamente al tag head con il tag <link>.
Allo stesso modo, dichiariamo una funzione per aggiungere il titolo del sito alla sezione head:
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Ora, grazie alla funzione wp_head(), lo stile e il tag title vengono aggiunti dinamicamente all’intestazione. Possiamo verificarlo ispezionando il sito WordPress con gli strumenti di sviluppo del browser. Nella sezione <head> dovremmo vedere il link al foglio di stile e il tag del titolo generato dinamicamente, a conferma del fatto che sono stati inclusi.
Successivamente, nel corpo, dichiariamo la sezione della navbar dove mostriamo un logo fittizio e garantiamo un’opzione per l’utilizzo di un logo personalizzato se impostato nell’identità del sito WordPress:
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>La sezione del logo utilizza la funzione the_custom_logo() per visualizzare un logo personalizzato, se ne è stato impostato uno. Se non è stato impostato alcun logo personalizzato, viene visualizzata un’immagine predefinita.
Per abilitare il supporto del logo personalizzato, aggiungiamo il seguente codice a functions.php:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Questa funzione aggiunge il supporto per un logo personalizzato. Infine, la sezione del menu di navigazione:
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>La funzione wp_nav_menu() mostra il menu di navigazione assegnato alla posizione “Header Menu”. Per registrare il menu di navigazione, assicuriamoci di avere questo codice in functions.php:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));Ecco come apparirà il file function.php:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>Seguendo questi passaggi, ci assicureremo che l’header supporti un logo personalizzato e visualizzi un menu di navigazione, rendendola dinamica e facilmente personalizzabile attraverso la bacheca di amministrazione di WordPress.
Passo 5: Creare il file del footer
Il file footer.php è responsabile della visualizzazione della sezione del footer del sito. Per questo tema, il file footer.php mostrerà solo l’anno di copyright:
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>In questo file includiamo la funzione wp_footer(), in modo simile a come abbiamo incluso wp_head() nell’header. La funzione wp_footer() permette a WordPress e ai plugin di inserire elementi essenziali, come ad esempio gli script, appena prima del tag di chiusura </body>. Questo è fondamentale per garantire che tutte le risorse necessarie vengano caricate correttamente e che il sito funzioni come previsto.
Passo 6: mostrare i post del blog con il ciclo di WordPress
Torniamo al file index.php per vedere come mostrare i post del sito WordPress utilizzando il ciclo di WordPress, un potente metodo per mostrare i contenuti in modo dinamico. Ecco come si presenta il ciclo:
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>Il codice qui sopra controlla se ci sono post da visualizzare prima di entrare nel ciclo. Nel ciclo, le funzioni di WordPress come the_title(), the_author(), the_time('F j, Y') e the_excerpt() visualizzano le informazioni relative a ciascun post di WordPress.
Anche la funzione the_post_thumbnail() viene utilizzata per visualizzare la miniatura, ma è racchiusa in un’istruzione if, quindi viene visualizzata solo se c’è un’immagine in primo piano per il post. Nel file functions.php dobbiamo aggiungere il supporto per le miniature dei post con questa funzione, in modo che ci sia un’opzione per caricare le immagini in primo piano quando si creano nuovi post:
add_theme_support('post-thumbnails');Aggiungiamo questa funzione alla funzione my_custom_theme_setup() che abbiamo creato nel file functions.php. Ecco come appare ora il file index.php:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Noterete che è stato aggiunto del codice statico, che verrà stilizzato come un banner con la scritta “Welcome to my blog” e un paragrafo di testo.
Passo 7: Creare un template per un singolo post
Prima di creare lo stile del nostro tema, definiamo un template di base per visualizzare i singoli post del blog quando vengono cliccati da qualsiasi pagina o post del tema. Per farlo, creiamo un file single.php nella root del tema e aggiungiamo il seguente codice:
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Nel codice qui sopra, get_header() e get_footer() includono l’intestazione e il footer. Nelle altre parti del codice, le funzioni di WordPress visualizzano il contenuto dinamico.
Passo 8: Creare un file template per le pagine di WordPress
Così come abbiamo creato un template per i singoli post di WordPress, possiamo creare un template per visualizzare le nostre pagine di WordPress. Per farlo, creiamo un file page.php nella cartella principale del tema e aggiungiamo il seguente codice:
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Passo 9: Stilizzare il tema
Finora abbiamo creato alcuni modelli di base per il nostro tema. Ora è il momento di aggiungere uno stile personalizzato per renderlo più bello. Possiamo aggiungere gli stili al file style.css nella cartella del tema. Per iniziare, copiamo gli stili da questo gist GitHub per l’esempio di tema creato in questa guida.
Passo 10: Testare e distribuire il tema
Finora sei riuscito a creare un tema per WordPress. Ora è il momento di testarlo e distribuirlo.
Per prima cosa, assicuriamoci che il tema sia attivato andando nella bacheca di amministrazione di WordPress e selezionando Aspetto > Temi. Se non l’avete ancora fatto, cliccate sul vostro tema e attivatelo. Possiamo anche cliccare sul pulsante Personalizza per impostare l’identità del sito, regolare il menu e modificare altre impostazioni per assicurarci che il sito venga visualizzato correttamente.
Una volta soddisfatti del tema, abbiamo un paio di opzioni per distribuirlo:
- Eseguire il push del sito locale online: se stiamo sviluppando localmente con DevKinsta, possiamo facilmente inviare il sito in un ambiente di staging. Ciò ci permette di testare il tema in un ambiente simile a quello live prima di eseguire il push all’ambiente live. Istruzioni dettagliate su come fare sono disponibili nella documentazione di DevKinsta.
- Creare un pacchetto e caricare il tema: in alternativa, possiamo impacchettare il tema in una cartella zippata e caricarlo su un sito online. Andiamo su Aspetto > Temi > Aggiungi nuovo > Carica tema nella bacheca di amministrazione di WordPress e selezioniamo il file zippato del tema da caricare.
Testare accuratamente il tema in un ambiente di staging assicura che tutto funzioni come previsto prima di renderlo operativo. Questa fase è fondamentale per individuare potenziali problemi e garantire che il sito abbia un aspetto e un funzionamento perfetti.
Riepilogo
In questo articolo abbiamo creato un tema classico per WordPress partendo da zero. Abbiamo affrontato l’impostazione dei file essenziali, l’aggiunta di stili personalizzati e la creazione di modelli per singoli post e pagine.
Se volete che il vostro sito abbia l’esatta funzionalità e l’aspetto che desiderate, sviluppare il vostro tema WordPress è la strada da percorrere. Tuttavia, se non avete il tempo, le competenze o la voglia di farlo, affidarvi a un professionista può aiutarvi a realizzare la vostra visione in modo efficiente.
Quando finalmente avrete un sito adatto ai vostri gusti, vorrete un hosting solido per evitare problemi come downtime, attacchi DDoS e altro. È qui che si distinguono i fornitori di hosting premium come Kinsta.
Kinsta offre un potente hosting WordPress gestito con un’architettura completamente containerizzata, alimentato esclusivamente da Google Cloud Platform sulla rete di livello Premium di Google.
Contattateci per maggiori informazioni sulla nostra soluzione di hosting gestito di qualità superiore.
Lascia un commento