WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

Imparare a creare temi WordPress personalizzati apre un mondo completamente nuovo da esplorare. Esso consente di costruire disegni personalizzati per te, i tuoi clienti e anche contribuire di nuovo alla comunità open-source.

In questa guida, ti porteremo da zero ad avere un tema completamente funzionale che può essere presentato al WordPress.org directory tema.

Per seguire avrete bisogno di una conoscenza di base di HTML, CSS, PHP, e come funziona WordPress.

Tutto il codice utilizzato in questa guida sarà disponibile per riferimento in questo repository Github.

Passo # 1: Creazione di file essenziali per il tuo tema personalizzato

Un tema WordPress funzionante può essere costituito da due soli file: stile.css e indice.PHP. Questo è possibile a causa della gerarchia dei modelli di WordPress.

Quando WordPress emette una pagina Web cerca il modello più specifico disponibile, se un modello non esiste, si sposterà verso il basso nella gerarchia finché non ne trova uno che lo fa. Ecco un esempio pratico:

L’utente è su https://example.com/practical-example, che è una pagina. WordPress cercherà di individuare un modello in questo ordine:

1. 1. • pagina-{slug}.php-La pagina slug è / pratico-esempio, WordPress cercherà di utilizzare il tuo-tema / pagina-pratico-esempio.php
      • pagina-{id}.php-L’ID della pagina è 42, WordPress cercherà di utilizzare your-theme / page-42.PHP.
      • pagina.php-WordPress proverà il general-purpose your-tema / pagina.modello php.
      • singolare.php-Il modello singolare può rendere post e pagine, quindi viene provato dopo la pagina più specifica.php
      • indice.php-Infine il tuo-tema / indice.php viene utilizzato se non viene trovato nessun altro modello.

Cominciamo con la costruzione di un tema con solo i file essenziali e poi possiamo strato su più funzioni come esploriamo come funzionano.

In /wp-content/themes/, creare una cartella denominata my-custom-theme e creare questi due seguenti file:

stile.css

Affinché WordPress riconosca il nostro tema e lo emetta correttamente nell’elenco Aspetto → Temi, dobbiamo inserire un codice specifico di WordPress nella parte superiore dello stile.css, sembra che questo:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

Tecnicamente nessuno dei campi è obbligatorio, ma se vuoi che il tuo tema abbia un bell’aspetto in wp-admin, allora sono altamente incoraggiati. Sono anche necessari se stai distribuendo il tuo tema su WordPress.

1. 1. • Nome del tema-Si dovrebbe sempre fornire un nome del tema. Se non lo fai, verrà utilizzato il nome della cartella, my-custom-theme nel nostro esempio.
      • URI tema-Se utilizzato, l’URI tema dovrebbe fornire un link a una pagina in cui i visitatori possono saperne di più sul tema.
      • Autore-Il tuo nome va qui.
      • Autore URI – Un link al tuo sito web personale o aziendale può essere posizionato qui.
      • Descrizione-La descrizione viene visualizzata sul tema modale wp-admin e anche sulla lista tema WordPress.
      • Versione-I numeri di versione aiutano gli sviluppatori a tenere traccia delle modifiche e consentono agli utenti di sapere se stanno utilizzando la versione più recente. Seguiamo il sistema di numerazione SemVer per indicare la gravità delle modifiche in un aggiornamento.
      • Licenza-Il modo in cui concedi la licenza al tuo tema dipende da te, ma se scegli una licenza non compatibile con GPL, non sarai in grado di distribuire il tuo tema su WordPress.
      • URI licenza-Questo è semplicemente un link alla licenza sopra elencata.
      • Dominio di testo-Il dominio di testo viene utilizzato per tradurre il tema in altre lingue. Non preoccuparti, esploreremo questo in profondità più tardi. Per ora, è sufficiente sapere che è una buona pratica per la cartella del tema e il dominio di testo essere il nome del tema separato da trattini invece di spazi.
      • Tag-I tag vengono utilizzati solo se si sta caricando il tema WordPress.org directory tema. Essi sono alla base del meccanismo ‘Feature Filter’.

Copia e incolla quanto sopra in stile.css e avrai qualcosa del genere:

Nota: sembra un po ‘ vuoto al momento, dato che non abbiamo ancora uno screenshot. Lo aggiungeremo più tardi.

indice.php

indice.php è l’unico altro file strettamente richiesto. Il suo compito è quello di rendere tutto l’output front-end per il nostro tema.

