Cum să creați manual șabloane personalizate WordPress – Un ghid

Dacă nu sunteți mulțumit de designul site-ului dvs. și tema aleasă de dvs. nu oferă nivelul de opțiuni de personalizare necesare, atunci ar putea fi timpul să vă gândiți la crearea propriului șablon personalizat! În funcție de nevoile dvs., acest șablon WordPress poate fi un șablon de postare personalizat sau un șablon de pagină sau o vizualizare de categorie.

Unul dintre lucrurile interesante despre WordPress este că, indiferent de modul în care a fost construit site-ul dvs. WordPress, aveți întotdeauna libertatea de a modifica aspectul sau designul în orice moment. Acest lucru se poate face prin înlocuirea unui șablon prefabricat sau prin crearea propriului șablon. WordPress oferă o mare flexibilitate și vă oferă posibilitatea de a vă crea propriul șablon pentru orice.

În ciuda faptului că crearea propriului șablon deschide o mulțime de posibilități de design, majoritatea utilizatorilor WordPress ar evita probabil provocarea, deoarece își fac griji că crearea propriului șablon personalizat WordPress este prea complexă. În această serie de două articole, vom analiza ambele opțiuni care vă sunt disponibile. În primul rând, în acest articol, vom analiza modul în care puteți codifica manual un șablon WordPress personalizat (care oferă cea mai mare flexibilitate) și apoi, în continuare, vom examina cum puteți utiliza creatorii de pagini populari pentru a suporta unele dintre sarcinile grele necesare. atunci când creați un șablon personalizat WordPress.

În acest articol vom analiza modalități de a crea șabloane personalizate pentru pagini, postări și chiar categorii de postări. Să trecem prin a vedea mai întâi de ce ați putea dori un șablon personalizat.

Notă: Acest articol presupune cunoștințe practice de HTML, CSS și PHP.

Când aveți nevoie de un șablon WordPress personalizat?

Poate că nu sunteți încă sigur de ce ar trebui să utilizați un șablon personalizat WordPress. Cel mai simplu mod de a explica acest lucru este cu un exemplu.

Să ne imaginăm că ai un site web pentru afacerea ta. Tema „Twenty Twenty” este activată și toate paginile și postările necesare sunt deja create și umplute cu conținut (text și imagini), un fragment și o imagine prezentată.

Setările generale sunt de asemenea configurate și ați făcut o serie de modificări prin intermediul Personalizatorului (cum ar fi culorile linkurilor, culoarea suprapunerii șablonului de copertă etc.)

A fost creat și un meniu cu 5 articole: Pagina principală – Profil companie – Servicii – Despre noi – Contactați-ne

În secțiunea Servicii există un submeniu: Service 1 – Service 2 – Service 3.

Deci, din perspectiva unui dezvoltator WordPress, aveți în esență:

• Patru pagini standard ( Pagina principală – Profil companie – Despre noi – Contactați-ne)
• O pagină de arhivă ( Servicii )
• Trei pagini de postare (Serviciul 1 – Serviciul 2 – Serviciul 3)

În mod implicit, toate cele 3 pagini Service Post vor avea același aspect. Singura opțiune pe care o aveți în prezent pentru a diferenția aceste postări aranjamente individuale, selectând unul dintre cele trei șabloane furnizate prin setarea Atribute post.

Dacă selectăm fiecare dintre diferitele șabloane, vom vedea că arată astfel:

Șablon implicit

Șablon de lățime completă

Șablon de copertă

Dacă aveți noroc, unul dintre aceste stiluri va funcționa pentru dvs. și puteți alege să le utilizați pentru site-ul dvs. web. Dacă nu, totuși, și te simți frustrat că anumite elemente nu arată „așa cum vrei tu”, atunci nu-ți face griji... aici intervine crearea manuală a propriului șablon WordPress personalizat.

Să continuăm și să vedem exact ce se poate realiza cu un șablon personalizat.

Cum să creați manual un șablon de postare WordPress personalizat

