{"id":230034,"date":"2022-11-16T10:51:00","date_gmt":"2022-11-16T07:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230034"},"modified":"2022-11-16T19:28:21","modified_gmt":"2022-11-16T16:28:21","slug":"wordpress-mallit-aloittelijoille-html-kutsu-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-mallit-aloittelijoille-html-kutsu-php\/","title":{"rendered":"WordPress-mallit aloittelijoille: HTML-kutsu PHP"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-mallit-aloittelijoille-miten-se-on\/\" title=\"Eilen\">Eilen<\/a> hahmottelin, kuinka monet meist\u00e4 ovat todenn\u00e4k\u00f6isesti tottuneet ty\u00f6skentelem\u00e4\u00e4n WordPress-mallien kanssa.<\/p>\n<p>Vaikka huolenaiheiden erottelu CSS:n ja JavaScriptin kanssa on vakaata, mallit ovat ongelmallisia aina, kun merkint\u00f6ihimme on sekoitettu paljon PHP:t\u00e4.<\/p>\n<p>Selvyyden vuoksi emme voi olla sis\u00e4llytt\u00e4m\u00e4tt\u00e4 mallitunnisteita, koska se on WordPressin ja yleisten PHP-pohjaisten sis\u00e4ll\u00f6nhallintaj\u00e4rjestelmien toimintatapa.<\/p>\n<p>Ongelma ilmenee aina, kun k\u00e4yt\u00e4mme malleja, jotka sis\u00e4lt\u00e4v\u00e4t koodia, joka tekee monimutkaisempia kutsuja eri sovellusliittymille. Vaikka esitin t\u00e4m\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query\u00e4<\/a> (ja aion tehd\u00e4 niin edelleen), se ei ole vain t\u00e4m\u00e4 kysely.<\/p>\n<p>Joka tapauksessa, mit\u00e4 meid\u00e4n pit\u00e4isi tehd\u00e4 t\u00e4m\u00e4n kanssa?<\/p>\n<h2>WordPress-mallit: Kun HTML kutsuu PHP:t\u00e4<\/h2>\n<p>Ensinn\u00e4kin on t\u00e4rke\u00e4\u00e4 pohtia, miksi niin paljon PHP:n ja merkinn\u00e4n sekoittaminen on huono idea.<\/p>\n<p>On helppo sanoa, ett\u00e4 koodin pit\u00e4minen <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">KUIVANA<\/a> on vaikeampaa (ja siin\u00e4 on totuus), mutta ent\u00e4 jos aiomme k\u00e4ytt\u00e4\u00e4 vain yht\u00e4 kysely\u00e4 tai yht\u00e4 koodilohkoa kerran? Onko KUIVANA oleminen todella niin t\u00e4rke\u00e4\u00e4?<\/p>\n<p>Selvyyden vuoksi kyll\u00e4, mielest\u00e4ni se on t\u00e4rke\u00e4\u00e4 koodin pit\u00e4misen kuivana, mutta jos aiomme k\u00e4ytt\u00e4\u00e4 puhelua vain kerran, uskon silti, ett\u00e4 sill\u00e4 on merkityst\u00e4, jos ei mist\u00e4\u00e4n muusta syyst\u00e4 kuin pit\u00e4\u00e4 mallikoodi yht\u00e4 puhtaana kuin mahdollista.<\/p>\n<p>Ajattele asiaa n\u00e4in: Aina kun haluamme n\u00e4ytt\u00e4\u00e4 otsikon, sis\u00e4ll\u00f6n ja viestin kirjoittajan, tarvitsemme vain kolme toimintoa:<\/p>\n<ul>\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:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4lt\u00f6();<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_author_meta\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">the_author_meta();<\/a><\/li>\n<\/ul>\n<p>Joten kuvittele <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seuraavan koodin<\/a> mukauttamista (jota tarkastelimme edellisess\u00e4 viestiss\u00e4):<\/p>\n<pre><code>&lt;div id=\"content-container\"&gt;\n\n  &lt;p&gt;\n    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! \n    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that \n    thing away! You're going to get us all killed.\n  &lt;\/p&gt;\n\n  &lt;h2&gt;List of Post Titles For Acme Post Type&lt;\/h2&gt;\n  &lt;?php\n  $args = array(\n    'post_status'    =&gt; 'publish',\n    'post_type'      =&gt; 'acme',\n    'posts_per_page' =&gt; '10'\n  );\n  $custom_query = new WP_Query( $args );\n\n  if ($custom_query-&gt;have_posts()) {\n    echo '&lt;ul&gt;';\n    while ($custom_query-&gt;have_posts()) {\n      $custom_query-&gt;the_post();\n      echo '&lt;li&gt;'. get_the_title(). '&lt;\/li&gt;';\n    }\n    echo '&lt;\/ul&gt;';\n    wp_reset_postdata();\n  }\n  ?&gt;\n\n  &lt;p&gt;\n    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not \n    going to take them long to figure out what happened to us. It could be worst... It's worst. \n    There's something alive in here! That's your imagination. Something just moves past my leg! \n    Look! Did you see that? What? Help!\n  &lt;\/p&gt;\n\n&lt;\/div&gt;&lt;!-- #content-container --&gt;<\/code><\/pre>\n<p>Jos haluat n\u00e4ytt\u00e4\u00e4 jotain t\u00e4lt\u00e4:<\/p>\n<pre><code>&lt;div id=\"content-container\"&gt;\n\n  &lt;p&gt;\n    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! \n    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that \n    thing away! You're going to get us all killed.\n  &lt;\/p&gt;\n\n  &lt;h2&gt;List of Post Titles For Acme Post Type&lt;\/h2&gt;\n  &lt;?php acme_get_titles(); ?&gt;\n\n  &lt;p&gt;\n    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not \n    going to take them long to figure out what happened to us. It could be worst... It's worst. \n    There's something alive in here! That's your imagination. Something just moves past my leg! \n    Look! Did you see that? What? Help!\n  &lt;\/p&gt;\n\n&lt;\/div&gt;&lt;!-- #content-container --&gt;<\/code><\/pre>\n<p>Paljon siistimp\u00e4\u00e4, eik\u00f6? Mutta n\u00e4kem\u00e4si on muutakin kuin t\u00e4m\u00e4. Erityisesti, jos aiomme ty\u00f6skennell\u00e4 HTML:n kanssa kulissien takana, meid\u00e4n on varmistettava, ett\u00e4 desinfioimme sen <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-02-acme-get-titles-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">oikein<\/a> k\u00e4ytt\u00e4m\u00e4ll\u00e4 jotakin, kuten <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_kses\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_kses<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Runs a custom query to get the most recent ten published articles of the\n * acme post type and then prints a sanitized list of the the titles.\n *\/\nfunction acme_get_titles()\n{\n\n  $args = array(\n    'post_status'    =&gt; 'publish',\n    'post_type'      =&gt; 'acme',\n    'posts_per_page' =&gt; '10'\n  );\n  $custom_query = new WP_Query( $args );\n\n  if ($custom_query-&gt;have_posts()) {\n    $html = '&lt;ul&gt;';\n    while ($custom_query-&gt;have_posts()) {\n      $custom_query-&gt;the_post();\n      $html .= '&lt;li&gt;'. get_the_title(). '&lt;\/li&gt;';\n    }\n    $html .= '&lt;\/ul&gt;';\n    wp_reset_postdata();\n  }\n\n  echo _acme_sanitize_titles($html);\n}\n\n\/**\n * Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.\n *\n * @param string $html The HTML to sanitize.\n *\/\nfunction _acme_sanitize_titles($html) {\n\n  if(empty($html)) {\n    echo $html;\n  }\n\n  echo wp_kses(\n    $html,\n    array(\n      'ul' =&gt; array(),\n      'li' =&gt; array(),\n    );\n  );\n}<\/code><\/pre>\n<p>Jotkin kehitt\u00e4j\u00e4t pit\u00e4v\u00e4t nyt ajatusta HTML:n toistamisesta PHP:st\u00e4 WordPress-malliin. Ja t\u00e4m\u00e4 ei ole turhaa.<\/p>\n<p>T\u00e4m\u00e4n sarjan aikana on kuitenkin teht\u00e4v\u00e4 tasapainoilu: Kyse on siit\u00e4, miten ihmiset usein esitt\u00e4v\u00e4t tietoa, ja sitten siivotaan sit\u00e4 hieman.<\/p>\n<p>Jos haluat vied\u00e4 t\u00e4t\u00e4 hieman pidemm\u00e4lle, on mahdollista \u2013 eik\u00e4 ollenkaan huono idea \u2013 erottaa WP_Query-funktio viel\u00e4 enemm\u00e4n k\u00e4ytt\u00e4m\u00e4\u00e4n <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part -funktiota<\/a>. T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 hieman puhtaampaa koodia, mutta vaatii my\u00f6s, ett\u00e4 tarkastelemme t\u00e4t\u00e4 toimintoa perusteellisesti.<\/p>\n<p>Ja se on jotain, mit\u00e4 en ole kiinnostunut tekem\u00e4\u00e4n t\u00e4ss\u00e4 sarjassa.<\/p>\n<h2>Kuinka meid\u00e4n pit\u00e4isi visualisoida t\u00e4m\u00e4?<\/h2>\n<p>Mit\u00e4 tulee malliin, voimme k\u00e4sitt\u00e4\u00e4 t\u00e4m\u00e4n parilla eri tavalla.<\/p>\n<ol>\n<li>Joissakin mallikieliss\u00e4 on hy\u00f6dyllist\u00e4 ajatella, ett\u00e4 PHP sy\u00f6tt\u00e4\u00e4 tiedot malliin,<\/li>\n<li>Yll\u00e4 olevassa esimerkiss\u00e4 on hy\u00f6dyllist\u00e4 ajatella mallitiedostoa, joka pyyt\u00e4\u00e4 tietoja PHP-skriptist\u00e4.<\/li>\n<\/ol>\n<p>Joten yll\u00e4 olevassa esimerkiss\u00e4 meill\u00e4 on funktio, joka sijaitsee esimerkiksi tiedostossa <strong>functions.php<\/strong> ja sit\u00e4 kutsuva mallitiedosto:<\/p>\n<p>K\u00e4yd\u00e4 j\u00e4rkeen? Mutta miten t\u00e4m\u00e4 saavutetaan \u2013 tuon yhden funktiokutsun takana olevan koodin suhteen \u2013 on julkaisun sis\u00e4lt\u00f6\u00e4.<\/p>\n<p>Ja sit\u00e4 aion tarkastella seuraavassa postauksessa.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ymm\u00e4rt\u00e4minen, kuinka WordPress-mallit kutsuvat PHP-tiedostoja, voi auttaa meit\u00e4 kirjoittamaan DRY-koodia, mutta my\u00f6s koodia, joka on helpompi lukea ja yksinkertaisempi yll\u00e4pit\u00e4\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,917,834,843,864],"tags":[1166],"class_list":["post-230034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-muut","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230034","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=230034"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}