Tunea tu WordPress: mejora el aspecto de tu blog/website en WordPress

Iñaki Arenaza & Roberto UribeetxeberriaMondragon Unibertsitatea

{iarenaza,ruribeetxeberria}@mondragon.edu@iarenaza & @globotomy

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

Gestión de temas existentes

Photo by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/

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

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/

Gestión de temas

Para ver que temas tenemos instalados:

Gestión de temas - widgets

Los temas suelen ser más o menos configurables:

Gestión de temas - widgets

Gestión de temas - menús

Gestión de temas - menús

Gestión de temas – opciones de tema

Gestión de temas – fondo

Gestión de temas – cabecera

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.

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – instalar tema

Gestión de temas – borrado

Para borrar los temas (no activos):

Gestión de temas – borrado

Gestión de temas – borrado

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).

Gestión de plugins

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.

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.

Gestión de plugins

Gestión de plugins

Para ver que plugins tenemos instalados:

Gestión de plugins

Gestión de plugins

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.

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.

Gestión de plugins - instalación

Gestión de plugins - instalación

Gestión de plugins - instalación

Gestión de plugins - instalación

Gestión de plugins - borrado

Para deshabilitar/borrar los plugins:

Gestión de plugins - borrado

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).

Creación de nuevos temas

Photo by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668

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

Anatomía de un tema WordPress

Conjunto de ficheros usados para crear el diseño y la funcionalidad de un sitio WordPresshttp://codex.wordpress.org/Theme_Development

44

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

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

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

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

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

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

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

style.css

/*Theme Name: Twenty TenTheme URI: http://wordpress.org/Description: Descripción del temaAuthor: the WordPress teamVersion: 1.2License: GNU General Public LicenseLicense URI: license.txtTags: black, blue, two-columns, ...*/

52

functions.php

Un tema puede tener opcionalmente un fichero de funciones PHP, llamado functions.phpEste 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

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

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.

55[1] http://codex.wordpress.org/Function_Reference

Estructura de una página

56

Compuesta de tres bloques básicos: una cabecera, el cuerpo y un pie de página. Las barras laterales añaden funcionalidad extra.

header.php

footer.php

index.php

sideb

ar.

php

index.php

Muestra el contenido desde “El Bucle” (título, artículos, etc.)Llama a get_header(), get_sidebar(), get_footer()

57

Source: http://www.flickr.com/photos/koalazymonkey/3627199749/

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

header.php

Llamada con get_header() desdelos ficheros deplantilla.Incluye lo queviene antes de la etiqueta <body>, incluida ésta: información meta, scripts, hojas de estilo, nombre del sitio, navegación, etc.

59

Source: http://www.flickr.com/photos/dbreg2007/5679962186/in/photostream

footer.php

Llamada con get_footer().Incluye todo loque vienedespués delcuerpo y lasbarras laterales:créditos,información de copyright, etc.

60

Source: http://www.flickr.com/photos/mickeysucks/29719905/

sidebar.php

Se le llama con get_sidebar ().Añade informacióncontextual del sitio.Habitualmenteincluye widgets.

61

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

Visualización de la portada

1.home.php2. index.php

63

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.php3. index.php

64

Qué es un slug

65

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".

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.php5. index.php

66

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.php4.archive.php5. index.php

67

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.php4.archive.php5. index.php

68

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.php4.archive.php5. index.php

69

Visualización de fechas

1.date.php2.archive.php3. index.php

70

Visualización de búsquedas

1. search.php2. index.php

71

Visualización de 404 (No Encontrado)

1.404.php2. index.php

72

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.php3. single.php4. index.php

73

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

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

“El Bucle”

Muestra cada uno de los artículos publicados en el bloghttp://codex.wordpress.org/The_Loop

76

“El Bucle”

77

<?phpif (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; ?>

Artículos de consulta

78

query_posts('cat=1&showposts=5');http://codex.wordpress.org/Function_Reference/query_posts

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

query_posts()

80

<?php// Mostrar 5 artículos por páginaquery_posts('post_per_page=5');

if (have_posts()) : while (have_posts()) : the_post();?>... <?php endwhile; else: ?>...<?php endif; wp_reset_query();?>

query_posts()

81

<?php// Mostrar los artículos solicitados,// 5 por página, en orden ascendenteglobal $query_string;query_posts( $query_string . '&order=ASC&post_per_page=5');

if (have_posts()) : while (have_posts()) : the_post();?>...

query_posts()

82

<?php// Mostrar sólo el artículo con ID=5query_posts( 'p=5' );

if (have_posts()) : while (have_posts()) : the_post();?>...

query_posts()

83

<?php// Mostrar sólo el adjunto con ID=5query_posts( 'attachement_id=5' );

if (have_posts()) : while (have_posts()) : the_post();?>...

query_posts()

84

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

if (have_posts()) : while (have_posts()) : the_post();?>...

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

get_posts()

86

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

get_posts()

87

<ul><?phpglobal $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>

Etiquetas de plantilla

88

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

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

Etiquetas include

get_header() - Incluye header.php oheader-{nombre}.phpget_footer() - Incluye footer.php ofooter-{nombre}.phpget_sidebar() - Incluye sidebar.php osidebar-{nombre}.php

90

Etiquetas include

get_template_part() - Incluye {slug}.php o {slug-nombre}.phpget_search_form() - Incluye searchform.phpcomments_template() - Incluye comments.php o wp-includes/theme-compat/comments.php

91

body_class()

92

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

post_class()

93

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

get_template_part()

94

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

get_template_part()

95

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.

get_template_part()

96

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.

Formatos de artículo

97

Metadato que puede serusado por el tema parapesonalizar la visualizaciónde un artículo.La lista de formatos es fija(y estándar).Nueva característica apartir de WordPress 3.1.http://codex.wordpress.org/Post_Formats

Formatos de artículo

98

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

Formatos de artículo

99

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' );

has_post_format()

100

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;

get_post_format()

101

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'.

Añadir Javascript

102

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

wp_enqueue_script()

103

<?phpfunction 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');?>

wp_enqueue_script()

104

<?phpfunction 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');?>

Etiquetas condicionales

105

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

Etiquetas condicionales

106

<?phpif ( 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();}?>

Testeo y depuración

107

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_Development#Theme_Testing_ProcessPruebas unitarias para tu tema: http://codex.wordpress.org/Theme_Unit_Test

Referencias adicionales

108

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_Layout

http://codex.wordpress.org/Function_Reference

http://www.evotech.net/blog/2007/06/introduction-to-firebug/