Ceea ce vom face în următorul tutorial este să creăm o singură vizualizare a postării care este complet personalizată și va fi specificată în propriul fișier PHP. Vom adăuga, de asemenea, o opțiune numită „Șablonul meu personalizat de postare” în meniul derulant șabloane din atributele postării care vor corespunde aspectului postării personalizate și vor prezenta structura noastră unică.

Pasul unu: Prezentarea șablonului nostru în WordPress

Pentru a începe, trebuie să creăm un fișier PHP numit ceva de genul: „my-custom-post.php” în folderul rădăcină al temei WordPress (în exemplul nostru, acesta se află în /themes/twentytwenty/).

Deschideți fișierul cu editorul de text preferat (cum ar fi Sublime) și adăugați conținutul de mai jos:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Această linie * Template Name: My custom post template definește numele care va fi afișat în meniul derulant al șablonului. Aruncă o privire la captura de ecran de mai jos și vei vedea cum ar apărea aceasta.

* Template Post Type: post este opțională și definește tipul de postare pentru care șablonul va apărea ca opțiune. Deoarece am definit aceasta ca „postare”, acest șablon nu va apărea în meniul de opțiuni de șablon pentru o pagină, așa cum se poate vedea în exemplul de mai jos.

Ultima linie: get_header(); ?> get_header(); ?> preia conținutul antetului.

În acest moment, dacă alegeți „Șablonul meu personalizat de postare” ca șablon activ pentru, să spunem, postarea noastră „Serviciul 1”, rezultatul va fi necompletat. Acest lucru este așa cum ne-am aștepta, deoarece nu am adăugat încă nicio structură paginii. Ai vedea ceva de genul asta:

Adăugarea structurii șablonului nostru personalizat WordPress

Deși este în întregime posibil să construim structura paginii noastre complet de la zero, uneori poate fi mai ușor să luăm structura de postare existentă care este utilizată în șablonul nostru de temă și apoi să o modificam.

Dacă ne uităm la ierarhia șabloanelor WordPress putem observa că, în funcție de temă, șablonul single post provine din fișierul singular.php sau single.php aflat în interiorul folderului temei.

Pentru a mai clarifica – atunci când postările și paginile folosesc aceeași structură, se folosește fișierul singular.php, altfel (ca în tema populară Astra de exemplu) veți vedea fișiere single.php, page.php, archive.php care sunt codificat pentru a oferi structuri diferite pentru postări, pagini și, respectiv, aspectul blogului.

În acest caz, folosind tema Twenty Twenty, putem vedea că fișierul singular.php folosește funcția get_template_part pentru a prelua aspectul solicitat din folderul template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Ceea ce face în mod inteligent codul de mai sus este să verifice dacă există conținut în postare și, dacă da, imprimă conținutul folosind structura specificată de șablonul selectat. Acest lucru se aplică în toate cazurile, indiferent dacă este utilizată o postare, o pagină sau o arhivă.

Acum putem vedea cum tema noastră extrage date de aspect din șabloanele existente, acum suntem gata să începem să construim propriul nostru șablon. Pentru a defini cum arată șablonul, trebuie mai întâi să-l proiectăm. Poate doriți ca pagina dvs. de postare să fie așezată în următorul format:

Odată ce v-ați decis asupra unui design de aspect, va trebui să codificați acest lucru folosind HTML, CSS și PHP. Acest articol presupune că aveți cunoștințe de lucru despre aceste limbi și puteți crea aspectul necesar. Luând designul de mai sus, vom scrie un cod inițial care, adăugat la fișierul dvs. my-custom-post.php, ar arăta astfel:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Există funcții de comandă rapidă pe care tema noastră Twenty Twenty le oferă pentru meta postare și alte date pe care este posibil să dorim să le publicăm. În loc să le folosim, însă, vom folosi funcțiile implicite WordPress, astfel încât șablonul dvs. să funcționeze pe orice temă. Unul cu care vom lucra sunt după cum urmează:

