Come creare un tema personalizzato WordPress

Pubblicato: 2021-08-06

WordPress occupa un'enorme percentuale dei siti Web mondiali, costituendo il 37% di tutti i siti attualmente online. Sebbene ci siano molte ragioni e fattori per questo successo, uno dei motivi principali è la popolarità delle funzionalità disponibili per tutti gli utenti. Plugin, temi, post, pagine, categorie, tassonomie, ruoli utente e gestione dei media solo per citarne alcuni. Per ottenere il massimo da WordPress, si consiglia agli utenti di studiare e imparare a utilizzare tutte queste funzionalità. In questo blog, ci concentreremo e discuteremo sui temi di WordPress e ti guideremo attraverso le nozioni di base necessarie su come creare un tema personalizzato di WordPress.

Che cos'è un tema personalizzato?

Tutto sul frontend del tuo sito viene eseguito e controllato utilizzando qualcosa chiamato "tema". Il tema di un sito Web è responsabile del design e della funzionalità specifici del sito Web. Puoi controllare il repository di temi di WordPress o Themeforest per esempi di temi; qui troverai migliaia di temi elencati da esplorare e scaricare.

Sebbene i temi WordPress consolidati siano fantastici, se ne hai la capacità e la necessità, potresti anche voler creare il tuo tema personalizzato per un cliente, per te stesso o inviarlo ai mercati con l'intenzione di venderlo. Quando crei un tema commerciale, dovrai seguire le linee guida dei mercati per gli standard di codifica, la struttura di file e cartelle, ecc. Puoi trovare maggiori dettagli su queste linee guida sui siti Web dei mercati .

In questo blog, eseguiremo un tutorial per mostrarti una panoramica di base su come creare il tuo tema WordPress personale coprendo tutte le basi e i passaggi associati al processo.

Crea un tema personalizzato per WordPress

I temi di WordPress sono creati con file modello, script, stili, immagini, ecc. Per procedere, dovresti avere una conoscenza pratica di PHP, HTML e CSS, necessari per creare un tema personalizzato. Comprendere JavaScript può anche essere un ulteriore vantaggio.

Per iniziare, chiameremo prima il tema "Updraft". Crea una cartella chiamata "Updraft" all'interno di wp-content/themes . All'interno di questa cartella "Updraft", scriverai il codice relativo al tema, archivierai file, immagini, caratteri, ecc.

I file principali del tema WordPress personalizzato sono:

  • style.css
  • index.php
  • funzioni.php

style.css sarà il file del foglio di stile principale e puoi aggiungere tutti i tuoi CSS in questo file. Ricorda che devi includere un'intestazione informativa sul tema. L'intestazione dovrebbe essere simile al formato seguente e trovarsi in cima a style.css .

 [codice]
/*
Nome del tema: Corrente ascensionale
URI del tema: https://updraftplus.com
Autore: Updraft Plus
URI dell'autore: https://updraftplus.com
Descrizione: il tema personalizzato creato per il sito web.
Versione: 1.0
Licenza: GNU General Public License v2 o successiva
URI della licenza: http://www.gnu.org/licenses/gpl-2.0.html
Dominio di testo: corrente ascensionale
*/
[/codice]

Quindi, vai su Aspetto >>Temi, dove vedrai elencato il tuo tema. Attivalo. Quando controlli il frontend del tuo sito, verrà visualizzata una schermata vuota, poiché non abbiamo ancora aggiunto nulla al tema..

Ricordati di memorizzare le tue immagini, script e stili nella directory del tuo tema. La directory del tema si riferisce alla cartella 'wp-content/themes/Updraft'. Assicurati di mantenerli organizzati utilizzando una buona struttura di cartelle, creando cartelle specifiche per immagini, script e stili; Copia i file nella rispettiva directory.

File di funzioni

functions.php è il file in cui puoi aggiungere codice per scopi diversi. Questo file viene caricato automaticamente durante l'inizializzazione di WordPress, con il codice scritto in esso eseguito automaticamente.

Le seguenti operazioni nel file functions.php vengono generalmente eseguite in questo ordine:

  • Accoda i fogli di stile e gli script del tema (aggiungi i file JS e CSS al sito Web).
  • Abilita barre laterali, menu di navigazione, miniature dei post, ecc.
  • Definire le funzioni utilizzate nell'applicazione.
  • Eccetera.

L'utente può aggiungere i propri stili e script dal file functions.php come segue. Si prega di consultare il seguente collegamento per ulteriore documentazione .

 [codice]
