Cum să creați șabloane personalizate cu o singură postare în WordPress

Ați văzut vreodată o pagină cu detalii despre postare cu un aspect complet diferit față de alte postări de pe același site? Acest lucru se datorează probabil că folosește un șablon personalizat. Puteți atribui un șablon personalizat postărilor individuale, oferindu-vă o flexibilitate sporită asupra aspectului site-ului dvs.

Vrei să înveți cum să creezi un șablon personalizat cu o singură postare? În această postare, vă voi arăta cum vă puteți crea cu ușurință propria dvs.!

Beneficiul șabloanelor personalizate

Înainte de a începe să creăm unul, haideți să explorăm de ce ați putea avea nevoie de un șablon personalizat și ce face acesta.

Dacă doriți ca o anumită postare sau tip de postare să iasă în evidență de restul conținutului dvs., vă recomandăm să luați în considerare crearea unui șablon personalizat cu o singură postare. Acest șablon va fi aplicat numai postărilor cărora îl atribuiți, ceea ce înseamnă că poate avea un aspect complet diferit de postările dvs. standard. Un design și un aspect unic pot crește implicarea utilizatorilor pentru acea postare anume.

Ești gata să-ți dezvolți propriul tău? Crearea și utilizarea unui șablon de postare personalizat este similară cu un șablon de pagină personalizată.

Cum se creează un șablon de postare personalizat

Voi folosi tema Twenty Seventeen pentru exemplul meu, dar procesul va fi același pentru orice temă.

Înainte de a crea un șablon de postare personalizat, voi crea mai întâi o temă copil. Puteți lucra în tema principală, dar deoarece creați un șablon personalizat, dacă actualizați tema părinte, vă veți pierde șablonul. Din acest motiv, este o practică bună să păstrați șabloanele personalizate separate de tema principală.

Pentru un șablon personalizat, trebuie să definiți un Template Name (numele șablonului) și un Template Post Type (unde va fi utilizat acest șablon). Arata cam asa:

 [php]
<?php
/* Nume șablon: Postare cu lățime completă * Tip postare șablon: postare*/ /*Șablon pentru afișarea postărilor individuale cu lățime completă. */
get_header();
?>
[/php]

Când salvați fișierul, păstrați numele fișierului relevant pentru numele șablonului, cum ar fi full-width-post.php . Dacă vizualizați o postare din panoul de administrare, acesta va afișa noul șablon într-un meniu vertical al secțiunii Atribute postare.

Șablonul nostru personalizat este gata, dar nu este util încă. Să-l facem puțin mai benefic!

Notă: vom lucra la mai multe fișiere, așa că urmăriți numele și folderele fișierelor.

Iată aspectul actual al paginilor postărilor de blog în tema Twenty Seventeen. Sunt mulțumit de asta, așa că o vom lăsa așa.

Acum, să presupunem că doriți un aspect pe lățime completă pentru câteva postări. Vom pune titlul postării deasupra metadatelor. Metadatele ar trebui să aibă un chenar în partea de sus și de jos, iar titlul și metadatele ar trebui să fie centrate aliniate. Iată wireframe:

Pentru a face acest aspect, trebuie să găsiți ce fișier este responsabil pentru afișarea paginilor cu detaliile postării. În majoritatea temelor, single.php este fișierul, cu excepția cazului în care există anumite șabloane predefinite. Structura codului variază de la temă la temă, așa că poate fi nevoie de puțină învățare pentru a înțelege cum funcționează tema dvs.

Odată ce ați găsit fișierul care afișează paginile cu detaliile postării, ar trebui să aflați dacă o funcție este folosită pentru a apela un alt fișier sau șablonul este creat direct. În acest exemplu cu tema Twenty Seventeen, este funcția get_template_part.

Calea get_template_part este cea mai importantă parte de urmat aici.

 [php]

<div class="wrap">

<div id="primar" class="zona de conținut">
        	<id principal="principal" class="site-main" rol="principal">
              	<?php /* Începe bucla */ while ( have_posts() ): the_post(); get_template_part('template-parts/post/content', get_post_format()); // Dacă comentariile sunt deschise sau avem cel puțin un comentariu, încărcați șablonul de comentariu. if ( comentarii_deschise() || get_comments_number() ): șablon_commentari(); endif; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen') ) . „</span><span aria-hidden="true" class="nav-subtitle">' __( ' Anterior”, „douăzeci și șaptezeci” ). „</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icoana' => 'săgeata-stânga' ) ) . '</ span>%title</span>',
                          	'next_text' => „<span class="screen-reader-text">’ . __( „Postarea următoare”, „douăzeci și șaptezeci” ) . „</span><span aria-hidden="true" class="nav-subtitle">' . __( „Următorul”, „douăzeci și șaptezeci” ) . „</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'pictogramă' => 'săgeată-dreapta' ) ) . „</span></span>”,
                    	) );
              	sfârşitul timpului; // Sfârșitul buclei.
              	?>