• the_title() – ecou titlul postării
• the_excerpt() – ecou extrasul postării
• the_post_thumbnail() – afișează dimensiunea implicită a miniaturii postului. Puteți utiliza opțiunile the_post_thumbnail() pentru a afișa o dimensiune specifică a imaginii prezentate
• the_content() – Afișează conținutul postării

Dacă ne salvăm actualizările și acum aruncăm o privire la postarea „Serviciul 1”, vom vedea un aspect al șablonului personalizat aplicat.

Cum să creați un șablon de categorie de postare personalizată WordPress

Acum am văzut cât de ușor este să ne creăm propriul aspect al șablonului de postare, putem trece mai departe și să aplicăm principii similare pentru a ne crea propriul aspect Category View.

O modalitate ușoară de a face acest lucru este să editați direct fișierul index.php (situat în folderul nostru rădăcină /themes/twentytwenty/). În timp ce editarea directă a acestui fișier este în regulă în scopuri tutorial, dacă site-ul web este live, atunci s-ar putea să doriți să utilizați o temă secundară pentru a vă asigura că orice actualizări nu sunt suprascrise data viitoare când actualizați tema.

Dacă ne uităm la codul index.php, vom observa că acesta este în mare parte umplut cu condiții PHP „dacă” care specifică ieșirile disponibile în funcție de tipul de conținut. De exemplu, următorul cod verifică dacă conținutul include postări (este o postare, pagină sau arhivă) sau este o pagină cu rezultatele căutării și afișează conținutul potrivit în consecință.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Dacă urmați acest tutorial folosind tema Twenty Twenty, atunci găsiți următorul cod în fișierul index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

În template-parts/content.php putem vedea că conținutul este preluat folosind funcția 'get_template_part'.