Dall’indice.php sta per essere il rendering di tutte le nostre pagine (home, post, categorie, archivi) sta andando a fare un sacco di lavoro. Per iniziare abbiamo bisogno di una sezione head che coprirà le basi HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

Questo è HTML standard con un’eccezione, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head è una funzione di base che consente a WordPress e plug-in di terze parti di inserire codice nell’intestazione senza modificare i file del modello. Questo è chiamato un gancio di azione.

Se hai familiarità con HTML potresti notare che non esiste un tag < title> per emettere il titolo della pagina. Questo perché WordPress può utilizzare il gancio wp_head per inserire dinamicamente il titolo.

Un altro uso di wp_head è quello di accodare gli stili (.css) e script (.js). Ci sono ottime ragioni per farlo invece di codificarle, che vedremo più avanti.

Successivamente, abbiamo il corpo della pagina:

<body <?php body_class(); ?>>

body_class () è una funzione di supporto fornita da WordPress che produrrà un elenco di classi CSS utili che descrivono la pagina visualizzata come:

class="page page-id-2 page-parent page-template-default logged-in"

body_class (); accetta anche un parametro in modo da poter aggiungere le proprie classi, ad esempio:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

Successivamente, abbiamo l’intestazione del modello.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

Qui stiamo usando le funzioni di template integrate di WordPress per produrre il titolo e la descrizione del sito. Abbiamo anche usato una funzione di supporto, home_url (), per collegare il titolo del sito alla home page.

Avanti, il corpo della pagina:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

Questo è dove diventa interessante (e un po ‘ più complesso). Qui stiamo usando la caratteristica più importante di WordPress, il Ciclo. Il ciclo fa il duro lavoro di capire su quale pagina si trova l’utente e cosa dovrebbe essere mostrato. Restituisce quindi un elenco di uno o più “post” che possiamo scorrere e produrre dati utilizzando le funzioni del modello.

Se il Ciclo non restituisce alcun risultato, ad esempio su una pagina 404 o un post cancellato, usiamo un operatore else per mostrare un messaggio predefinito.

Senza il codice circostante, un ciclo semplificato è simile a questo:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Nota: poiché WordPress ha le sue origini nel blogging, molte funzioni utilizzano la terminologia “post”, anche se possono restituire e produrre qualsiasi tipo di contenuto (post, pagine, tipi di post personalizzati).

Infine, abbiamo il piè di pagina, tutto quello che dobbiamo fare qui è chiudere i tag HTML che abbiamo aperto in precedenza. C’è un altro gancio di azione, wp_footer(), che viene utilizzato attivamente da WordPress e plugin per includere script nel piè di pagina necessario per il rendering della pagina.

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

Se hai seguito finora avrai un tema WordPress completamente funzionale che assomiglia a questo:

Il nostro tema non vincerà alcun premio di design (non ha CSS) e manca molte funzionalità che gli utenti considerano essenziali (barre laterali, navigazione, metadati, miniature, impaginazione, ecc.) ma è un ottimo inizio!

Continuiamo e vediamo come possiamo migliorarlo.

Passo #2: Creare funzioni.php

Funzioni.php non è strettamente un file richiesto, ma fornisce così tanti vantaggi che il 99,99% dei temi ce l’ha. Nelle funzioni.php è possibile utilizzare WordPress ‘ funzionalità tema incorporato e anche aggiungere il proprio codice PHP personalizzato.

Crea una funzione.php nella cartella tema ora come ci sarà l’aggiunta di codice ad esso nelle prossime sezioni.

Aggiunta di un menu di navigazione

La maggior parte, se non tutti i siti web utilizzano un menu di navigazione, ma fino ad ora il nostro tema non supporta uno. Per dire WordPress nostro tema dispone di un menu di navigazione, dobbiamo registrarlo in funzioni.php come questo:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Nota: register_nav_menus () accetta un array in modo da poter registrare più di un menu, se necessario.

WordPress ora conosce il nostro menu, ma abbiamo ancora bisogno di produrre nel nostro tema. Lo facciamo aggiungendo il seguente codice sotto la descrizione del sito in index.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

Ora abbiamo un menu di navigazione (non stilizzato) :

Aggiunta di una barra laterale

Il nostro tema non ha una barra laterale (area widget), risolviamo ora.

In primo luogo, abbiamo bisogno di registrare la barra laterale in funzioni.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Ora creare barra laterale.php nella cartella del tema e aggiungere il seguente codice:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

