Documentación del curso "Tunea tu WordPress de Enpresa Digitala"

1. Tunea tu WordPress: mejora el
aspecto de tu blog/website en
WordPress
Iñaki Arenaza & Roberto Uribeetxeberria
Mondragon Unibertsitatea
{iarenaza,ruribeetxeberria}@mondragon.edu
@iarenaza & @globotomy

2. Reconocimientos
Esta presentación está basada en la presentación de Thad
Allender, de Graph Paper Press (www.graphpaperpress.com),
titulada “Theme development: an introduction to the basics of
theming with WordPress”
Thad Allender ha concedido generosamente su permiso a Iñaki
Arenaza para poder traducirla al español y ser usada en este curso.
2

3. Gestión de temas existentes
Photo by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/

4. Gestión de temas
Los temas son una forma de configurar el
aspecto de un sitio WordPress: la portada, los
artículos, las páginas, las categorías, etc.
Un tema es una colección de fichero que
trabajan juntos para producir una interfaz de
usuario.
Estos ficheros de denominan ficheros de
plantilla, y pueden incluir plantillas
personalizadas, ficheros de imagen, hojas de
estilo CSS), páginas personalizadas así como
los ficheros de código necesarios (*.php).
Vienen en forma de ficheros .zip

5. Gestión de temas
Al ser tan variados y no necesarios para todo
el mundo, no son parte de la versión estándar
de WordPress (que sólo trae uno de serie:
Twente Eleven).
Es por ello que la práctica totalidad de los
mismo son desarrollados por terceras
personas y su madurez y calidad varían
mucho de unos a otros.
Podemos encontrar muchos de ellos en
http://wordpress.org/extend/themes/

6. Gestión de temas
Para ver que temas tenemos instalados:

7. Gestión de temas - widgets
Los temas suelen ser más o menos configurables:

8. Gestión de temas - widgets

9. Gestión de temas - menús

10. Gestión de temas - menús

11. Gestión de temas – opciones de tema

12. Gestión de temas – fondo

13. Gestión de temas – cabecera

14. Gestión de temas
Podemos instalar nuevos temas:
Obteniendo el fichero .zip por nuestra
cuenta, descomprimiéndolo y
copiando/subiendo la carpeta con todo su
contenido al directorio /wp-content/themes.
Desde el dashboard, en la entrada del
menú 'Apariencia'. Esta opción a veces no
funciona en algunos proveedores de
hosting, por lo que no queda más remedio
que usar la opción anterior.

15. Gestión de temas – instalar tema

16. Gestión de temas – instalar tema

17. Gestión de temas – instalar tema

18. Gestión de temas – instalar tema

19. Gestión de temas – instalar tema

20. Gestión de temas – instalar tema

21. Gestión de temas – instalar tema

22. Gestión de temas – borrado
Para borrar los temas (no activos):

23. Gestión de temas – borrado

24. Gestión de temas – borrado

25. Gestión de temas – borrado
Puede que algunos temas no se puedan
borrar de esta forma (no tengamos
permisos en disco para hacerlo desde el
dashboard).
En ese caso hay que borrar el directorio del
tema de /wp-content/themes de forma
manual (en el servidor o via FTP).

26. Gestión de plugins

27. Gestión de plugins
Los plugins son conjuntos de scripts PHP
que añaden funcionalidad a WordPress.
Vienen en forma de fichero .zip.
A veces mejoran la funcionalidad existente
en WordPress y otras añaden
funcionalidades inexistentes.
Hay una infinidad de plugins que cubren
funcionalidades muy variadas: sistemas de
puntuación de artículos, integración con
redes sociales, SEO, analítica web,
artículos multi-idioma, etc.

