Vai al contenuto principale

Come capire il Post Tipo Template WordPress 4.7

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

WordPress 4.7 ha messo a punto alcuni nuovi fantastici miglioramenti al sistema di modelli CMS. I modelli sono stati ampliati per comprendere tutti i formati di post, consentendo agli sviluppatori di creare temi più sfumati e allo stesso tempo consentendo ai proprietari del sito di gestire i contenuti più facilmente.

Ma come funziona? In questo tutorial, ti mostrerò come utilizzare i modelli di formato del post nei tuoi temi con alcuni semplici esempi.

Cosa sono i modelli su WordPress?

I modelli sono fondamentalmente file speciali che possono cambiare l'aspetto di una pagina e / o aggiungere funzionalità al tuo sito WordPress.

Prima di WordPress 4.7, i modelli erano disponibili solo per le pagine, quindi erano soprannominati modelli di pagina . Tuttavia, WordPress 4.7 ha ampliato il loro uso per includere tutti formato di pubblicazione, quindi in questo tutorial, parlerò di modelli per designarli.

Attributo dell'articolo

Una volta che i modelli sono stati salvati nel tema, possono essere selezionati nelle pagine di modifica dell'articolo.

Preparare il terreno per l'utilizzo dei modelli

Lavoreremo su un esempio.

Per verificarlo, dobbiamo prima creare un tema figlio. uso  venti Seventeen , il nuovo tema predefinito di WordPress.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Per iniziare, crea una nuova cartella nella directory del tema. Ho chiamato il mio "cPPT" (abbreviazione di modelli di post type personalizzati), quindi ho aggiunto nuovi nuovi file: style.css et functions.php . Usa il codice seguente per configurare questi file:

/ * Nome Tema: Tipo personalizzato Messaggio Tema Template Esempio URI: http://blair-jersyer.com Descrizione: Un tema di esempio che utilizza i tipi di messaggi personalizzati modelli Autore: Daniel Pataki Autore URI: http://blair-jersyer.com Template : versione twentyseventeen: 1.0.0 * /
<?php

add_action( 'wp_enqueue_scripts', 'cptt_assets' );
function cptt_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

Tutti insieme! Ora dovresti vedere il tema figlio nella sezione Aspetto della dashboard di WordPress. Quando attivato, dovresti vedere una vaniglia, non modificata che proviene dal tema principale.

Crea un formato di post personalizzato

Inizieremo testando il sistema Template con un formato di pubblicazione personalizzato. Immagina di creare un sito Web relativo ai videogiochi.

Mentre scrivi contenuti per videogiochi, ti consigliamo di pubblicare nuovi contenuti concisi ma già sufficienti per fornire la maggior parte delle informazioni.

Per renderne uno visivamente diverso da un altro, devi usare una categoria o un dispositivo arbitrario. I modelli semplificano notevolmente il processo.

add_action ('init', 'cptt_custom_post_types'); function cptt_custom_post_types () {register_post_type ('game', array ('labels' => array ('name' => __ ('Video Games'), 'singular_name' => __ ('Video Game')), 'public' => true, 'has_archive' => true, 'supports' => array ('title', 'editor', 'thumbnail'), 'menu_icon' => 'dashicons-laptop')); }

Ho omesso alcune etichette e opzioni, ma questo codice sarà sufficiente per lo scopo che vogliamo ottenere.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Creazione del modello

Un modello è un normale file PHP con un commento speciale in alto, che indica a WordPress il titolo del modello e dove dovrebbe essere utilizzato.

Ne creeremo uno per le recensioni dei videogiochi.

<?php
/*
Template Name: Critique de Jeu
Template Post Type: game
*/

Quando crei un nuovo post di un videogioco, vedrai apparire un selettore con due opzioni: "predefinito" e "Revisione del gioco". Dopo aver selezionato un modello, verrà utilizzato il codice all'interno del modello.

Utilizzando un modello

 

Recensione di videogiochi
Per creare una vista, tutto ciò che farò è copiare da Twenty Seventeen. Creo un file che si chiama quindi "template-game-review.php" con il seguente codice:
' '. __ ("Articolo precedente", "ventisettenne"). ' '. __ ("Precedente", "ventisettenne"). ' '. twentyseventeen_get_svg (array ('icon' => 'freccia sinistra')). ' % title ', 'next_text' => ' '. __ ('Next Post', 'twentyseventeen'). ' '. __ ("Avanti", "ventisette"). ' % title '. twentyseventeen_get_svg (array ('icon' => 'freccia destra')). ' ',)); endwhile; // Fine del ciclo. ?>

Ho copiato tutto questo codice da "Twenty Seventeen". Ho modificato la funzione "get_header" con un parametro, in modo che risultasse in un'intestazione diversa. Inoltre modifico i parametri dei template "get_template_part ()" in modo che sia così: "get_template_part ('template-parts / game / content', 'review'); ".

Creo quindi un file per l'header che chiamo "header-review.php" e incollo il codice dal file "header.php" di Twenty Seventeen e rimuovo la seguente riga:


Ho quindi creato un file "template-parts / game / content-review.php". Ho incollato il codice da "content.php" di Twenty Seventeen e rimosso alcune righe di codice che non erano realmente necessarie. Ho aggiunto questo codice in alto:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Revisione video completa

Ho aggiunto il seguente codice CSS:

.site-content-contiene {position: static; } # Recensione -Testa {position: absolute; top: 55px; sinistra: 0px; padding: 22px; color: #fff; larghezza: 100%; text-align: center; Background: RGBA (0,0,0,0.3); } # -head rivedere h1 {font-weight: 300; margin: 0px; padding: 0px; } # Recensione -Testa piccolo {color: RGBA (255,255,255,0.5); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 1px}

Questo è tutto ciò che serve per creare un modello per un formato di post personalizzato su WordPress. In caso di domande, non esitare a contattarci.

 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
14 azioni
quota10
Tweet1
Enregistrer3