Qui stiamo usando un’istruzione if per verificare se la barra laterale è “attiva” prima di emettere il codice. Una barra laterale attiva è quella a cui l’utente ha aggiunto almeno un widget.

L’ultimo passaggio consiste nell’includere la barra laterale nell’indice.php, sopra wp_footer () aggiungere una chiamata get_sidebar ().

Aggiunta di immagini in primo piano

Come barre laterali e menu di navigazione, non possiamo semplicemente produrre immagini in primo piano nel nostro tema e aspettarci che funzionino, dobbiamo dire a WordPress che supportiamo prima quella funzione. Nelle funzioni.php aggiungere:

add_theme_support( 'post-thumbnails' );

Ora possiamo aggiungere the_post_thumbnail(); all’interno del nostro ciclo e le miniature funzioneranno. L’unico problema è che emetteranno la dimensione massima di WordPress di 1920px x 2560px, che è troppo grande per la maggior parte degli usi. Fortunatamente WordPress ha un’altra funzione di supporto: add_image_size();

Quando un utente carica un’immagine e se la dimensione dell’immagine è definita, WordPress genererà una versione dell’immagine caricata a quella dimensione (mantenendo l’originale). Se l’immagine dell’utente è più piccola delle dimensioni impostate, WordPress non farà nulla in quanto non può rendere un’immagine più grande dell’originale.

Per utilizzare un’immagine caratteristica ottimizzata piuttosto che l’originale, inserire il seguente codice in funzioni.php:

add_image_size( 'my-custom-image-size', 640, 999 );

Il primo parametro è la maniglia, il secondo è la larghezza dell’immagine e il terzo è l’altezza. Sia l’altezza che la larghezza sono opzionali nel caso in cui si desideri limitare solo una dimensione.

Nell’indice.php:

the_post_thumbnail( 'my-custom-image-size' );

Accodare stili e script

In precedenza abbiamo affermato che è meglio accodare stili e script piuttosto che codificarli direttamente nei file del modello. Questo perché l’accodamento consente molta più flessibilità.

Se fatto correttamente, enqueuing dice anche a WordPress quali risorse vengono caricate. Quando WordPress sa quali risorse sono necessarie, può assicurarsi che la stessa risorsa non venga caricata più di una volta. Questo è particolarmente importante quando si dispone di una libreria estremamente popolare come jQuery o FontAwesome che più temi e plugin saranno utilizzando.

Un altro vantaggio di accodamento è che una risorsa che è accodata può essere dequeued da un plugin, evitando la necessità di modificare i file di modello.

Anche se il nostro tema ha uno stile.file css non lo sta ancora usando, accodiamolo ora:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() è una funzione di supporto che recupera l’URI del foglio di stile del tema corrente. Se stessimo accodando qualsiasi altro file avremmo bisogno di farlo invece:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Il nostro tema non ha script, se lo facesse li accoderemmo in questo modo:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

Un’eccezione a quanto sopra sono gli script che sono stati pre-registrati da WordPress, in questi casi è sufficiente fornire il primo parametro (handle handle):

wp_enqueue_script( 'jquery' );

Aggiunta di stile con CSS

Il nostro tema ha solide basi ma manca di qualsiasi design, aggiungendo alcuni CSS di base allo stile.css farà una grande differenza. Abbiamo aggiunto circa ~100 righe di CSS al nostro tema di esempio come dimostrazione e il risultato è simile a questo:

Title Tag

Tutti i temi dovrebbero utilizzare la funzionalità integrata di WordPress per generare il title tag, che è abilitato aggiungendo questo codice alle tue funzioni.file php: add_theme_support( 'title-tag' ); Questo è tutto ciò che c’è da fare, WordPress gestirà l’output della pagina<titolo > e, se necessario, i plugin possono modificare l’output utilizzando i filtri. I plugin SEO spesso lo fanno nel tentativo di ottimizzare ulteriormente i titoli.

Passo # 3: Aggiungi parti modello

In questo momento l ‘ 80% del nostro codice modello è nell’indice.PHP.

Mentre questo funziona si tradurrà in un sacco di ripetizione del codice quando abbiamo altri file modello come singular.php, cerca.php e archivio.PHP. Le parti del modello semplificano lo sviluppo del tema permettendoci di riutilizzare il codice tra i modelli. Poiché la nostra intestazione e piè di pagina saranno uguali in ogni pagina, sono un candidato perfetto per l’utilizzo di parti del modello. Innanzitutto, crea intestazione.php e spostare il seguente codice dall’indice.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

