A cosa serve style.css e come installare un tema in WordPress

Rocco Vincy style.css, tema wordpress, wordpress

Come abbiamo detto negli articoli precedenti, il file style.css è obbligatorio in ogni tema WordPress. Infatti, questo file è molto di più di un semplice foglio di stile, in quanto fornisce tutte le informazioni necessarie per installare e far riconoscere il tema a WordPress.

Al suo interno, altre ad essere definito lo stile del sito, sono contenute informazioni riguardanti il tema come nome, autore, descrizione, licenza, e molto altro. Questi dettagli sono inseriti come commento all’inizio di questo file.

In pratica, WordPress per verificare se ci sono nuovi temi da installare, controlla in ogni sottodirectory della cartella “wp-content/themes” se è presente il file style.css. Quindi, ne legge il contenuto e controlla se al suo interno sono presenti i metadati necessari per riconoscere ed installare il tema. Ma, affinché possa essere riconosciuto, il file deve trovarsi nella directory principale del tema e non in una sua sottodirectory.

Se il file non è presente o non contiene i metadati richiesti, WordPress non sarà in grado di riconoscerlo e di conseguenza installarlo.

Vediamo ora quali sono le informazioni che il file style.css deve contenere affinché il tema sia valido e riconosciuto da WordPress.

Se apriamo con un editor di testo il file style.css del tema twenty twenty, possiamo subito notare nella parte iniziale questa sezione di commento:

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.5
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

I metadati di style.css necessari per installare un tema WordPress

Come puoi vedere, la parte iniziale di style.css contiene una serie di metadati con alcuni dettagli sul tema Twenty Twenty. Ovviamente non tutti sono necessari, ci sono alcuni metadati obbligatori, come Theme Name, e altri che sono opzionali.

Ma vediamo quali sono i metadati che WordPress riconosce:

Theme Name (*): Nome del tema.
Theme URI: L’ URL della pagina web dove l’utente può trovare informazioni sul tema.
Author (*): Contiene il nome della persona o dell’organizzazizone che ha sviluppato i tema.
Author URI: L’url dell’autore.
Description (*): Una breve descrizione del tema.
Version (*): Versione del tema scritta nel formato X.X o X.X.X .
Requires at least (*): Qui va indicata la versione più vecchia di WordPress con cui il tema funzionerà. Scritta nel formato X.X.
Tested up to (*): L’ultima versione di WordPress, scritta nel formato X.X, con cui il tema è stato testato correttamente.
Requires PHP (*): La versione minima di PHP richiesta per funzionare correttamente.
License (*): Tipo di licenza con cui è rilasciato il tema.
License URI (*): URL della licenza.
Text Domain (*): Stringa usata per riconoscere la traduzione.
Tags: Paroli o frasi con le quali gli utenti possono cercare il tema nel Repository dei Temi di WordPress.
Domain Path: Utilizzato per consentire a WordPress di trovare le traduzioni quando il tema è disabilitato. Il valore predefinito è /languages.

Le voci con l’asterisco (*) sono obbligatori per i temi condivisi nel Theme Repository. Mentre per il core di Worpress l’unico dato veramente necessario è Theme Name, senza il quale non sarà in grado di riconoscerlo e installarlo.

Un cosa importante alla quale devi stare attento è che il nome che assegnerai al tema dovrà essere unico e non dovranno essere installati altri temi con lo stesso nome, altrimenti si potrebbero creare dei conflitti.

Conclusioni

In conclusione possiamo dire che per poter creare un tema WordPress partendo da zero, la prima cosa che devi fare è creare una cartella e chiamarla con il nome del tema nella directory wp-content/themes. Quindi, dovrai creare al suo interno i due file principali richiesti: index.php e style.css.

Infine dovrai aggiungere nella parte iniziale del file style.css una sezione commentata contenente i metadati necessari per consentire a WordPress di riconoscere e installare il tema.

Nei prossimi articoli vedremo come implementare il file index.php per prelevare il contenuto dal database del tuo sito o del tuo blog e mostrarlo agli utenti.

Nel frattempo, se hai dubbi o per qualsiasi informazione o chiarimento puoi scrivermi attraverso la nostra pagina Facebook di BlogAmico, o contattarmi via email.

Prossimo articolo -> I template tags di WordPress

Struttura e organizzazione dei file in un tema WordPress <- Articolo precedente