{"id":233974,"date":"2023-02-26T18:07:00","date_gmt":"2023-02-26T15:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233974"},"modified":"2022-11-11T13:30:39","modified_gmt":"2022-11-11T10:30:39","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-4-post-loop","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-4-post-loop\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 4: Post Loop"},"content":{"rendered":"\n<p>T\u00e4ll\u00e4 WordPress-teeman opetusohjelman aloittelijoille oppitunnilla k\u00e4sittelemme yksityiskohtaisesti WordPressin &quot;postisilmukkaa&quot;; mit\u00e4 se on, milt\u00e4 se n\u00e4ytt\u00e4\u00e4, miksi k\u00e4yt\u00e4mme sit\u00e4 ja miten p\u00e4\u00e4semme k\u00e4siksi viesteihin. Sen j\u00e4lkeen ryhdymme toteuttamaan silmukka teemaamme.<\/p>\n<h2>Postitussilmukka<\/h2>\n<p>Jos olet perehtynyt PHP:hen, saatat huomata, ett\u00e4 &quot;silmukka&quot; on tekniikka, jolla k\u00e4yd\u00e4\u00e4n l\u00e4pi taulukon tai objektin jokainen elementti <code>for<\/code>, <code>foreach<\/code>tai <code>while<\/code>. WordPressin silmukka toimii juuri n\u00e4in. Mutta k\u00e4yt\u00e4mme WordPressin omia toimintoja silmukassa saadaksemme lis\u00e4etuja ja yksinkertaistuksia.<\/p>\n<p>WordPress on aina tiedustellut viestej\u00e4 puolestasi &#8211; riippuen siit\u00e4, mill\u00e4 sivulla olet. Jos olet luokkasivulla, WordPress on jo kysellyt kaikki t\u00e4h\u00e4n luokkaan liittyv\u00e4t viestit. Ja jos olet yhdell\u00e4 viestisivulla, WordPress on jo noutanut kyseisen viestin puolestasi.<\/p>\n<p>Kun haluamme p\u00e4\u00e4st\u00e4 k\u00e4siksi viesteihin, joita WordPress on kysellyt malleissamme, lis\u00e4\u00e4mme silmukan. Silmukan sis\u00e4ll\u00e4 meill\u00e4 on p\u00e4\u00e4sy jokaiseen viestiin. Ja jokaisen postauksen kohdalla p\u00e4\u00e4t\u00e4mme, mit\u00e4 n\u00e4yt\u00e4mme tai teemme.<\/p>\n<p>Huomaa: Jopa yksitt\u00e4iseen viestiin tai yhden sivun malleihin lis\u00e4\u00e4t silmukan, vaikka tied\u00e4mme, ett\u00e4 se sis\u00e4lt\u00e4\u00e4 vain yhden viestin! Silmukka kulkee vain kerran.<\/p>\n<p>T\u00e4ss\u00e4 on WordPress-silmukka kaikessa komeudessaan:<\/p>\n<pre><code>while (have_posts()): the_post();\n    \/\/ Access to each post here\nendwhile;<\/code><\/pre>\n<p>T\u00e4m\u00e4 koodinp\u00e4tk\u00e4 tekee kaksi asiaa. Osa <code>while<\/code>(mukaan lukien <code>endwhile<\/code>) on silmukkaosa, joka kiert\u00e4\u00e4 niin kauan kuin viestej\u00e4 on j\u00e4ljell\u00e4. Toinen osa on se, <code>the_post()<\/code>joka m\u00e4\u00e4ritt\u00e4\u00e4 yksinkertaistetun ja intuitiivisen p\u00e4\u00e4syn post-objektiin silmukan sis\u00e4ll\u00e4. Opimme siit\u00e4 lis\u00e4\u00e4 my\u00f6hemmin.<\/p>\n<p>On hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 k\u00e4\u00e4ri\u00e4 silmukka shekin sis\u00e4\u00e4n, joka <code>if<\/code>tarkistaa, onko pylv\u00e4it\u00e4, joiden l\u00e4pi silmukka pit\u00e4\u00e4. Sitten voimme my\u00f6s valinnaisesti n\u00e4ytt\u00e4\u00e4 viestin, jos sit\u00e4 ei ollut. Viestikysely voi olla tyhj\u00e4, jos siirryt tyhj\u00e4\u00e4n kategoria-arkistoon tai yrit\u00e4t etsi\u00e4 jotain, jolla ei ole osumia. T\u00e4m\u00e4 on parempi versio silmukasta:<\/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>Tutustu t\u00e4h\u00e4n koodinp\u00e4tk\u00e4\u00e4n, kun toistat t\u00e4m\u00e4n aina, kun haluat k\u00e4ytt\u00e4\u00e4 viestej\u00e4! Toteutetaan silmukka teemaamme.<\/p>\n<h2>Silmukan toteuttaminen teemassamme<\/h2>\n<p>Lis\u00e4t\u00e4\u00e4n silmukka joukkoomme <code>index.php<\/code>ja korvataan valeteksti.<\/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>Lis\u00e4sin funktion nimelt\u00e4 <code>the_title()<\/code>silmukan sis\u00e4\u00e4n, joka toistaa viestin otsikon. T\u00e4m\u00e4 on vain sit\u00e4, ett\u00e4 voimme n\u00e4hd\u00e4 silmukan k\u00e4yt\u00e4nn\u00f6ss\u00e4. \u00c4l\u00e4 huoli, <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\">seuraavassa vaiheessa<\/a> opimme p\u00e4\u00e4sem\u00e4\u00e4n kaikkiin todellisiin julkaisutietoihin.<\/p>\n<p>Katsotaan nyt, mit\u00e4 WordPressiss\u00e4 tapahtuu. P\u00e4ivit\u00e4 etusivu. Asetuksistasi ja sis\u00e4ll\u00f6st\u00e4si riippuen sinun pit\u00e4isi n\u00e4hd\u00e4 joitain nimikkeit\u00e4. WordPressiss\u00e4ni on oletusviesti &quot;Hei maailma!&quot; ja toinen luomani viesti nimelt\u00e4 &quot;T\u00e4m\u00e4 on toinen viesti&quot;. T\u00e4m\u00e4n saan etusivulle:<\/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-teeman opetusohjelma aloittelijoille \u2013 Osa 4: Post Loop\" ><\/a><\/p>\n<p>Jos yrit\u00e4t vierailla yhdell\u00e4 viestisivulla, sinun pit\u00e4isi n\u00e4hd\u00e4 vain yksi otsikko, katsomasi viestin otsikko. Kiva!<\/p>\n<h3>Uteliaisille\u2026<\/h3>\n<p>Jos olet utelias siit\u00e4, mit\u00e4 silmukka kiert\u00e4\u00e4 ja mit\u00e4 parametreja WordPress k\u00e4ytti t\u00e4ss\u00e4 kyselyss\u00e4, voit tarkistaa sen. Globaalia muuttujaa, johon silmukka viittaa, kutsutaan <code>$wp_query<\/code>. Sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 se maailmanlaajuisesti, jotta voit k\u00e4ytt\u00e4\u00e4 sit\u00e4. Yrit\u00e4 <code>var_dump()<\/code>tulostaa sen koko sis\u00e4lt\u00f6. Silmukka kiert\u00e4\u00e4 <code>$wp_query-&gt;posts<\/code>kiinteist\u00f6n l\u00e4pi.<\/p>\n<pre><code>global $wp_query;\nvar_dump($wp_query);<\/code><\/pre>\n<p>Lis\u00e4t\u00e4\u00e4n yksi t\u00e4rke\u00e4 yksityiskohta silmukkaan <code>index.php<\/code>; tapa, jolla k\u00e4ytt\u00e4j\u00e4 voi siirty\u00e4 seuraavalle ja edelliselle viestisivulle.<\/p>\n<h2>Lis\u00e4t\u00e4\u00e4n viestisilmukan navigointi<\/h2>\n<p>Muista, ett\u00e4 silmukka noutaa WordPress-asetuksissasi &gt; Lukeminen m\u00e4\u00e4ritetyn m\u00e4\u00e4r\u00e4n viestej\u00e4 aina, kun olet sivulla, joka n\u00e4ytt\u00e4\u00e4 useita viestej\u00e4. Jos silmukassa on saatavilla enemm\u00e4n viestej\u00e4 kuin t\u00e4ss\u00e4 m\u00e4\u00e4ritetty m\u00e4\u00e4r\u00e4, tarvitsemme tavan navigoida sivujen v\u00e4lill\u00e4. T\u00e4t\u00e4 varten voimme k\u00e4ytt\u00e4\u00e4 funktiota <code>the_posts_pagination()<\/code>.<\/p>\n<p>T\u00e4m\u00e4 toiminto hyv\u00e4ksyy <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_posts_pagination\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">joitain parametreja<\/a> mukauttaakseen tulostensa. Voit m\u00e4\u00e4ritt\u00e4\u00e4 sivum\u00e4\u00e4r\u00e4n ellipsien v\u00e4liss\u00e4 (kun sivuja on paljon). Voit my\u00f6s m\u00e4\u00e4ritt\u00e4\u00e4, mit\u00e4 tekstit &quot;Edellinen&quot; ja &quot;Seuraava&quot; -sivuille pit\u00e4isi olla. Lis\u00e4\u00e4n sen ilman parametreja tehd\u00e4kseni oletusasetukset, mutta voit s\u00e4\u00e4t\u00e4\u00e4 sit\u00e4, jos haluat.<\/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>T\u00e4m\u00e4 toiminto ei tulosta mit\u00e4\u00e4n, jos viestej\u00e4 on v\u00e4hemm\u00e4n tai yht\u00e4 suuri kuin viestien m\u00e4\u00e4r\u00e4 sivuasetusta kohden. Joten \u00e4l\u00e4 huoli, jos uskot olleen sen v\u00e4\u00e4rin, koska et n\u00e4e tulostetta. Kun sivulla on enemm\u00e4n viestej\u00e4 kuin viestej\u00e4, t\u00e4m\u00e4 toiminto tulostaa div:n, otsikon n\u00e4yt\u00f6nlukijoita varten (jotka yleens\u00e4 piilotat CSS:ll\u00e4) ja joukon sivutuslinkkej\u00e4.<\/p>\n<p>Nyt kun tied\u00e4mme, miten p\u00e4\u00e4st\u00e4\u00e4n k\u00e4siksi kaikkiin WordPressin meille l\u00f6yt\u00e4miin julkaisuihin, seuraava askel on oppia n\u00e4ytt\u00e4m\u00e4\u00e4n, mit\u00e4 haluamme jokaisesta viestist\u00e4. silmukan sis\u00e4ll\u00e4.<\/p>\n<h2>Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/have_posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">have_posts<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Posti<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_title\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">otsikko<\/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_pagination<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 WordPress-teemassa aloittelijoille k\u00e4yd\u00e4\u00e4n yksityiskohtaisesti WordPressin post-silmukasta; mit\u00e4 se on, miten se toimii ja miksi k\u00e4yt\u00e4mme sit\u00e4.<\/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":[927,895,719,719,895,917,917,1110,834,843,834,927,843,864,864],"tags":[1166],"class_list":["post-233974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aiheita","category-koodi","category-kehittaejae","category-muut","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233974"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233974\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223872"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}