-
Notifications
You must be signed in to change notification settings - Fork 1
/
07-the-loop.html
353 lines (303 loc) · 16 KB
/
07-the-loop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curso WordPress - Fictizia</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/curso-wp.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>The Loop</h1>
</section>
<section>
<h2>Entendiendo The Loop</h2>
<section>
<ul>
<li>The Loop determina qué contenido hay que mostrar en una página que un usuario visita en nuestro sitio web. The Loop puede mostrar una sola página, un post o un grupo de posts (el blog)</li>
<li>El contenido se muestra mediante una iteración (loop) del contenido.</li>
<li>The Loop selecciona los posts de la Base de Datos basándose en una serie de parámetros que vienen dados normalmente por la URL.</li>
<li>Por ejemplo, www.example.com/category/articulos sólo muestra posts asignados a la categoría “artículos”</li>
</ul>
</section>
<section>
<img src="img/loop-01.png" alt="">
</section>
</section>
<section>
<h2>Cómo usar The Loop</h2>
<section>
<p>Para comenzar a mostrar contenido es necesario establecer una estructura básica en The Loop:</p>
<pre><code>
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ): the_post(); ?>
<!-- CONTENIDO -->
<?php endwhile; ?>
<?php endif; ?>
</code></pre>
<p>Una vez dentro del while, podemos empezar a mostrar el contenido utilizando una de las muchas funciones que WordPress provee (llamadas <b>Template Tags</b>)</p>
</section>
<section>
<p>El código anterior suele expresarse de esa manera por convención pero se podría expresar de maneras distintas:</p>
<pre><code>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<!-- CONTENIDO HTML -->
<?php
}
}
?>
</code></pre>
</section>
<section>
<br>
<h3>the_post()</h3>
<p>Es una función que aumenta en 1 el índice del post que se va a mostrar.</p>
<p>Antes de llamarlo por primera vez, el índice es -1. Una vez ejecutada, pasa a ser 0, esto significa que internamente establece el post actual al 0 en la lista de posts que hay que mostrar en la página.</p>
<p>No es necesario saber cómo funciona pero sí hay que ejecutarlo siempre al principio de The Loop.</p>
</section>
</section>
<section>
<h2>Template Tags</h2>
<section>
<p>Son <u>funciones</u> que se usan en las plantillas para mostrar el contenido del blog.</p>
<p>Cada función se dedica a mostrar algo específico sobre el contenido</p>
<p>Hay funciones para mostrar el título, el enlace al post, el autor, la ID del post...</p>
</section>
<section>
<p>Ejemplos de Template Tags comúnmente utilizados:</p>
<ul>
<li><strong>the_permalink()</strong>: Muestra la URL del post.</li>
<li><strong>the_title()</strong>: Muestra el título del post</li>
<li><strong>the_ID()</strong>: Muestra la ID del post</li>
<li><strong>the_content()</strong>: Muestra el contenido completo del post</li>
<li><strong>the_excerpt()</strong>: Muestra sólo un extracto del contenido del post</li>
</ul>
</section>
<section>
<p>Ejemplos de Template Tags comúnmente utilizados:</p>
<ul>
<li><strong>the_time()</strong>: Muestra la fecha en la que el post fue publicado– the_author(): Muestra el nombre del autor del post.</li>
<li><strong>the_category()</strong>: Muestra las categorías asignadas al post.</li>
<li><strong>edit_post_link()</strong>: Muestra un link, “Edit” que se muestra sólo si el usuario está registrado y tiene permitido la edición de dicho post.</li>
<li><strong>comments_popup_link()</strong>: Muestra un link al formulario de comentarios del post.</li>
</ul>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<p>Para entender mejor el Loop, lo mejor es probar las funciones y ver qué sacan.</p>
<ul>
<li>Utiliza varias de las funciones anteriores y observa el resultado de cada una de ellas.</li>
<li>Haz mostrar el contenido en el index.php</li>
<li>Recuerda la estructura del Loop:</li>
</ul>
<pre><code><?php if ( have_posts() ): ?>
<?php while ( have_posts() ): the_post(); ?>
// Aquí puedes utilizar los Template Tags
// Recuerda que son funciones PHP y debes poner <?php y ?>
<?php endwhile; ?>
<?php endif; ?>
</code></pre>
</section>
<section>
<h2>Parámetros de los Template Tags</h2>
<section>
<br>
<p>Muchas de estas funciones permiten ciertos parámetros para personalizar la forma en la que el contenido es mostrado.</p>
<p>Por ejemplo, the_content() admite dos parámetros (opcionales):</p>
<pre><code><?php the_content( $more_link_text, $stripteaser ); ?></code></pre>
<p>Mediante esta función mostramos el contenido del post pero cuando la etiqueta <!--more--> aparece en el post, WordPress añadirá automáticamente el texto de la variable $more_link_text (por ejemplo, “Seguir leyendo”).</p>
<p>El segundo parámetro permite excluir el texto antes de la etiqueta <!--more--> cuando mostramos el post entero (single post).</p>
</section>
<section>
<p>Otro ejemplo con the_title(), permite definir las etiquetas HTML con las que envolver el título:</p>
<pre><code><?php the_title( '<h1>', '</h1>' ); ?></code></pre>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<section>
<p>Mostrar un Loop con una buena estructura HTML:</p>
<ul>
<li>Cada post debe ir encerrado en una etiqueta <code><article></code> con <code>id=”post-[POST_ID]”</code> (the_ID()). Utiliza también la función <code>post_class();</code> para sacar el atributo class dentro de <article></li>
<li>El título dentro de un <h2> (<code>the_title()</code>) dentro del cual tiene que ir un link al post (<code>the_permalink()</code>) y además debe utilizar <code>the_title_attribute()</code> para el atributo title dentro del tag <a></li>
<li>Muestra el contenido completo del post con <code>the_content()</code> dentro de un <div class=”entry-content”></li>
</ul>
</section>
<section>
<ul>
<li>Es necesario usar la función <code>wp_link_pages()</code> que muestra la paginación del post si éste usa la etiqueta <!--nextpage-->– Dentro de otro <div class=”entry-meta”> se van a mostrar los siguientes datos:</li>
<li>Una lista de las categorías del post, separadas por | (<code>the_category( $sep )</code>)</li>
<li>Una lista de los tags del post (<code>the_tags()</code>)</li>
<li>Un link al formulario de los comentarios (<code>comments_popup_link()</code>)</li>
</ul>
</section>
</section>
<section>
<h2>Conditional Tags</h2>
<section>
<p>Son funciones que sirven para comprobar si una condición se cumple. Todas devuelven true o false</p>
<ul>
<li><strong>is_home()</strong>: Comprueba si estamos en la página principal del blog de nuestro sitio.</li>
<li><strong>is_front_page()</strong>: Comprueba si estamos en la página principal de nuestro sitio.</li>
<li><strong>is_admin()</strong>: Comprueba si estamos dentro del panel de administración</li>
</ul>
</section>
<section>
<ul>
<li><strong>is_single()</strong>: Comprueba si estamos viendo un solo post. Devuelve false para las páginas</li>
<li><strong>is_sticky()</strong>: Comprueba si el post es destacado.</li>
<li><strong>is_page()</strong>: Comprueba si estamos viendo una página estática.– is_search(): Comprueba si estamos en la página de los resultados de la búsqueda.</li>
</ul>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<section>
<p>Vamos a añadirle algunas condiciones a nuestro Tema:</p>
<ul>
<li>Cuando la URL muestre sea un post o página (<code>is_singular()</code>), se mostrará el contenido completo del post (<code>the_content()</code>), además no usaremos el permalink en el título del post</li>
<li>En el archivo de posts, mostraremos sólo el extracto (<code>the_excerpt()</code>)</li>
<li>Si se muestran los resultados de la búsqueda (<code>is_search()</code>) únicamente mostraremos los títulos de los posts</li>
</ul>
</section>
<section>
<ul>
<li>Si se muestran los resultados de la búsqueda (<code>is_search()</code>), justo antes de empezar el Loop itilizaremos un <h1> para mostrar <i>Resultados de la búsqueda: [LO QUE ESTAMOS BUSCANDO]</i> haciendo uso de la función <code>get_search_query()</code></li>
</ul>
</section>
<section>
<ul>
<li>De forma similar, si estamos en el archivo (<code>is_archive()</code>), mostraremos <i>"Archivos"</i>.</li>
<li>Si estamos en el archivo por categorías (<code>is_category()</code>), mostraremos <i>"Categoría: [NOMBRE DE LA CATEGORÍA]"</i>. Para mostrar el nombre de la categoría usamos <code>single_cat_title()</code></li>
</ul>
</section>
<section>
<ul>
<li>Reemplaza estas dos últimas funciones por la función <code>get_the_archive_title()</code>. Busca dicha función en el núcleo de WordPress, ¿Puedes identificar todos los casos incluídos?</li>
<li>Haz que dicho título sólo aparezca cuando se cumpla la condición <code>is_archive()</code></li>
</ul>
</section>
</section>
<section>
<h2>Paginación</h2>
<section>
<p>Existen dos funciones para paginar los posts:</p>
<ul>
<li><code>the_posts_pagination()</code>: Saca por pantalla las páginas numeradas (1,2,3...)</li>
<li><code>the_posts_navigation()</code>: Saca por pantalla dos enlaces para ir a página anterior/posterior.</li>
</ul>
<p><strong>Nota</strong>: Dichas funciones aparecen por primera vez en la versión 4.1. Para mantener retrocompatibilidad será mejor utilizar funciones más antiguas: <a href="https://codex.wordpress.org/Pagination">https://codex.wordpress.org/Pagination</a></p>
</section>
<section>
<h3>Ejercicio</h3>
<p class="alignleft">Haz que aparezca una paginación numerada, que aparezcan 2 páginas como mucho a los lados de la página actual <br/>( 1 … 3 4 <strong><u>5</u></strong> 6 7 … 20 por ejemplo )</p>
<p class="alignleft">Reduce el número de posts por página en Ajustes>Lectura para comprobar que funciona</p>
</section>
</section>
<section>
<h2>Personalizando The Loop</h2>
<section>
<ul>
<li>Para modificar The Loop hay que hacer uso del objeto <code>$wp_query</code>, el cual guarda todos los posts que se van a mostrar además de muchísima otra información. Todos los Template Tags vistos, directa o indirectamente acceden a dicho objeto para sacar toda la información.</li>
<li>El objeto <code>$wp_query</code> pertenece a la clase <code>WP_Query</code>. Dicha clase nos permite hacer selecciones de post a la base de datos. WordPress crea $wp_query automáticamente y la declara como variable local pero nosotros podemos crear un objeto nuevo también.</li>
</ul>
</section>
<section>
<p>Un ejemplo para mostrar los títulos de los últimos 5 posts:</p>
<pre><code><?php
$args = array(
'posts_per_page' => 5,
'ignore_sticky_posts' => true
);
$my_query = new WP_Query( $args );
?>
<?php while( $my_query->have_posts() ): $my_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; ?></code></pre>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<section>
<ul>
<li>Vamos a crear un apartado de posts relacionados. Dicha lista sólo debe aparecer cuando sólo se muestra un único post (is_single()).</li>
<li>Aunque no sea lo normal, los vamos a mostrar ENCIMA del contenido. Crearemos un bloque nuevo para ello: <ul class=”related-posts”></ul></li>
<li>Cada uno de los posts irá dentro de un elemento lista <li></li>
<li>Los posts relacionados se deben sacar a partir de una de las etiquetas del post principal. Si el post tiene muchas etiquetas lo mejor será coger una al azar. Para obtener una de dichas etiquetas usa el siguiente código:</li>
</ul>
</section>
<section>
<pre><code>$tags = get_the_tags();
$rand_key = array_rand( $tags );
$tag_id = $tags[ $rand_key ]->term_id;</code></pre>
<ul>
<li>Para los argumentos de WP_Query: Sacaremos 3 posts (posts_per_page => 3), ignorando los posts destacados (ignore_sticky_posts => true) con la ID de la categoría que hayamos sacado al azar (tag_id => ID ).</li>
<li>Crearemos ahora un loop personalizado y sacaremos por pantalla el título dentro de cada elemento lista <li></li>
<li>Intenta también excluir el post principal de los posts relacionados con get_the_ID() y el argumento para WP_Query post__not_in => array( ID )</li>
</ul>
</section>
<section>
<h3>¿Cuál es el problema con el código?</h3>
<ul>
<li>Al poner el nuevo loop, el contenido del post principal no se corresponde con lo que debería salir ya que toma el último valor de nuestro post personalizado.</li>
<li>Para solucionar esto se utiliza <code>wp_reset_query()</code>. Esta función resetea la query y vuelve al estado anterior de empezar a iterar por nuestro Loop personalizado.</li>
</ul>
</section>
</section>
</section>
</div>
<div class="header">
<a href="index.html">Índice</a>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
Reveal.configure({ slideNumber: 'c / t' });
</script>
</body>
</html>