{"id":233896,"date":"2023-02-26T18:29:00","date_gmt":"2023-02-26T15:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233896"},"modified":"2022-11-11T13:03:32","modified_gmt":"2022-11-11T10:03:32","slug":"tutorial-de-temas-de-wordpress-para-principiantes-parte-4-el-post-loop","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/tutorial-de-temas-de-wordpress-para-principiantes-parte-4-el-post-loop\/","title":{"rendered":"Tutorial de temas de WordPress para principiantes \u2013 Parte 4: El Post Loop"},"content":{"rendered":"\n<p>En esta lecci\u00f3n del tutorial del tema de WordPress para principiantes, entraremos en detalles sobre el &quot;bucle de publicaci\u00f3n&quot; en WordPress; qu\u00e9 es, c\u00f3mo se ve, por qu\u00e9 lo usamos y c\u00f3mo acceder a las publicaciones. Luego, implementaremos el bucle en nuestro tema.<\/p>\n<h2>El bucle de correos<\/h2>\n<p>Si est\u00e1 familiarizado con PHP, puede reconocer que un &quot;bucle&quot; es una t\u00e9cnica para recorrer cada elemento en una matriz u objeto con <code>for<\/code>, <code>foreach<\/code>o <code>while<\/code>. El bucle en WordPress funciona as\u00ed. Pero usaremos las propias funciones de WordPress para hacer un bucle con el fin de obtener algunos beneficios y simplificaciones adicionales.<\/p>\n<p>En todo momento, WordPress ya ha consultado las publicaciones por usted, seg\u00fan la p\u00e1gina en la que se encuentre. Si est\u00e1 en una p\u00e1gina de categor\u00eda, WordPress ya ha consultado todas las publicaciones asociadas con esta categor\u00eda, y si est\u00e1 en una sola p\u00e1gina de publicaci\u00f3n, WordPress ya ha obtenido esa publicaci\u00f3n para usted.<\/p>\n<p>Cuando queremos acceder a las publicaciones que WordPress ha consultado en nuestras plantillas, agregamos el bucle. Dentro del bucle tenemos acceso a cada publicaci\u00f3n. Y para cada publicaci\u00f3n decidimos qu\u00e9 mostrar o hacer.<\/p>\n<p>Nota: Incluso en las plantillas de una sola publicaci\u00f3n o de una sola p\u00e1gina, agregar\u00e1 un bucle, \u00a1aunque sabemos que solo contiene una publicaci\u00f3n! El ciclo simplemente se ejecuta una sola vez.<\/p>\n<p>Aqu\u00ed est\u00e1 el bucle de WordPress en todo su esplendor:<\/p>\n<pre><code>while (have_posts()): the_post();\n    \/\/ Access to each post here\nendwhile;<\/code><\/pre>\n<p>Este fragmento de c\u00f3digo hace dos cosas. La <code>while<\/code>parte (incluido el <code>endwhile<\/code>) es la parte de bucle que se repetir\u00e1 independientemente del tiempo que queden publicaciones. La segunda parte es la <code>the_post()<\/code>que establece un acceso simplificado e intuitivo al objeto de publicaci\u00f3n dentro del bucle. Aprenderemos m\u00e1s sobre eso m\u00e1s adelante.<\/p>\n<p>Es una buena pr\u00e1ctica envolver el ciclo dentro de una <code>if<\/code>verificaci\u00f3n que verifique si realmente hay publicaciones para recorrer. Entonces tambi\u00e9n podemos mostrar opcionalmente un mensaje si no lo hubiera. La consulta de publicaci\u00f3n podr\u00eda estar vac\u00eda si va a un archivo de categor\u00eda vac\u00edo o si intenta buscar algo que no tiene resultados. Esta es una mejor versi\u00f3n del bucle:<\/p>\n<pre><code>if (have_posts()) {\n    while (have_posts()): the_post();\n        \/\/ Access to each post here\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;No posts, sorry.&lt;\/p&gt;&lt;?php\n}<\/code><\/pre>\n<p>\u00a1Familiar\u00edcese con este fragmento de c\u00f3digo, ya que lo repetir\u00e1 cada vez que desee acceder a las publicaciones! Implementemos el bucle en nuestro tema.<\/p>\n<h2>Implementando el loop en nuestro tema<\/h2>\n<p>Agreguemos el bucle en nuestro <code>index.php<\/code>, reemplazando el texto ficticio.<\/p>\n<pre><code>&lt;?php get_header(); ?&gt;\n&lt;?php \nif (have_posts()) {\n    while (have_posts()): the_post();\n        the_title();\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;No posts, sorry.&lt;\/p&gt;&lt;?php\n}\n?&gt;\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Agregu\u00e9 una funci\u00f3n llamada <code>the_title()<\/code>dentro del ciclo que hace eco del t\u00edtulo de la publicaci\u00f3n. Esto es solo para que podamos ver el bucle en la pr\u00e1ctica. No se preocupe, en <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-5-accessing-post-information\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el pr\u00f3ximo paso<\/a> aprenderemos todo acerca de c\u00f3mo acceder a toda la informaci\u00f3n real de la publicaci\u00f3n.<\/p>\n<p>Veamos qu\u00e9 sucede ahora en WordPress. Actualizar la p\u00e1gina principal. Dependiendo de su configuraci\u00f3n y contenido, deber\u00eda ver aparecer algunos t\u00edtulos. En mi WordPress tengo la publicaci\u00f3n predeterminada &quot;\u00a1Hola mundo!&quot; y otra publicaci\u00f3n que cre\u00e9 titulada &quot;Esta es otra publicaci\u00f3n&quot;. Esto es lo que me sale en la portada:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151614-61e4cd1ab5812.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151614-61e4cd1ab5812.png\" alt=\"Tutorial de temas de WordPress para principiantes \u2013 Parte 4: El Post Loop\" ><\/a><\/p>\n<p>Si intenta visitar una sola p\u00e1gina de publicaci\u00f3n, deber\u00eda ver solo un t\u00edtulo, el t\u00edtulo de la publicaci\u00f3n que est\u00e1 viendo. \u00a1Agradable!<\/p>\n<h3>Para los curiosos\u2026<\/h3>\n<p>Si tiene curiosidad acerca de por qu\u00e9 est\u00e1 pasando el bucle y qu\u00e9 par\u00e1metros us\u00f3 WordPress para esta consulta, puede consultarlo. La variable global a la que se refiere el bucle se llama <code>$wp_query<\/code>. Debe definirlo como global para poder acceder a \u00e9l. Intente usar <code>var_dump()<\/code>para imprimir su contenido completo. El bucle est\u00e1 recorriendo la <code>$wp_query-&gt;posts<\/code>propiedad.<\/p>\n<pre><code>global $wp_query;\nvar_dump($wp_query);<\/code><\/pre>\n<p>Agreguemos un detalle importante a nuestro bucle en <code>index.php<\/code>; una forma para que el usuario navegue a la p\u00e1gina siguiente y anterior de publicaciones.<\/p>\n<h2>Agregar navegaci\u00f3n posterior al bucle<\/h2>\n<p>Tenga en cuenta que el ciclo obtendr\u00e1 la cantidad de publicaciones definidas en su Configuraci\u00f3n de WordPress&gt; Lectura, siempre que se encuentre en una p\u00e1gina que muestre varias publicaciones. Si hay m\u00e1s publicaciones disponibles en el bucle que el n\u00famero definido aqu\u00ed, necesitamos una forma de navegar entre las p\u00e1ginas. Para esto podemos usar la funci\u00f3n <code>the_posts_pagination()<\/code>.<\/p>\n<p>Esta funci\u00f3n acepta <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_posts_pagination\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algunos par\u00e1metros<\/a> para personalizar su salida. Puede definir el n\u00famero de p\u00e1ginas entre los puntos suspensivos (cuando hay muchas p\u00e1ginas). Tambi\u00e9n puede definir cu\u00e1les deben ser los textos para los enlaces de p\u00e1gina &quot;Anterior&quot; y &quot;Siguiente&quot;. Lo agregar\u00e9 sin ning\u00fan par\u00e1metro para hacer los valores predeterminados, pero puede ajustarlo si lo desea.<\/p>\n<pre><code>...\n    while (have_posts()): the_post();\n        the_title();\n    endwhile;\n    the_posts_pagination();\n} else {\n...<\/code><\/pre>\n<p>Esta funci\u00f3n no genera absolutamente nada si hay menos publicaciones o la misma cantidad de publicaciones por configuraci\u00f3n de p\u00e1gina. As\u00ed que no se preocupe si cree que se equivoc\u00f3 porque no ve ning\u00fan resultado. Una vez que hay m\u00e1s publicaciones que publicaciones por p\u00e1gina, esta funci\u00f3n genera un div, un encabezado para lectores de pantalla (que normalmente oculta con CSS) y una serie de enlaces de paginaci\u00f3n.<\/p>\n<p>Ahora que sabemos c\u00f3mo acceder a cualquier publicaci\u00f3n que WordPress haya encontrado para nosotros, el siguiente paso es aprender a mostrar lo que queremos de cada publicaci\u00f3n; dentro del bucle.<\/p>\n<h2>Documentaci\u00f3n sobre los m\u00e9todos utilizados<\/h2>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/have_posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">have_posts<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el cargo<\/a><\/li>\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:\/\/codex.wordpress.org\/Function_Reference\/the_posts_pagination\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la_post_paginaci\u00f3n<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta lecci\u00f3n de tema de WordPress para principiantes, entraremos en detalles sobre el ciclo de publicaci\u00f3n en WordPress; qu\u00e9 es, c\u00f3mo funciona y por qu\u00e9 lo usamos.<\/p>\n","protected":false},"author":1,"featured_media":223872,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[924,892,892,716,716,831,914,1110,914,831,924,840,840,861,861],"tags":[1172],"class_list":["post-233896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asignaturas","category-codigo","category-desarrollador","category-guia-para-principiantes","category-otro","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233896","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=233896"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223872"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}