{"id":229241,"date":"2022-11-16T10:40:00","date_gmt":"2022-11-16T07:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229241"},"modified":"2022-11-16T20:03:22","modified_gmt":"2022-11-16T17:03:22","slug":"wordpress-mallar-foer-nyboerjare-html-calling-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-mallar-foer-nyboerjare-html-calling-php\/","title":{"rendered":"WordPress-mallar f\u00f6r nyb\u00f6rjare: HTML Calling PHP"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-mallar-foer-nyboerjare-hur-det-aer\/\" title=\"Ig\u00e5r\">Ig\u00e5r<\/a> skissade jag p\u00e5 hur man kan f\u00f6rest\u00e4lla sig hur m\u00e5nga av oss som sannolikt \u00e4r vana vid att arbeta med WordPress-mallar.<\/p>\n<p>\u00c4ven om separeringen av problem med CSS och JavaScript \u00e4r solid, \u00e4r mallar problematiska n\u00e4r det finns mycket PHP blandat med v\u00e5r uppm\u00e4rkning.<\/p>\n<p>F\u00f6r att vara tydlig kan vi inte l\u00e5ta bli att inkludera malltaggar eftersom det \u00e4r den typ av hur WordPress och allm\u00e4nna PHP-baserade inneh\u00e5llshanteringssystem fungerar.<\/p>\n<p>Problemet kommer n\u00e4r vi arbetar med mallar som inneh\u00e5ller kod som g\u00f6r mer komplexa anrop till olika API:er. \u00c4ven om jag visade detta med <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a> (och kommer att forts\u00e4tta att g\u00f6ra det), \u00e4r det inte bara den fr\u00e5gan.<\/p>\n<p>Hur som helst, vad ska vi g\u00f6ra med det h\u00e4r?<\/p>\n<h2>WordPress-mallar: N\u00e4r HTML anropar PHP<\/h2>\n<p>F\u00f6rst \u00e4r det viktigt att t\u00e4nka p\u00e5 varf\u00f6r det \u00e4r en d\u00e5lig id\u00e9 att blanda s\u00e5 mycket PHP och markeringar.<\/p>\n<p>Det \u00e4r l\u00e4tt att s\u00e4ga att det g\u00f6r det sv\u00e5rare att h\u00e5lla koden <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">DRY<\/a> (och det \u00e4r sanning i det), men vad h\u00e4nder om vi bara kommer att anv\u00e4nda en enda fr\u00e5ga eller ett enda kodblock en g\u00e5ng? \u00c4r det verkligen s\u00e5 viktigt att vara TORR?<\/p>\n<p>F\u00f6r att vara tydlig, ja, jag tror att det \u00e4r viktigt f\u00f6r att h\u00e5lla koden DRY, men om vi bara ska anv\u00e4nda ett samtal en g\u00e5ng tror jag fortfarande att det spelar roll om det inte \u00e4r av n\u00e5gon annan anledning \u00e4n att h\u00e5lla mallkoden s\u00e5 ren som m\u00f6jlig.<\/p>\n<p>T\u00e4nk p\u00e5 det s\u00e5 h\u00e4r: N\u00e4r vi vill visa titeln, inneh\u00e5llet och inl\u00e4ggets f\u00f6rfattare beh\u00f6ver vi bara anropa tre funktioner:<\/p>\n<ul>\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:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">inneh\u00e5llet();<\/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>S\u00e5 t\u00e4nk dig att anpassa <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">f\u00f6ljande kod<\/a> (vilket \u00e4r vad vi tittade p\u00e5 i f\u00f6rra inl\u00e4gget):<\/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>F\u00f6r att se ut s\u00e5 h\u00e4r:<\/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>Mycket renare, eller hur? Men det finns mer i det du ser \u00e4n det h\u00e4r. Specifikt, om vi ska arbeta med HTML bakom kulisserna, m\u00e5ste vi se till att vi sanerar det <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-02-acme-get-titles-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">korrekt<\/a> med n\u00e5got som <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>Nu anses id\u00e9n att eko HTML fr\u00e5n PHP till en WordPress-mall vara ett antim\u00f6nster av vissa utvecklare. Och detta \u00e4r inte utan f\u00f6rtj\u00e4nst.<\/p>\n<p>Det finns dock en balansg\u00e5ng att spela under den h\u00e4r seriens g\u00e5ng: Det handlar om att introducera hur m\u00e4nniskor ofta presenterar information och sedan rensa upp den lite.<\/p>\n<p>F\u00f6r att ta det h\u00e4r lite l\u00e4ngre \u00e4r det m\u00f6jligt \u2013 och inte alls en d\u00e5lig id\u00e9 \u2013 att separera WP_Query-funktionen \u00e4nnu mer f\u00f6r att anv\u00e4nda <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a>. Detta f\u00f6r med sig lite renare kod men kr\u00e4ver ocks\u00e5 att vi tittar p\u00e5 den funktionen p\u00e5 djupet.<\/p>\n<p>Och det \u00e4r n\u00e5got som jag inte \u00e4r intresserad av att g\u00f6ra i just den h\u00e4r serien.<\/p>\n<h2>Hur ska vi visualisera detta?<\/h2>\n<p>N\u00e4r det g\u00e4ller mall kan vi begreppsbilda detta p\u00e5 ett par olika s\u00e4tt.<\/p>\n<ol>\n<li>I vissa mallspr\u00e5k \u00e4r det bra att t\u00e4nka p\u00e5 PHP som injicerar informationen i mallen,<\/li>\n<li>I exemplet ovan \u00e4r det bra att t\u00e4nka p\u00e5 mallfilen som beg\u00e4r informationen fr\u00e5n PHP-skriptet.<\/li>\n<\/ol>\n<p>S\u00e5 i exemplet ovan har vi en funktion som finns i till exempel <strong>functions.php<\/strong> och mallfilen som anropar den:<\/p>\n<p>Vettigt? Men hur detta \u00e5stadkoms \u2013 i termer av koden bakom det enda funktionsanropet \u2013 \u00e4r inneh\u00e5llet f\u00f6r ett inl\u00e4gg helt och h\u00e5llet.<\/p>\n<p>Och det \u00e4r vad jag kommer att titta p\u00e5 i f\u00f6ljande inl\u00e4gg.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Att f\u00f6rst\u00e5 hur WordPress-mallar anropar PHP-filer kan hj\u00e4lpa oss att skriva DRY-kod, men ocks\u00e5 kod som \u00e4r l\u00e4ttare att l\u00e4sa och enklare att underh\u00e5lla.<\/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":[838,848,901,922,868],"tags":[1173],"class_list":["post-229241","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-foer-nyboerjare","category-handledningar","category-koda","category-oevrig","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229241","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=229241"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229241\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}