Cum se creează șabloane personalizate de pagini WordPress

Șabloanele de pagini din temele WordPress ajută la determinarea aspectului paginilor dintr-un site web. Modificarea acestor șabloane poate fi totuși uneori intimidantă, mai ales pentru începători. Din fericire, WordPress oferă o oarecare flexibilitate atunci când vine vorba de șabloane de pagină, permițându-vă să creați șabloane de pagină personalizate în tema dvs.

Crearea de șabloane de pagină personalizate pentru site-ul dvs. vă permite să modificați cu ușurință machetele și designurile site-ului dvs. după preferințele dvs. De asemenea, vă permite să adăugați cerințe personalizate, cum ar fi utilizarea diferitelor anteturi pentru diferite pagini. Aceste modificări pot fi aplicate în diferite pagini sau pe o singură pagină.

În acest articol, vom analiza ce sunt șabloanele personalizate de pagini WordPress, ierarhia implicită a șabloanelor de pagină, precum și cum să creați șabloane personalizate de pagini WordPress în tema dvs.

Cuprins

Ce este un șablon de pagină WordPress personalizat

Ierarhia șabloanelor de pagină WordPress

Crearea unui șablon de pagină personalizată

• Cum să creați un șablon personalizat global
• Crearea unui singur șablon de pagină

Concluzie

Ce este un șablon de pagină WordPress personalizat

Un șablon de pagină WordPress personalizat este un fișier șablon care vă permite să aveți un design și un aspect separat al site-ului dvs.

De exemplu, dacă aveți o temă de blogging pe site-ul dvs., puteți crea un șablon personalizat pentru site-ul dvs., care nu redă o bară laterală sau comentarii. De asemenea, puteți crea un șablon pentru paginile în care aveți un șablon care redă conținut într-un aspect în casetă și altul într-un aspect cu lățime completă. Nu există limitări privind numărul de șabloane de pagină pe care le puteți crea.

Redarea paginilor este controlată de fișierul page.php din WordPress. Prin urmare, acest fișier se formează ca bază implicită pentru redarea conținutului paginii și se află în rădăcina fișierelor cu tema, așa cum este ilustrat mai jos.

Dacă există mai multe șabloane de pagină specifice, atunci va începe ierarhia șabloanelor.

Ierarhia șabloanelor de pagină WordPress

Ierarhia șablonului de pagină determină ce fișier șablon alege WordPress atunci când afișează o pagină, în funcție de natura solicitării făcute precum și de existența acesteia în cadrul temei.

Ierarhia de șablon WordPress implicită este următoarea:

Șablon de pagină : WordPress verifică dacă există un șablon alocat paginii și folosește acest șablon în cadrul paginii

page-{slug}.php : Dacă nu este atribuit niciun șablon paginii, WordPress verifică apoi un șablon cu slug-ul pe pagină și îl aplică dacă este găsit.

Un slug este o parte din adresa URL a paginii după numele domeniului și poate fi editat. Mai jos este un exemplu de ilustrare în acest sens.

page-{id}.php : WordPress va verifica apoi existența unui șablon de pagină cu ID-ul paginii care este redată dacă nu este găsit niciun șablon cu slug-ul.

page.php : Dacă nu se găsește niciun șablon cu un ID de pagină, WordPress va folosi șablonul standard page.php pentru a reda pagina.

singular.php : În cazul în care fișierul page.php nu este găsit, WordPress va folosi fișierul singular.php, indiferent de tipul postării.

index.php : Dacă niciunul dintre șabloanele de mai sus nu este disponibil, WordPress redă implicit paginile folosind fișierul index.php.

Redarea paginilor în mediul dvs. WordPress poate fi, prin urmare, efectuată de oricare dintre șabloanele de pagină de mai sus. Prin urmare, depinde de dvs. să determinați nivelul de precedență pe care doriți să îl aveți.

Crearea unui șablon de pagină personalizată

Crearea de șabloane personalizate de pagină în tema dvs. este destul de ușoară. Cu toate acestea, trebuie să determinați dacă șabloanele de pagină vor fi pentru o singură pagină sau pentru orice pagină.

În acest ghid, vom analiza cum să creați manual un șablon de pagină globală în tema Stax, precum și un șablon de pagină pentru una dintre paginile noastre.

Cum să creați un șablon personalizat global

Uneori doriți să creați un șablon de pagină care poate fi utilizat la nivel global pe orice pagină de pe site-ul dvs.

Pentru a face acest lucru, va trebui mai întâi să identificați un editor de text pe care să îl utilizați, cum ar fi Notepad, Notepad ++, text sublim sau orice alt editor preferat.

După ce ați făcut acest lucru, puteți începe să creați fișierul șablon efectuând următoarele:

Pasul 1: Creați un fișier nou și adăugați următorul cod :

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

Vă recomandăm să utilizați un nume de șablon care nu este utilizat în niciun alt șablon de pagină pe care le puteți avea pe site-ul dvs. web, precum și un nume pe care să îl puteți identifica cu ușurință și să îl asociați cu paginile site-ului dvs.

Odată ce ați terminat, salvați noul șablon de pagină cu extensia .php. În cazul nostru aici, vom numi fișierul șablon pagewithnofooter.php . Puteți folosi orice nume după preferință, dar este mai recomandabil să utilizați un nume similar cu numele șablonului.

Pasul 2: Adăugați codul dorit în fișier

În acest pas, puteți adăuga codul preferat la fișier, fie că acesta este în PHP sau atât PHP, cât și HTML.

