Come creare manualmente modelli personalizzati di WordPress: una guida

Se non sei soddisfatto del design del tuo sito Web e il tema scelto non offre il livello di opzioni di personalizzazione richieste, potrebbe essere il momento di prendere in considerazione la creazione del tuo modello personalizzato! A seconda delle tue esigenze, questo modello di WordPress può essere un modello di post personalizzato o un modello di pagina o una vista per categoria.

Una delle cose interessanti di WordPress è che, indipendentemente da come è stato costruito il tuo sito Web WordPress, sei sempre libero di modificare il layout o il design in qualsiasi momento. Questo può essere fatto sovrascrivendo un modello premade o creando il tuo. WordPress offre un'enorme flessibilità e ti dà la possibilità di creare il tuo modello per qualsiasi cosa.

Nonostante il fatto che la creazione del proprio modello apra una vasta gamma di possibilità di progettazione, la maggior parte degli utenti di WordPress probabilmente eviterebbe la sfida poiché si preoccupano che creare il proprio modello personalizzato di WordPress sia troppo complesso. In questa serie di due articoli, esamineremo entrambe le opzioni a tua disposizione. In primo luogo in questo articolo vedremo come è possibile codificare manualmente un modello WordPress personalizzato (che offre la massima flessibilità) e poi, in seguito, esamineremo come utilizzare i famosi page builder per sostenere parte del lavoro pesante necessario durante la creazione di un modello personalizzato di WordPress.

In questo articolo esamineremo i modi per creare modelli personalizzati per pagine, post e persino categorie di post. Andiamo prima guardando perché potresti volere un modello personalizzato.

Nota: questo articolo presuppone una conoscenza pratica di HTML, CSS e PHP.

Quando hai bisogno di un template WordPress personalizzato?

Forse non sei ancora sicuro del motivo per cui dovresti effettivamente utilizzare un modello personalizzato di WordPress. Il modo più semplice per spiegarlo è con un esempio.

Immaginiamo che tu abbia un sito web per la tua attività. Il tema 'Twenty Twenty' è attivato e tutte le pagine e i post necessari sono già stati creati e riempiti con contenuti (testo e immagini), un estratto e un'immagine in evidenza.

Anche le impostazioni generali sono configurate e hai apportato una serie di modifiche tramite il Customizer (come i colori dei collegamenti, il colore della sovrapposizione del modello di copertina, ecc.)

È stato inoltre creato un menu con 5 voci: Homepage – Company Profile – Servizi – Chi siamo – Contattaci

Nella sezione Servizi è presente un sottomenu: Servizio 1 – Servizio 2 – Servizio 3.

Quindi, dal punto di vista di uno sviluppatore WordPress hai essenzialmente:

• Quattro pagine standard ( Homepage – Company Profile – Chi siamo – Contattaci)
• Una pagina di archivio ( Servizi )
• Tre pagine di post ( Servizio 1 – Servizio 2 – Servizio 3 )

Per impostazione predefinita, tutte e 3 le pagine di Service Post avranno lo stesso layout. L'unica opzione attualmente disponibile per differenziare i singoli layout di questi post selezionando uno dei tre modelli forniti tramite l'impostazione Attributi del post.

Se selezioniamo ciascuno dei diversi modelli, vedremo che assomigliano a questo:

Modello predefinito

Modello a tutta larghezza

Modello di copertina

Se sei fortunato, uno di questi stili funzionerà per te e puoi scegliere di utilizzarli per il tuo sito web. In caso contrario, e ti senti frustrato dal fatto che alcuni elementi non sembrino "proprio come desideri", non preoccuparti... è qui che entra in gioco la creazione manuale del tuo modello WordPress personalizzato.

Andiamo avanti e vediamo cosa si può ottenere con un modello personalizzato.

Come creare manualmente un modello di post WordPress personalizzato

Quello che faremo nel seguente tutorial è creare una vista post singola completamente personalizzata e specificata all'interno del proprio file PHP. Aggiungeremo anche un'opzione chiamata "Il mio modello di post personalizzato" al menu a discesa dei modelli negli attributi del post che corrisponderà al layout del post personalizzato e presenterà la nostra struttura unica.

Fase uno: introduzione del nostro modello su WordPress

Per iniziare dobbiamo creare un file PHP chiamato qualcosa come: "my-custom-post.php" nella cartella principale del tuo tema WordPress (nel nostro esempio si trova in /themes/twentytwenty/).

Apri il file con il tuo editor di testo preferito (come Sublime) e aggiungi il contenuto di seguito:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Questa riga * Template Name: My custom post template definisce il nome che verrà visualizzato nel menu a discesa del modello. Dai un'occhiata allo screenshot qui sotto e vedrai come apparirà.

Il * Template Post Type: post è facoltativo e definisce il tipo di post per cui il modello apparirà come opzione. Poiché l'abbiamo definito come "post", questo modello non apparirà nel menu delle opzioni del modello per una pagina, come si può vedere nell'esempio seguente.

L'ultima riga: get_header(); ?> get_header(); ?> recupera il contenuto dell'intestazione.