Nell’indice.php sostituire il codice di cui sopra con:

<?php get_template_part( 'header' ); ?>

Nota: Quando si ottiene una parte del modello, è necessario omettere il .php dall’handle della parte del modello.

Quindi, creare una parte del modello piè di pagina spostando questo codice a piè di pagina.php e ripetendo il processo di cui sopra:

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

Infine, sposteremo anche il codice “no-results” in una parte del modello, poiché è probabile che venga utilizzato in più modelli. Creare contenuti-nessuno.php e spostare questo codice nel nuovo file.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

Il tuo indice dovrebbe ora assomigliare a questo:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

Mentre quanto sopra funzionerà perfettamente, c’è un leggero miglioramento che possiamo fare. WordPress ha funzioni di supporto per includere le parti del modello di intestazione, piè di pagina e barra laterale. Poiché è una buona pratica utilizzare le funzionalità di base dove possibile, dovremmo invece usarle.

Sostituisci get_template_part( 'header' ); con get_header(); e get_template_part( 'footer' ); con get_footer();

Passo #4: Aggiungi singolare.php, archivio.php, cerca.php, e 404.php

Le basi che abbiamo completato con le parti del modello pagheranno dividendi mentre aggiungiamo nuovi file di modello al nostro tema. Di seguito abbiamo elencato i più comuni. Per evitare di travolgerti con esempi di codice, abbiamo invece collegato al codice sorgente su Github.

singolare.php

I post e le pagine, quando vengono visualizzati sui propri URL, sono considerati “Singolari” poiché la maggior parte delle volte il layout sarà lo stesso per entrambi questi tipi di pagina. Ma nel caso in cui non lo sia puoi usare la pagina più specifica.php e singolo.php (post) invece.

Codice di esempio – singolare.php

archivio.php

I modelli di archivio di solito differiscono dai modelli singolari in due modi: mostrano estratti piuttosto che il contenuto completo e presentano un’intestazione di archivio che spiega il contenuto.

Fai riferimento alla gerarchia del modello e vedrai che il modello di archivio copre tutti i tipi di archivi (autore, categoria, tag, tassonomia, data) se questo non funziona per il tuo caso d’uso puoi comunque utilizzare i modelli più specifici:

1. 1. • autore.php
      • categoria.php
      • etichetta.php
      • tassonomia.php
      • data.php

Esempio di codice-archivio.php

ricerca.php

siti web WordPress possono essere ricercati utilizzando il ?s = Parametro URL, ad esempio, yourwebsite.com?s=test. Ricerca.modello php emette i risultati di tali ricerche.

Codice di esempio-ricerca.php

404.php

L’istruzione else che abbiamo aggiunto in index.php rileva gli errori” pagina non trovata”, ma potresti voler disaccoppiare quella funzionalità nel proprio file modello per avere un maggiore controllo sull’output. Questo è il caso d’uso del 404.file modello php.

Codice di esempio – 404.php

Passo #5: File ausiliari

Se stai distribuendo il tuo tema al pubblico, i seguenti file sono imperativi. Senza questi, il tuo tema verrà rifiutato dai repository e dai marketplace dei temi.

schermata.png

Lo screenshot viene visualizzato nell’elenco dei temi wp-admin quando l’utente seleziona un nuovo tema. Ecco alcune best practice che dovresti seguire:

1. 1. • Gli screenshot dovrebbero essere 1200px x 900px
      • Gli screenshot dovrebbero essere in .png o .formato jpg
      • Gli screenshot dovrebbero essere una rappresentazione accurata del tema
      • Gli screenshot dovrebbero essere ottimizzati (usa tinypng.com o simili)

leggimi.txt

WordPress non utilizza alcuna informazione da readme.txt, tira tutto ciò di cui ha bisogno dallo stile.CSS. D’altra parte, la directory del tema WordPress estrae informazioni importanti dal file readme e lo considera un file richiesto.

