{"id":233895,"date":"2023-02-26T18:11:00","date_gmt":"2023-02-26T15:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233895"},"modified":"2022-11-11T13:02:50","modified_gmt":"2022-11-11T10:02:50","slug":"wordpress-theme-tutorial-foer-nyboerjare-del-4-the-post-loop","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-theme-tutorial-foer-nyboerjare-del-4-the-post-loop\/","title":{"rendered":"WordPress Theme Tutorial f\u00f6r nyb\u00f6rjare \u2013 Del 4: The Post Loop"},"content":{"rendered":"\n<p>I den h\u00e4r lektionen av WordPress-tematens handledning f\u00f6r nyb\u00f6rjare kommer vi att g\u00e5 in i detalj om &quot;inl\u00e4ggsslingan&quot; i WordPress; vad det \u00e4r, hur det ser ut, varf\u00f6r vi anv\u00e4nder det och hur man f\u00e5r \u00e5tkomst till inl\u00e4gg. Vi kommer sedan att implementera slinga i v\u00e5rt tema.<\/p>\n<h2>Postslingan<\/h2>\n<p>Om du \u00e4r bekant med PHP kanske du k\u00e4nner igen att en &quot;loop&quot; \u00e4r en teknik f\u00f6r att g\u00e5 igenom varje element i en array eller ett objekt med <code>for<\/code>, <code>foreach<\/code>eller <code>while<\/code>. Slingan i WordPress fungerar precis s\u00e5. Men vi kommer att anv\u00e4nda WordPress egna funktioner f\u00f6r att loopa f\u00f6r att f\u00e5 ytterligare f\u00f6rdelar och f\u00f6renklingar.<\/p>\n<p>WordPress har alltid fr\u00e5gat efter inl\u00e4ggen \u00e5t dig \u2013 beroende p\u00e5 vilken sida du \u00e4r p\u00e5. Om du \u00e4r p\u00e5 en kategorisida har WordPress redan fr\u00e5gat efter alla inl\u00e4gg som \u00e4r associerade med denna kategori, och om du \u00e4r p\u00e5 en enda inl\u00e4ggssida har WordPress redan h\u00e4mtat det inl\u00e4gget \u00e5t dig.<\/p>\n<p>N\u00e4r vi vill komma \u00e5t inl\u00e4ggen WordPress har fr\u00e5gat efter i v\u00e5ra mallar l\u00e4gger vi till loopen. Inne i slingan har vi tillg\u00e5ng till varje inl\u00e4gg. Och f\u00f6r varje inl\u00e4gg best\u00e4mmer vi vad vi ska visa eller g\u00f6ra.<\/p>\n<p>Obs: \u00c4ven i mallar f\u00f6r ett inl\u00e4gg eller en sida kommer du att l\u00e4gga till en loop, \u00e4ven om vi vet att den bara inneh\u00e5ller ett inl\u00e4gg! Slingan g\u00e5r helt enkelt bara en g\u00e5ng.<\/p>\n<p>H\u00e4r \u00e4r WordPress-slingan i all \u00e4ra:<\/p>\n<pre><code>while (have_posts()): the_post();\n    \/\/ Access to each post here\nendwhile;<\/code><\/pre>\n<p>Den h\u00e4r kodbiten g\u00f6r tv\u00e5 saker. Delen <code>while<\/code>(inklusive <code>endwhile<\/code>) \u00e4r den looping delen som kommer att loopa hur l\u00e5nga det finns n\u00e5gra inl\u00e4gg kvar. Den andra delen \u00e4r den <code>the_post()<\/code>som skapar f\u00f6renklad och intuitiv \u00e5tkomst till postobjektet inuti slingan. Vi kommer att l\u00e4ra oss mer om det senare.<\/p>\n<p>Det \u00e4r bra att linda \u00f6glan i en <code>if<\/code>check som kontrollerar om det faktiskt finns n\u00e5gra stolpar att g\u00e5 igenom. D\u00e5 kan vi ocks\u00e5 valfritt visa ett meddelande om det inte fanns. Inl\u00e4ggsfr\u00e5gan kan vara tom om du g\u00e5r till ett tomt kategoriarkiv eller f\u00f6rs\u00f6ker s\u00f6ka efter n\u00e5got som inte har n\u00e5gra tr\u00e4ffar. Det h\u00e4r \u00e4r en b\u00e4ttre version av slingan:<\/p>\n<pre><code>if (have_posts()) {\n    while (have_posts()): the_post();\n        \/\/ Access to each post here\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;No posts, sorry.&lt;\/p&gt;&lt;?php\n}<\/code><\/pre>\n<p>Bekanta dig med denna kodbit eftersom du kommer att upprepa detta n\u00e4r du vill komma \u00e5t inl\u00e4gg! L\u00e5t oss implementera loopen i v\u00e5rt tema.<\/p>\n<h2>Implementera loopen i v\u00e5rt tema<\/h2>\n<p>L\u00e5t oss l\u00e4gga till slingan i v\u00e5r <code>index.php<\/code>, ers\u00e4tter dummytexten.<\/p>\n<pre><code>&lt;?php get_header(); ?&gt;\n&lt;?php \nif (have_posts()) {\n    while (have_posts()): the_post();\n        the_title();\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;No posts, sorry.&lt;\/p&gt;&lt;?php\n}\n?&gt;\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Jag lade till en funktion som heter <code>the_title()<\/code>inuti loopen som ekar inl\u00e4ggets titel. Detta \u00e4r bara f\u00f6r att vi kan se loopen i praktiken. Oroa dig inte, vi kommer i <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-5-accessing-post-information\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">n\u00e4sta steg<\/a> att l\u00e4ra oss allt om att komma \u00e5t all faktisk inl\u00e4ggsinformation.<\/p>\n<p>L\u00e5t oss se vad som h\u00e4nder i WordPress nu. Uppdatera framsidan. Beroende p\u00e5 dina inst\u00e4llningar och inneh\u00e5ll b\u00f6r du se n\u00e5gra titlar visas. I min WordPress har jag standardinl\u00e4gget &quot;Hello world!&quot; och ett annat inl\u00e4gg jag skapade med titeln &quot;Det h\u00e4r \u00e4r ett annat inl\u00e4gg&quot;. Detta \u00e4r vad jag f\u00e5r p\u00e5 f\u00f6rstasidan:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151614-61e4cd1ab5812.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-151614-61e4cd1ab5812.png\" alt=\"WordPress Theme Tutorial f\u00f6r nyb\u00f6rjare \u2013 Del 4: The Post Loop\" ><\/a><\/p>\n<p>Om du f\u00f6rs\u00f6ker bes\u00f6ka en enskild inl\u00e4ggssida b\u00f6r du bara se en titel, titeln p\u00e5 inl\u00e4gget du tittar p\u00e5. Trevlig!<\/p>\n<h3>F\u00f6r de nyfikna&#8230;<\/h3>\n<p>Om du \u00e4r nyfiken p\u00e5 vad slingan g\u00e5r igenom och vilka parametrar WordPress anv\u00e4nde f\u00f6r den h\u00e4r fr\u00e5gan, kan du kolla in det. Den globala variabeln som slingan refererar till kallas <code>$wp_query<\/code>. Du m\u00e5ste definiera det globalt f\u00f6r att komma \u00e5t det. F\u00f6rs\u00f6k att anv\u00e4nda <code>var_dump()<\/code>f\u00f6r att skriva ut hela inneh\u00e5llet. Slingan g\u00e5r genom <code>$wp_query-&gt;posts<\/code>fastigheten.<\/p>\n<pre><code>global $wp_query;\nvar_dump($wp_query);<\/code><\/pre>\n<p>L\u00e5t oss l\u00e4gga till en viktig detalj till v\u00e5r loop in <code>index.php<\/code>; ett s\u00e4tt f\u00f6r anv\u00e4ndaren att navigera till n\u00e4sta och f\u00f6reg\u00e5ende sida med inl\u00e4gg.<\/p>\n<h2>L\u00e4gger till postloopnavigering<\/h2>\n<p>T\u00e4nk p\u00e5 att slingan kommer att h\u00e4mta antalet inl\u00e4gg som definierats i dina WordPress-inst\u00e4llningar &gt; L\u00e4sning, n\u00e4rhelst du \u00e4r p\u00e5 en sida som visar flera inl\u00e4gg. Om det finns fler inl\u00e4gg tillg\u00e4ngliga i slingan \u00e4n det antal som definieras h\u00e4r, beh\u00f6ver vi ett s\u00e4tt att navigera mellan sidorna. F\u00f6r detta kan vi anv\u00e4nda funktionen <code>the_posts_pagination()<\/code>.<\/p>\n<p>Den h\u00e4r funktionen accepterar <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_posts_pagination\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vissa parametrar<\/a> f\u00f6r att anpassa dess utdata. Du kan definiera antalet sidor mellan ellipserna (n\u00e4r det finns m\u00e5nga sidor). Du kan ocks\u00e5 definiera vad texterna f\u00f6r l\u00e4nkarna f\u00f6r &quot;F\u00f6reg\u00e5ende&quot; och &quot;N\u00e4sta&quot; ska vara. Jag l\u00e4gger till det utan n\u00e5gra parametrar f\u00f6r att g\u00f6ra standardinst\u00e4llningarna, men du kan justera det om du vill.<\/p>\n<pre><code>...\n    while (have_posts()): the_post();\n        the_title();\n    endwhile;\n    the_posts_pagination();\n} else {\n...<\/code><\/pre>\n<p>Den h\u00e4r funktionen ger absolut ingenting om det finns f\u00e4rre eller lika m\u00e5nga inl\u00e4gg som antal inl\u00e4gg per sida. S\u00e5 oroa dig inte om du tror att du har gjort fel eftersom du inte ser n\u00e5gon utdata. N\u00e4r det v\u00e4l finns fler inl\u00e4gg \u00e4n inl\u00e4gg per sida matar den h\u00e4r funktionen ut en div, en rubrik f\u00f6r sk\u00e4rml\u00e4sare (som du vanligtvis d\u00f6ljer med CSS) och ett antal sideringsl\u00e4nkar.<\/p>\n<p>Nu n\u00e4r vi vet hur vi f\u00e5r tillg\u00e5ng till alla inl\u00e4gg som WordPress har hittat \u00e5t oss, \u00e4r n\u00e4sta steg att l\u00e4ra sig hur man visar vad vi vill ha fr\u00e5n varje inl\u00e4gg; inuti slingan.<\/p>\n<h2>Dokumentation om anv\u00e4nda metoder<\/h2>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/have_posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">har_inl\u00e4gg<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">inl\u00e4gget<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_title\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">titeln<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_posts_pagination\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">the_post_pagetion<\/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 detta WordPress-tema f\u00f6r nyb\u00f6rjarlektion kommer vi att g\u00e5 in i detalj om postslingan i WordPress; vad det \u00e4r, hur det fungerar och varf\u00f6r vi anv\u00e4nder det.<\/p>\n","protected":false},"author":1,"featured_media":223872,"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-233895","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\/233895","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=233895"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223872"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}