[/php]

După cum puteți vedea, se referă la o cale:

 [php]
get_template_part( 'template-parts/post/content', get_post_format()
);
[/php] 

Așadar, fișierul content.php este numit în interiorul single.ph pentru a afișa pagina cu detaliile postării.

Acum că știți cum funcționează fișierul single.php , să copiem codul din acesta și să-l lipim în fișierul nostru full-width-post.php creat anterior în tema copil. Deoarece va fi un șablon cu lățime completă, vom elimina bara laterală.

Acum copiați fișierul content.php din calea menționată mai sus. Îl puteți lipi în același director în care există fișierul șablon, dar vă sugerez să urmați aceeași structură de foldere ca și tema părinte.

Puteți păstra numele fișierului așa cum este, dar dacă doriți vreodată să schimbați ceva în șablonul implicit, va provoca un conflict. Pentru a evita orice probleme, aș sugera să redenumești fișierul și să-l păstrezi relevant pentru numele șablonului, cum ar fi content-full-width.php .

Fișierele sunt la locul lor, așa că acum să modificăm codul pentru a schimba titlul postării și metadatele postării.

 [php]

<header class="entry-header">
        	<?php

        	if ( este_single() ) {
              	titlul( '

<h1 class="entry-title">', '</h1>

');
        	} elseif ( is_front_page() && is_home() ) {
              	titlul( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="marcaj">', '</a></h3>

');
        	} altfel {
              	titlul( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="marcaj">', '</a></h2>

');
        	}

        	if ( 'post' === get_post_type() ) {

              	ecou'

<div class="entry-meta">';
                    	if ( este_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} altfel {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo „</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->
[/php]

Pentru a utiliza acest șablon, editați postarea dorită de la administratorul WordPress și atribuiți șablonul din meniul drop-down.

Dacă verificați postarea pe partea frontală, încă nu are lățime completă, dar titlul și metadatele au schimbat locuri, așa că știm că postarea folosește șablonul nostru personalizat

Trebuie să adăugăm niște CSS pentru a-l face pe lățime completă. WordPress generează automat o clasă conform numelui șablonului din secțiunea body.

Utilizați acea clasă pentru a viza acest șablon special. Puteți adăuga CSS la fișierul tema copil style.css .

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:none;
latime:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margine-jos: 1,3 em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
umplutură: 15px 0;
}
[/css]

Acum avem aspectul așa cum ne-am dorit. Orice postare care folosește acest șablon va avea exact același stil.

Puteți crea câte șabloane personalizate doriți, pentru a se potrivi cerințelor dvs. Puteți chiar să creați șabloane bazate pe categorii de postări.

Pot folosi un plugin pentru asta?

Dacă nu vă simțiți confortabil cu codurile PHP, atunci puteți folosi unele plugin-uri, dar trebuie să recunosc, există foarte puține plugin-uri disponibile pentru crearea de șabloane de postări personalizate și cele mai multe dintre ele nu sunt foarte utile pentru că oricum trebuie să creați manual șablonul.

Am găsit pluginul Post Custom Templates Lite foarte util. Este un plugin gratuit care vă permite să creați șabloane de postare fără nicio codificare într-o interfață drag-and-drop. Are o mulțime de opțiuni de personalizare, așa că dacă doriți să personalizați un șablon de postare, în general acest plugin vă poate ajuta.

Notă: Versiunea gratuită vă permite doar să personalizați șabloanele normale de postare. Trebuie să utilizați versiunea pro pentru a putea crea șabloane de postări personalizate și pentru a obține câteva funcții suplimentare.

Concluzie

Indiferent dacă lucrați manual sau utilizați un plugin pentru a crea un șablon personalizat cu o singură postare, acesta permite celor mai importante postări ale dvs. să iasă în evidență de restul. Pentru inspirație, consultați site-ul lui Brian Dean; el folosește un anumit șablon pentru postările sale definitive de ghid pentru a le face să pară unice din restul postărilor sale.

Așadar, încercați și creați-vă propriul șablon unic cu o singură postare! Pentru a obține cele mai bune rezultate pentru fiecare site pe care îl construiți, alegeți platforma de găzduire gestionată a WP Engine ca sursă unică pentru găzduirea WordPress!