În loc să folosim aceste funcții specifice temei pentru a specifica aspectul paginii noastre cu categorii de postări, vom folosi în schimb funcțiile WordPress implicite pentru fiecare element. Aceasta va însemna că vom schimba codul de mai sus în următorul:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Dacă aveți ochi de vultur, veți vedea că facem referire la un fișier numit my-custom-category-view.php pe care acum trebuie să-l creăm și să-l adăugăm în folderul temei noastre (o abordare alternativă ar fi să adăugați aceste informații direct în fișierul nostru index.php , dar a avea acesta salvat ca fișier separat este mult mai clar.

Creați un fișier my-custom-category-view.php și adăugați următorul cod:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Veți vedea că am putut folosi formatul mai avansat al funcției the_title() pentru a specifica titlul postării. Link-ul către pagina cu o singură postare a fost generat folosind funcția get_permalink().

Pentru a finaliza, va trebui să adăugați un stil suplimentar fișierului style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Să vedem ce am realizat până acum:

Grozav!

După cum puteți vedea, totuși, există încă unele probleme legate de ajustarea imaginilor, deoarece acestea sunt de proporții diferite. Putem rezolva cu ușurință acest lucru adăugând câteva linii în CSS-ul nostru pentru a decupa imaginile în centru și a da dimensiuni fixe:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

În acest fel, bineînțeles, încă folosim imaginile originale care nu sunt neapărat optime din punct de vedere al performanței. Cea mai bună practică aici este să utilizați dimensiunile imaginilor WordPress. Dacă doriți ca noul aspect al paginii să fie adaptabil, atunci aruncați o privire și la acest ghid extins pentru mai multe informații.

Și gata, bravo! Acum ați reușit să vă creați propriul aspect și design personalizat pentru vizualizarea categoriei de postări.

Cum să creezi un șablon de pagină personalizată WordPress

Până acum am creat un aspect personalizat pentru pagina noastră de postări și, de asemenea, un aspect personalizat pentru rezultatele categoriei. Veți putea aplica metodele folosite atunci când creați un șablon personalizat pentru pagini, precum și exact aceleași principii.

Înainte de a încheia acest articol, să aruncăm o privire rapidă asupra unui șablon de pagină puțin mai complex. În acest exemplu, vom trage paginile noastre de postări în șablonul nostru, astfel încât să le putem afișa mult în felul în care ar arăta într-o pagină de categorie, dar cu avantajul suplimentar al editabilității oferite de o pagină (mai degrabă decât o pagină de categorie) .

Scopul nostru va fi să creăm o pagină „Servicii” de prezentare generală care să enumere cele trei servicii de afaceri ale noastre (în acest exemplu, Serviciul 1, Serviciul 2 și Serviciul 3). În loc să fie nevoie să le adăugați manual pe pagina noastră, acestea vor fi atrase dinamic pe pagină. Deși în practică nu trebuie să vă faceți griji cu acest lucru, principiile de codificare sunt utile pentru a înțelege și a demonstra în continuare flexibilitatea oferită de WordPress.

Pentru a începe, creați un fișier nou în folderul temei și denumiți-l așa cum ar fi my-services-template.php . După ce s-a făcut acest lucru, vom adăuga acum câteva comentarii de declarație necesare, așa cum am făcut înainte cu șablonul de postare unică. De asemenea, vom folosi funcția get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

Funcția get_template_part() este practic un mecanism care ne permite să încărcăm bucăți de cod reutilizabile. În acest caz, va prelua conținutul template-parts/content-cat_services.php . În acest fișier vom insera un cod care va afișa postările din categoria „Servicii”.

În rezumat, ceea ce va face codul din acest fișier este:

• Dați un titlu paginii categoriei.
• Interogați postările categoriei specificate din baza de date.
• Căutați în buclă postările și afișați un aspect pentru fiecare.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Vom examina întrebările mai amănunțit într-un articol viitor. Ceea ce trebuie să știți în sensul acestui articol este că $args = array( 'cat'=>4, 'orderby' => 'title' ); preia categoria de postare cu numărul ID 4 (ID=4). Acest număr de categorie care se referă la categoria noastră „Servicii”.

Deci, cum puteți vedea ID-ul pentru fiecare categorie? Este destul de simplu de fapt. Accesați Meniu Postări > Categorii și deschideți orice categorie de editat. ID-ul se află în adresa URL a paginii de editare a categoriei, după cum se arată mai jos:

Pentru a vizualiza noul nostru șablon, trebuie să mergem la Pagini și să creăm o pagină nouă. În zona de editare a paginii nu trebuie să introduceți niciun conținut. În schimb, selectați opțiunea „Șablonul meu pentru categoria de postare” din meniul derulant „Șablon Atribute pagină”.

În cele din urmă, accesați meniul și adăugați un element „Servicii” pentru noua noastră pagină pentru a înlocui elementul curent din categoria Servicii. Meniul ar trebui să arate acum așa

Să vedem ce am făcut:

Metoda de mai sus arată cum să creați un șablon de pagină personalizată WordPress care trage într-o anumită categorie (în acest exemplu, „Serviciile”). Dacă selectați același șablon pentru o altă pagină de categorie, veți vedea din nou postările din categoria Servicii, deoarece am solicitat în mod special acest lucru cu ID-ul categoriei (ID=4). Deci, dacă doriți un șablon de pagină nou care să includă o altă categorie, ar trebui să creați un fișier șablon separat pentru a face acest lucru (și să actualizați ID-ul categoriei în consecință).

Concluzie

Posibilitatea de a crea propriul șablon personalizat pentru site-ul dvs. WordPress vă oferă controlul suprem asupra modului în care arată site-ul dvs. Crearea de șabloane personalizate pentru vizualizarea unică sau de categorie pentru tipurile dvs. de postări merită efortul. Desigur, nu numai că permite controlul deplin asupra elementelor de design ale site-ului dvs., dar vă permite să reproduceți rapid un anumit aspect pentru paginile viitoare.

Vezi si

• Cum să creați șabloane personalizate WordPress folosind Page Builders – Un ghid