{"id":233888,"date":"2023-02-25T10:27:00","date_gmt":"2023-02-25T07:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233888"},"modified":"2022-11-11T13:00:16","modified_gmt":"2022-11-11T10:00:16","slug":"wordpress-temahandledning-foer-nyboerjare-del-10-laegga-till-fler-mallar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-temahandledning-foer-nyboerjare-del-10-laegga-till-fler-mallar\/","title":{"rendered":"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 10: L\u00e4gga till fler mallar"},"content":{"rendered":"\n<p>I den h\u00e4r lektionen av WordPress-temahandledningen f\u00f6r nyb\u00f6rjare kommer vi att dyka mer in i mallar. Vi kommer att l\u00e4ra oss om malldelar och implementera det f\u00f6r \u00e5teranv\u00e4ndning. Och vi kommer att l\u00e4gga till fler av WordPresss standardmallar till v\u00e5rt tema.<\/p>\n<p>Men innan vi b\u00f6rjar l\u00e4gga till fler mallfiler m\u00e5ste vi veta varf\u00f6r vi ska bry oss med <strong>malldelar<\/strong>.<\/p>\n<h2>Malldelar: Mer flexibla byggstenar<\/h2>\n<p>Malldelar fungerar precis som <code>get_header()<\/code>och <code>get_footer()<\/code>som vi <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-2-building-blocks\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4rde oss om i del 2<\/a>, men \u00e4r inte begr\u00e4nsade till dessa filer. Du kan anv\u00e4nda malldelar f\u00f6r vilken fil du vill!<\/p>\n<p>Teman anv\u00e4nder vanligtvis en malldel f\u00f6r inl\u00e4gg i en loop. Vanligtvis visar m\u00e5nga mallar som kategori, arkiv och s\u00f6kresultat varje inl\u00e4gg i en slinga p\u00e5 samma s\u00e4tt. Det \u00e4r d\u00e4rf\u00f6r en mycket bra id\u00e9 att separera postloop-utg\u00e5ngen i en fil. P\u00e5 s\u00e5 s\u00e4tt beh\u00f6ver du inte upprepa det i varje mall.<\/p>\n<p>L\u00e5t oss &quot;konvertera&quot; en del av v\u00e5r befintliga kod till malldelar innan vi b\u00f6rjar g\u00f6ra fler mallar!<\/p>\n<h2>Skapa en post loop mall del<\/h2>\n<p>Skapa en ny tom fil i v\u00e5r temamapp; ringde <code>content-loop.php<\/code>. Du kan namnge malldelarna vad du vill. Men du kan inte namnge dem p\u00e5 samma s\u00e4tt som n\u00e5gon av <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress definierade mallar<\/a>. I v\u00e5r <code>index.php<\/code>, lokalisera allt du har inuti \u00f6glan, klipp ut det och klistra in det <code>content-loop.php<\/code>.<\/p>\n<p>Inuti den nu tomma slingan i <code>index.php<\/code>, anv\u00e4nd funktionsanropet <code>get_template_part()<\/code>och definiera din malldelfil som parameter (utan <code>.php<\/code>till\u00e4gget). S\u00e5 h\u00e4r ska det se ut i b\u00e5da filerna:<\/p>\n<pre><code>...\n    while (have_posts()): the_post(); \n        get_template_part('content-loop');\n    endwhile;\n    the_posts_pagination();\n...<\/code><\/pre>\n<pre><code>&lt;article &lt;?php post_class(); ?&gt;&gt;\n    &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?&gt;\n    &lt;?php the_excerpt(); ?&gt;\n    &lt;?php the_category(); ?&gt;\n&lt;\/article&gt;<\/code><\/pre>\n<p>Om du uppdaterar din f\u00f6rstasida b\u00f6r du absolut inte se n\u00e5gon skillnad.<\/p>\n<p>Bra! Nu n\u00e4r v\u00e5r <code>index.php<\/code>\u00e4r snygg och ren kan vi anv\u00e4nda den som bas f\u00f6r att kopiera till fler mallar. Nedan kommer jag att g\u00e5 igenom hur du l\u00e4gger till kategorimall och s\u00f6kresultatmall, men jag uppmuntrar dig att skapa fler mallar f\u00f6r mer kontroll \u00f6ver designen av ditt tema.<\/p>\n<h2>L\u00e4gga till en kategorimall<\/h2>\n<p>Om du h\u00e4nvisar tillbaka till <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPresss hierarki av mallar<\/a> kan du se att f\u00f6r inl\u00e4ggskategorier kommer WordPress att leta efter mallen som heter <code>category.php<\/code>. Vi skapar den f\u00f6rst.<\/p>\n<p>G\u00f6r en kopia av filen i din temamapp <code>index.php<\/code>och byt namn p\u00e5 kopian <code>category.php<\/code>.<\/p>\n<p>Och det \u00e4r allt. Du \u00e4r i princip klar&#8230;!<\/p>\n<p>Vi kommer dock att l\u00e4gga till en detalj; vi vill visa en rubrik som talar om f\u00f6r oss att vi \u00e4r p\u00e5 en kategorisida f\u00f6r inl\u00e4gg i kategori som heter X. WordPress har en funktion f\u00f6r detta som du kan anv\u00e4nda i alla arkivmallar (kategori, taggar, datumarkiv), <code>the_archive_title<\/code>. L\u00e5t oss l\u00e4gga till det f\u00f6re loopen, inuti en <code>&lt;h1&gt;<\/code>tagg.<\/p>\n<pre><code>&lt;?php get_header(); ?&gt;\n&lt;h1&gt;&lt;?php the_archive_title(); ?&gt;&lt;\/h1&gt;\n&lt;?php\nif (have_posts()) {\n...<\/code><\/pre>\n<p>Om du tittar p\u00e5 en inl\u00e4ggskategorisida b\u00f6r du se n\u00e5got liknande detta, med arkivtiteln &quot;Kategori: &quot;. PS: Om du vill \u00e4ndra utdata f\u00f6r arkivtiteln (till exempel inte visa &quot;Kategori: &quot;), kan du l\u00e4gga till ett filter f\u00f6r <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/get_the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_the_archive_title<\/a>. Dokumentationssidan visar ett bra exempel p\u00e5 hur man g\u00f6r just det.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7239f1b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7239f1b.png\" alt=\"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 10: L\u00e4gga till fler mallar\" ><\/a><\/p>\n<p>N\u00e5v\u00e4l, det var l\u00e4tt! L\u00e5t oss hantera s\u00f6kresultatmallen h\u00e4rn\u00e4st.<\/p>\n<h2>L\u00e4gga till en s\u00f6kresultatmall<\/h2>\n<p>Proceduren \u00e4r exakt densamma som vi gjorde f\u00f6r kategorimallar. Den h\u00e4r g\u00e5ngen g\u00f6r du en kopia av <code>category.php<\/code>och byter namn p\u00e5 kopian till <code>search.php<\/code>.<\/p>\n<p>Allt vi beh\u00f6ver fixa \u00e4r titeln. Arkivtitelfunktionen vi anv\u00e4nde i kategorimall fungerar tyv\u00e4rr inte s\u00e4rskilt bra f\u00f6r s\u00f6kresultatmallar. Faktum \u00e4r att det inte finns n\u00e5gon enkel funktion i WordPress som matar ut en titel \u00e5t oss.<\/p>\n<p>Men vi kan enkelt g\u00f6ra en sj\u00e4lva, och samtidigt ska jag visa hur man matar ut en dynamisk variabel och \u00e4nd\u00e5 h\u00e5ller texten \u00f6vers\u00e4ttbar.<\/p>\n<p>PHP har tv\u00e5 anv\u00e4ndbara funktioner, <code>printf()<\/code>och <code>sprintf()<\/code>. De g\u00f6r samma sak, f\u00f6rutom att <code>printf<\/code>de matar ut det (som eko) och <code>sprintf<\/code>returnerar det, s\u00e5 att vi kan lagra det i en variabel. Efter att vi satt texten som f\u00f6rsta parametrar kan vi l\u00e4gga till dynamiska variabler som argument, som sedan injiceras i texten. Inuti dessa kan vi anv\u00e4nda de \u00f6vers\u00e4ttbara textfunktionerna <code>__()<\/code>och <code>_e()<\/code>. Jag rekommenderar att du l\u00e4ser lite om hur <a href=\"https:\/\/www.php.net\/manual\/en\/function.printf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">printf<\/a> eller <a href=\"https:\/\/www.php.net\/manual\/en\/function.sprintf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sprintf<\/a> fungerar, d\u00e5 jag inte kommer att g\u00e5 in n\u00e4rmare p\u00e5 det h\u00e4r.<\/p>\n<p>WordPress erbjuder en enkel funktion f\u00f6r att f\u00e5 str\u00e4ngen som s\u00f6ktes; <code>get_search_query()<\/code>. Med det sagt, l\u00e5t oss ers\u00e4tta arkivtitelfunktionen med denna;<\/p>\n<pre><code>&lt;h1&gt;&lt;?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?&gt;&lt;\/h1&gt;<\/code><\/pre>\n<p>Vad ovanst\u00e5ende kod g\u00f6r \u00e4r inifr\u00e5n och ut; definiera en \u00f6vers\u00e4ttningsbar text &quot;S\u00f6k: %s&quot; som s\u00e4tts inuti en <code>printf<\/code>som ekar str\u00e4ngen, och ers\u00e4tter str\u00e4ngkonstanten (<code>%s<\/code>) med det andra argumentet; vilket \u00e4r <code>get_search_query()<\/code>.<\/p>\n<p>Som ett resultat f\u00e5r vi en titel som denna n\u00e4r vi s\u00f6ker efter &quot;er&quot;:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" alt=\"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 10: L\u00e4gga till fler mallar\" ><\/a><\/p>\n<p>Trevlig! \u00c4nnu en mall klar. N\u00e4r det g\u00e4ller den sista delen av den h\u00e4r lektionen kommer vi att g\u00e5 in i v\u00e5r mall f\u00f6r ett inl\u00e4gg och l\u00e4gga till n\u00e5got v\u00e4ldigt vanligt i WordPress; kommentarmallen.<\/p>\n<h2>L\u00e4gga till en kommentarsmall till enstaka inl\u00e4gg<\/h2>\n<p>I v\u00e5r <code>single.php<\/code>, efter inl\u00e4ggsartikeln, vill vi visa kommentarer. Kommentarerna ska mata ut en lista \u00f6ver tidigare kommentarer och ett formul\u00e4r f\u00f6r att l\u00e4gga till en ny kommentar.<\/p>\n<p>Kommentarsmall \u00e4r en mallfil som du kan l\u00e4gga till i ditt tema, men WordPress har faktiskt sin egen standardkommentarmall. Om du inte har det <code>comments.php<\/code>i ditt tema kommer WordPresss standardutdata f\u00f6r det att returneras om du beg\u00e4r kommentarmallen. Detta \u00e4r vad vi kommer att g\u00f6ra i denna handledning.<\/p>\n<p>Vi vill bara kalla kommentarsmallen om inl\u00e4gget har aktiverat kommentarer (det \u00e4r en inst\u00e4llning f\u00f6r varje inl\u00e4gg och en global webbplatsinst\u00e4llning). S\u00e5 vi l\u00e4gger till en if-kontroll f\u00f6r att kontrollera om kommentarerna \u00e4r till\u00e5tna med <code>comments_open()<\/code>och om den returnerar sant beg\u00e4r vi kommentarsmall med <code>comments_template()<\/code>. T\u00e4nk p\u00e5 att allt detta m\u00e5ste ske inom loopen. Jag lade till det efter slutet av <code>&lt;\/article&gt;<\/code>, precis innan slingan st\u00e4ngs.<\/p>\n<pre><code>...\n        &lt;p&gt;&lt;?php _e('Author', 'wptutorial'); ?&gt;: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n    &lt;\/article&gt;\n    &lt;?php \n    if (comments_open()) {\n        comments_template();\n    }\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;&lt;?php _e('No posts, sorry.', 'wptutorial'); ?&gt;&lt;\/p&gt;&lt;?php\n...<\/code><\/pre>\n<p>Om du bes\u00f6ker ett enda inl\u00e4gg som har till\u00e5tit kommentarer (jag lade till en kommentar bara f\u00f6r att visa dig listan med kommentarer ocks\u00e5); du f\u00e5r den h\u00e4r vackra (ahem) standardkommentarmallen:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" alt=\"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 10: L\u00e4gga till fler mallar\" ><\/a><\/p>\n<p>Nu kan du (och det uppmuntras ofta) skapa ditt eget <code>comments.php<\/code>i ditt tema, vilket kommer att \u00e5sidos\u00e4tta WordPresss standardutg\u00e5ng. Jag g\u00e5r dock inte igenom att skapa en kommentarsmall i den h\u00e4r handledningen, eftersom WordPresss standardutg\u00e5ng fungerar bra s\u00e5 l\u00e4nge du stilar den ordentligt. Om du inspekterar HTML-koden finns det massor av omslag och klasser tillg\u00e4ngliga.<\/p>\n<h2>Dokumentation om anv\u00e4nda metoder<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">the_archive_title<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_search_query\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_search_query<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_open\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">comments_open<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_template\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">comments_template<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r lektionen kommer vi att l\u00e4ra oss om malldelar och skapa fler mallar till v\u00e5rt WordPress-tema. Vi kommer ocks\u00e5 att l\u00e4gga till kommentarsmall i enstaka inl\u00e4ggsvy.<\/p>\n","protected":false},"author":1,"featured_media":223663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[932,901,724,838,848,901,922,1110,922,838,932,848,724,868,868],"tags":[1173],"class_list":["post-233888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aemnen","category-koda","category-utvecklaren","category-guide-foer-nyboerjare","category-handledningar","category-oevrig","category-n-a","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233888"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233888\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223663"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}