La maggior parte degli sviluppatori utilizza readme.txt come la posizione centrale per memorizzare tutte le informazioni sul loro tema. Un semplice readme.txt assomiglia a questo:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • Richiede almeno – Questa è la versione minima di WordPress che il tema è compatibile con.
      • Testato fino a – Questo campo indica la versione più recente di WordPress il tema è stato testato con.
      • Richiede PHP – Questo campo indica la versione minima di PHP il vostro tema funzionerà su.
      • Descrizione-Questo campo descrizione non è attualmente visualizzato da nessuna parte.
      • Changelog – Il changelog non viene utilizzato da nessuna parte, ma gli sviluppatori e alcuni utenti faranno riferimento a questo file per vedere quali modifiche sono state apportate.
      • Risorse-La maggior parte delle risorse di terze parti richiede l’attribuzione di qualche tipo. La sezione risorse è un luogo ampiamente accettato per mettere quelli. Anche per le risorse che non richiedono esplicitamente l’attribuzione, è comunque una buona pratica elencarle qui in modo che gli utenti siano consapevoli delle licenze delle risorse che stanno utilizzando.

Passo # 6: Crea modelli di pagina

I modelli di pagina consentono agli sviluppatori di creare modelli personalizzati che possono essere utilizzati per singoli post e pagine. Ad esempio, la maggior parte dei temi ha un layout a due colonne (content-sidebar) ma in alcune pagine, l’utente potrebbe voler concentrarsi solo sul contenuto e non mostrare una barra laterale. Ecco dove un modello di pagina può aiutare.

Come vengono creati i” Modelli di pagina”?

Nella nostra cartella tema, creare una nuova cartella denominata ‘page-templates’ e all’interno di tale cartella creare un file chiamato singola colonna.PHP. Per accelerare le cose copiare tutto il codice dal singolare.php a modelli di pagina / singola colonna.php e rimuovere la chiamata a get_sidebar () in quanto questo modello non ne avrà bisogno.

Ora dobbiamo aggiungere un’intestazione speciale che dice a WordPress che questo è un modello di pagina, assomiglia a questo:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

Il codice è auto-esplicativo, stiamo semplicemente dicendo a WordPress il nome del modello e con quali tipi di post può essere utilizzato.

Questo è tutto ciò che c’è da fare, il nostro nuovo modello di pagina è ora disponibile nell’editor sotto ‘Attributi pagina’.

Passo #7: rendi il tuo tema compatibile con RTL.css

Non tutte le lingue leggono da sinistra a destra. L’arabo e l’ebraico, ad esempio, vengono letti da destra a sinistra (RTL). C’è un modo semplice per rendere il tema compatibile con le lingue RTL.

Crea un nuovo file nella cartella del tema chiamata rtl.css, quindi copiare e incollare il seguente codice:

body {direction: rtl;unicode-bidi: embed;}

Se una lingua RTL è la lingua attiva su un sito web WordPress, WordPress sa di caricare automaticamente questo file CSS.

Questa è un’implementazione di base della funzionalità RTL per iniziare. Se siete interessati a saperne di più qui ci sono due risorse fantastiche:

Documentazione di supporto per la lingua da destra a sinistra

Twenty Twenty RTL code

Passo #8: Segui sempre le best practice

Le best practice si sono evolute nel tempo per semplificare la creazione e la manutenzione dei temi WordPress. Non solo seguire questi principi ti aiuterà, ma renderà anche più facile per gli altri sviluppatori quando hanno bisogno di lavorare con il tuo codice.

1) Utilizzare Starter Temi

Starter temi forniscono una solida base per voi per costruire il vostro tema su. In genere sono leggeri, contengono poco o nessun stile e nessuna opzione di configurazione. Nel corso del tempo si potrebbe costruire il tuo starter tema che è possibile basare tutti i vostri progetti, ma per ora qui ci sono alcune opzioni popolari:

1. 1. • Sottolinea
      • Impalcatura
      • HTML5 Vuoto

2) Conoscere WordPress Standard di Codifica

standard di Codifica sono un modo di formattare il codice in modo coerente su tutta la codebase. WordPress ha standard di codifica per HTML, CSS, Javascript e PHP. Mentre l’utilizzo di uno standard di codifica non ha alcun effetto sull’esperienza dell’utente finale, rende il codice molto più leggibile. Anche se non usi gli standard di codifica di WordPress, ti consigliamo sempre di utilizzare uno standard.

1. 1. • WordPress.org Standard di Codifica
      • WPCS
      • PHP Standard di Codifica

3) Utilizzare la Localizzazione

Grazie al duro lavoro dei volontari, WordPress è disponibile in centinaia di lingue. Se il tema sta per essere rilasciato pubblicamente ha bisogno di essere costruito in un modo che permette di essere tradotto troppo.

Non ti preoccupare, è super facile da fare. Tutto quello che dobbiamo fare è assicurarsi che tutte le stringhe siano passate attraverso una “funzione di localizzazione” piuttosto che essere emesse direttamente.