28. Gestión de plugins
Al ser tan variados y no necesarios para todo el
mundo, no son parte de la versión estándar de
WordPress.
Es por ello que la práctica totalidad de los
mismo son desarrollados por terceras personas
y su madurez y calidad varían mucho de unos a
otros.
Podemos encontrar la mayoría de ellos en
http://wordpress.org/extend/plugins/
Casi todos ellos indican en su página en la base
de datos de plugins para que versiones de
WordPress son compatibles.

29. Gestión de plugins

30. Gestión de plugins
Para ver que plugins tenemos instalados:

31. Gestión de plugins

32. Gestión de plugins

33. Gestión de plugins
Podemos instalar nuevos plugins:
Obteniendo el fichero .zip por nuestra cuenta,
descomprimiéndolo y copiando/subiendo la
carpeta con todo su contenido al directorio
/wp-content/plugins.
Desde el dashboard, en la entrada del menú
'Plugins'. Esta opción a veces no funciona en
algunos proveedores de hosting, por lo que no
queda más remedio que usar la opción
anterior.

34. Gestión de plugins
Algunos (pocos) plugins necesitan acciones
manuales adicionales. Suelen indicar qué
acciones son en el fichero README.txt que
hay dentro del .zip.
¡ATENCIÓN!: Un plugin con errores o
incompatible con nuestra versión de
WordPress puede dejar nuestro blog fuera
de servicio.
Hacer una copia de seguridad completa del
blog antes de instalar un nuevo plugin, por si
acaso.

35. Gestión de plugins - instalación

36. Gestión de plugins - instalación

37. Gestión de plugins - instalación

38. Gestión de plugins - instalación

39. Gestión de plugins - borrado
Para deshabilitar/borrar los plugins:

40. Gestión de plugins - borrado

41. Gestión de plugins - borrado
Puede que algunos plugins no se puedan
borrar de esta forma (no tengamos
permisos en disco para hacerlo desde el
dashboard).
En ese caso hay que borrar el directorio del
plugin de /wp-content/plugins de forma
manual (en el servidor o via FTP).

42. Creación de nuevos temas
Photo by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668

43. Herramientas recomendadas
Firefox:
Firebug: http://getfirebug.com/
Web Developer:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Chrome:
Firebug Lite http://getfirebug.com/firebuglite
Web Developer:
http://chrispederick.com/work/web-developer/download/chrome/
IE 6/7: Internet Explorer Developer Toolbar
http://www.microsoft.com/download/en/details.aspx?id=18359
IE 8/9: Developer Tools (incorporado)
43

44. Anatomía de un tema WordPress
Conjunto de ficheros usados para
crear el diseño y la funcionalidad de
un sitio WordPress
http://codex.wordpress.org/Theme_Development
44

45. Anatomía de un tema WordPress
Los ficheros están en
/wp-content/themes/
Incluyen hojas de estilo, ficheros de
plantillas y funciones, imágenes,
código javascript, etc.
45

46. Anatomía de un tema WordPress
style.css – La hoja de estilos
principal. Es obligatorio incluirla en
el tema.
index.php – Plantilla principal. Si el
tema incluye plantillas propias, el
fichero debe existir.
functions.php – Opcional. Funciones
de código PHP. Se carga automáti-
camente durante la inicialización de
WordPress.
46

47. Anatomía de un tema WordPress
comments.php – Plantilla para los
comentarios. Si no existe, se usa wp-
comments.php.
single.php – Plantilla para un artículo
individual. Usada cuando se solicita
un artículo determinado.
Para este tipo de plantilla y el resto
de plantillas de consulta, se usa
index.php si la plantilla de ese tipo no
se encuentra.
47

48. Anatomía de un tema WordPress
page.php – Plantilla de página. Usada
cuando se solicita una página.
category.php – Plantilla de categoría.
Usada cuando se consulta una
categoría.
tag.php – Plantilla de etiqueta. Usada
cuando se consulta una etiqueta.
48

49. Anatomía de un tema WordPress
taxonomy.php – Plantilla de
taxonomía. Usada cuando se consulta
una taxonomía.
author.php – Plantilla de autor. Usada
cuando se consulta un autor.
date.php – Plantilla de fecha/hora.
Usada cuando se consulta una fecha
u hora.
49

