WordPress-temahandledning för nybörjare – Del 10: Lägga till fler mallar
I den här lektionen av WordPress-temahandledningen för nybörjare kommer vi att dyka mer in i mallar. Vi kommer att lära oss om malldelar och implementera det för återanvändning. Och vi kommer att lägga till fler av WordPresss standardmallar till vårt tema.
Men innan vi börjar lägga till fler mallfiler måste vi veta varför vi ska bry oss med malldelar.
Malldelar: Mer flexibla byggstenar
Malldelar fungerar precis som get_header()och get_footer()som vi lärde oss om i del 2, men är inte begränsade till dessa filer. Du kan använda malldelar för vilken fil du vill!
Teman använder vanligtvis en malldel för inlägg i en loop. Vanligtvis visar många mallar som kategori, arkiv och sökresultat varje inlägg i en slinga på samma sätt. Det är därför en mycket bra idé att separera postloop-utgången i en fil. På så sätt behöver du inte upprepa det i varje mall.
Låt oss "konvertera" en del av vår befintliga kod till malldelar innan vi börjar göra fler mallar!
Skapa en post loop mall del
Skapa en ny tom fil i vår temamapp; ringde content-loop.php. Du kan namnge malldelarna vad du vill. Men du kan inte namnge dem på samma sätt som någon av WordPress definierade mallar. I vår index.php, lokalisera allt du har inuti öglan, klipp ut det och klistra in det content-loop.php.
Inuti den nu tomma slingan i index.php, använd funktionsanropet get_template_part()och definiera din malldelfil som parameter (utan .phptillägget). Så här ska det se ut i båda filerna:
...
while (have_posts()): the_post();
get_template_part('content-loop');
endwhile;
the_posts_pagination();
...<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) {
the_post_thumbnail();
} ?>
<?php the_excerpt(); ?>
<?php the_category(); ?>
</article>Om du uppdaterar din förstasida bör du absolut inte se någon skillnad.
Bra! Nu när vår index.phpär snygg och ren kan vi använda den som bas för att kopiera till fler mallar. Nedan kommer jag att gå igenom hur du lägger till kategorimall och sökresultatmall, men jag uppmuntrar dig att skapa fler mallar för mer kontroll över designen av ditt tema.
Lägga till en kategorimall
Om du hänvisar tillbaka till WordPresss hierarki av mallar kan du se att för inläggskategorier kommer WordPress att leta efter mallen som heter category.php. Vi skapar den först.
Gör en kopia av filen i din temamapp index.phpoch byt namn på kopian category.php.
Och det är allt. Du är i princip klar…!
Vi kommer dock att lägga till en detalj; vi vill visa en rubrik som talar om för oss att vi är på en kategorisida för inlägg i kategori som heter X. WordPress har en funktion för detta som du kan använda i alla arkivmallar (kategori, taggar, datumarkiv), the_archive_title. Låt oss lägga till det före loopen, inuti en <h1>tagg.
<?php get_header(); ?>
<h1><?php the_archive_title(); ?></h1>
<?php
if (have_posts()) {
...Om du tittar på en inläggskategorisida bör du se något liknande detta, med arkivtiteln "Kategori: ". PS: Om du vill ändra utdata för arkivtiteln (till exempel inte visa "Kategori: "), kan du lägga till ett filter för get_the_archive_title. Dokumentationssidan visar ett bra exempel på hur man gör just det.
Nåväl, det var lätt! Låt oss hantera sökresultatmallen härnäst.
Lägga till en sökresultatmall
Proceduren är exakt densamma som vi gjorde för kategorimallar. Den här gången gör du en kopia av category.phpoch byter namn på kopian till search.php.
Allt vi behöver fixa är titeln. Arkivtitelfunktionen vi använde i kategorimall fungerar tyvärr inte särskilt bra för sökresultatmallar. Faktum är att det inte finns någon enkel funktion i WordPress som matar ut en titel åt oss.
Men vi kan enkelt göra en själva, och samtidigt ska jag visa hur man matar ut en dynamisk variabel och ändå håller texten översättbar.
PHP har två användbara funktioner, printf()och sprintf(). De gör samma sak, förutom att printfde matar ut det (som eko) och sprintfreturnerar det, så att vi kan lagra det i en variabel. Efter att vi satt texten som första parametrar kan vi lägga till dynamiska variabler som argument, som sedan injiceras i texten. Inuti dessa kan vi använda de översättbara textfunktionerna __()och _e(). Jag rekommenderar att du läser lite om hur printf eller sprintf fungerar, då jag inte kommer att gå in närmare på det här.
WordPress erbjuder en enkel funktion för att få strängen som söktes; get_search_query(). Med det sagt, låt oss ersätta arkivtitelfunktionen med denna;
<h1><?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?></h1>Vad ovanstående kod gör är inifrån och ut; definiera en översättningsbar text "Sök: %s" som sätts inuti en printfsom ekar strängen, och ersätter strängkonstanten (%s) med det andra argumentet; vilket är get_search_query().
Som ett resultat får vi en titel som denna när vi söker efter "er":
Trevlig! Ännu en mall klar. När det gäller den sista delen av den här lektionen kommer vi att gå in i vår mall för ett inlägg och lägga till något väldigt vanligt i WordPress; kommentarmallen.
Lägga till en kommentarsmall till enstaka inlägg
I vår single.php, efter inläggsartikeln, vill vi visa kommentarer. Kommentarerna ska mata ut en lista över tidigare kommentarer och ett formulär för att lägga till en ny kommentar.
Kommentarsmall är en mallfil som du kan lägga till i ditt tema, men WordPress har faktiskt sin egen standardkommentarmall. Om du inte har det comments.phpi ditt tema kommer WordPresss standardutdata för det att returneras om du begär kommentarmallen. Detta är vad vi kommer att göra i denna handledning.
Vi vill bara kalla kommentarsmallen om inlägget har aktiverat kommentarer (det är en inställning för varje inlägg och en global webbplatsinställning). Så vi lägger till en if-kontroll för att kontrollera om kommentarerna är tillåtna med comments_open()och om den returnerar sant begär vi kommentarsmall med comments_template(). Tänk på att allt detta måste ske inom loopen. Jag lade till det efter slutet av </article>, precis innan slingan stängs.
...
<p><?php _e('Author', 'wptutorial'); ?>: <?php the_author(); ?></p>
</article>
<?php
if (comments_open()) {
comments_template();
}
endwhile;
} else {
?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
...Om du besöker ett enda inlägg som har tillåtit kommentarer (jag lade till en kommentar bara för att visa dig listan med kommentarer också); du får den här vackra (ahem) standardkommentarmallen:
Nu kan du (och det uppmuntras ofta) skapa ditt eget comments.phpi ditt tema, vilket kommer att åsidosätta WordPresss standardutgång. Jag går dock inte igenom att skapa en kommentarsmall i den här handledningen, eftersom WordPresss standardutgång fungerar bra så länge du stilar den ordentligt. Om du inspekterar HTML-koden finns det massor av omslag och klasser tillgängliga.