{"id":78501,"date":"2024-08-02T09:28:10","date_gmt":"2024-08-02T08:28:10","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=78501&#038;preview=true&#038;preview_id=78501"},"modified":"2024-08-02T12:16:23","modified_gmt":"2024-08-02T11:16:23","slug":"creare-tema-classico-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/","title":{"rendered":"Come creare un tema classico per WordPress: guida passo passo"},"content":{"rendered":"<p>WordPress \u00e8 un <a href=\"https:\/\/kinsta.com\/it\/blog\/content-management-system\/\">sistema di gestione dei contenuti (CMS)<\/a> molto popolare per la creazione di blog, negozi di <a href=\"https:\/\/kinsta.com\/ecommerce\/\">e-commerce<\/a> e altri siti web. Si distingue per la sua flessibilit\u00e0, supportando migliaia di <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">temi gratuiti e a pagamento<\/a> su diverse piattaforme, il che contribuisce ad accelerare il processo di creazione di un sito web.<\/p>\n<p>Tuttavia, la vera forza di WordPress risiede nelle sue opzioni di personalizzazione: \u00e8 possibile modificare l&#8217;aspetto del proprio sito con vari <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">page builder<\/a> 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 \u00e8 che possiamo sviluppare il nostro tema da zero.<\/p>\n<p>Questa guida descrive la creazione di un <a href=\"https:\/\/kinsta.com\/it\/strumenti\/theme-detector-wordpress\/\">tema WordPress<\/a> classico. Vedremo come costruire un tema passo dopo passo, gettando le basi per costruire temi pi\u00f9 avanzati in futuro.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Magari vi state chiedendo cosa sia un tema WordPress classico, cosa lo rende tale e se esiste un altro tipo di tema. La risposta diretta \u00e8 che un tema WordPress classico utilizza i tradizionali file template e le funzioni PHP per costruire la struttura e il layout del sito.<\/p>\n<p>Ci\u00f2 si differenzia dai moderni temi a blocchi introdotti con l&#8217;<a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">editor Gutenberg<\/a>, che utilizza i blocchi e l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/full-site-editing-wordpress\/\">editing completo del sito (FSE)<\/a> per creare e gestire gli elementi del tema. Entrambi i tipi hanno i loro vantaggi, ma questa guida si concentra sui temi classici.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Prerequisiti<\/h2>\n<p>Lo sviluppo di un tema da zero \u00e8 un processo tecnico che implica la scrittura di codice. \u00c8 necessario avere familiarit\u00e0 con i seguenti elementi:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-php\/\">PHP<\/a><\/strong>: \u00e8 essenziale per aggiungere funzionalit\u00e0 e contenuti dinamici al tema. \u00c8 la spina dorsale di WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a><\/strong>: viene utilizzato per creare la struttura dei modelli del tema.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a><\/strong>: \u00e8 utilizzato per creare lo stile del tema e garantire un aspetto gradevole su diversi dispositivi e browser.<\/li>\n<\/ul>\n<p>Inoltre, la creazione di un ambiente di sviluppo \u00e8 fondamentale. Se volete, potete creare il vostro con <a href=\"https:\/\/kinsta.com\/it\/docs\/devkinsta\/\">DevKinsta<\/a>, una suite di sviluppo locale per siti WordPress, seguendo questi passaggi:<\/p>\n<ol start=\"1\">\n<li>Visitate il <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">sito web di DevKinsta<\/a> per scaricare l&#8217;applicazione per il vostro sistema operativo.<\/li>\n<li>Seguite le istruzioni per l&#8217;installazione per il vostro sistema operativo.<\/li>\n<li>Aprite DevKinsta e cliccate su <strong>Nuovo sito WordPress<\/strong>.<\/li>\n<li>Quindi, selezionate l&#8217;opzione <strong>Nuovo sito WordPress<\/strong> e compilate i campi <strong>Nome del sito<\/strong>, <strong>Nome utente amministratore WordPress<\/strong> e <strong>Password amministratore WordPress<\/strong>.<\/li>\n<li>Infine, cliccate su <strong>Crea sito<\/strong> e attendete 30-60 secondi per la creazione del sito.<\/li>\n<\/ol>\n<p>Una volta creato il sito, potrete visualizzarne l&#8217;anteprima, accedere alla bacheca di WP e persino vedere il percorso del file dell&#8217;installazione locale di WP sul vostro computer, che vi permetter\u00e0 di accedere a tutto il codice.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"Dettagli del sito in DevKinsta\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Dettagli del sito in DevKinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Supponiamo che abbiate un sito live su MyKinsta. Potete <a href=\"https:\/\/kinsta.com\/it\/docs\/devkinsta\/devkinsta-integrazione\/#pull-a-site-from-kinsta\">trasferire il vostro sito su DevKinsta<\/a> per lavorarci localmente o utilizzare il vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/come-utilizzare-sftp\/\">client SFTP preferito<\/a>, come <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a>, insieme ai dettagli SFTP del vostro sito per accedere ai vostri file WordPress<\/p>\n<\/aside>\n\n<h2>La struttura dei temi di WordPress<\/h2>\n<p>Prima di immergerci nel processo di creazione passo dopo passo del nostro tema classico, \u00e8 essenziale comprendere la struttura di un tema classico di WordPress e i file chiave coinvolti. Questa conoscenza ci fornir\u00e0 una solida base per lo sviluppo del nostro tema.<\/p>\n<h3>La directory dei temi di WordPress<\/h3>\n<p>Tutti i temi di WordPress sono memorizzati nella cartella <code>wp-content\/themes directory<\/code> di un&#8217;installazione di WordPress. Ogni tema risiede nella sua cartella all&#8217;interno di questa directory.<\/p>\n<h3>I file chiave di un tema WordPress<\/h3>\n<p>Ci sono due file principali che ogni tema classico di WordPress deve avere:<\/p>\n<ul>\n<li><code>index.php<\/code>: questo \u00e8 il file del template principale che funge da fallback per tutti gli altri file template. \u00c8 il file principale che WordPress utilizza per visualizzare i contenuti.<\/li>\n<li><code>style.css<\/code>: questo file contiene i metadati del tema e gli stili CSS personalizzati. \u00c8 fondamentale per definire l&#8217;aspetto del tema e fornire informazioni essenziali, come il nome, l&#8217;autore e la versione.<\/li>\n<\/ul>\n<p>Per strutturare bene il nostro tema e aggiungere funzionalit\u00e0, possiamo utilizzare file template aggiuntivi, come i seguenti, comuni ai temi classici e utilizzati nel tema di esempio creato in questa guida:<\/p>\n<ul>\n<li><code>header.php<\/code>: questo file pu\u00f2 contenere la sezione dell&#8217;header del tema, compreso il logo del sito e il menu di navigazione.<\/li>\n<li><code>footer.php<\/code>: questo file dovrebbe contenere la sezione footer del tema.<\/li>\n<li><code>functions.php<\/code>: questo file pu\u00f2 essere utilizzato per aggiungere funzioni, caratteristiche e opzioni di supporto al tema.<\/li>\n<li><code>single.php<\/code>: questo file template viene utilizzato per visualizzare i singoli post del blog.<\/li>\n<li><code>page.php<\/code>: il file template utilizzato per visualizzare le pagine statiche.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>Come creare un tema WordPress classico<\/h2>\n<p>Secondo un modo di dire molto popolare, il miglior modo per imparare \u00e8 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.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Tema classico per blog WordPress\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Tema classico per blog WordPress.<\/figcaption><\/figure>\n<h3>Passo 1: Creare una nuova cartella del tema<\/h3>\n<p>Creiamo una cartella all&#8217;interno della directory <code>themes<\/code>, ad esempio <code>myblogtheme<\/code>.<\/p>\n<h3>Passo 2: Aggiungere le informazioni sui metadati del tema<\/h3>\n<p>Quindi, impostiamo i dettagli del tema nel file <code>style.css<\/code>. Ecco un esempio di informazioni sui metadati che possiamo includere in <code>style.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinsta.com\/blog\/author\/joelolawanle\/\nDescription: 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.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>Nel codice qui sopra:<\/p>\n<ul>\n<li><strong>Theme Name<\/strong>: il nome del tema visualizzato nell&#8217;area di amministrazione di WordPress in <strong>Aspetto<\/strong> &gt; <strong>Temi<\/strong>.<\/li>\n<li><strong>Author<\/strong>: Mostra il nome del creatore del tema.<\/li>\n<li><strong>Author URI<\/strong>: link al sito web o al profilo dell&#8217;autore.<\/li>\n<li><strong>Description<\/strong>: fornisce una panoramica dello scopo e delle caratteristiche del tema.<\/li>\n<li><strong>Version<\/strong>: indica la versione attuale del tema per gli aggiornamenti.<\/li>\n<li><strong>License<\/strong>: specifica i termini di distribuzione.<\/li>\n<li><strong>License URI<\/strong>: collega al testo completo della licenza.<\/li>\n<\/ul>\n<p>Per maggiori informazioni su questi campi basta visitare il <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manuale dei temi di WordPress<\/a>.<\/p>\n<p>Dopo aver aggiunto queste informazioni al file <code>style.css<\/code>, andiamo su <strong>Aspetto<\/strong> &gt; <strong>Temi<\/strong> nell&#8217;area di amministrazione di WordPress. Vedremo il tema appena creato elencato. Facendo clic per visualizzare i <strong>dettagli del tema<\/strong>, noteremo che tutte le informazioni aggiunte sono presenti.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"Dettagli del tema classico per blog\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Dettagli del tema classico per blog.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Aggiungendo un file <code>screenshot.png<\/code> alla cartella principale del tema, apparir\u00e0 come immagine di anteprima nella pagina dei <strong>temi<\/strong>. In questo modo \u00e8 pi\u00f9 facile identificare l&#8217;aspetto di un tema.<\/p>\n<\/aside>\n\n<p>Ora che abbiamo creato il file <code>style.css<\/code>, passiamo alla creazione degli altri file essenziali del tema.<\/p>\n<h3>Passo 3: Creare il file del template principale del tema<\/h3>\n<p>Il file <code>index.php<\/code> \u00e8 il file principale del tema. Il codice che aggiungiamo qui viene utilizzato per visualizzare il contenuto principale del nostro sito.<\/p>\n<p>Ad esempio, se aggiungiamo qui del <a href=\"https:\/\/kinsta.com\/it\/blog\/modificare-codice-wordpress\/\">codice HTML<\/a> di base, tutto viene visualizzato attivando e visualizzando l&#8217;anteprima del tema. Tuttavia, vogliamo estrarre le informazioni dal nostro CMS WordPress per visualizzarle attraverso il file template del tema, ed \u00e8 qui che utilizziamo PHP per aggiungere le funzioni di WordPress.<\/p>\n<p>Ecco come pu\u00f2 apparire la struttura di base del file <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    <!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Nella struttura qui sopra, <code>get_header()<\/code> e <code>get_footer()<\/code> sono utilizzati per estrarre le sezioni dell&#8217;header e del footer dai rispettivi file template (<code>header.php<\/code> e <code>footer.php<\/code>).<\/p>\n<p>Il file <code>index.php<\/code> verr\u00e0 popolato con il codice corretto, ma prima lavoriamo sulle sezioni dell&#8217;header e del footer del tema.<\/p>\n<h3>Passo 4: Creare il file di intestazione<\/h3>\n<p>Il file <code>header.php<\/code> mostra la sezione dell&#8217;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 <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Vediamo di analizzare e spiegare ogni parte di questo file e di aggiungere le <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-functions-php\/\">funzioni<\/a> e glii <a href=\"https:\/\/kinsta.com\/it\/blog\/hook-wordpress\/\">hook<\/a> corrispondenti a <code>functions.php<\/code>.<\/p>\n<p>Iniziamo con la sezione <code>&lt;head&gt;<\/code>. Questa sezione include i metadati essenziali, il titolo del sito, la codifica dei caratteri e la funzione <code>wp_head()<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>La funzione <code>language_attributes();<\/code> imposta gli attributi della lingua per il documento HTML. La funzione <code>wp_head();<\/code> \u00e8 fondamentale perch\u00e9 permette a WordPress e ai plugin di inserire elementi essenziali nella sezione <code>&lt;head&gt;<\/code>, come fogli di stile e script.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u00c8 importante avvolgere sempre le funzioni di WordPress nei tag <code>&lt;?php ... ?&gt;<\/code>.<\/p>\n<\/aside>\n\n<p><a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Inseriamo<\/a> il foglio di stile aggiungendo quanto segue a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>La funzione <code>wp_enqueue_style()<\/code> aggiunge il <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">foglio di stile<\/a> principale alla sezione head. Il prefisso della funzione \u00e8 <code>my_custom_theme<\/code> per evitare conflitti con altri temi o plugin. Possiamo decidere di aggiungerlo direttamente al tag head con il tag <code>&lt;link&gt;<\/code>.<\/p>\n<p>Allo stesso modo, dichiariamo una funzione per aggiungere il titolo del sito alla sezione head:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Ora, grazie alla funzione <code>wp_head()<\/code>, lo stile e il tag title vengono aggiunti dinamicamente all&#8217;intestazione. Possiamo verificarlo ispezionando il sito WordPress con gli strumenti di sviluppo del browser. Nella sezione <code>&lt;head&gt;<\/code> dovremmo vedere il link al foglio di stile e il tag del titolo generato dinamicamente, a conferma del fatto che sono stati inclusi.<\/p>\n<p>Successivamente, nel corpo, dichiariamo la sezione della navbar dove mostriamo un logo fittizio e garantiamo un&#8217;opzione per l&#8217;utilizzo di un logo personalizzato se impostato nell&#8217;identit\u00e0 del sito WordPress:<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>La sezione del logo utilizza la funzione <code>the_custom_logo()<\/code> per visualizzare un logo personalizzato, se ne \u00e8 stato impostato uno. Se non \u00e8 stato impostato alcun logo personalizzato, viene visualizzata un&#8217;immagine predefinita.<\/p>\n<p>Per abilitare il supporto del logo personalizzato, aggiungiamo il seguente codice a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Questa funzione aggiunge il supporto per un logo personalizzato. Infine, la sezione del menu di navigazione:<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>La funzione <code>wp_nav_menu()<\/code> mostra il <a href=\"https:\/\/kinsta.com\/it\/blog\/menu-personalizzato-wordpress\/\">menu di navigazione<\/a> assegnato alla posizione &#8220;Header Menu&#8221;. Per registrare il menu di navigazione, assicuriamoci di avere questo codice in <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>Ecco come apparir\u00e0 il file <code>function.php<\/code>:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>Seguendo questi passaggi, ci assicureremo che l&#8217;header supporti un logo personalizzato e visualizzi un menu di navigazione, rendendola dinamica e facilmente personalizzabile attraverso la bacheca di <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">amministrazione di WordPress<\/a>.<\/p>\n<h3>Passo 5: Creare il file del footer<\/h3>\n<p>Il file <code>footer.php<\/code> \u00e8 responsabile della visualizzazione della sezione del footer del sito. Per questo tema, il file <code>footer.php<\/code> mostrer\u00e0 solo l&#8217;anno di copyright:<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>In questo file includiamo la funzione <code>wp_footer()<\/code>, in modo simile a come abbiamo incluso wp_head() nell&#8217;header. La funzione <code>wp_footer()<\/code> permette a WordPress e ai plugin di inserire elementi essenziali, come ad esempio gli script, appena prima del tag di chiusura <code>&lt;\/body&gt;<\/code>. Questo \u00e8 fondamentale per garantire che tutte le risorse necessarie vengano caricate correttamente e che il sito funzioni come previsto.<\/p>\n<h3>Passo 6: mostrare i post del blog con il ciclo di WordPress<\/h3>\n<p>Torniamo al file <code>index.php<\/code> 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:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&gt;\n    &lt;?php endwhile; else : ?&gt;\n        &lt;article&gt;\n            &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;?php endif; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Il codice qui sopra controlla se ci sono post da visualizzare prima di entrare nel ciclo. Nel ciclo, le funzioni di WordPress come <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code> e <code>the_excerpt()<\/code> visualizzano le informazioni relative a ciascun post di WordPress.<\/p>\n<p>Anche la funzione <code>the_post_thumbnail()<\/code> viene utilizzata per visualizzare la miniatura, ma \u00e8 racchiusa in un&#8217;istruzione if, quindi viene visualizzata solo se c&#8217;\u00e8 un&#8217;immagine in primo piano per il post. Nel file <code>functions.php<\/code> dobbiamo aggiungere il supporto per le miniature dei post con questa funzione, in modo che ci sia un&#8217;opzione per caricare le immagini in primo piano quando si creano nuovi post:<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>Aggiungiamo questa funzione alla funzione <code>my_custom_theme_setup()<\/code> che abbiamo creato nel file <code>functions.php<\/code>. Ecco come appare ora il file <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&gt;\n        &lt;?php endwhile; else : ?&gt;\n            &lt;article&gt;\n                &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;?php endif; ?&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Noterete che \u00e8 stato aggiunto del codice statico, che verr\u00e0 stilizzato come un banner con la scritta &#8220;Welcome to my blog&#8221; e un paragrafo di testo.<\/p>\n<h3>Passo 7: Creare un template per un singolo post<\/h3>\n<p>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 <code>single.php<\/code> nella root del tema e aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Nel codice qui sopra, <code>get_header()<\/code> e <code>get_footer()<\/code> includono l&#8217;intestazione e il footer. Nelle altre parti del codice, le funzioni di WordPress visualizzano il contenuto dinamico.<\/p>\n<h3>Passo 8: Creare un file template per le pagine di WordPress<\/h3>\n<p>Cos\u00ec 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 <code>page.php<\/code> nella cartella principale del tema e aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>Passo 9: Stilizzare il tema<\/h3>\n<p>Finora abbiamo creato alcuni modelli di base per il nostro tema. Ora \u00e8 il momento di aggiungere uno stile personalizzato per renderlo pi\u00f9 bello. Possiamo aggiungere gli stili al file <code>style.css<\/code> nella cartella del tema. Per iniziare, copiamo gli stili da questo <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">gist GitHub<\/a> per l&#8217;esempio di tema creato in questa guida.<\/p>\n<h3>Passo 10: Testare e distribuire il tema<\/h3>\n<p>Finora sei riuscito a creare un tema per WordPress. Ora \u00e8 il momento di testarlo e distribuirlo.<\/p>\n<p>Per prima cosa, assicuriamoci che il tema sia attivato andando nella bacheca di amministrazione di WordPress e selezionando <strong>Aspetto<\/strong> &gt; <strong>Temi<\/strong>. Se non l&#8217;avete ancora fatto, cliccate sul vostro tema e attivatelo. Possiamo anche cliccare sul pulsante <strong>Personalizza<\/strong> per impostare l&#8217;identit\u00e0 del sito, regolare il menu e modificare altre impostazioni per assicurarci che il sito venga visualizzato correttamente.<\/p>\n<p>Una volta soddisfatti del tema, abbiamo un paio di opzioni per distribuirlo:<\/p>\n<ol start=\"1\">\n<li><strong>Eseguire il push del sito locale online<\/strong>: se stiamo sviluppando localmente con DevKinsta, possiamo facilmente inviare il sito in un ambiente di staging. Ci\u00f2 ci permette di testare il tema in un ambiente simile a quello live prima di eseguire il push all&#8217;ambiente live. Istruzioni dettagliate su come fare sono disponibili nella <a href=\"https:\/\/kinsta.com\/it\/docs\/devkinsta\/devkinsta-integrazione\/#push-changes-to-staging\">documentazione di DevKinsta<\/a>.<\/li>\n<li><strong>Creare un pacchetto e caricare il tema<\/strong>: in alternativa, possiamo impacchettare il tema in una cartella zippata e caricarlo su un sito online. Andiamo su <strong>Aspetto<\/strong> &gt; <strong>Temi<\/strong> &gt; <strong>Aggiungi nuovo<\/strong> &gt; <strong>Carica tema<\/strong> nella bacheca di amministrazione di WordPress e selezioniamo il file zippato del tema da caricare.<\/li>\n<\/ol>\n<p>Testare accuratamente il tema in un ambiente di staging assicura che tutto funzioni come previsto prima di renderlo operativo. Questa fase \u00e8 fondamentale per individuare potenziali problemi e garantire che il sito abbia un aspetto e un funzionamento perfetti.<\/p>\n<h2>Riepilogo<\/h2>\n<p>In questo articolo abbiamo creato un tema classico per WordPress partendo da zero. Abbiamo affrontato l&#8217;impostazione dei file essenziali, l&#8217;aggiunta di stili personalizzati e la creazione di modelli per singoli post e pagine.<\/p>\n<p>Se volete che il vostro sito abbia l&#8217;esatta funzionalit\u00e0 e l&#8217;aspetto che desiderate, sviluppare il vostro tema WordPress \u00e8 la strada da percorrere. Tuttavia, se non avete il tempo, le competenze o la voglia di farlo, affidarvi a un professionista pu\u00f2 aiutarvi a realizzare la vostra visione in modo efficiente.<\/p>\n<p>Quando finalmente avrete un sito adatto ai vostri gusti, vorrete un hosting solido per evitare problemi come <a href=\"https:\/\/kinsta.com\/it\/blog\/tempi-inattivita-sito-web\/\">downtime<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/prevenire-attacchi-ddos\/\">attacchi DDoS<\/a> e altro. \u00c8 qui che si distinguono i fornitori di hosting premium come Kinsta.<\/p>\n<p>Kinsta offre un potente <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">hosting WordPress gestito<\/a> con un&#8217;architettura completamente containerizzata, alimentato esclusivamente da <a href=\"https:\/\/kinsta.com\/it\/blog\/piattaforma-cloud-per-sviluppatori\/\">Google Cloud Platform<\/a> sulla rete di livello Premium di Google.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/it\/contattaci\/\">Contattateci<\/a> per maggiori informazioni sulla nostra soluzione di hosting gestito di qualit\u00e0 superiore.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress \u00e8 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 &#8230;<\/p>\n","protected":false},"author":287,"featured_media":78502,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25873,25957],"class_list":["post-78501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-sviluppo-wordpress","topic-temi-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come creare un tema classico per WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare un tema classico per WordPress: guida passo passo\" \/>\n<meta property=\"og:description\" content=\"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-02T08:28:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-02T11:16:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come creare un tema classico per WordPress: guida passo passo\",\"datePublished\":\"2024-08-02T08:28:10+00:00\",\"dateModified\":\"2024-08-02T11:16:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\"},\"wordCount\":2434,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\",\"name\":\"Come creare un tema classico per WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png\",\"datePublished\":\"2024-08-02T08:28:10+00:00\",\"dateModified\":\"2024-08-02T11:16:23+00:00\",\"description\":\"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come creare un tema classico per WordPress: guida passo passo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come creare un tema classico per WordPress - Kinsta\u00ae","description":"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come creare un tema classico per WordPress: guida passo passo","og_description":"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.","og_url":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-08-02T08:28:10+00:00","article_modified_time":"2024-08-02T11:16:23+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"17 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come creare un tema classico per WordPress: guida passo passo","datePublished":"2024-08-02T08:28:10+00:00","dateModified":"2024-08-02T11:16:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/"},"wordCount":2434,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/","name":"Come creare un tema classico per WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png","datePublished":"2024-08-02T08:28:10+00:00","dateModified":"2024-08-02T11:16:23+00:00","description":"Scopri come creare un tema classico di WordPress da zero, creando file di template e utilizzando le funzioni di WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/create-your-own-wordpress-theme.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come creare un tema classico per WordPress: guida passo passo"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=78501"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78501\/revisions"}],"predecessor-version":[{"id":78508,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78501\/revisions\/78508"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78501\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/78502"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=78501"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=78501"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=78501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}