{"id":230025,"date":"2022-11-16T10:50:00","date_gmt":"2022-11-16T07:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230025"},"modified":"2022-11-16T19:38:21","modified_gmt":"2022-11-16T16:38:21","slug":"modelos-wordpress-para-iniciantes-html-chamando-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/modelos-wordpress-para-iniciantes-html-chamando-php\/","title":{"rendered":"Modelos WordPress para Iniciantes: HTML Chamando PHP"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/modelos-wordpress-para-iniciantes-como-e\/\" title=\"Ontem\">Ontem<\/a>, esbocei como conceituar quantos de n\u00f3s provavelmente est\u00e3o acostumados a trabalhar com modelos do WordPress.<\/p>\n<p>Embora a separa\u00e7\u00e3o de preocupa\u00e7\u00f5es com CSS e JavaScript seja s\u00f3lida, os modelos s\u00e3o problem\u00e1ticos sempre que h\u00e1 muito PHP misturado com nossa marca\u00e7\u00e3o.<\/p>\n<p>Para ser claro, n\u00e3o podemos deixar de incluir tags de modelo porque essa \u00e9 a natureza de como o WordPress e os sistemas gerais de gerenciamento de conte\u00fado baseados em PHP funcionam.<\/p>\n<p>O problema surge sempre que trabalhamos com templates que cont\u00eam c\u00f3digo fazendo chamadas mais complexas para v\u00e1rias APIs. Embora eu tenha demonstrado isso usando <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a> (e continuarei a faz\u00ea-lo), n\u00e3o \u00e9 apenas essa consulta.<\/p>\n<p>De qualquer forma, por\u00e9m, o que devemos fazer com isso?<\/p>\n<h2>Modelos do WordPress: quando o HTML chama o PHP<\/h2>\n<p>Primeiro, \u00e9 importante pensar por que misturar tanto PHP e marca\u00e7\u00e3o \u00e9 uma m\u00e1 ideia.<\/p>\n<p>\u00c9 f\u00e1cil dizer que torna mais dif\u00edcil manter o c\u00f3digo <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">DRY<\/a> (e h\u00e1 verdade nisso), mas e se formos usar apenas uma \u00fanica consulta ou um \u00fanico bloco de c\u00f3digo uma vez? Ser DRY \u00e9 realmente t\u00e3o importante ent\u00e3o?<\/p>\n<p>Para ser claro, sim, acho que \u00e9 importante manter o c\u00f3digo DRY, mas se vamos usar uma chamada apenas uma vez, ainda acho que isso importa se por nenhum outro motivo al\u00e9m de manter o c\u00f3digo do modelo t\u00e3o limpo quanto poss\u00edvel.<\/p>\n<p>Pense desta forma: sempre que quisermos exibir o t\u00edtulo, o conte\u00fado e o autor do post, tudo o que precisamos chamar s\u00e3o tr\u00eas fun\u00e7\u00f5es:<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_title\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o t\u00edtulo();<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o conte\u00fado();<\/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_autor_meta();<\/a><\/li>\n<\/ul>\n<p>Ent\u00e3o imagine adaptar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o seguinte c\u00f3digo<\/a> (que \u00e9 o que vimos no post anterior):<\/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>Para parecer algo assim:<\/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>Muito mais limpo, certo? Mas h\u00e1 mais no que voc\u00ea v\u00ea do que isso. Especificamente, se vamos trabalhar com HTML nos bastidores, precisamos ter certeza de que estamos limpando-o <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-02-acme-get-titles-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">corretamente<\/a> usando algo como <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>Agora, a ideia de ecoar o HTML do PHP em um template do WordPress \u00e9 considerada um antipadr\u00e3o por alguns desenvolvedores. E isso n\u00e3o \u00e9 sem m\u00e9rito.<\/p>\n<p>No entanto, h\u00e1 um ato de equil\u00edbrio a ser jogado durante o curso desta s\u00e9rie: \u00e9 uma quest\u00e3o de apresentar como as pessoas geralmente apresentam informa\u00e7\u00f5es e depois limp\u00e1-las um pouco.<\/p>\n<p>Para ir um pouco mais longe, \u00e9 poss\u00edvel \u2013 e n\u00e3o uma m\u00e1 ideia \u2013 separar ainda mais a fun\u00e7\u00e3o WP_Query para usar <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a>. Isso traz um c\u00f3digo mais limpo, mas tamb\u00e9m exige que analisemos essa fun\u00e7\u00e3o em profundidade.<\/p>\n<p>E isso \u00e9 algo que eu n\u00e3o estou interessado em fazer nesta s\u00e9rie em particular.<\/p>\n<h2>Como devemos visualizar isso?<\/h2>\n<p>Quando se trata de modelagem, podemos conceituar isso de duas maneiras diferentes.<\/p>\n<ol>\n<li>Em algumas linguagens de template, \u00e9 \u00fatil pensar no PHP injetando as informa\u00e7\u00f5es no template,<\/li>\n<li>No exemplo acima, \u00e9 \u00fatil pensar no arquivo de modelo solicitando as informa\u00e7\u00f5es do script PHP.<\/li>\n<\/ol>\n<p>Portanto, no exemplo acima, temos uma fun\u00e7\u00e3o localizada em, digamos, <strong>functions.php<\/strong> e o arquivo de modelo chamando-a:<\/p>\n<p>Faz sentido? Mas como isso \u00e9 feito \u2013 em termos do c\u00f3digo por tr\u00e1s dessa \u00fanica chamada de fun\u00e7\u00e3o \u2013 \u00e9 conte\u00fado para uma postagem pr\u00f3pria.<\/p>\n<p>E \u00e9 isso que vou abordar no pr\u00f3ximo post.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compreender como os modelos do WordPress chamam arquivos PHP pode nos ajudar a escrever c\u00f3digo DRY, mas tamb\u00e9m c\u00f3digo que \u00e9 mais f\u00e1cil de ler e mais simples de manter.<\/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":[898,837,920,846,867],"tags":[1170],"class_list":["post-230025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-guia-para-iniciantes","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230025"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230025\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}