{"id":229617,"date":"2022-11-16T09:58:00","date_gmt":"2022-11-16T06:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229617"},"modified":"2022-11-16T19:43:30","modified_gmt":"2022-11-16T16:43:30","slug":"plantillas-de-wordpress-para-principiantes-html-llamando-a-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/plantillas-de-wordpress-para-principiantes-html-llamando-a-php\/","title":{"rendered":"Plantillas de WordPress para principiantes: HTML llamando a PHP"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/es\/plantillas-de-wordpress-para-principiantes-como-es\/\" title=\"Ayer\">Ayer<\/a>, esboc\u00e9 c\u00f3mo conceptualizar cu\u00e1ntos de nosotros probablemente estamos acostumbrados a trabajar con plantillas de WordPress.<\/p>\n<p>Aunque la separaci\u00f3n de preocupaciones con CSS y JavaScript es s\u00f3lida, las plantillas son problem\u00e1ticas cuando hay mucho PHP mezclado con nuestro marcado.<\/p>\n<p>Para ser claros, no podemos evitar incluir etiquetas de plantilla porque esa es la naturaleza de c\u00f3mo funcionan WordPress y los sistemas generales de administraci\u00f3n de contenido basados \u200b\u200ben PHP.<\/p>\n<p>El problema surge cada vez que trabajamos con plantillas que contienen c\u00f3digo que realiza llamadas m\u00e1s complejas a varias API. Aunque demostr\u00e9 esto usando <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a> (y continuar\u00e9 haci\u00e9ndolo), no es solo esa consulta.<\/p>\n<p>De todos modos, sin embargo, \u00bfqu\u00e9 se supone que debemos hacer con esto?<\/p>\n<h2>Plantillas de WordPress: cuando HTML llama a PHP<\/h2>\n<p>Primero, es importante pensar por qu\u00e9 mezclar tanto PHP y marcado es una mala idea.<\/p>\n<p>Es f\u00e1cil decir que hace que sea m\u00e1s dif\u00edcil mantener el c\u00f3digo <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SECO<\/a> (y hay algo de verdad en eso), pero \u00bfqu\u00e9 pasa si solo vamos a usar una sola consulta o un solo bloque de c\u00f3digo una vez? \u00bfEs realmente tan importante estar SECO entonces?<\/p>\n<p>Para ser claros, s\u00ed, creo que es importante para mantener el c\u00f3digo SECO, pero si solo vamos a usar una llamada una vez, sigo pensando que es importante, aunque solo sea por mantener el c\u00f3digo de la plantilla tan limpio como sea posible. posible.<\/p>\n<p>Pi\u00e9nselo de esta manera: siempre que queramos mostrar el t\u00edtulo, el contenido y el autor de la publicaci\u00f3n, todo lo que necesitamos llamar son tres funciones:<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_title\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el 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\">el contenido();<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_author_meta\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el_autor_meta();<\/a><\/li>\n<\/ul>\n<p>As\u00ed que imagina adaptar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el siguiente c\u00f3digo<\/a> (que es lo que vimos en la publicaci\u00f3n 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 verse algo como esto:<\/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>Mucho m\u00e1s limpio, \u00bfverdad? Pero hay m\u00e1s en lo que ves que esto. Espec\u00edficamente, si vamos a trabajar con HTML detr\u00e1s de escena, debemos asegurarnos de que lo estamos desinfectando <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-02-acme-get-titles-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">correctamente<\/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>Ahora, algunos desarrolladores consideran que la idea de hacer eco de HTML de PHP en una plantilla de WordPress es un antipatr\u00f3n. Y esto no carece de m\u00e9rito.<\/p>\n<p>Sin embargo, se debe jugar un acto de equilibrio durante el transcurso de esta serie: se trata de presentar c\u00f3mo las personas a menudo presentan informaci\u00f3n y luego limpiarla un poco.<\/p>\n<p>Para llevar esto un poco m\u00e1s lejos, es posible, y no del todo una mala idea, separar la funci\u00f3n WP_Query a\u00fan m\u00e1s 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>. Esto lleva consigo un poco de c\u00f3digo m\u00e1s limpio, pero tambi\u00e9n requiere que analicemos esa funci\u00f3n en profundidad.<\/p>\n<p>Y eso es algo que no me interesa hacer en esta serie en particular.<\/p>\n<h2>\u00bfC\u00f3mo debemos visualizar esto?<\/h2>\n<p>Cuando se trata de plantillas, podemos conceptualizar esto de un par de maneras diferentes.<\/p>\n<ol>\n<li>En algunos lenguajes de plantillas, es \u00fatil pensar en PHP inyectando la informaci\u00f3n en la plantilla,<\/li>\n<li>En el ejemplo anterior, es \u00fatil pensar en el archivo de plantilla que solicita la informaci\u00f3n del script PHP.<\/li>\n<\/ol>\n<p>Entonces, en el ejemplo anterior, tenemos una funci\u00f3n ubicada en, digamos, <strong>functions.php<\/strong> y el archivo de plantilla que la llama:<\/p>\n<p>\u00bfTener sentido? Pero c\u00f3mo se logra esto, en t\u00e9rminos del c\u00f3digo detr\u00e1s de esa llamada de funci\u00f3n \u00fanica, es contenido para una publicaci\u00f3n propia.<\/p>\n<p>Y eso es lo que estar\u00e9 viendo en el siguiente post.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprender c\u00f3mo las plantillas de WordPress llaman a los archivos PHP puede ayudarnos a escribir c\u00f3digo SECO, pero tambi\u00e9n c\u00f3digo que es m\u00e1s f\u00e1cil de leer y de mantener.<\/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":[892,831,914,840,861],"tags":[1172],"class_list":["post-229617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-guia-para-principiantes","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229617"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229617\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}