50. Anatomía de un tema WordPress
archive.php – Plantilla de archivo.
Usada cuando se consulta una
categoría, autor o fecha. Será
sustituida por category.php,
author.php o date.php, si existen,
para las consultas respectivas.
search.php – Plantilla de búsqueda.
Usada cuando se realiza una
búsqueda.
50

51. Anatomía de un tema WordPress
404.php – Plantilla 404 (No
Encontrado). Usada cuando
Wordpress no puede encontrar una
entrada que concuerde con la
búsqueda.
51

52. style.css
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: Descripción del tema
Author: the WordPress team
Version: 1.2
License: GNU General Public License
License URI: license.txt
Tags: black, blue, two-columns, ...
*/
52

53. functions.php
Un tema puede tener opcionalmente un
fichero de funciones PHP, llamado
functions.php
Este fichero actuá básicamente como
un plugin, y si está presente se carga
automáticamente durante la
inicialización de WordPress (tanto para
las páginas de administración como las
públicas).
53

54. functions.php
Algunos usos sugeridos para este
fichero:
Habilitar características del tema como
sidebars, menús de navegación, miniaturas de
los artículos, formatos de los artículos,
cabeceras personalizadas, fondos
personalizados y otros.
Definir funciones usadas en varios de los
ficheros de plantilla del tema.
Crear el menú de opciones, dando al
administrador opciones para ajustar colores,
estilos, tipos de letra y otros aspectos del tema.
54

55. functions.php
El tema por defecto de WordPress
contiene un fichero functions.php que
define la mayoría de estas
funcionalidades, por lo que podemos
usarlo como modelo.
Puesto que el fichero functions.php
básicamente opera como un plugin, la
página Function_Reference[1] es el
mejor sitio para ver qué podemos hacer
desde este fichero.
[1] http://codex.wordpress.org/Function_Reference
55

56. Estructura de una página
header.php
sidebar.php
index.php
footer.php
Compuesta de tres bloques básicos: una
cabecera, el cuerpo y un pie de página. Las
barras laterales añaden funcionalidad
extra.
56

57. index.php
Source: http://www.flickr.com/photos/koalazymonkey/3627199749/
Muestra el contenido desde “El
Bucle” (título, artículos, etc.)
Llama a get_header(), get_sidebar(),
get_footer() 57

58. index.php
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<h1><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
58

59. header.php
Llamada con
get_header() desde
los ficheros de
plantilla.
Incluye lo que Source: http://www.flickr.com/photos/dbreg2007/5679962186/in/photostream
viene antes de la etiqueta <body>,
incluida ésta: información meta,
scripts, hojas de estilo, nombre del
sitio, navegación, etc.
59

60. footer.php
Llamada con
get_footer().
Incluye todo lo
que viene
después del
cuerpo y las
barras laterales:
créditos, Source: http://www.flickr.com/photos/mickeysucks/29719905/
información de copyright, etc.
60

61. sidebar.php
Se le llama con
get_sidebar ().
Añade información
contextual del sitio.
Habitualmente
incluye widgets.
61

62. Jerarquía de ficheros de plantilla
Orden en que se eligen los ficheros
de plantilla a utilizar para mostrar un
contenido determinado:
http://codex.wordpress.org/Template_Hierarchy
62

63. Visualización de la portada
1. home.php
2. index.php
63

64. Visualización de artículos individuales
1. single-{tipo_de_artículo}.php Por
ejemplo, si el tipo de artículo es
'mis-videos', WordPress buscará el
fichero single-mis-videos.php
2. single.php
3. index.php
64

65. Qué es un slug
Unas pocas palabras que describen
un artículo o una página.
Son habitualmente una versión de
URL amigable del título del artículo
(generado automáticamente por
WordPress).
El slug del artículo http://wordpress.
org/development/2006/06/wordpress-
203/ es "wordpress-203".
65

