{"id":229609,"date":"2022-11-16T19:42:00","date_gmt":"2022-11-16T16:42:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229609"},"modified":"2022-11-09T08:41:07","modified_gmt":"2022-11-09T05:41:07","slug":"plantillas-de-wordpress-para-principiantes-como-es","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/plantillas-de-wordpress-para-principiantes-como-es\/","title":{"rendered":"Plantillas de WordPress para principiantes: c\u00f3mo es"},"content":{"rendered":"\n<p>Cuando comenc\u00e9 a pensar en plantillas en WordPress, pens\u00e9 en dos aspectos:<\/p>\n<ol>\n<li>contenido espec\u00edfico para <a href=\"https:\/\/tommcfarlin.com\/register\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">miembros<\/a> ,<\/li>\n<li>contenido que podr\u00eda desglosarse en una sola publicaci\u00f3n.<\/li>\n<\/ol>\n<p>Pero cuanto m\u00e1s lo pensaba, m\u00e1s me daba cuenta de que pod\u00eda (y posiblemente deber\u00eda) explicarse en el transcurso de algunas publicaciones.<\/p>\n<p>As\u00ed que voy a desglosar el estado actual de las plantillas de WordPress y luego las formas pr\u00e1cticas en que podemos organizar, digamos, nuestros complementos para que usemos PHP est\u00e1ndar.<\/p>\n<p>Despu\u00e9s de eso, en una serie futura, ver\u00e9 lo que significa usar otros motores de plantillas (tanto PHP como JavaScript en el trabajo que hacemos).<\/p>\n<p>Sin embargo, para empezar, quiero echar un vistazo a c\u00f3mo a menudo vemos plantillas escritas en el contexto de los temas y complementos de WordPress.<\/p>\n<h2>Plantillas de WordPress para principiantes<\/h2>\n<p>Dependiendo de su experiencia con WordPress y otros sistemas basados \u200b\u200ben PHP, su definici\u00f3n de plantilla ser\u00e1 diferente a la de otra persona.<\/p>\n<p>Entonces, para tratar de crear una definici\u00f3n com\u00fan que usar\u00e9 a lo largo de esta serie de publicaciones, se usar\u00e1 <a href=\"https:\/\/codex.wordpress.org\/Templates\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">del Codex de WordPress:<\/a><\/p>\n<blockquote>\n<p>Las plantillas son los archivos que controlan c\u00f3mo se mostrar\u00e1 su sitio de WordPress en la Web.<\/p>\n<\/blockquote>\n<p>La p\u00e1gina contin\u00faa hablando sobre c\u00f3mo funciona junto con la base de datos y otros activos, y recomiendo leer sobre esto si no est\u00e1 familiarizado con \u00e9l.<\/p>\n<p>Sin embargo, la definici\u00f3n anterior funciona bien para la forma en que planeo avanzar pensando en ello.<\/p>\n<h3>1 C\u00f3mo es (ahora mismo)<\/h3>\n<p>Cuando se trata de pensar en plantillas de WordPress, creo que ayuda considerar una sola plantilla con un c\u00f3digo que <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se parece a esto:<\/a><\/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>El punto del c\u00f3digo anterior es que se ve que mezcla PHP y HTML.<\/p>\n<p>Adem\u00e1s, es importante tener en cuenta que cada uno de estos archivos est\u00e1 dise\u00f1ado con CSS y puede tener un comportamiento adicional controlado a trav\u00e9s de JavaScript. Con ese fin, puede conceptualizarlo as\u00ed:<\/p>\n<p>Esto representa una sola plantilla que combina HTML y PHP en una sola plantilla. Y esa plantilla luego se dise\u00f1a con CSS y se controla con JavaScript.<\/p>\n<p>Todos estos trabajan en conjunto para proporcionar lo que ve el usuario.<\/p>\n<h3>2 \u00bfLa organizaci\u00f3n de desarrolladores genera rendimiento?<\/h3>\n<p>Pero la forma en que esto funciona es un poco complicada, y aunque puede parecer bueno para el usuario, plantea algunas preguntas:<\/p>\n<ul>\n<li>\u00bfEs tan eficaz como podr\u00eda ser?<\/li>\n<li>\u00bfQu\u00e9 tan f\u00e1cil es para un desarrollador mantener?<\/li>\n<li>\u00bfCu\u00e1l es el proceso de construcci\u00f3n?<\/li>\n<li>\u00bfC\u00f3mo se mantienen y organizan los activos?<\/li>\n<\/ul>\n<p>Claro, la mayor parte de lo que est\u00e1 leyendo arriba est\u00e1 muy centrado en el desarrollador, pero encuentro que cuando un c\u00f3digo est\u00e1 organizado de tal manera que es f\u00e1cil para los desarrolladores trabajar con \u00e9l, a menudo puede ser incluso m\u00e1s f\u00e1cil para el usuario.<\/p>\n<p>\u00bfPero, qu\u00e9 significa eso?<\/p>\n<ul>\n<li>\u00bfPresentamos a Sass?<\/li>\n<li>\u00bfMinimizamos JavaScript?<\/li>\n<li>\u00bfC\u00f3mo combinamos estos activos y los importamos?<\/li>\n<li>\u00bfQu\u00e9 pasa con las consultas PHP personalizadas que ocurren dentro del contexto de cada plantilla?<\/li>\n<\/ul>\n<p>Y aunque las primeras cosas son importantes y valen la pena (y puede que las cubra en una serie despu\u00e9s de esto), separar la l\u00f3gica dentro de una plantilla, incluso sin un motor de plantillas, puede ayudar a que el c\u00f3digo est\u00e9 m\u00e1s centrado en el desarrollador.<\/p>\n<p>\u00bfHace las cosas m\u00e1s r\u00e1pidas para el usuario? No necesariamente. Pero s\u00ed nos ayuda a dar el primer paso para hacer precisamente eso.<\/p>\n<h2>Vamos a reorganizarnos<\/h2>\n<p>En la pr\u00f3xima publicaci\u00f3n de esta serie, desglosar\u00e9 el contenido que estamos acostumbrados a ver en las plantillas de WordPress a trav\u00e9s de un ejemplo y comenzar\u00e9 a reorganizarlo para que est\u00e9 mejor organizado de tal manera que las t\u00e9cnicas se puedan usar en diferentes proyectos.<\/p>\n<p>Esto significa mover las cosas a sus funciones (o incluso dentro de sus clases y, por lo tanto, sus funciones) y c\u00f3mo podemos llamarlas desde el contexto de nuestras plantillas.<\/p>\n<p>En \u00faltima instancia, esto conducir\u00e1 a un c\u00f3digo que es m\u00e1s f\u00e1cil de leer, una mejor separaci\u00f3n de las preocupaciones y nos llevar\u00e1 hacia formas de cambiar la forma en que se inyectan los datos en una plantilla.<\/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>Las plantillas son la forma en que los datos se muestran al usuario, pero \u00bfc\u00f3mo podemos tomar las plantillas de WordPress y mejorar su organizaci\u00f3n para usuarios y desarrolladores?<\/p>\n","protected":false},"author":1,"featured_media":223990,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[924,892,840,861],"tags":[1172],"class_list":["post-229609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asignaturas","category-codigo","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229609","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=229609"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223990"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}