Invece di questo:

<?php echo 'Previous Post'; ?>

Facciamo questo invece:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() è una funzione di localizzazione che accetta una stringa e un dominio di testo. La funzione restituisce una traduzione della stringa fornita, o la stringa originale se una traduzione non è disponibile.

4) Evitare Funzionalità plugin

Quando un utente cambia il tema, solo il livello di presentazione dovrebbe cambiare. Il contenuto e la funzionalità dovrebbero rimanere per lo più gli stessi. Ciò significa che qualsiasi funzione che influenza il modo in cui i ruoli di WordPress dovrebbero essere contenuti in un plugin, non il tuo tema. Alcuni esempi di funzionalità del plugin includono:

1. 1. • i Tipi di messaggi Personalizzati
      • Pagina Costruttori
      • Condivisione sui Social Media
      • Ottimizzazione dei Motori di Ricerca (SEO)

Mentre può sembrare conveniente (e, possibilmente, di un punto di vendita) per includere SEO controlli in tema, si fa male in realtà l’utente, a lungo termine. In futuro, dovranno cambiare il loro tema ma non possono perché tutte le loro configurazioni SEO sono strettamente accoppiate al tema corrente. Al contrario, se le configurazioni sono state memorizzate in un plugin potrebbero cambiare tema senza preoccuparsi.

5) Prefisso (prevenire i conflitti)

Per prevenire i conflitti, tutte le funzioni, le classi e le variabili globali create dal tema devono essere preceduti. Questo è importante perché è impossibile sapere quale altro codice è in esecuzione sul sito Web dell’utente. Il prefisso impedisce scontri nome ed errori fatali.

Il nome del tema separato da trattini o sottolineature funzionerà come prefisso la maggior parte del tempo. Se il nome del tema è molto lungo, le iniziali possono funzionare.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Usa la funzionalità di base

Dove esiste, dovresti sempre usare la funzionalità di base invece di reinventare la ruota. Questo include, ma non è limitato a barre laterali, Menu di navigazione, Post miniature, intestazioni personalizzate, e sfondi personalizzati. Queste funzionalità sono state testate da milioni di utenti e sono attivamente mantenute e migliorate.

Se è necessario modificare la funzionalità o l’output di una funzione principale, è possibile utilizzare uno dei tanti ganci e filtri offerti da WordPress. Ad esempio wp_nav_menu() ha un parametro ‘walker’ in modo da poter avere il controllo completo dell’output.

7) Evasione e sanificazione dei dati

Come sviluppatore di temi, è necessario avere familiarità con l’evasione e la sanificazione dei dati per proteggere gli utenti da potenziali exploit.

Escape

Escape è il processo di controllo dei dati è sicuro prima che sia in uscita e sanitization sta controllando i dati prima che vengano salvati nel database.

WordPress ha funzioni di supporto che è possibile utilizzare per sfuggire ai dati in modo da non aver bisogno di costruirli da soli. esc_html è un esempio di una funzione di escape. Questo è l’aspetto di un output non escape:

echo get_theme_mod( 'error_page_title' );

Per sfuggire all’output lo facciamo:

echo esc_html( get_theme_mod( 'error_page_title' ) );

Alcune altre funzioni di escape di cui dovresti essere a conoscenza sono esc_attr(), absint (), esc_url ().

È anche possibile tradurre e sfuggire a una stringa utilizzando una singola funzione:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Diventa:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Suggerimento: ovunque nel tuo tema in cui hai echo $ dovresti controllare se deve essere sfuggito, di solito lo fa.

Sanificazione

Se si aggiungono impostazioni al tema, è necessario assicurarsi che i dati immessi dagli utenti a tali impostazioni siano sicuri prima che entrino nel database. WordPress ha una serie di funzioni per aiutare con l’input di sanificazione.

Quando si aggiunge un’impostazione al tema utilizzando l’API Customizer, ha un parametro chiamato ‘sanitize_callback’ che accetta il nome di una funzione di sanificazione. Qualsiasi input che l’impostazione richiede viene controllato dalla funzione fornita a ‘sanitize_callback’ prima che entri nel database.

Evidenzia l’importanza della sanificazione che se anche una delle tue impostazioni manca sanitize_callback non verrà accettata nella directory dei temi di WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

Un elenco ufficiale delle funzioni di sanificazione ed escape può essere visto qui: Data Sanitization/Escape

Passo #9: Distribuisci il tuo tema WordPress

