Come progettare un modello di pagina personalizzata WordPress [AGGIORNAMENTO 2021]

I temi WordPress sono semplicemente fantastici. Fanno WordPress web design così facile.

Ma, cosa succede quando si vuole andare oltre il tema scelto?

Cosa succede se si desidera utilizzare un layout WordPress personalizzato su una particolare pagina?

Bene, alcuni temi non ti permetteranno di modificare i loro layout.

Ma ci sono alcune soluzioni alternative per questo.

Seguimi per scoprirlo.

Che cos’è un modello di pagina personalizzato e come assegnarne uno?

Il layout delle pagine e dei post di WordPress è controllato da un file modello denominato “pagina.PHP”. I modelli sono file che dicono a WordPress come visualizzare diversi tipi di contenuti.

Ora, potresti non voler che tutte le pagine e i post abbiano lo stesso aspetto. Questo è quando hai bisogno di un modello di pagina personalizzato.

Quali modelli di pagina WordPress stai usando?

Vuoi scoprire quale modello di pagina stai usando o come passare da un modello all’altro?

E ‘ facile peasy, avrete bisogno di:

1. la Testa per il vostro Cruscotto di amministrazione di WordPress,
2. Dal menu a sinistra, selezionare “Pagine”,
3. Passa il mouse sopra il titolo di una pagina,
4. Dal menu sotto il titolo, selezionare “Modifica Veloce”,
5. Da “Modifica Veloce”, andare su “Modello” a discesa.

Qui puoi vedere tutti i modelli di temi disponibili e puoi assegnare un modello diverso alla tua pagina corrente.

Ad esempio, c’è un’opzione per cambiare la tua pagina a tutta larghezza, se lo desideri. Ma non c’è alcuna opzione per un modello che aggiunge una seconda barra laterale.

Questo è il motivo per cui i modelli WordPress personalizzati possono tornare utili. Ogni volta che si salva un nuovo modello, sarà disponibile insieme a quelli vecchi pure.

Ora puoi assegnare questo compito anche all’interno della pagina. Quando scegli di modificare una pagina, sul lato destro, vai su “Attributi pagina”-> Modello.

Come creare un tema figlio

Ora, prima di sporcarci le mani con la creazione di un modello di pagina personalizzato WordPress, c’è una cosa da tenere a mente: apportare le modifiche su un tema figlio. Non vorresti causare modifiche irreversibili al tema genitore.

Un tema figlio di WordPress è un sotto-tema che eredita tutte le caratteristiche e gli stili del tema padre. Ora, se il tema padre riceve un aggiornamento, il tema figlio non verrà influenzato e le modifiche non verranno sovrascritte.

Ora, come si crea un tema figlio? Qui sono i passi:

1. accedi al tuo cPanel,
2. Vai al File Manager,
3. Testa a public_html -> wp-content -> cartella temi,
4. Mentre all’interno i “Temi” della cartella, aggiungere una nuova cartella da “+” Cartella ” nel menu in alto. Dagli un nome. Una pratica migliore è usare il nome del tema, a cui si aggiunge “-child”. Inoltre, usa i trattini, invece dello spazio. Nel mio caso, userò mesmerize-child, perché sto usando il tema Mesmerize,
5. All’interno della cartella, creare un nuovo file e chiamarlo “style.css”,
6. . Fare clic con il pulsante destro del mouse sul file e selezionare l’opzione “Modifica”.

   /* Theme Name: Your Theme Child Theme URL: http://yourdomain.comDescription: Your Theme Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: yourtheme Version: 1.0.0 Text Domain: yourtheme-child */

   Qui puoi incollare parte del codice nel file CSS genitore o aggiungere il tuo stile.

7. Cambia il tema e i nomi di dominio, quindi premi “Salva”,
8. Crea un altro file nella stessa cartella. Questa volta chiamalo ” funzioni.PHP”. Incolla il seguente codice:

   <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>

9. Vai alla Dashboard di WordPress, Aspetto- > Tema. Il tuo tema bambino sarà lì, devi solo attivarlo.

E il gioco è fatto.

Quindi, creiamo un nuovo modello, che ne dici?

Come creare un modello di pagina personalizzato WordPress?

È possibile iniziare dal codice tema esistente e apportare le modifiche necessarie.

Ecco i passaggi:

1. Vai a cPanel- > File Manager,
2. Vai a public_html- > wp-content- > cartella temi,
3. Apri la cartella tema principale,
4. Identifica la pagina.file php. Sarà simile a questo:

   <?php mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

5. Seleziona il file quindi scegli “Copia”,
6. Nella finestra che si apre, cambia il percorso del file, in quello nella cartella figlio del tema,
7. Rinominare il nuovo file in modo da poter identificare facilmente ciò che fa.
8. Aggiungi un commento all’interno del file in modo da poter dire a WordPress che si tratta di un nuovo modello personalizzato. Fallo selezionando “modifica” e inserendo questo testo:

   /* * Template Name: Your custom TEmplate's name * description: >- Explain what your new templates does */

   Il tuo nuovo file dovrebbe essere simile a questo:

   <?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

È possibile aggiungere qui copie di altri file pure. Ad esempio, è possibile personalizzare il singolo.file php, che cambierà l’aspetto dei post del blog.

Successivamente, dovrai rimboccarti le maniche e scrivere del codice.

E se vuoi modificare lo stile CSS, puoi farlo all’interno del Customizer del tema figlio, all’interno di un CSS aggiuntivo o all’interno dello stile.file css.

Tuttavia, c’è una soluzione più semplice-

Con un costruttore di siti come Colibri, tutto il codice “sta” dietro e non blocca un creatore di siti non tecnico. Ogni aggiunta o modifica a una pagina personalizzata viene riflessa visivamente nel Customizer. Pertanto, il creatore del sito ha più controllo sul design. La bella pagina personalizzata sarà pronta in un batter d’occhio, senza preoccuparsi del codice dietro la pagina.