În scopuri ilustrative, în cazul nostru aici, vom folosi conținutul fișierului dreapta-sidebar.php implicit din fișierul pagewithnofooter.php, dar îl vom personaliza și vom adăuga codul pentru a reda un text HTML personalizat de bun venit, precum și pentru a dezactiva subsolul. Dacă utilizați o altă temă WordPress, puteți, de asemenea, să copiați conținutul paginii.php în cadrul temei sau al oricărui alt șablon de pagină definit cu tema pe care tema dvs. ar putea avea loc.

Prin urmare, codul nostru va fi după cum urmează:

 <?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();

Pasul 3: Încărcați șablonul de pagină în fișierele tematice .

Cu ajutorul unui program FTP, cum ar fi Filezilla sau prin intermediul panoului de găzduire, încărcați fișierul personalizat la rădăcina fișierelor cu tema. În cazul nostru, acesta va fi fie în următoarele căi de director:

i) wp-content > Teme > Stax

ii) Recomandat: wp-content > Teme > stax-child

Acest lucru este aplicabil atunci când utilizați o temă copil pe site-ul dvs., iar stax-child este tema dvs. copil.

Vă recomandăm să utilizați tema secundară în timp ce personalizați șabloanele de pagină sau orice alte personalizări ale fișierelor din tema dvs. pentru a evita pierderea personalizărilor în timpul actualizărilor temei.

Pasul 4: Creați o pagină nouă și atribuiți-i șablonul „PageWithNoFooter”.

Pentru a realiza acest lucru, navigați la secțiunea Pagini > Adăugați nou din tabloul de bord WordPress și creați-vă pagina.

După ce ați creat pagina, atribuiți-i șablonul „PageWithNoFooter” și salvați modificările.

Mai jos este un exemplu de ilustrare a acestui lucru:

Acum, la previzualizarea paginii pe front-end, pagina noastră nu va avea niciun subsol redat în pagina dvs. Veți avea și codul HTML personalizat pe care l-am adăugat.

Mai jos este o captură de ecran despre asta:

Puteți utiliza șablonul în orice pagină în care doriți să se aplice aspectul acestuia sau în orice pagină pentru care nu intenționați să aibă un subsol.

Crearea unui singur șablon de pagină

Șabloanele de pagină personalizate pentru pagini individuale sunt mai mult specifice paginii. După cum sa menționat mai devreme, aceste șabloane sunt luate în considerare pentru selecție dacă nu este atribuit niciun „șablon de pagină” unei pagini.

În ceea ce privește aceste șabloane, puteți viza fie pagina după slug sau ID-ul paginii. De asemenea, este important să luați în considerare perspectivele viitoare ale site-ului dvs. atunci când determinați dacă să utilizați un slug de pagină sau un ID. De exemplu, dacă intenționați să migrați site-ul dvs. pe alt domeniu, atunci utilizarea unui ID de pagină nu ar fi adecvată atunci când creați fișierul șablon. În schimb, utilizarea melcului ar fi considerată o opțiune mai bună. Dacă, pe de altă parte, site-ul dvs. este gestionat de mai multe persoane și simțiți că există posibilitatea ca acestea să modifice pagina slug-ul, atunci ar fi mult de preferat să utilizați un ID de pagină atunci când creați șablonul de pagină.

În cazul nostru aici, vom crea un șablon de pagină personalizat pentru pagina noastră de contact și vom dezactiva subsolul din pagină. Pentru a crea un astfel de șablon, va trebui să efectuați următoarele:

Pasul 1: Copiați conținutul paginii.php

În acest pas, va trebui mai întâi să localizați pagina.php în fișierele dvs. de temă.

După ce ați localizat fișierul, selectați să îl editați și să copiați conținutul acestuia.

Pasul 2: Creați un nou șablon pentru pagină

În rădăcina fișierelor cu tema, creați șablonul de pagină pentru pagina de contact. Puteți utiliza fie fișierul page-{id}.php, fie pagina-{slug}.php. În cazul nostru aici, vom folosi slug-ul, așa că vom numi șablonul ca page-contact.php, deoarece „contact” este pagina noastră slug, așa cum se vede mai jos:

Mai jos este, de asemenea, o ilustrare a locației fișierului:

Pasul 3: Lipiți conținutul fișierului page.php

Acum va trebui să lipiți conținutul fișierului page.php pe care l-am copiat la pasul 1 de mai sus în noul nostru fișier page-contact.php. După ce faceți acest lucru, puteți personaliza fișierul pentru a încorpora modificările dorite de cod și pentru a salva modificările. În cazul nostru, vom dezactiva subsolul din pagina de contact, astfel încât codul nostru final va citi astfel:

 <?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();

La previzualizarea paginii dvs. de contact, veți realiza că pagina nu include un subsol.

Mai jos este o comparație cu capturi de ecran pe pagină inițial și după aplicarea noului șablon.

Pagina de contact cu subsol

Pagina de contact fără subsol

Concluzie

Crearea de șabloane de pagini personalizate pentru site-ul dvs. este relativ ușoară. În acest ghid, am analizat în mod special cum să creați manual șabloane personalizate în tema dvs. WordPress. Am folosit tema gratuită Stax ca caz de utilizare aici. Cu toate acestea, puteți aplica aceeași tehnică pentru toate celelalte teme WordPress care urmează standardele de codare WordPress. Există totuși și alte moduri în care puteți crea și șabloane personalizate de pagină, cum ar fi utilizarea creatorilor de pagini precum Elementor.

Sperăm că acest articol oferă informațiile necesare despre cum puteți crea manual șabloane personalizate de pagină. Nu ezitați să comentați mai jos în cazul oricăror întrebări sau sugestii.