Crea un modello di pagina personalizzato in un tema WordPress

Uno dei punti di forza più importanti di WordPress è l'idea dei temi. Un unico tema aggiunge grande valore al design e alla funzionalità del sito web. Tuttavia, ci sono siti Web che hanno design diversi su pagine diverse.

Sfortunatamente, diversi temi di WordPress impediscono agli utenti di alterare layout e funzionalità per una pagina diversa nella gerarchia. Il modello di pagina personalizzata di WordPress consente agli utenti di integrare requisiti personalizzati come la barra laterale destra/sinistra su una determinata pagina, un'ulteriore funzionalità di invito all'azione o forse un'intestazione univoca per una determinata pagina di destinazione. Entriamo ulteriormente per vedere come il modello di pagina personalizzato di WordPress visualizza diversi tipi di contenuto.

Un modello di pagina WordPress personalizzato può essere utilizzato per diversi scopi. Alcune idee includono:

• Mostra i post recenti di ogni categoria
• Incorpora Google Map o qualsiasi script
• Elenco di tutti gli autori.
• Immagini caricate di recente
• Pagina di progettazione personalizzata per il portfolio
• Pagina dei contatti

L'aspetto di tutte le pagine e i post creati su un sito Web WordPress è gestito da un file modello denominato page.php . La creazione o la modifica di un modello di pagina personalizzato in WordPress richiede una conoscenza di base di HTML, CSS e PHP.

Basta aprire qualsiasi editor di testo e incollarvi il seguente codice.

 <?php /* Nome modello: PageWithoutSidebar */ ?>

La riga di codice sopra dice a WordPress che si tratta di un file modello chiamato PageWithoutSidebar . Puoi usare qualsiasi nome tu voglia. Ora salva questo file come PageWithoutSidebar.php . Anche in questo caso puoi usare qualsiasi altro nome per il file. Ma non dimenticare di mantenere l'estensione come .php

Ora testeremo il nostro file modello appena creato.

Accedi al tuo pannello di hosting. In questo esempio, sto usando Cloudways, un hosting WordPress gestito più veloce. Cloudways supporta le applicazioni WordPress con le opzioni del provider per AWS, DigitalOcean, GCP, Linode e Vultr. Passa alla cartella /wp-content/themes . Apri la cartella del tema corrente e carica lì il file PageWithoutSidebar.php .

Vai su Pannello di amministrazione di WordPress > Pagine > Aggiungi nuovo . Puoi vedere il nuovo modello di pagina personalizzato elencato sul lato destro.

Crea una nuova pagina e imposta il suo modello su PageWithoutSidebar. Una volta fatto, pubblicalo .

Apri la pagina appena creata. Poiché non ci sono ancora elementi di design nel modello, viene visualizzata una pagina vuota come l'immagine qui sotto.

Questo mostra che il modello di pagina personalizzato in WordPress è stato implementato con successo, quindi puoi creare un tema WordPress reattivo personalizzato

Ora è il momento di aggiungere alcune righe di codice per visualizzare il contenuto della pagina.

Per questa demo, parlerò di come personalizzare il modello di pagina Twenty Sixteen predefinito.

L'aspetto predefinito delle pagine è generato dal file page.php situato nella cartella /wp-contents/themes/YOUR THEME/ . Apri page.php e copia questo codice.

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // Avvia il ciclo.
                                while ( have_posts() ): the_post();

                                                // Includi il modello del contenuto della pagina.
                                                get_template_part( 'template-parts/content', 'page' );

                                                // Se i commenti sono aperti o abbiamo almeno un commento, carica il modello di commento.
                                                if (comments_open() || get_comments_number() ) {
                                                                commenti_modello();
                                                }

                                                // Fine del ciclo.
                                alla fine;
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Incolla questo codice in PageWithoutSidebar.php appena sotto questa riga di codice.

 <?php /* Nome modello: PageWithoutSidebar */ ?>

Salvarlo!

Il tuo file completo PageWithoutSidebar.php apparirà come sotto.

 <?php /* Nome modello: PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // Avvia il ciclo.
                                while ( have_posts() ): the_post();

                                                // Includi il modello del contenuto della pagina.
                                                get_template_part( 'template-parts/content', 'page' );

                                                // Se i commenti sono aperti o abbiamo almeno un commento, carica il modello di commento.
                                                if (comments_open() || get_comments_number() ) {

                                                                commenti_modello();

                                                }

                                                // Fine del ciclo.
                                alla fine;

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Torna alla tua pagina e aggiornala. Osserverai che tutto funziona nel modo in cui funziona sul tema predefinito di WordPress Twenty Sixteen.

Ora personalizziamolo. Come puoi vedere c'è una barra laterale sul lato destro. Lo rimuoverò solo da questa pagina. Tutte le altre pagine avranno l'aspetto predefinito del tema Twenty Sixteen.

Apri il file PageWithoutSidebar.php . Scorri verso il basso fino alla fine del file e rimuovi :

 <?php get_sidebar(); ?>

Questa è la riga di codice che ottiene la barra laterale nella pagina. Dopo aver rimosso la riga, salvala . Apri l'URL della pagina e la barra laterale non c'è più!

Come puoi vedere, la barra laterale è stata rimossa con successo da questa pagina. Tuttavia, l'allineamento del testo non è buono. C'è uno spazio vuoto sul lato destro. La correzione consiste nel giustificare ed estendere il testo per riempire lo schermo.

Torna a PageWithoutSidebar.php e trova:

 <div class="content-area">

Basta cambiare " content-area " in " site-content-fullwidth " e il gioco è fatto. Aggiorna la pagina e il contenuto è a tutta larghezza.

Ancora curioso di sapere perché ho creato un modello di pagina personalizzato quando avrei potuto facilmente modificare il file page.php ? È abbastanza ovvio che se il file page.php viene modificato, tutte le pagine del sito Web mostreranno le modifiche. Per applicare l'aspetto personalizzato a pagine specifiche, il modello di pagina personalizzato in WordPress è utile. Puoi anche definire un ruolo utente personalizzato in WordPress per assegnare privilegi diversi agli utenti.

Se hai domande, non esitare a chiedere pubblicando nella sezione commenti qui sotto.