funzione include_js_css() {
wp_register_style("bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style("bootstrap");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/codice]

La funzione get_stylesheet_directory_uri() fornisce un percorso relativo della directory del tema attiva. Il resto del codice può essere visto come il percorso delle risorse.

Allo stesso modo, per aggiungere menu di navigazione, anteprime post:

 [codice]
funzione updraft_theme_setup() {
add_theme_support('post-miniature');
register_nav_menus(
Vettore(
'primario' => __( 'Menu principale' ),
'footer1=' => __( 'Menu a piè di pagina' ),
'negozio' => __( 'Menu pagina negozio' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/codice]

Quindi, vai alla dashboard di WordPress e aggiungi un post o una pagina. Dovresti vedere la sezione "Immagine in primo piano". Inoltre, sotto Aspetto >> Menu, troverai il menu principale e il menu a piè di pagina in Gestisci posizioni .

Queste sono solo alcune delle funzionalità di base che puoi coprire durante l'utilizzo del file "Funzione". Ci sono molte altre cose che puoi aggiungere in questo file, se lo desideri.

File modello

Quando crei il tuo tema, i file modello possono essere utilizzati per influenzare il layout e il design di diverse parti del tuo sito web. Ad esempio, utilizzeresti il ​​modello header.php per creare un'intestazione o il modello comments.php per includere commenti sul tuo sito. I file modello hanno un'estensione .php . Poiché sono file PHP, tutte le pagine escono come HTML.

Utilizzando i modelli, gli sviluppatori possono distribuire il codice tra più file. Di seguito sono elencati alcuni dei file in questione.

  • index.php : il modello principale. Questo file dovrebbe essere responsabile dell'elenco dei post. Quando imposti la pagina Post da Impostazioni >> Letture , questo modello viene eseguito.
  • page.php : questo modello è responsabile del rendering delle tue pagine. Questa impostazione può essere ignorata assegnando un modello di pagina personalizzato alle singole pagine.
  • single.php : utilizzato quando viene interrogato un singolo post.
  • header.php : aggiungi la tua parte di intestazione in questo modello.
  • footer.php : aggiungi la tua parte del piè di pagina in questo modello.
  • sidebar.php : Aggiungi widget in questo modello.

Ottieni un elenco di tutti i file modello disponibili qui .

Modelli di pagina personalizzati

Per impostazione predefinita, tutte le tue pagine vengono visualizzate tramite il modello page.php . Ma in pratica, a volte devi visualizzare flussi separati su pagine diverse. In questo scenario, è consigliabile utilizzare la potenza dei modelli di pagina personalizzati.

Ad esempio, se hai una pagina 'La carriera' e vuoi aggiungere il tuo codice a questa pagina; per raggiungere questo obiettivo è necessario creare un file career.php nella directory del tema e inserire il commento qui sotto nella parte superiore del file.

 [codice]
<?php
/*
Nome modello: carriera
*/
[/codice]

Quindi, vai alla sezione di modifica della pagina e assegna questo modello di "carriera" da sotto la casella Attributi della pagina .

Ora, quando visiti la pagina Carriera, il codice da career.php verrà eseguito.

File di intestazione

Il tuo sito web avrà un'intestazione comune su tutte le pagine. Puoi inserire questa intestazione comune in header.php . Il codice dell'intestazione sarà qualcosa del genere:

 [codice]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<testa>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</testa>
<corpo <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- il tuo menu -->
[/codice]

Nel codice sopra, noterai che abbiamo utilizzato alcune funzioni disponibili in WordPress.

  • wp_head() : questo metodo inserisce elementi cruciali nel documento, ad esempio script, stili e meta tag.
  • body_class() : questo aggiungerà classi diverse all'elemento body.
  • wp_body_open() : utilizzato per inserire il codice subito dopo l'apertura del tag body. Un esempio di questo potrebbe essere lo script di Google Analytics.

I menu possono essere aggiunti dinamicamente tramite la funzione wp_nav_menu() . Supponendo che tu abbia già creato un menu in Aspetto >> Menu e gli sia stata assegnata la posizione "primaria". Il codice seguente genera gli elementi del menu in modo dinamico.

 [codice]
<?php
wp_nav_menu(
Vettore(
'posizione_tema' => 'primario',
'classe_container' => 'menu',
)
);
?>
[/codice]

Una volta impostato il file di intestazione, utilizzare la funzione get_header() per includere questo file negli altri modelli.

File a piè di pagina

Simile al file di intestazione, il codice comune per il footer andrà all'interno del modello footer.php .

 [codice]
<!-- elementi del piè di pagina -->
<?php wp_footer(); ?>
</corpo>
</html>
[/codice]

Qui, usa il wp_footer() che inserisce elementi, in particolare script, in questa posizione. L'uso di get_footer() includerà il contenuto di questo file in altre posizioni.

File della barra laterale

La barra laterale è una colonna verticale utilizzata per visualizzare informazioni sul tuo sito che non sono mostrate all'interno del contenuto principale. Può includere articoli popolari, banner pubblicitari, un modulo per l'invio di newsletter, ecc. Le barre laterali contengono widget che un amministratore può personalizzare. Il modello sidebar.php includerà i widget del tuo sito.

In questo esempio, creeremo una barra laterale di base aggiungendo il codice seguente al file functions.php .

 [codice]
funzione updraft_widgets_init() {
register_sidebar(
Vettore(
'nome' => esc_html__(barra laterale iniziale'),
'id' => 'barra laterale-1',
'description' => esc_html__( 'Aggiungi widget qui per apparire nella barra laterale.'),
'before_widget' => '<section class="widget">',
'after_widget' => '</sezione>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/codice]

Quindi, vai su Aspetto >> Widget . Qui troverai la barra laterale sopra. In questo esempio, aggiungeremo alcuni widget a questa barra laterale. Per aggiungere questa barra laterale al frontend, aggiungi il seguente codice in sidebar.php.

 [codice]
<div class="barra laterale">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar('sidebar-1');
}
?>
</div>
[/codice]

Infine, ricorda di nominare il metodo ' get_sidebar()' in modo da poter facilmente includere la barra laterale ovunque su qualsiasi altra pagina come e quando necessario.

Rendering di pagine e post

Come già accennato, tutte le pagine di WordPress vengono renderizzate ed eseguite utilizzando il codice che hai scritto nel file page.php , ad eccezione delle pagine con template di pagina personalizzato. Il codice seguente è un esempio che mostrerà una pagina con il titolo della pagina, la descrizione e l'immagine in primo piano.

 [codice]
<?php
get_header();
?>
<div class="area-contenuti">
<classe principale="sito-principale">
<?php
mentre ( have_posts() ) :
il_post();
?>
<?php
se ( has_post_thumbnail() ):
the_post_thumbnail();
finisci se;
?>
<header class="entry-header">
<?php the_title(); ?>
</intestazione>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
nel frattempo;
?>
</principale>
</div>
<?php
get_footer();
[/codice]

Un codice simile andrà all'interno del file single.php per visualizzare le informazioni sul post. Per visualizzare correttamente l'elenco dei post (il tuo index.php ), oltre ai metodi precedenti, potresti anche voler utilizzare quanto segue:

  • the_catgeory() : Visualizza l'elenco delle categorie per un post.
  • the_permalink() : Visualizza il permalink per il post corrente.
  • the_excerpt() : Visualizza l'estratto del post.

I18n per temi personalizzati WordPress

Durante la creazione di un tema personalizzato, cerca di ricordare che dovrebbe essere sviluppato in modo da supportare l'internazionalizzazione. In questo modo, il tuo tema può essere facilmente tradotto in altre lingue.

Per aggiungere il supporto per I18n, ricorda di utilizzare un dominio di testo da cui puoi analizzare i file sorgente ed estrarre le stringhe traducibili. In questo esempio, utilizziamo il dominio di testo "Updraft", ma puoi scegliere qualsiasi identificatore univoco. Possiamo definire il dominio del testo come segue.

 [codice]
funzione i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/codice]

Ora, ogni volta che usi stringhe statiche nei file del tuo tema, avvolgili all'interno delle funzioni __() o _e() .

 [codice]
<h2><?php _e('Nome', 'updraft); ?></h2>
<?php echo __('Email utente', 'updraft'); ?>
[/codice]

Sono disponibili strumenti speciali come POEDIT che aiutano a generare file di lingua tradotti. Si prega di fare riferimento a questo blog per ulteriori informazioni.

Questo blog ha trattato le nozioni di base sulla creazione di temi personalizzati per WordPress. Tuttavia, è un argomento vasto che richiede molto tempo e pazienza. Di seguito sono riportate alcune risorse utili che dovresti conoscere che ti aiuteranno a iniziare a creare i tuoi temi WordPress..

  • Il ciclo di WordPress
  • Tag modello
  • Pagine di categoria
  • Riferimento_funzione
  • Etichetta condizionale
  • Standard di codifica di WordPress

Quando crei un nuovo tema per il tuo sito WordPress, ricorda che dovrai eseguirne il backup dopo ogni modifica o rischierai di perdere tutto il tuo lavoro. Usa UpdraftPlus: il plug-in di backup, ripristino e clonazione di WordPress leader e più affidabile al mondo.

Il post Come creare un tema personalizzato per WordPress è apparso per la prima volta su UpdraftPlus. UpdraftPlus – Plugin di backup, ripristino e migrazione per WordPress.