Come creare modelli di pagina WordPress personalizzati

I modelli di pagina nei temi di WordPress aiutano a determinare il layout delle pagine all'interno di un sito web. Modificare questi modelli può tuttavia essere a volte intimidatorio soprattutto per i principianti. Fortunatamente, WordPress offre una certa flessibilità quando si tratta di modelli di pagina, consentendoti di creare modelli di pagina personalizzati nel tuo tema.

La creazione di modelli di pagina personalizzati per il tuo sito ti consente di modificare facilmente layout e design per il tuo sito in base alle tue preferenze. Consente inoltre di aggiungere requisiti personalizzati come l'utilizzo di intestazioni diverse per pagine diverse. Queste modifiche possono essere effettivamente applicate su pagine diverse o su una singola pagina.

In questo articolo, esamineremo quali sono i modelli di pagina WordPress personalizzati, la gerarchia dei modelli di pagina predefinita e come creare modelli di pagina WordPress personalizzati nel tuo tema.

Sommario

Che cos'è un modello di pagina WordPress personalizzato

La gerarchia dei modelli di pagina di WordPress

Creazione di un modello di pagina personalizzato

• Come creare un modello personalizzato globale
• Creazione di un singolo modello di pagina

Conclusione

Che cos'è un modello di pagina WordPress personalizzato

Un modello di pagina WordPress personalizzato è un file modello che ti consente di avere un design separato e un aspetto del tuo sito web.

Ad esempio, se hai un tema di blog nel tuo sito, puoi creare un modello personalizzato per il tuo sito, che non visualizzi una barra laterale o commenti. Puoi anche creare un modello per le pagine in cui hai un modello che esegue il rendering del contenuto in un layout a scatola e un altro in un layout a larghezza intera. Non ci sono limiti al numero di modelli di pagina che puoi creare.

Il rendering delle pagine è controllato dal file page.php in WordPress. Questo file quindi costituisce una base predefinita per il rendering del contenuto della pagina e si trova all'interno della radice dei file del tema, come illustrato di seguito.

Se sono presenti modelli di pagina più specifici, viene attivata la gerarchia dei modelli.

La gerarchia dei modelli di pagina di WordPress

La gerarchia dei modelli di pagina determina quale file modello WordPress sceglie durante la visualizzazione di una pagina, a seconda della natura della richiesta effettuata e della sua esistenza all'interno del tema.

La gerarchia predefinita dei modelli di WordPress è la seguente:

Modello di pagina : WordPress verifica la presenza di un modello assegnato alla pagina e utilizza questo modello all'interno della pagina

page-{slug}.php : Se nessun modello è assegnato alla pagina, WordPress quindi ricerca un modello con lo slug alla pagina e lo applica se trovato.

Uno slug è una parte all'interno dell'URL della pagina dopo il nome di dominio e può essere modificato. Di seguito è riportato un esempio di illustrazione su questo.

page-{id}.php : WordPress verificherà quindi l'esistenza di un modello di pagina con l'ID pagina della pagina visualizzata se non viene trovato alcun modello con lo slug.

page.php : se non viene trovato alcun modello con un ID pagina, WordPress utilizzerà il modello standard page.php per eseguire il rendering della pagina.

singolare.php : nel caso in cui il file page.php non viene trovato, WordPress utilizzerà il file singolare.php indipendentemente dal tipo di post.

index.php : Se nessuno dei modelli di cui sopra è disponibile, WordPress esegue automaticamente il rendering delle pagine utilizzando il file index.php.

Il rendering delle pagine all'interno del tuo ambiente WordPress può quindi essere eseguito da uno dei modelli di pagina sopra. Sta quindi a te determinare il livello di precedenza che vuoi avere in atto.

Creazione di un modello di pagina personalizzato

La creazione di modelli di pagina personalizzati nel tuo tema è abbastanza semplice. Tuttavia, è necessario determinare se i modelli di pagina saranno per una singola pagina o per qualsiasi pagina.

In questa guida esamineremo come creare manualmente un modello di pagina globale nel tema Stax e un modello di pagina singola per una delle nostre pagine.

Come creare un modello personalizzato globale

A volte vuoi creare un modello di pagina che può essere utilizzato a livello globale in qualsiasi pagina del tuo sito web.

Per fare ciò, dovrai prima identificare un editor di testo da utilizzare da utilizzare come Blocco note, Blocco note ++, testo sublime o qualsiasi altro editor di tua preferenza.

Una volta fatto ciò, puoi quindi iniziare a creare il tuo file modello eseguendo quanto segue:

Passaggio 1: crea un nuovo file e aggiungi il codice seguente :

 <?php /* Template Name: PageWithNoFooter */ ?>

Ti consigliamo di utilizzare un nome di modello che non sia utilizzato in nessun altro modello di pagina che potresti avere all'interno del tuo sito Web, nonché un nome che puoi facilmente identificare e mettere in relazione alle pagine del tuo sito.

Una volta fatto, salva il tuo nuovo modello di pagina con l'estensione .php. Nel nostro caso qui, chiameremo il file modello pagewithnofooter.php . Puoi usare qualsiasi nome di tua preferenza, ma è più consigliabile utilizzare un nome simile al nome del tuo modello.

Passaggio 2: aggiungi il codice desiderato al file

In questo passaggio, puoi aggiungere il tuo codice preferito al file sia in PHP che in PHP e HTML.