A questo punto, se scegli "Il mio modello di post personalizzato" come modello attivo per diciamo il nostro post "Servizio 1", l'output sarà vuoto. Questo è come ci aspetteremmo poiché dobbiamo ancora aggiungere alcuna struttura alla pagina. Vedresti qualcosa del genere:

Aggiunta di struttura al nostro modello personalizzato di WordPress

Sebbene sia del tutto possibile creare la struttura per la nostra pagina interamente da zero, a volte può essere più semplice prendere la struttura del post esistente che viene utilizzata nel nostro modello di tema e quindi modificarla.

Se diamo un'occhiata alla gerarchia dei template di WordPress possiamo vedere che, a seconda del tema, il template del singolo post proviene dal file singular.php o single.php che si trova all'interno della cartella del tema.

Per chiarire ulteriormente: quando post e pagine utilizzano la stessa struttura, viene utilizzato il file singular.php, altrimenti (come nel popolare tema Astra per esempio) vedrai un file single.php, page.php, archive.php che sono codificato per fornire strutture diverse rispettivamente per post, pagine e layout di blog.

In questo caso, usando il tema Twenty Twenty, possiamo vedere che il file singular.php usa la funzione get_template_part per recuperare il layout richiesto dalla cartella template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Quello che fa in modo intelligente il codice sopra è controllare se c'è contenuto nel post e, in tal caso, stampa il contenuto utilizzando la struttura specificata dal modello selezionato. Ciò vale in tutti i casi, indipendentemente dal fatto che venga utilizzato un post, una pagina o un archivio.

Ora possiamo vedere come il nostro tema estrae i dati di layout dai modelli esistenti, ora siamo pronti per iniziare a creare il nostro modello. Per definire l'aspetto del nostro modello, dobbiamo prima progettarlo effettivamente. Potresti volere che la tua pagina del post sia strutturata nel seguente formato:

Una volta che hai deciso un progetto di layout, dovrai codificarlo usando HTML, CSS e PHP. Questo articolo presuppone che tu abbia una conoscenza pratica di queste lingue e che tu possa creare il layout richiesto. Prendendo il progetto sopra, vorremmo scrivere del codice iniziale che, aggiunto al tuo file my-custom-post.php, assomiglierebbe a questo:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Ci sono funzioni di scelta rapida che il nostro tema Twenty Twenty fornisce per i meta dei post e altri dati che potremmo voler pubblicare. Invece di usarli, utilizzeremo le funzioni predefinite di WordPress in modo che il tuo modello funzioni su qualsiasi tema. Quelli con cui lavoreremo sono i seguenti:

• the_title() – fa eco al titolo del post
• the_excerpt() – fa eco all'estratto del post
• the_post_thumbnail() – restituisce la dimensione della miniatura del post predefinita. Puoi usare le opzioni the_post_thumbnail() per generare una dimensione specifica dell'immagine in primo piano
• the_content() – Emette il contenuto del post

Se salviamo i nostri aggiornamenti e ora diamo un'occhiata al post "Servizio 1", vedremo il layout del modello personalizzato applicato.

Come creare un modello di categoria di post personalizzato per WordPress

Ora abbiamo visto quanto sia relativamente facile creare il nostro layout del modello di post, possiamo andare avanti e applicare principi simili per creare il nostro layout di Visualizzazione per categorie.

Un modo semplice per farlo è modificare direttamente il file index.php (che si trova nella nostra cartella principale /themes/twentytwenty/). Mentre la modifica diretta di questo file va bene a scopo di tutorial, se il sito Web è attivo, potresti voler utilizzare un tema figlio per assicurarti che eventuali aggiornamenti non vengano sovrascritti la prossima volta che aggiorni il tema.

Se osserviamo il codice index.php noteremo che è per lo più riempito con condizioni PHP "if" che specificano gli output disponibili a seconda del tipo di contenuto. Ad esempio, il codice seguente verifica se il contenuto include post (è un post, una pagina o un archivio) o se è una pagina dei risultati di ricerca e visualizza il contenuto corretto di conseguenza.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Se stai seguendo questo tutorial usando il tema Twenty Twenty, trova il seguente codice nel tuo file index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

In template-parts/content.php possiamo vedere che il contenuto viene recuperato usando la funzione 'get_template_part'.

Invece di utilizzare queste funzioni specifiche del tema per specificare il layout della nostra pagina della categoria dei post, utilizzeremo invece le funzioni predefinite di WordPress per ogni elemento. Ciò significa che cambieremo il codice sopra nel seguente:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Se hai gli occhi d'aquila vedrai che stiamo facendo riferimento a un file chiamato my-custom-category-view.php che ora dobbiamo creare e aggiungere alla cartella del nostro tema (un approccio alternativo sarebbe aggiungere queste informazioni direttamente al nostro file index.php ma salvarlo come file separato è molto più ordinato.

Crea un file my-custom-category-view.php e aggiungi il seguente codice:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Vedrai che siamo stati in grado di utilizzare il formato più avanzato della funzione the_title() per specificare il titolo del post. Il collegamento alla pagina del singolo post è stato generato utilizzando la funzione get_permalink().