66. Visualización de páginas
1. plantilla-a-medida – Donde plantilla-
a-medida es la plantilla asignada a
la página.
2. page-{slug}.php Si el slug es 'XYZ',
se buscará el fichero page-XYZ.php
3. page-{id}.php Si el ID es 99,
WordPress buscará el fichero page-
99.php
4. page.php
5. index.php
66

67. Visualización de categorías
1. category-{slug}.php Si el slug de la
categoría es 'XYZ', se buscará el
fichero category-XYZ.php
2. category-{id}.php Si el ID es 99, se
buscará el fichero category-99.php
3. category.php
4. archive.php
5. index.php
67

68. Visualización de etiquetas
1. tag-{slug}.php Si el slug es 'XYZ', se
buscará el fichero tag-XYZ.php
2. tag-{id}.php Si el ID 99, se buscará
el fichero tag-99.php
3. tag.php
4. archive.php
5. index.php
68

69. Visualización de autores
1. author-{alias}.php Si el alias del
autor es 'XYZ', se buscará el fichero
author-XYZ.php
2. author-{id}.php Si el ID es 99, se
buscará el fichero author-99.php
3. author.php
4. archive.php
5. index.php
69

70. Visualización de fechas
1. date.php
2. archive.php
3. index.php
70

71. Visualización de búsquedas
1. search.php
2. index.php
71

72. Visualización de 404 (No Encontrado)
1. 404.php
2. index.php
72

73. Visualización de adjuntos
1. {Tipo_MIME}.php El Tipo_MIME
puede ser cualquier tipo MIME
estándar: 'image', 'video', 'audio',
'application', etc. Se buscará
image.php, video.php, audio.php,
application.php, etc.
2. attachment.php
3. single.php
4. index.php
73

74. Entorno de desarrollo
Para poder ejecutar WordPress
localmente:
Wamp (MS Windows)
http://www.wampserver.com/
Mamp (OSX)
http://www.mamp.info/
Xampp (MS Windows y Linux)
http://www.apachefriends.org/
Paquetes de Apache, MySQL y PHP
de la distribución Linux usada.
74

75. Control de versiones
Simplifica el desarrollo colaborativo,
el seguimiento de cambios, la
publicación del tema, etc.
Algunas opciones:
Git: http://git-scm.com/
GitHub: http://github.com/
Mercurial: http://mercurial.selenic.com/
bitbucket: http://bitbucket.org/
Subversion: http://subversion.tigris.org/
75

76. “El Bucle”
Muestra cada uno de los artículos
publicados en el blog
http://codex.wordpress.org/The_Loop
76

77. “El Bucle”
<?php
if (have_posts()) :
while (have_posts()) :
the_post();?>
Añadir etiqueas de plantilla para
mostrar el contenido del artículo.
<?php endwhile; else: ?>
<p><?php _e('No hay artículos.'); ?>
</p>
<?php endif; ?>
77

78. Artículos de consulta
query_posts('cat=1&showposts=5');
http://codex.wordpress.org/Function_Reference/query_posts
78

79. query_posts()
Se usa para controlar qué artículos
se muestran en “El Bucle”:
Un único artículo en la portada.
Todos los artículos de un intervalo de
tiempo.
(Solo) El último artículo en la portada.
Cambiar como se ordenan los artículos.
Mostrar artículos de una única
categoría.
Excluir una o más categorías.
79

80. query_posts()
<?php
// Mostrar 5 artículos por página
query_posts('post_per_page=5');
if (have_posts()) :
while (have_posts()) :
the_post();?>
...
<?php endwhile; else: ?>
...
<?php endif; wp_reset_query();
?>
80

81. query_posts()
<?php
// Mostrar los artículos solicitados,
// 5 por página, en orden ascendente
global $query_string;
query_posts( $query_string .
'&order=ASC&post_per_page=5');
if (have_posts()) :
while (have_posts()) :
the_post();?>
...
81