A scopo illustrativo, nel nostro caso qui, utilizzeremo il contenuto del file right-sidebar.php predefinito all'interno del file pagewithnofooter.php, ma lo personalizzeremo e aggiungeremo il codice per rendere un testo di benvenuto HTML personalizzato, oltre a disabilitare il footer. Se stai utilizzando un altro tema WordPress, puoi anche copiare il contenuto di page.php all'interno del tema o qualsiasi altro modello di pagina definito dal tema che il tuo tema potrebbe avere in atto.

Il nostro codice sarà quindi il seguente:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Passaggio 3: carica il modello di pagina nei file del tema .

Con l'aiuto di un programma FTP come Filezilla o tramite il tuo pannello di hosting, carica il tuo file personalizzato nella radice dei file del tuo tema. Nel nostro caso qui, questo sarà all'interno dei seguenti percorsi di directory:

i) wp-content > Temi > Stax

ii) Consigliato: wp-content > Temi > stax-child

Questo è applicabile durante l'utilizzo di un tema figlio all'interno del tuo sito e stax-child è il tuo tema figlio.

Ti consigliamo di utilizzare il tema figlio durante la personalizzazione dei modelli di pagina o di qualsiasi altra personalizzazione dei file all'interno del tema per evitare di perdere le personalizzazioni durante gli aggiornamenti del tema.

Passaggio 4: crea una nuova pagina e assegna ad essa il modello "PageWithNoFooter".

Per raggiungere questo obiettivo, vai alla sezione Pagine > Aggiungi nuovo all'interno della dashboard di WordPress e crea la tua pagina.

Dopo aver creato la pagina, assegnale il modello "PageWithNoFooter" e salva le modifiche.

Di seguito è riportato un esempio di illustrazione di questo:

Ora, dopo aver visualizzato in anteprima la pagina sul front-end, la nostra pagina non avrà alcun piè di pagina visualizzato all'interno della tua pagina. Avrai anche l'HTML personalizzato che abbiamo aggiunto.

Di seguito uno screenshot su questo:

Puoi utilizzare il modello all'interno di qualsiasi pagina in cui desideri applicare il layout o in qualsiasi pagina a cui non intendi avere un piè di pagina.

Creazione di un singolo modello di pagina

I modelli di pagina personalizzati su singole pagine sono più specifici della pagina. Come accennato in precedenza, questi modelli vengono presi in considerazione per la selezione se non viene assegnato alcun "modello di pagina" a una pagina.

Per quanto riguarda questi modelli, puoi scegliere come target la pagina per slug o ID pagina. È anche importante considerare le prospettive future del tuo sito web quando decidi se utilizzare uno slug di pagina o un ID. Ad esempio, se intendi migrare il tuo sito a un altro dominio, l'utilizzo di un ID pagina non sarebbe appropriato durante la creazione del file modello. Invece, l'uso della lumaca sarebbe considerata un'opzione migliore. Se d'altra parte il tuo sito è gestito da più persone e ritieni che ci sia la possibilità che possano alterare lo slug della pagina, sarebbe molto preferibile utilizzare un ID pagina durante la creazione del modello di pagina.

Nel nostro caso qui, creeremo un modello di pagina personalizzato per la nostra pagina dei contatti e disabiliteremo il piè di pagina dalla pagina. Per creare un tale modello dovrai eseguire quanto segue:

Passaggio 1: copia il contenuto di page.php

In questo passaggio, dovrai prima individuare page.php all'interno dei file del tema.

Una volta individuato il file, seleziona per modificarlo e copiarne il contenuto.

Passaggio 2: crea un nuovo modello nella pagina

All'interno della radice dei file del tema, crea il modello di pagina nella pagina dei contatti. Puoi utilizzare il file page-{id}.php o page-{slug}.php. Nel nostro caso qui, useremo lo slug, quindi chiameremo il nostro template come page-contact.php poiché "contact" è il nostro slug di pagina come mostrato di seguito:

Di seguito è riportata anche un'illustrazione sul percorso del file:

Passaggio 3: incolla il contenuto del file page.php

Ora dovrai incollare il contenuto del file page.php che abbiamo copiato nel passaggio 1 sopra nel nostro nuovo file page-contact.php. Dopo aver fatto ciò, puoi quindi personalizzare il file per incorporare le modifiche al codice desiderate e salvare le modifiche. Nel nostro caso disabiliteremo il footer nella pagina dei contatti in modo che il nostro codice finale si leggerà come:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Dopo aver visualizzato in anteprima la tua pagina di contatto, ti renderai conto che la pagina non incorpora un piè di pagina.

Di seguito è riportato uno screenshot di confronto sulla pagina inizialmente e dopo l'applicazione del nuovo modello.

Pagina di contatto con piè di pagina

Pagina di contatto senza piè di pagina

Conclusione

La creazione di modelli di pagina personalizzati per il tuo sito Web è relativamente semplice. In questa guida abbiamo esaminato in modo specifico come creare manualmente modelli personalizzati all'interno del tuo tema WordPress. Abbiamo usato il tema Stax gratuito come caso d'uso qui. Puoi tuttavia applicare la stessa tecnica a tutti gli altri temi WordPress che seguono gli standard di codifica di WordPress. Esistono tuttavia altri modi per creare modelli di pagina personalizzati come l'utilizzo di page builder come Elementor.

Ci auguriamo che questo articolo fornisca le informazioni necessarie su come creare manualmente modelli di pagina personalizzati. Sentiti libero di commentare di seguito in caso di domande o suggerimenti.