I temi possono essere distribuiti tramite canali diversi a seconda del risultato che si desidera ottenere. Se il tuo risultato è semplicemente contribuire alla comunità open-source, non c’è modo migliore per farlo che caricare il tuo tema nella directory di WordPress. Se invece, stai cercando di vendere il tuo tema e fare soldi direttamente, ci sono modi per farlo anche.

Ecco i principali siti web per la distribuzione di temi:

1) WordPress.org (Posto migliore per ottenere download e utenti)

Il vantaggio principale di ospitare il tema su WordPress è che si ottiene una spinta di visibilità dal vostro tema di essere visto non solo su wordpress.sito web org ma anche nel cruscotto wp-admin.

Un altro vantaggio di ospitare il tema con WordPress è il sistema di aggiornamento integrato. Se aggiorni il tuo tema, tutti gli utenti riceveranno una notifica all’interno dei loro dashboard wp-admin e avranno un percorso semplice per l’aggiornamento alla versione più recente.

WordPress.org accetta solo temi gratuiti, ma questo non significa che non puoi fare soldi. Un tema gratuito può essere un ottimo canale per promuovere il tuo tema, plugin o servizio premium.

2) WordPress.com

WordPress.com ospita sia temi gratuiti che premium. Tuttavia, non sono stati aperti a nuovi autori per alcuni anni.

3) ThemeForest

ThemeForest è il mercato leader per i temi premium. Il tema più venduto (Avada) ha vendite superiori a $5.000.000.

In generale gli acquirenti sulla foresta tema si aspettano full-optional “multi-purpose” temi. Tutti i temi principali hanno funzionalità di page builder e sono supportati da team di sviluppatori. È un mercato molto difficile da penetrare per nuovi autori.

4) Mercato creativo e Mojo Marketplace

Mercato creativo e Mojo Marketplace sono piccoli attori nel mercato dei temi premium, motivo per cui li abbiamo raggruppati insieme. Entrambi offrono effettivamente lo stesso servizio di ThemeForest ma su scala più piccola.

5) Github

Github è il modo più semplice per rendere pubblico il tuo tema gratuito. Non c’è nessun processo di revisione e nessuna linea guida da seguire. Tuttavia, non beneficerai della visibilità di wordpress.org e sarà necessario costruire il proprio meccanismo di aggiornamento per gli utenti di ottenere le versioni più recenti.

Passo #10: Test e migliorare il codice

1) Testare il tema

Tema Unit Test

Il Tema Unit Test è un file di importazione di contenuti WordPress standard che contiene una vasta gamma di tipi di contenuti e casi limite. È facile da caricare nel tuo ambiente di sviluppo e evidenzierà molti scenari che potresti aver trascurato.

WP_DEBUG

Come sviluppatore di temi, testare il tema con WP_DEBUG abilitato è il minimo indispensabile che dovresti fare. Il tuo tema non dovrebbe restituire errori o avvisi quando WP_DEBUG è impostato su true.

È anche importante ripetere il test con le diverse versioni di PHP supportate dal tema. Con ogni versione principale di PHP, ci sono nuove modifiche, avvisi e ammortamenti. Non è raro che un tema sia privo di errori su PHP5.6 ma mostri errori su PHP7.

Per abilitare WP_DEBUG, aggiungi il seguente codice a wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget è un plugin utile che consente di aggiungere 13 widget di base per la barra laterale in una sola volta. I widget di base utilizzano una varietà di elementi HTML che li rende perfetti per testare il tema.

Theme Sniffer

Il Theme Sniffer è un plugin creato dal Theme Review Team (TRT). Cattura molti (ma non tutti) errori di fuga e localizzazione. Controlla anche il tuo tema rispetto agli standard di codifica di WordPress.

2) Invio del tema a WordPress.org

All’inizio di questa guida, abbiamo detto che quando hai raggiunto la fine avresti avuto un tema a cui potevi presentare wordpress.org.Diamo un’occhiata a quel processo.

Processo di upload

Il processo di upload è semplice. Crea o accedi al tuo account WordPress e poi vai a questa pagina– https://wordpress.org/themes/upload/

Si potrebbe comprimere il tema e caricarlo in questo momento, ma qui ci sono alcune cose che si potrebbe desiderare di sapere prima.

Requisiti

Il Theme Review Team (TRT) ha una serie rigorosa di requisiti. Il tema non sarà accettato nella directory fino a quando non soddisfa tutti i requisiti.