82. query_posts()
<?php
// Mostrar sólo el artículo con ID=5
query_posts( 'p=5' );
if (have_posts()) :
while (have_posts()) :
the_post();?>
...
82

83. query_posts()
<?php
// Mostrar sólo el adjunto con ID=5
query_posts( 'attachement_id=5' );
if (have_posts()) :
while (have_posts()) :
the_post();?>
...
83

84. query_posts()
<?php
// Mostar artículos de categoría con
// slug='category-slug', de 5 en 5
query_posts(array('category_name' =>
'category-slug',
'posts_per_page' =>
5 ));
if (have_posts()) :
while (have_posts()) :
the_post();?>
...
84

85. query_posts()
La función query_posts() está
pensada para modificar sólo el Bucle
de la página principal.
No esá pensada como una forma de
crear Bucles secundarios en la
página.
Si queremos crear Bucles separados
fuera del Bucle principal, deberemos
usar get_posts() en su lugar.
85

86. get_posts()
get_posts('cat=1&numberposts=5');
http://codex.wordpress.org/Template_Tags/get_posts
86

87. get_posts()
<ul>
<?php
global $post;
$args = array( 'numberposts' => 5,
'offset'=> 1,
'category' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post); ?>
<li><a href="<?php the_permalink();?>">
<?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
87

88. Etiquetas de plantilla
Se usan para mostrar información
dinámica en las plantillas, o para
personalizar el aspecto de las mismas.
http://codex.wordpress.org/Template_Tags
88

89. Etiquetas include
Se usan dentro de un fichero de
plantilla (p. ej. index.php) para
incluir/ejecutar el HTML/PHP de otro
fichero de plantilla (p.ej. header.php)
get_header(), get_footer(),
get_sidebar(), get_template_part(),
get_search_form(),
comments_template().
http://codex.wordpress.org/Include_Tags
89

90. Etiquetas include
get_header() - Incluye header.php o
header-{nombre}.php
get_footer() - Incluye footer.php o
footer-{nombre}.php
get_sidebar() - Incluye sidebar.php o
sidebar-{nombre}.php
90

91. Etiquetas include
get_template_part() - Incluye
{slug}.php o {slug-nombre}.php
get_search_form() - Incluye
searchform.php
comments_template() - Incluye
comments.php o wp-includes/theme-
compat/comments.php
91

92. body_class()
Ayuda a aplicar los estilos CSS de
forma más efectiva, al aplicar
diferentes clases al elemento
<body>.
Incluyendo esto en nuestra plantilla:
<body <?php body_class(); ?>
Obtenemos este HTML*:
<body class=”archive category
category-foto-diaria>
http://codex.wordpress.org/Function_Reference/body_class
92

93. post_class()
Como body_class(), ayuda a aplicar los
estilos CSS, al aplicar diferentes clases al
elemento donde se le incluye.
Incluyendo esto en nuestra plantilla:
<article id="post-<?php the_ID(); ?>"
<?php post_class(); ?>>
Obtenemos este HTML:
<article id="post-99" class="post-99
post type-post category-XYZ tag-XYZ
tag-IJK">
http://codex.wordpress.org/Function_Reference/post_class
93

94. get_template_part()
Permite recuperar elementos
específicos de la plantilla, con
búsqueda jerárquica.
http://codex.wordpress.org/Function_Reference/get_template_part
94

95. get_template_part()
get_template_part('loop', 'index');
Busca el fichero 'loop-index.php' en
el tema actual.
Si no lo encuentra, busca 'loop.php'.
Si es un tema hijo y no encuentra los
ficheros anteriores, repite la
búsqueda en el tema padre.
95

96. get_template_part()
Todas las “plantillas principales”
(archive.php, author.php,
category.php, etc) usan esta
funcionalidad para encontrar una
plantilla específica para el tipo de
vista.
96

