Tunea tu wordpress
-
Upload
inaki-arenaza -
Category
Education
-
view
3.880 -
download
1
description
Transcript of Tunea tu wordpress
![Page 1: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/1.jpg)
Tunea tu WordPress: mejora el aspecto de tu blog/website en WordPress
Iñaki Arenaza & Roberto UribeetxeberriaMondragon Unibertsitatea
{iarenaza,ruribeetxeberria}@mondragon.edu@iarenaza & @globotomy
![Page 2: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/2.jpg)
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
![Page 3: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/3.jpg)
Gestión de temas existentes
Photo by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/
![Page 4: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/4.jpg)
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
![Page 5: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/5.jpg)
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/
![Page 6: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/6.jpg)
Gestión de temas
Para ver que temas tenemos instalados:
![Page 7: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/7.jpg)
Gestión de temas - widgets
Los temas suelen ser más o menos configurables:
![Page 8: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/8.jpg)
Gestión de temas - widgets
![Page 9: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/9.jpg)
Gestión de temas - menús
![Page 10: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/10.jpg)
Gestión de temas - menús
![Page 11: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/11.jpg)
Gestión de temas – opciones de tema
![Page 12: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/12.jpg)
Gestión de temas – fondo
![Page 13: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/13.jpg)
Gestión de temas – cabecera
![Page 14: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/14.jpg)
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.
![Page 15: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/15.jpg)
Gestión de temas – instalar tema
![Page 16: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/16.jpg)
Gestión de temas – instalar tema
![Page 17: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/17.jpg)
Gestión de temas – instalar tema
![Page 18: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/18.jpg)
Gestión de temas – instalar tema
![Page 19: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/19.jpg)
Gestión de temas – instalar tema
![Page 20: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/20.jpg)
Gestión de temas – instalar tema
![Page 21: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/21.jpg)
Gestión de temas – instalar tema
![Page 22: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/22.jpg)
Gestión de temas – borrado
Para borrar los temas (no activos):
![Page 23: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/23.jpg)
Gestión de temas – borrado
![Page 24: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/24.jpg)
Gestión de temas – borrado
![Page 25: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/25.jpg)
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).
![Page 26: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/26.jpg)
Gestión de plugins
![Page 27: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/27.jpg)
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.
![Page 28: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/28.jpg)
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.
![Page 29: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/29.jpg)
Gestión de plugins
![Page 30: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/30.jpg)
Gestión de plugins
Para ver que plugins tenemos instalados:
![Page 31: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/31.jpg)
Gestión de plugins
![Page 32: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/32.jpg)
Gestión de plugins
![Page 33: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/33.jpg)
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.
![Page 34: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/34.jpg)
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.
![Page 35: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/35.jpg)
Gestión de plugins - instalación
![Page 36: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/36.jpg)
Gestión de plugins - instalación
![Page 37: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/37.jpg)
Gestión de plugins - instalación
![Page 38: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/38.jpg)
Gestión de plugins - instalación
![Page 39: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/39.jpg)
Gestión de plugins - borrado
Para deshabilitar/borrar los plugins:
![Page 40: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/40.jpg)
Gestión de plugins - borrado
![Page 41: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/41.jpg)
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).
![Page 42: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/42.jpg)
Creación de nuevos temas
Photo by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668
![Page 43: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/43.jpg)
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
![Page 44: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/44.jpg)
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
![Page 45: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/45.jpg)
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
![Page 46: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/46.jpg)
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
![Page 47: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/47.jpg)
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
![Page 48: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/48.jpg)
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
![Page 49: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/49.jpg)
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
![Page 50: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/50.jpg)
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
![Page 51: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/51.jpg)
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
![Page 52: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/52.jpg)
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
![Page 53: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/53.jpg)
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
![Page 54: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/54.jpg)
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
![Page 55: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/55.jpg)
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
![Page 56: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/56.jpg)
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
![Page 57: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/57.jpg)
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/
![Page 58: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/58.jpg)
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
![Page 59: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/59.jpg)
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
![Page 60: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/60.jpg)
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/
![Page 61: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/61.jpg)
sidebar.php
Se le llama con get_sidebar ().Añade informacióncontextual del sitio.Habitualmenteincluye widgets.
61
![Page 62: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/62.jpg)
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
![Page 63: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/63.jpg)
Visualización de la portada
1.home.php2. index.php
63
![Page 64: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/64.jpg)
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
![Page 65: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/65.jpg)
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".
![Page 66: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/66.jpg)
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
![Page 67: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/67.jpg)
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
![Page 68: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/68.jpg)
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
![Page 69: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/69.jpg)
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
![Page 70: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/70.jpg)
Visualización de fechas
1.date.php2.archive.php3. index.php
70
![Page 71: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/71.jpg)
Visualización de búsquedas
1. search.php2. index.php
71
![Page 72: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/72.jpg)
Visualización de 404 (No Encontrado)
1.404.php2. index.php
72
![Page 73: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/73.jpg)
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
![Page 74: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/74.jpg)
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
![Page 75: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/75.jpg)
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
![Page 76: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/76.jpg)
“El Bucle”
Muestra cada uno de los artículos publicados en el bloghttp://codex.wordpress.org/The_Loop
76
![Page 77: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/77.jpg)
“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; ?>
![Page 78: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/78.jpg)
Artículos de consulta
78
query_posts('cat=1&showposts=5');http://codex.wordpress.org/Function_Reference/query_posts
![Page 79: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/79.jpg)
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
![Page 80: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/80.jpg)
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();?>
![Page 81: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/81.jpg)
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();?>...
![Page 82: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/82.jpg)
query_posts()
82
<?php// Mostrar sólo el artículo con ID=5query_posts( 'p=5' );
if (have_posts()) : while (have_posts()) : the_post();?>...
![Page 83: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/83.jpg)
query_posts()
83
<?php// Mostrar sólo el adjunto con ID=5query_posts( 'attachement_id=5' );
if (have_posts()) : while (have_posts()) : the_post();?>...
![Page 84: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/84.jpg)
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();?>...
![Page 85: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/85.jpg)
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
![Page 86: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/86.jpg)
get_posts()
86
get_posts('cat=1&numberposts=5');http://codex.wordpress.org/Template_Tags/get_posts
![Page 87: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/87.jpg)
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>
![Page 88: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/88.jpg)
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
![Page 89: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/89.jpg)
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
![Page 90: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/90.jpg)
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
![Page 91: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/91.jpg)
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
![Page 92: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/92.jpg)
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
![Page 93: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/93.jpg)
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
![Page 94: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/94.jpg)
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
![Page 95: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/95.jpg)
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.
![Page 96: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/96.jpg)
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.
![Page 97: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/97.jpg)
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
![Page 98: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/98.jpg)
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
![Page 99: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/99.jpg)
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' );
![Page 100: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/100.jpg)
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;
![Page 101: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/101.jpg)
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'.
![Page 102: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/102.jpg)
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
![Page 103: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/103.jpg)
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');?>
![Page 104: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/104.jpg)
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');?>
![Page 105: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/105.jpg)
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
![Page 106: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/106.jpg)
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();}?>
![Page 107: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/107.jpg)
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
![Page 108: Tunea tu wordpress](https://reader034.fdocuments.us/reader034/viewer/2022051816/546da446b4af9f662c8b5515/html5/thumbnails/108.jpg)
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/