Processo di revisione

Quando carichi un tema, c’è un processo di revisione in due fasi che deve passare prima che possa essere accettato nella directory.

Innanzitutto, viene eseguito un controllo automatico non appena si preme Upload. Dietro le quinte, il correttore automatico funziona in modo molto simile al plugin Theme Sniffer. Se trova errori, rifiuterà il tema e il processo di caricamento termina qui.

Se il tema passa il controllo automatico, si unisce a una coda di temi in attesa di una revisione umana. La revisione umana è completata da volontari del TRT. Il numero di temi nella coda supera di gran lunga il numero di revisori, il che significa che spesso possono essere necessari 2-3 mesi prima che il tema raggiunga la parte anteriore della coda.

E ‘ imperativo che il tema è privo di errori e conforme a tutti i requisiti per il momento raggiunge la fase di revisione umana come se avesse più di 3 errori significativi può essere rifiutato. Se un tema viene rifiutato nella fase di revisione umana, deve ricongiungersi alla coda sul retro, il che significa attendere 2-3 mesi per un’altra revisione umana.

Risorsa utile: Gli errori di sviluppo del tema WordPress più comuni (e come risolverli)

Vale la pena notare che il TRT è sempre alla ricerca di nuovi revisori, il volontariato può essere una grande esperienza di apprendimento e un modo per contribuire alla comunità open-source.

3) Il tuo tema Listing

Congratulazioni, il tema è stato approvato! Ora avete il vostro proprio elenco che assomiglia a questo.

Ecco una panoramica di ciò che puoi aspettarti di vedere in questa pagina:

1. 1. • Screenshot-Lo screenshot è la prima cosa che i potenziali utenti vedono in modo da renderlo il più attraente possibile. Ma ricordate che deve essere ancora una rappresentazione accurata del tema e non un rendering di Photoshop. Prendere ispirazione dai temi più popolari.
      • Descrizione-La descrizione che viene estratta dallo stile.css è un luogo ideale per descrivere il tema ed è caratteristiche chiave. Aiuta anche a elencare i plugin consigliati o richiesti qui. La descrizione non supporta alcuna formattazione (grassetto, corsivo, collegamenti ipertestuali) o anche interruzioni di riga.
      • Tags-Questa è una rappresentazione dei tag che hai elencato in stile.CSS. Solo questi tag qui sono accettati.
      • Pulsante Anteprima-L’anteprima viene generata da wordpress.org e come sviluppatori di temi, non abbiamo alcun controllo sull’output. Sfortunatamente, poiché l’anteprima utilizza contenuti di base e nessuna configurazione, spesso si traduce in un’anteprima non perfetta.
      • Tema Homepage Link-L’URL per il pulsante di anteprima viene tirato dal campo ‘Tema URI’ nel tuo stile.CSS. Ci sono requisiti rigorosi che questo URL deve essere utilizzato solo per visualizzare una pagina che visualizza informazioni sul tema.
      • Installazioni attive-Questo è il numero di siti web che utilizzano attivamente il tema. Il numero è arrotondato al più vicino dieci, cento o mille. Non è possibile recuperare un numero esatto.
      • Download al giorno-Questo è il numero di volte che il tema è stato scaricato. Un ‘Download’ può essere un nuovo download o un aggiornamento a tema.
      • Recensioni-Per un utente di lasciare una recensione devono essere loggati a un wordpress.org conto. In generale, le recensioni sono difficili da ottenere a meno che tu non chieda esplicitamente ai tuoi utenti di inviarle.
      • Supporto-La piattaforma di supporto integrata è ideale per la gestione e la risoluzione dei problemi con il tema. L’utente deve essere connesso per creare un thread di supporto.
      • Traduzioni-La piattaforma di traduzione è una risorsa fantastica. Se hai seguito i consigli in questa guida per localizzare il tuo tema, i tuoi utenti saranno in grado di tradurlo in altre lingue ed espandere la tua potenziale base di utenti oltre solo gli utenti di lingua inglese.

4) Aggiornamento del tema

Quando si apportano modifiche al tema in futuro e la necessità di aggiornare la versione ospitata su WordPress il processo è semplice.

Prima aggiorna il campo’ Versione: ‘e changelog in readme.txt. Quindi comprimere il file e caricarlo nuovamente utilizzando la stessa pagina di caricamento di prima.

Il sistema lo riconoscerà come aggiornamento e lo approverà automaticamente in modo che non richieda un’altra revisione umana.