97. Formatos de artículo
Metadato que puede ser
usado por el tema para
pesonalizar la visualización
de un artículo.
La lista de formatos es fija
(y estándar).
Nueva característica a
partir de WordPress 3.1.
http://codex.wordpress.org/Post_Formats
97

98. Formatos de artículo
Tenemos que usar
add_theme_support() para decirle a
WordPress que formatos vamos a
soportar.
add_theme_support( 'post-formats',
array( 'aside', 'gallery' ) );
Hay que hacerlo en el fichero
functions.php.
Lo ideal es usar el hook
after_setup_theme para hacerlo
98

99. Formatos de artículo
También tenemos que usar
add_post_type_support() para decir
qué tipos de artículos soportan qué
tipos de formatos.
add_post_type_support( 'page',
'post-formats' );
add_post_type_support( 'mi_tipo_de_
articulo', 'post-formats' );
99

100. has_post_format()
while ( the_loop() ):
if ( has_post_format( 'gallery' ) ) :
// HTML para formato galería
elseif ( has_post_format( 'video' ) ) :
// HTML para formato video
elseif ( has_post_format( 'aside' ) ) :
// HTML para formato aside
else :
// HTML para el resto de artículos
endif;
endwhile;
100

101. get_post_format()
while ( the_loop() ):
get_template_part('format',
get_post_format());
endwhile;
Si el formato es 'Link' buscamos el fichero
'format-link.php'.
Si el formato es 'Aside', buscamos el fichero
'format-aside.php'.
Para artículos sin formato buscamos el
fichero 'format-standard.php'.
Si no los encontramos, usamos
'format.php'. 101

102. Añadir Javascript
Usar wp_enqueue_script() para añadir
nuestros propios scripts o bibliotecas.
http://codex.wordpress.org/Function_Reference/
wp_enqueue_script
102

103. wp_enqueue_script()
<?php
function mi_metodo_scripts() {
// Script estándar de WordPress.
// Ver lista de plugins estándar en
// la página de la función
wp_enqueue_script('scriptaculous');
}
add_action('wp_enqueue_scripts',
'mi_metodo_scripts');
?>
103

104. wp_enqueue_script()
<?php
function mi_metodo_scripts() {
// Script propio de mi tema
wp_enqueue_script('nuevoscript',
plugins_url('/js/nuevoscript.js',
__FILE__));
}
add_action('wp_enqueue_scripts',
'mi_metodo_scripts');
?>
104

105. Etiquetas condicionales
Permiten cambiar qué se muestra, y
como se muestra, en función de las
condiciones que cumple la página a
mostrar.
http://codex.wordpress.org/Conditional_Tags
105

106. Etiquetas condicionales
<?php
if ( is_home() || is_single() ) {
// En la portada, o viendo un artículo
// individual: ver todo el artículo
the_content();
}
else {
// En el resto de casos, sólo un
// extracto.
the_excerpt();
}
?>
106

107. Testeo y depuración
wp-config.php: define('WP_DEBUG', true);
http://wordpress.org/extend/plugins/
theme-check/
http://wordpress.org/extend/plugins/
log-deprecated-notices/
http://codex.wordpress.org/Theme_Develo
pment#Theme_Testing_Process
Pruebas unitarias para tu tema:
http://codex.wordpress.org/Theme_Unit_T
est
107

108. Referencias adicionales
Allan Cole, Raena Jackson Armitage, Brandon R.
Jones, and Jeffrey Way. "Build Your Own Wicked
WordPress Themes". 2010. SitePoint Pty. Ltd.
ISBN 978-0-9804552-9-8
http://codex.wordpress.org/Theme_Development
http://yoast.com/wordpress-theme-anatomy/
http://codex.wordpress.org/Blog_Design_and_Lay
out
http://codex.wordpress.org/Function_Reference
http://www.evotech.net/blog/2007/06/introductio
n-to-firebug/
108