Per finire ora dovrai aggiungere uno stile aggiuntivo al tuo file style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Vediamo cosa abbiamo realizzato finora:

Simpatico!

Come puoi vedere, ci sono ancora alcuni problemi per quanto riguarda la regolazione delle immagini in quanto sono di proporzioni diverse. Possiamo facilmente risolvere questo problema aggiungendo alcune righe in più al nostro CSS per ritagliare al centro le immagini e dare dimensioni fisse:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

In questo modo, ovviamente, stiamo ancora utilizzando le immagini originali che non sono necessariamente ottimali dal punto di vista delle prestazioni. La migliore pratica qui è usare le dimensioni delle immagini di WordPress. Se desideri rendere reattivo il tuo nuovo layout di pagina, dai un'occhiata anche a questa guida completa per ulteriori informazioni.

E questo è tutto, bravo! Ora sei riuscito con successo a creare il tuo layout e design personalizzati per la visualizzazione della categoria dei post.

Come creare un modello di pagina personalizzato WordPress

Finora abbiamo creato un layout personalizzato per la nostra pagina dei post e anche un layout personalizzato per i risultati delle categorie. Sarai in grado di applicare i metodi utilizzati durante la creazione di un modello personalizzato per le pagine e si applicano esattamente gli stessi principi.

Prima di concludere questo articolo, però, diamo una rapida occhiata a un modello di pagina leggermente più complesso. In questo esempio inseriamo le pagine dei nostri post nel nostro modello in modo da poterle visualizzare nel modo in cui apparirebbero in una pagina di categoria, ma con l'ulteriore vantaggio della modificabilità offerta da una pagina (piuttosto che da una pagina di categoria) .

Il nostro obiettivo sarà creare una pagina "Servizi" panoramica che elenchi i nostri tre servizi aziendali (in questo esempio, Servizio 1, Servizio 2 e Servizio 3). Invece di doverli aggiungere manualmente alla nostra pagina, verranno inseriti dinamicamente nella pagina. Anche se in pratica potresti non doverti preoccupare di questo, i principi di codifica sono utili per comprendere e dimostrare ulteriormente la flessibilità offerta da WordPress.

Per iniziare, crea un nuovo file all'interno della cartella del tuo tema e assegnagli un nome simile a my-services-template.php . Fatto ciò, aggiungeremo ora alcuni commenti di dichiarazione necessari come abbiamo fatto prima con il modello di post singolo. Utilizzeremo anche la funzione get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

La funzione get_template_part() è fondamentalmente un meccanismo che ci consente di caricare parti di codice riutilizzabili. In questo caso, acquisirà il contenuto di template-parts/content-cat_services.php . È in questo file che inseriremo del codice che genererà i post della categoria "Servizi".

In sintesi, ciò che farà il codice in questo file è:

• Assegna un titolo alla pagina della categoria.
• Interroga i post della categoria specificata dal database.
• Scorri i post e visualizza un layout per ciascuno.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Esamineremo le domande in modo più approfondito in un prossimo articolo. Quello che devi sapere ai fini di questo articolo è che $args = array( 'cat'=>4, 'orderby' => 'title' ); sta recuperando la categoria del post con il numero ID di 4 (ID=4). Questo numero di categoria si riferisce alla nostra categoria "Servizi".

Quindi, come puoi vedere l'ID per ciascuna categoria? In realtà è abbastanza semplice. Vai a Menu Messaggi > Categorie e apri qualsiasi categoria da modificare. L'ID si trova nell'URL della pagina di modifica della categoria come mostrato di seguito:

Per visualizzare il nostro nuovo modello dobbiamo andare su Pages e creare una nuova pagina. Nell'area di modifica della pagina non è necessario inserire alcun contenuto. Invece, seleziona l'opzione "Modello di categoria del mio post" nel menu a discesa del modello Attributi di pagina.

Infine, vai al menu e aggiungi una voce "Servizi" per la nostra nuova pagina per sostituire l'attuale voce della categoria Servizi. Il menu ora dovrebbe apparire così

Vediamo cosa abbiamo fatto:

Il metodo sopra mostra come creare un modello di pagina personalizzato di WordPress che si inserisca in una categoria specifica (in questo esempio i nostri "Servizi"). Se selezioni lo stesso modello per un'altra pagina di categoria, vedrai di nuovo i post della categoria Servizi poiché lo abbiamo specificamente richiesto con l'ID categoria (ID=4). Quindi, se desideri un nuovo modello di pagina che includa una categoria diversa, devi creare un file modello separato per farlo (e aggiornare di conseguenza l'ID categoria).

Conclusione

Essere in grado di creare il tuo modello personalizzato per il tuo sito Web WordPress ti offre il massimo controllo sull'aspetto del tuo sito Web. La creazione di modelli personalizzati per la visualizzazione singola o per categoria dei tipi di post vale la pena. Ovviamente non solo consente il pieno controllo sugli elementi di design del tuo sito, ma ti consente di replicare rapidamente un determinato layout per le pagine future.

Guarda anche

• Come creare modelli personalizzati di WordPress utilizzando i Page Builder: una guida