-
Notifications
You must be signed in to change notification settings - Fork 1
/
08-mostrando-el-contenido.html
640 lines (575 loc) · 31.2 KB
/
08-mostrando-el-contenido.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
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
<!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>Mostrando el Contenido</h1>
</section>
<section>
<section>
<p>Una vez tengamos una estructura definida, lo mejor es ir fragmentando nuestro código en diferentes <i>Templates</i>. Las más utilizadas son las siguientes:</p>
<ul>
<li><strong>header.php</strong> Para la cabecera</li>
<li><strong>footer.php</strong> Para el pie de página</li>
<li><strong>404.php</strong> Se carga cuando no se encuentra la página</li>
<li><strong>search.php</strong> Cuando el usuario ejecuta una búsqueda</li>
<li><strong>category.php</strong> Cuando estamos viendo el archivo por categorías</li>
<li><strong>tag.php</strong> Cuando estamos viendo el archivo por etiquetas</li>
</ul>
</section>
<section>
<ul>
<li><strong>author.php</strong> Cuando vemos todas las entradas de un autor.</li>
<li><strong>date.php</strong> Cuando estamos viendo archivos por fecha</li>
<li><strong>archive.php</strong> Se carga cuando <strong>category.php</strong>, <strong>tag.php</strong>, <strong>author.php</strong> o <strong>date.php</strong> no existen en el tema</li>
<li><strong>single.php</strong> Para posts singulares</li>
<li><strong>page.php</strong> Se carga cuando estamos viendo una sola página estática</li>
<li><strong>home.php</strong> Se carga cuando vemos todas las entradas del blog</li>
</ul>
<p>Jerarquía de Templates: <a href="https://developer.wordpress.org/files/2014/10/wp-template-hierarchy.jpg">https://developer.wordpress.org/files/2014/10/wp-template-hierarchy.jpg</a> </p>
</section>
</section>
<section>
<h2>Cabecera y Pie de Página</h2>
<section>
<ul>
<li>Normalmente la cabecera y pie de páginas son comunes a todas las páginas</li>
<li>Podemos separar las zonas comunes de cabecera y pie en header.php y footer.php respectivamente.</li>
<li>WordPress no las carga automáticamente por lo que en todos los archivos habrá que llamarlas utilizando las funciones get_header() y get_footer()</li>
</ul>
</section>
<section>
<ul>
<li>En ocasiones podemos encontrarnos con que para ciertos sitios necesitemos una cabecera o pie diferentes. Para ello, se puede usar el siguiente código:</li>
<pre><code><?php get_header( 'tienda' ); ?></code></pre>
<li>Este código cargará <code>header-tienda.php</code> en lugar de header.php</li>
</ul>
</section>
<section>
<h3>Ejercicio</h3>
<p>Separa la zona de cabecera y footer en dos archivos distintos.</p>
</section>
</section>
<section>
<h2>Single posts y Páginas</h2>
<section>
<br>
<ul>
<li>Para mostrar un post singular se suele utilizar <code>single-post.php</code> o <code>single.php</code>. La primera tiene más prioridad, por lo que se intenta cargar antes. Si no existe se intentará con la segunda.</li>
<li>De la misma forma, si mostramos una página estática, WordPress intentará cargar <code>page.php</code>.</li>
</ul>
<p>Las plantillas de las páginas admiten además otras formas de personalización:</p>
<ul>
<li>page-<slug>.php Se cargará sólo para la página con slug = slug</li>
<li>page-<id>.php Se cargará sólo para la página con ID = id</li>
</ul>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Duplica el index.php y llámale <code>single.php</code></li>
<li>Ahora elimina en single.php todo lo que no se necesite al mostrar un post singular</li>
<li>Haz lo mismo para las páginas creando una page.php. Esta vez elimina la sidebar de la página.</li>
<li>Crea reglas de CSS mediante las clases de <body> para que en una página la anchura sea completa. Para los posts se mantendrá tal y como antes.</li>
</ul>
</section>
</section>
<section>
<h2>Archivos</h2>
<section>
<ul>
<li>Son aquellas plantillas que visualizan una lista de posts</li>
<li><code>category.php, tag.php, author.php, date.php y archive.php</code> son todas plantillas de archivo. Cada una muestra una información distinta.</li>
<li>Si las primeras no existen, WordPress intentará mostrar <i>archive.php</i>, si tampoco existe cargará <i>index.php</i></li>
</ul>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Crea una plantilla para categorías y otra para archivos en general.</li>
<li>Copia el contenido de index.php y luego elimina el contenido innecesario.</li>
<li>Para mostrar el nombre de la etiqueta puedes usar <code>single_tag_title()</code></li>
<li>En los archivos no muestres el contenido completo del post, the_excerpt es suficiente.</li>
<li>Crea también un <code>header-archive.php</code> y elimina el menú de dicha plantilla. Llama a dicha cabecera desde archive.php usando <code>get_header()</code></li>
</ul>
</section>
</section>
<section>
<h2>Evitando repetición de código</h2>
<section>
<p>En este punto podemos darnos cuenta de que tenemos casi el mismo código repetido en varias zonas.</p>
<p>Es más que recomendable agrupar el código en común en algún otro sitio e incluirlo desde donde queramos.</p>
<p>Para ello se usa la función <code>get_template_part( $slug, $name )</code></p>
</section>
<section>
<p>Incluir el archivo <code>content.php</code></p>
<pre><code><?php get_template_part( 'content' ) ?></code></pre>
<p>Incluir el archivo <code>content-page.php</code>, si no existe incluir <code>content.php</code></p>
<pre><code><?php get_template_part( 'content', 'page' ) ?></code></pre>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Utiliza <code>get_template_part()</code> para reubicar el contenido del post en <code>content.php</code> (la parte del tag <archive> es suficiente)</li>
<li>Tendrás que volver a emplear algunos <i>Template Tags</i> que habías quitado anteriormente</li>
</ul>
</section>
</section>
<section>
<h2>Página de búsqueda</h2>
<section>
<p><code>search.php</code> se carga cuando estamos intentando realizar una búsqueda. No tiene ninguna particularidad aparte de la función <code>get_search_query()</code></p>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Crea un nuevo fichero, <code>search.php</code>. Básate en <code>index.php</code> para ello pero usa la función get_search_query(). Elimina de index.php lo que ya no necesites.</li>
<li>Recuerda que en la búsqueda sólo queríamos que salieran los títulos de los posts</li>
</ul>
</section>
</section>
<section>
<h2>sidebar.php</h2>
<section>
<p>Podemos incluir nuestro código que saca por pantalla la Sidebar en un archivo llamado <code>sidebar.php</code></p>
<p>Se utiliza de forma parecida a <code>get_header()</code>, usando esta vez <code>get_sidebar()</code> allá donde queramos incluir el código.</p>
</section>
<section>
<p>Incluir el archivo <code>sidebar.php</code></p>
<pre><code><?php get_sidebar() ?></code></pre>
<p>Incluir el archivo <code>sidebar-page.php</code>, si no existe incluir <code>sidebar.php</code></p>
<pre><code><?php get_sidebar( 'page' ) ?></code></pre>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Mueve todos los bloques de código del sidebar a <code>sidebar.php</code></li>
<li>Crea una nueva sidebar en <code>functions.php</code> que se muestre únicamente en <code>single.php</code></li>
</ul>
</section>
</section>
<section>
<h2>404.php</h2>
<ul>
<li>404.php es la plantilla más sencilla: No necesita el Loop para funcionar ya que se carga cuando no se ha encontrado el post al que queremos ir.</li>
<li>Un mensaje “No se ha encontrado nada” podría bastar.</li>
</ul>
</section>
<section>
<h2>author.php</h2>
<section>
<ul>
<li><strong>author.php</strong> es también una plantilla de archivo pero normalmente se intenta sacar los datos del autor en la zona de arriba y esto presenta una dificultad adicional.</li>
<li>La idea es sacar el primer post del Loop y mostrar los datos del autor que queramos.</li>
<li>El problema es que una vez hemos sacado el primer post del Loop, éste no saldrá en el listado: Hay que “rebobinar” los posts usando rewind_posts() y trabajar el Loop con normalidad.</li>
</ul>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Crea una nueva plantilla <code>author.php</code> copiando el contenido de archive.php para empezar con una base.</li>
<li>Utiliza esta estructura para mostrar los datos del autor justo antes de empezar el Loop</li>
<li>Utiliza el siguiente código:</li>
</ul>
</section>
<section>
<pre><code><?php if ( have_posts() ): the_post(); ?>
<div class="author-bio">
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?></div>
<?php if ( get_the_author_meta( 'description' ) ) : ?>
<div class="author-bio-content"><?php the_author_meta( 'description' ); ?></div>
<?php endif; ?>
</div>
<?php rewind_posts(); ?>
<?php endif; ?></code></pre>
<p>Necesitarás también añadir <pre><code><?php the_author_posts_link(); ?></code></pre> En content.php para poder hacer click en algún autor.</p>
</section>
</section>
<section>
<h2>Formatos de posts</h2>
<section>
<p>Los formatos de posts nos permiten fácilmente mostrar los posts de una manera distintiva. Por ejemplo, podríamos querer que los posts de tipo link, no se mostraran de la misma manera que el resto (podríamos eliminar el título o cualquier otra cosa).</p>
</section>
<section>
<p>WordPress permite nativamente los siguientes tipos de posts:</p>
<ul>
<li>aside</li>
<li>gallery</li>
<li>link</li>
<li>image</li>
<li>quote</li>
<li>status</li>
<li>video</li>
<li>audio</li>
<li>chat</li>
</ul>
</section>
<section>
<p>Sin embargo todos estos tipos no están activados por defecto. Para hacerlo, debemos insertar el siguiente código en nuestro functions.php usando el action <code>after_setup_theme</code></p>
<pre><code><?php add_theme_support( 'post-formats', array( 'link', 'aside' ) ); ?></code></pre>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Activa los formatos de posts link y aside en functions.php</li>
<li>Sustituye la sentencia <code>get_template_part( 'content' )</code> en <i>single.php</i> para que en lugar de cargar <i>content.php</i> pueda cargar <i>content-aside.php</i> o <i>content-link.php</i> mediante la función <code>get_post_format()</code></li>
<li>Si el post es de tipo <i>aside</i> muestra sólo el extracto, sin el título del post</li>
<li>Si el post es de tipo <i>link</i> muestra sólo el título</li>
</ul>
</section>
</section>
<section>
<h2>Plantillas de páginas</h2>
<section>
<br>
<p>Funcionan de manera similar a los formatos pero esta vez no hay que activarlos.</p>
<p>Para crear una plantillas de página simplemente crearemos un nuevo fichero .php y le pondremos la siguiente cabecera:</p>
<pre><code>/**
* Template Name: Nombre de la plantilla
*/</code></pre>
<p>
Cuando WordPress cargue una página con una plantilla determinada, intentará cargar dicho fichero en lugar de <i>page.php</i>
</p>
<p>Para que quede todo más organizado es mejor meter las plantillas en un subdirectorio llamado <code>templates</code> dentro de nuestro tema</p>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Crea una nueva plantilla llamada <code>Contact Form</code> en <code>templates/contact-form.php</code></li>
<li>La plantilla deberá ser igual que page.php pero que añada un formulario de contacto después del contenido.</li>
<li>Para el formulario usa el siguiente código: <a href="https://gist.github.com/igmoweb/7eea6cece8a02dd8ab87">https://gist.github.com/igmoweb/7eea6cece8a02dd8ab87</a></li>
<li>Crea una nueva página con dicha plantilla y observa el resultado.</li>
<li>Crea un código en functions.php que utilice el action <code>init</code> para procesar el formulario.</li>
</ul>
</section>
</section>
<section>
<h2>Comentarios</h2>
<section>
<ul>
<li>Para mostrar tanto los comentarios como el formulario para añadir nuevos comentarios se utiliza un nuevo fichero: <code>comments.php</code>. Es uno de los más complicados dentro de un desarrollo de un Tema aunque se puede simplificar mucho.</li>
<li>
Para incluir los comentarios en cualquiera de nuestros archivos se utiliza la siguiente función: <pre><code><?php comments_template( $file, $separate_comments ); ?></code></pre>
</li>
</ul>
</section>
<section>
<ul>
<li>En <code>$file</code> podemos indicar el archivo a cargar pero por defecto es comments.php</li>
<li>Con <code>$separate_comments</code> podemos separar los comentarios por tipo de forma que los comentarios aparezcan antes y luego trackbacks y pingbacks al final.</li>
</ul>
</section>
<section>
<h3>comments.php</h3>
<p>Los comentarios funcionan de forma parecida al Loop pero tiene funciones con distinto nombre</p>
<p><strong>Ejemplo de esquema básico:</strong> <a href="https://gist.github.com/igmoweb/0e9d9f6f086ab34f2cfd">https://gist.github.com/igmoweb/0e9d9f6f086ab34f2cfd</a></p>
</section>
<section>
<ol>
<li>Si el post requiere contraseña, no mostramos los comentarios ( si el usuario ya la ha introducido, <code>post_password_required()</code> devuelve false )</li>
<li>Si los comentarios están abiertos para ese post y además hay comentarios, mostramos los comentarios y el formulario, en otro caso sólo mostramos el formulario</li>
<li>A continuación comprobamos si hay comentarios con <code>have_comments()</code> de forma parecida al Loop</li>
<li>Listamos los comentarios con la función <code>wp_list_comments()</code> que acepta un array de parámetros para personalizarlo a nuestro gusto.</li>
</ol>
</section>
<section>
<ol start="5">
<li>Si hay más de una página en los comentarios (<code>get_comment_pages_count()</code>) y en Ajustes hemos chequeado la opción de Paginar Comentarios (<code>get_option( 'page_comments' )</code>), mostraremos la navegación de comentarios.</li>
<li><code>previous_comments_link()</code> y <code>next_comments_link()</code> sacan los enlaces de paginación</li>
<li><code>comment_form()</code> saca por pantalla el formulario para crear un nuevo comentario.</li>
</ol>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<section>
<ul>
<li>Crea un nuevo archivo <code>comments.php</code> e inclúyelo desde <code>single.php</code> y <code>page.php</code></li>
<li>Pega la estructura básica en él.</li>
</ul>
<p>Basándote en las opciones de <code>wp_list_comments</code> en el Codex, realiza las siguientes personalizaciones:</p>
<ul>
<li>Que el estilo del listado use <ol> en lugar de <ul></li>
<li>Que para cada comentario se ejecute la función (deberías usar el parámetro callback) <code>fictizia_comment()</code>: <a href="https://gist.github.com/igmoweb/d5f8ab051330ddf1433f">https://gist.github.com/igmoweb/d5f8ab051330ddf1433f</a></li>
</ul>
</section>
<section>
<ul>
<li>Muestra justo antes del listado de comentarios un <h2> para mostrar el número de comentarios que hay. La función <code>get_comments_number()</code> puede serte de ayuda.</li>
<li>Si queremos contestar (reply) un comentario, el link cargará de nuevo la página. Para que no tengamos que cargar de nuevo, WordPress ofrece un fichero Javascript entre sus librerías que podemos “encolar” cuyo slug es 'comment-reply'.Añádelo usando <code>wp_enqueue_script()</code>.</li>
</ul>
</section>
</section>
<section>
<h2>Imágenes</h2>
<section>
<p>Cuando subimos una imagen, WordPress genera como mínimo cuatro tamaños distintos a partir de ella:</p>
<ul>
<li><strong>thumbnail</strong>: 150x150</li>
<li><strong>medium</strong>: 300x300 máximo</li>
<li><strong>large</strong>: 640x640 max</li>
<li><strong>full</strong>: El tamaño original de la imagen</li>
</ul>
<p>WordPress permite añadir nuevos tamaños de imágenes si los necesitáramos para nuestro Tema/Plugin: <pre><code><?php add_image_size( 'imagen-destacada', 700, 450, false );</code></pre></p>
</section>
<section>
<p>El último argumento (false) significa que la imagen no será recortada sino que intentará ajustar el tamaño proporcionalmente. Si el parámetro fuera true entonces la imagen será recortada de alto y de largo para conseguir dicho tamaño.</p>
</section>
<section>
<br>
<p>Desde la versión 3.9, dicho parámetro acepta un array que indica la posición del área de recortado. Si no se indica nada, el recorte se hará lo más centrado posible.</p>
<img src="img/thumbs.jpg" style="height:250px;" alt="">
<p>Si una imagen es demasiado pequeña para abarcar uno de los tamaños, éste no será generado.</p>
</section>
<section>
<h3>Uso de imágenes en el Tema</h3>
<ul>
<li>En el caso de los Temas, el uso de los tamaños de imagen suelen utilizarse para las imágenes destacadas.</li>
<li>
Si hemos registrado el tamaño de nuestra imagen en functions.php y asignamos una imagen destacada a nuestro post, podremos sacar dicha imagen por pantalla de la siguiente manera: <pre><code><?php the_post_thumbnail( 'imagen-destacada' );</code></pre>
</li>
</ul>
</section>
<section>
<h3>Uso de imágenes en el Tema</h3>
<ul>
<li>La función, que debe usarse dentro del Loop, acepta un parámetro, el nombre del tamaño de la imagen que debe ser único.</li>
<li>
Por defecto, un Tema no admite imágenes destacadas, hay que registrarlo también usando la siguiente sentencia: <pre><code><?php add_theme_support( 'post-thumbnails' );</code></pre>
</li>
</ul>
</section>
</section>
<section>
<h2>Ejercicio</h2>
<section>
<ul>
<li>Activa las imágenes destacadas en el Tema usando <code>add_theme_support</code></li>
<li>Registra un nuevo tamaño de imagen llamada 'imagen-destacada' de tamaño <strong>600x400</strong> y que se recorte automáticamente con la función <code>add_image_size</code>.</li>
<li>Ahora, dentro del Loop de <code>content.php</code> saca las imágenes destacadas de cada post usando <code>the_post_thumbnail()</code></li>
</ul>
</section>
<section>
<ul>
<li>Asigna una imagen destacada a un post y observa el resultado.</li>
<li>Ahora cambia el tamaño de imagen-destacada a 600x300 y vuelve a ver el resultado.</li>
<li>¿Qué ha pasado?</li>
</ul>
</section>
<section>
<ul>
<li>Cuando cambiamos el tamaño de las imágenes, éstas no se regeneran de nuevo con lo que el tamaño que hemos cambiado ya no lo tenemos en nuestro sitio. Para esto se utiliza un plugin llamado <strong>Regenerate Thumbnails</strong> que vuelve a generar todos los tamaños de cada imagen en nuestro sitio.</li>
<li>Es recomendable usar este plugin cada vez que cambiamos un tamaño pero también cuando cambiamos de Tema ya que los tamaños difieren de un Tema a otro.</li>
</ul>
</section>
</section>
<section>
<h2>Otras plantillas</h2>
<section>
<p>Además de todas las plantillas que hemos visto también existen algunas otras que merece la pena revisar:</p>
<ul>
<li><code>attachment.php</code> Se carga cuando estamos en la página de un elemento de la biblioteca de medios, no sólo imágenes. WordPress es capaz de cargar también image.php sólo para imágenes, o pdf.php sólo para documentos PDFs. Depende del valor post_mime_type del post.</li>
<li><code>searchform.php</code>: Es la plantilla que WordPress utiliza para mostrar el formulario de búsqueda, ya sea en un widget o usando la función <code>get_search_form()</code></li>
</ul>
</section>
</section>
<section>
<h2>Ultimando detalles</h2>
<section>
<h3>screenshot.png</h3>
<p>En la pantalla de administración de selección de tema, cada uno de ellos tiene una imagen representativa. Para incluir uno en nuestro tema simplemente debemos crear un nuevo archivo en nuestro tema llamado screenshot.png con un tamaño ideal de <u>880x660</u> píxeles.</p>
</section>
<section>
<h3>Feeds automáticos</h3>
<p><code>add_theme_support( 'automatic-feed-links');</code> añade dos etiquetas <link> dentro de <head> para indicar cuál es la URL del RSS, tanto de los comentarios como de las entradas.</p>
</section>
<section>
<h3>Soporte RTL</h3>
<p>Para que el Theme sea compatible con un lenguaje RTL como el árabe o hebreo se puede crear un nuevo css llamado <code>rtl.css</code>, WordPress lo añadirá automáticamente si detecta que el lenguaje utilizado es RTL.</p>
</section>
<section>
<br><br>
<h3>Estilos del editor de posts</h3>
<p>Normalmente nos interesará que cuando un usuario edite contenido lo pueda ver de la forma más parecida a como lo verá luego en la
web. Para eso WordPress permite agregar una hoja de estilos sólo para el editor
de posts/páginas, etc... Se usa simplemente la función <code>add_editor_style()</code>
también usando el hook after_theme_setup. WordPress tratará de añadir (si lo
encuentra) una hoja de estilos que se encuentra en nuestro Tema llamada <code>editor-
style.css</code>. Si el lenguaje es RTL, entonces intentará agregar <code>editor-style-rtl.css</code></p>
</section>
<section>
<h3>Variable global $content_width</h3>
<p>No es obligatoria pero es bueno poner el ancho máximo
del contenido de nuestro sitio. WordPress aplica dicho ancho a varios de sus
estilos y algunos plugins podrían utilizarlo.</p>
</section>
<section>
<h3>Title Tag</h3>
<p><code>add_theme_support( 'title-tag' );</code> añadido en 4.1, utiliza la función <code>wp_title()</code> en cabecera. Sirve para que los plugins puedan cambiar el título. Antes se usaba la función directamente, ahora hay que usar <code>add_theme_support()</code></p>
</section>
<section>
<h3>HTML5</h3>
<p><code>add_theme_support( 'html5' );</code></p>
<pre><code>add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );</code></pre>
</section>
</section>
<section>
<h2>Traducción de un Tema</h2>
<section>
<ul>
<li>Antes de ponernos a traducir nuestro Tema será necesario descargarnos el software POEdit <a href="http://poedit.net/download">http://poedit.net/download</a></li>
<li>Una vez tengamos un archivo .po podremos meterlo en una carpeta de nuestro Theme y darle el nombre de nuestro dominio de lenguaje + .po.</li>
<li>Ahora sólo falta decirle a WordPress que registre dicho dominio:
<pre><code>load_theme_textdomain( 'ignacio', get_template_directory() . '/languages' );</code></pre>
</li>
</ul>
</section>
<section>
<ul>
<li>Una vez registrado, podremos traducir nuestro tema a cualquier lenguaje.
WordPress buscará primero en nuestra carpeta de lenguajes si hay alguna
traducción y si no la encuentra irá a <code>wp-content/languages/themes</code>. Si tampoco
existe cargará el idioma en el que hemos escrito nuestras cadenas.</li>
<li>Para indicar a WordPress de qué idioma es nuestra traducción simplemente
llamamos a nuestro .po, <code>nombre-del-dominio-es_ES.po</code> para traducir al español,o <code>nombre-del-dominio-he_IL.po</code> para hacerlo al hebreo.</li>
</ul>
</section>
<section>
<ul>
<li>WordPress debería recoger dicho archivo y traducir las cadenas que le indicamos en el .mo generado por POEdit</li>
<li>La desventaja de situar los archivos en nuestra carpeta del Tema es que al actualizarlo, dichas cadenas se perderán y habrá que traducirlo de nuevo. De la otra forma, las cadenas persisten (incluso cuando actualizamos WordPress).</li>
<li>Instrucciones para crear un archivo PO <a href="https://codex.wordpress.org/User:Skippy/Creating_POT_Files">https://codex.wordpress.org/User:Skippy/Creating_POT_Files</a></li>
</ul>
</section>
</section>
<section>
<h2>Metaboxes</h2>
<section>
<p>Los Meta Boxes permiten añadir información adicional en un Post o Página</p>
<p>Un ejemplo nativo de Meta Box es la zona donde asignamos categorías a un post, pero también lo es la zona de Autor.</p>
<p>Para añadir un Meta Box a las entradas se usa el siguiente código:</p>
<pre><code>add_meta_box( $id, $title, $callback, $post_page, $context, $priority, $callback_args );</code></pre>
</section>
<section>
<ul>
<li><strong>id</strong> — La ID del elemento DIV que envolverá el Meta Box</li>
<li><strong>title</strong> — Título del Meta Box</li>
<li><strong>callback</strong> — Función que sacará por pantalla la información</li>
<li><strong>post_page</strong> — El tipo de post donde mostraremos el Meta Box</li>
<li><strong>context</strong> — normal, advanced o side• priority — Prioridad del contexto, puede ser high, core, default o low</li>
<li><strong>callback_args</strong> — Argumentos para pasar a callback</li>
</ul>
</section>
<section>
<p>Este ejemplo añade un Meta Box que contiene una caja de texto:</p>
<pre><code><?php
add_action( 'add_meta_boxes', 'fictizia_mbe_create' );
function fictizia_mbe_create() {
add_meta_box( 'fictizia-meta', __( 'Info adicional', 'fictizia' ), 'fictizia_show_meta_box', 'post', 'normal', 'high' );
}
function fictizia_show_meta_box( $post ) {
$info = get_post_meta( $post->ID, 'fictizia_additional_info', true );
if ( empty( $info ) )
$info = '';
?>
<?php wp_nonce_field( 'my_meta_box', 'my_meta_box_nonce' ); ?>
<input type="text" name="additional_info" value="<?php echo esc_attr( $info ); ?>" />
<?php
}</code></pre>
</section>
<section>
<p>¿Cómo guardamos ese dato? Usando el action <code>save_post</code>:</p>
<pre><code>add_action( 'save_post', 'fictizia_save_meta' );
function fictizia_save_meta( $post_id ) {
// Verificar que el nonce es válido
if ( ! wp_verify_nonce( $_POST['my_meta_box_nonce'], 'my_meta_box' ) )
return;
// Si es un autosave no lo guardamos
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( isset( $_POST['additional_info'] ) ) {
$info = sanitize_text_field( $_POST['additional_info'] );
update_post_meta( $post_id, 'fictizia_additional_info', $info );
}
}</code></pre>
</section>
<section>
<p>¿Cómo recogemos ahora ese dato para mostrarlo donde queramos?</p>
<pre><code>get_post_meta( get_the_ID(), 'additional_info', true )</code></pre>
</section>
<section>
<h3>Ejercicio</h3>
<ul>
<li>Añade a nuestro Meta Box un campo <select> más con dos opciones: “Tipo libro” o “Tipo Digital”.</li>
<li>El campo debe guardarse en un post_meta adicional</li>
<li>Una vez lo tengas, muéstralo en alguna plantilla de nuestro Tema <code>single.php</code> usando get_post_meta y sacando por pantalla en una lista ambos valores.</li>
</ul>
</section>
</section>
<section>
<h2>Starter Themes</h2>
<p>Los Starter Themes son Temas que incluyen un esqueleto para empezar. Estos son los más famosos:</p>
<ul>
<li><a href="http://underscores.me/">http://underscores.me/</a></li>
<li><a href="http://themble.com/bones/">http://themble.com/bones/</a></li>
<li> <a href="https://roots.io/sage/">https://roots.io/sage/</a> </li>
<li><a href="http://demo.themeum.com/starter/">http://demo.themeum.com/starter/</a></li>
<li><a href="https://github.com/olefredrik/foundationpress">https://github.com/olefredrik/foundationpress</a></li>
</ul>
</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>