Your SlideShare is downloading. ×
0
Tunea tu WordPress: mejora elaspecto de tu blog/website enWordPress        Iñaki Arenaza & Roberto Uribeetxeberria        ...
ReconocimientosEsta presentación está basada en la presentación de ThadAllender, de Graph Paper Press (www.graphpaperpress...
Gestión de temas existentesPhoto by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/
Gestión de temasLos temas son una forma de configurar elaspecto de un sitio WordPress: la portada, losartículos, las págin...
Gestión de temasAl ser tan variados y no necesarios para todoel mundo, no son parte de la versión estándarde WordPress (qu...
Gestión de temasPara ver que temas tenemos instalados:
Gestión de temas - widgetsLos 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 temasPodemos instalar nuevos temas:  Obteniendo el fichero .zip por nuestra  cuenta, descomprimiéndolo y  copia...
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 – borradoPara borrar los temas (no activos):
Gestión de temas – borrado
Gestión de temas – borrado
Gestión de temas – borradoPuede que algunos temas no se puedanborrar de esta forma (no tengamospermisos en disco para hace...
Gestión de plugins
Gestión de pluginsLos plugins son conjuntos de scripts PHPque añaden funcionalidad a WordPress.Vienen en forma de fichero ...
Gestión de pluginsAl ser tan variados y no necesarios para todo elmundo, no son parte de la versión estándar deWordPress.E...
Gestión de plugins
Gestión de pluginsPara ver que plugins tenemos instalados:
Gestión de plugins
Gestión de plugins
Gestión de pluginsPodemos instalar nuevos plugins:  Obteniendo el fichero .zip por nuestra cuenta,  descomprimiéndolo y co...
Gestión de pluginsAlgunos (pocos) plugins necesitan accionesmanuales adicionales. Suelen indicar quéacciones son en el fic...
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 - borradoPara deshabilitar/borrar los plugins:
Gestión de plugins - borrado
Gestión de plugins - borradoPuede que algunos plugins no se puedanborrar de esta forma (no tengamospermisos en disco para ...
Creación de nuevos temasPhoto by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668
Herramientas recomendadasFirefox:   Firebug: http://getfirebug.com/   Web Developer:   https://addons.mozilla.org/en-US/fi...
Anatomía de un tema WordPressConjunto de ficheros usados paracrear el diseño y la funcionalidad deun sitio WordPresshttp:/...
Anatomía de un tema WordPressLos ficheros están en/wp-content/themes/Incluyen hojas de estilo, ficheros deplantillas y fun...
Anatomía de un tema WordPressstyle.css – La hoja de estilosprincipal. Es obligatorio incluirla enel tema.index.php – Plant...
Anatomía de un tema WordPresscomments.php – Plantilla para loscomentarios. Si no existe, se usa wp-comments.php.single.php...
Anatomía de un tema WordPresspage.php – Plantilla de página. Usadacuando se solicita una página.category.php – Plantilla d...
Anatomía de un tema WordPresstaxonomy.php – Plantilla detaxonomía. Usada cuando se consultauna taxonomía.author.php – Plan...
Anatomía de un tema WordPressarchive.php – Plantilla de archivo.Usada cuando se consulta unacategoría, autor o fecha. Será...
Anatomía de un tema WordPress404.php – Plantilla 404 (NoEncontrado). Usada cuandoWordpress no puede encontrar unaentrada q...
style.css/*Theme Name: Twenty TenTheme URI: http://wordpress.org/Description: Descripción del temaAuthor: the WordPress te...
functions.phpUn tema puede tener opcionalmente unfichero de funciones PHP, llamadofunctions.phpEste fichero actuá básicame...
functions.phpAlgunos usos sugeridos para estefichero: Habilitar características del tema como sidebars, menús de navegació...
functions.phpEl tema por defecto de WordPresscontiene un fichero functions.php quedefine la mayoría de estasfuncionalidade...
Estructura de una página          header.php                                sidebar.php           index.php           foot...
index.php       Source: http://www.flickr.com/photos/koalazymonkey/3627199749/Muestra el contenido desde “ElBucle” (título...
index.php<?php get_header(); ?><?php if (have_posts()) : while (have_posts()) : the_post();?><h1><a href="<?php the_permal...
header.phpLlamada conget_header() desdelos ficheros deplantilla.Incluye lo que  Source: http://www.flickr.com/photos/dbreg...
footer.phpLlamada conget_footer().Incluye todo loque vienedespués delcuerpo y lasbarras laterales:créditos,         Source...
sidebar.phpSe le llama conget_sidebar ().Añade informacióncontextual del sitio.Habitualmenteincluye widgets.              ...
Jerarquía de ficheros de plantillaOrden en que se eligen los ficherosde plantilla a utilizar para mostrar uncontenido dete...
Visualización de la portada1. home.php2. index.php                                63
Visualización de artículos individuales1. single-{tipo_de_artículo}.php Por   ejemplo, si el tipo de artículo es   mis-vid...
Qué es un slugUnas pocas palabras que describenun artículo o una página.Son habitualmente una versión deURL amigable del t...
Visualización de páginas1. plantilla-a-medida – Donde plantilla-   a-medida es la plantilla asignada a   la página.2. page...
Visualización de categorías1. category-{slug}.php Si el slug de la   categoría es XYZ, se buscará el   fichero category-XY...
Visualización de etiquetas1. tag-{slug}.php Si el slug es XYZ, se   buscará el fichero tag-XYZ.php2. tag-{id}.php Si el ID...
Visualización de autores1. author-{alias}.php Si el alias del   autor es XYZ, se buscará el fichero   author-XYZ.php2. aut...
Visualización de fechas1. date.php2. archive.php3. index.php                              70
Visualización de búsquedas1. search.php2. index.php                                 71
Visualización de 404 (No Encontrado)1. 404.php2. index.php                                   72
Visualización de adjuntos1. {Tipo_MIME}.php El Tipo_MIME   puede ser cualquier tipo MIME   estándar: image, video, audio, ...
Entorno de desarrolloPara poder ejecutar WordPresslocalmente:  Wamp (MS Windows)  http://www.wampserver.com/  Mamp (OSX)  ...
Control de versionesSimplifica el desarrollo colaborativo,el seguimiento de cambios, lapublicación del tema, etc.Algunas o...
“El Bucle”Muestra cada uno de los artículospublicados en el bloghttp://codex.wordpress.org/The_Loop                       ...
“El Bucle”<?phpif (have_posts()) :    while (have_posts()) :        the_post();?>Añadir etiqueas de plantilla paramostrar ...
Artículos de consultaquery_posts(cat=1&showposts=5);http://codex.wordpress.org/Function_Reference/query_posts             ...
query_posts()Se usa para controlar qué artículosse muestran en “El Bucle”: Un único artículo en la portada. Todos los artí...
query_posts()<?php// Mostrar 5 artículos por páginaquery_posts(post_per_page=5);if (have_posts()) :    while (have_posts()...
query_posts()<?php// Mostrar los artículos solicitados,// 5 por página, en orden ascendenteglobal $query_string;query_post...
query_posts()<?php// Mostrar sólo el artículo con ID=5query_posts( p=5 );if (have_posts()) :    while (have_posts()) :    ...
query_posts()<?php// Mostrar sólo el adjunto con ID=5query_posts( attachement_id=5 );if (have_posts()) :    while (have_po...
query_posts()<?php// Mostar artículos de categoría con// slug=category-slug, de 5 en 5query_posts(array(category_name =>  ...
query_posts()La función query_posts() estápensada para modificar sólo el Buclede la página principal.No esá pensada como u...
get_posts()get_posts(cat=1&numberposts=5);http://codex.wordpress.org/Template_Tags/get_posts                              ...
get_posts()<ul><?phpglobal $post;$args = array( numberposts => 5,               offset=> 1,               category => 1 );...
Etiquetas de plantillaSe usan para mostrar informacióndinámica en las plantillas, o parapersonalizar el aspecto de las mis...
Etiquetas includeSe usan dentro de un fichero deplantilla (p. ej. index.php) paraincluir/ejecutar el HTML/PHP de otrofiche...
Etiquetas includeget_header() - Incluye header.php oheader-{nombre}.phpget_footer() - Incluye footer.php ofooter-{nombre}....
Etiquetas includeget_template_part() - Incluye{slug}.php o {slug-nombre}.phpget_search_form() - Incluyesearchform.phpcomme...
body_class()Ayuda a aplicar los estilos CSS deforma más efectiva, al aplicardiferentes clases al elemento<body>.Incluyendo...
post_class()Como body_class(), ayuda a aplicar losestilos CSS, al aplicar diferentes clases alelemento donde se le incluye...
get_template_part()Permite recuperar elementosespecíficos de la plantilla, conbúsqueda jerárquica.http://codex.wordpress.o...
get_template_part()get_template_part(loop, index);Busca el fichero loop-index.php enel tema actual.Si no lo encuentra, bus...
get_template_part()Todas las “plantillas principales”(archive.php, author.php,category.php, etc) usan estafuncionalidad pa...
Formatos de artículoMetadato que puede serusado por el tema parapesonalizar la visualizaciónde un artículo.La lista de for...
Formatos de artículoTenemos que usaradd_theme_support() para decirle aWordPress que formatos vamos asoportar. add_theme_su...
Formatos de artículoTambién tenemos que usaradd_post_type_support() para decirqué tipos de artículos soportan quétipos de ...
has_post_format()while ( the_loop() ):  if ( has_post_format( gallery ) ) :    // HTML para formato galería  elseif ( has_...
get_post_format()while ( the_loop() ):  get_template_part(format,                    get_post_format());endwhile;  Si el f...
Añadir JavascriptUsar wp_enqueue_script() para añadirnuestros propios scripts o bibliotecas.http://codex.wordpress.org/Fun...
wp_enqueue_script()<?phpfunction mi_metodo_scripts() {    // Script estándar de WordPress.    // Ver lista de plugins está...
wp_enqueue_script()<?phpfunction mi_metodo_scripts() {   // Script propio de mi tema   wp_enqueue_script(nuevoscript,     ...
Etiquetas condicionalesPermiten cambiar qué se muestra, ycomo se muestra, en función de lascondiciones que cumple la págin...
Etiquetas condicionales<?phpif ( is_home() || is_single() ) {   // En la portada, o viendo un artículo   // individual: ve...
Testeo y depuraciónwp-config.php: define(WP_DEBUG, true);http://wordpress.org/extend/plugins/theme-check/http://wordpress....
Referencias adicionalesAllan Cole, Raena Jackson Armitage, Brandon R.Jones, and Jeffrey Way. "Build Your Own WickedWordPre...
Upcoming SlideShare
Loading in...5
×

Tunea tu wordpress

3,683

Published on

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

Published in: Education
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,683
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
218
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Tunea tu wordpress"

  1. 1. Tunea tu WordPress: mejora elaspecto de tu blog/website enWordPress Iñaki Arenaza & Roberto Uribeetxeberria Mondragon Unibertsitatea {iarenaza,ruribeetxeberria}@mondragon.edu @iarenaza & @globotomy
  2. 2. ReconocimientosEsta presentación está basada en la presentación de ThadAllender, de Graph Paper Press (www.graphpaperpress.com),titulada “Theme development: an introduction to the basics oftheming with WordPress”Thad Allender ha concedido generosamente su permiso a IñakiArenaza para poder traducirla al español y ser usada en este curso. 2
  3. 3. Gestión de temas existentesPhoto by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/
  4. 4. Gestión de temasLos temas son una forma de configurar elaspecto de un sitio WordPress: la portada, losartículos, las páginas, las categorías, etc.Un tema es una colección de fichero quetrabajan juntos para producir una interfaz deusuario.Estos ficheros de denominan ficheros deplantilla, y pueden incluir plantillaspersonalizadas, ficheros de imagen, hojas deestilo CSS), páginas personalizadas así comolos ficheros de código necesarios (*.php).Vienen en forma de ficheros .zip
  5. 5. Gestión de temasAl ser tan variados y no necesarios para todoel mundo, no son parte de la versión estándarde WordPress (que sólo trae uno de serie:Twente Eleven).Es por ello que la práctica totalidad de losmismo son desarrollados por terceraspersonas y su madurez y calidad varíanmucho de unos a otros.Podemos encontrar muchos de ellos enhttp://wordpress.org/extend/themes/
  6. 6. Gestión de temasPara ver que temas tenemos instalados:
  7. 7. Gestión de temas - widgetsLos temas suelen ser más o menos configurables:
  8. 8. Gestión de temas - widgets
  9. 9. Gestión de temas - menús
  10. 10. Gestión de temas - menús
  11. 11. Gestión de temas – opciones de tema
  12. 12. Gestión de temas – fondo
  13. 13. Gestión de temas – cabecera
  14. 14. Gestión de temasPodemos 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. 15. Gestión de temas – instalar tema
  16. 16. Gestión de temas – instalar tema
  17. 17. Gestión de temas – instalar tema
  18. 18. Gestión de temas – instalar tema
  19. 19. Gestión de temas – instalar tema
  20. 20. Gestión de temas – instalar tema
  21. 21. Gestión de temas – instalar tema
  22. 22. Gestión de temas – borradoPara borrar los temas (no activos):
  23. 23. Gestión de temas – borrado
  24. 24. Gestión de temas – borrado
  25. 25. Gestión de temas – borradoPuede que algunos temas no se puedanborrar de esta forma (no tengamospermisos en disco para hacerlo desde eldashboard).En ese caso hay que borrar el directorio deltema de /wp-content/themes de formamanual (en el servidor o via FTP).
  26. 26. Gestión de plugins
  27. 27. Gestión de pluginsLos plugins son conjuntos de scripts PHPque añaden funcionalidad a WordPress.Vienen en forma de fichero .zip.A veces mejoran la funcionalidad existenteen WordPress y otras añadenfuncionalidades inexistentes.Hay una infinidad de plugins que cubrenfuncionalidades muy variadas: sistemas depuntuación de artículos, integración conredes sociales, SEO, analítica web,artículos multi-idioma, etc.
  28. 28. Gestión de pluginsAl ser tan variados y no necesarios para todo elmundo, no son parte de la versión estándar deWordPress.Es por ello que la práctica totalidad de losmismo son desarrollados por terceras personasy su madurez y calidad varían mucho de unos aotros.Podemos encontrar la mayoría de ellos enhttp://wordpress.org/extend/plugins/Casi todos ellos indican en su página en la basede datos de plugins para que versiones deWordPress son compatibles.
  29. 29. Gestión de plugins
  30. 30. Gestión de pluginsPara ver que plugins tenemos instalados:
  31. 31. Gestión de plugins
  32. 32. Gestión de plugins
  33. 33. Gestión de pluginsPodemos 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. 34. Gestión de pluginsAlgunos (pocos) plugins necesitan accionesmanuales adicionales. Suelen indicar quéacciones son en el fichero README.txt quehay dentro del .zip.¡ATENCIÓN!: Un plugin con errores oincompatible con nuestra versión deWordPress puede dejar nuestro blog fuerade servicio. Hacer una copia de seguridad completa del blog antes de instalar un nuevo plugin, por si acaso.
  35. 35. Gestión de plugins - instalación
  36. 36. Gestión de plugins - instalación
  37. 37. Gestión de plugins - instalación
  38. 38. Gestión de plugins - instalación
  39. 39. Gestión de plugins - borradoPara deshabilitar/borrar los plugins:
  40. 40. Gestión de plugins - borrado
  41. 41. Gestión de plugins - borradoPuede que algunos plugins no se puedanborrar de esta forma (no tengamospermisos en disco para hacerlo desde eldashboard).En ese caso hay que borrar el directorio delplugin de /wp-content/plugins de formamanual (en el servidor o via FTP).
  42. 42. Creación de nuevos temasPhoto by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668
  43. 43. Herramientas recomendadasFirefox: 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 Toolbarhttp://www.microsoft.com/download/en/details.aspx?id=18359IE 8/9: Developer Tools (incorporado) 43
  44. 44. Anatomía de un tema WordPressConjunto de ficheros usados paracrear el diseño y la funcionalidad deun sitio WordPresshttp://codex.wordpress.org/Theme_Development 44
  45. 45. Anatomía de un tema WordPressLos ficheros están en/wp-content/themes/Incluyen hojas de estilo, ficheros deplantillas y funciones, imágenes,código javascript, etc. 45
  46. 46. Anatomía de un tema WordPressstyle.css – La hoja de estilosprincipal. Es obligatorio incluirla enel tema.index.php – Plantilla principal. Si eltema incluye plantillas propias, elfichero debe existir.functions.php – Opcional. Funcionesde código PHP. Se carga automáti-camente durante la inicialización deWordPress. 46
  47. 47. Anatomía de un tema WordPresscomments.php – Plantilla para loscomentarios. Si no existe, se usa wp-comments.php.single.php – Plantilla para un artículoindividual. Usada cuando se solicitaun artículo determinado.Para este tipo de plantilla y el restode plantillas de consulta, se usaindex.php si la plantilla de ese tipo nose encuentra. 47
  48. 48. Anatomía de un tema WordPresspage.php – Plantilla de página. Usadacuando se solicita una página.category.php – Plantilla de categoría.Usada cuando se consulta unacategoría.tag.php – Plantilla de etiqueta. Usadacuando se consulta una etiqueta. 48
  49. 49. Anatomía de un tema WordPresstaxonomy.php – Plantilla detaxonomía. Usada cuando se consultauna taxonomía.author.php – Plantilla de autor. Usadacuando se consulta un autor.date.php – Plantilla de fecha/hora.Usada cuando se consulta una fechau hora. 49
  50. 50. Anatomía de un tema WordPressarchive.php – Plantilla de archivo.Usada cuando se consulta unacategorí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 unabúsqueda. 50
  51. 51. Anatomía de un tema WordPress404.php – Plantilla 404 (NoEncontrado). Usada cuandoWordpress no puede encontrar unaentrada que concuerde con labúsqueda. 51
  52. 52. 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
  53. 53. functions.phpUn tema puede tener opcionalmente unfichero de funciones PHP, llamadofunctions.phpEste fichero actuá básicamente comoun plugin, y si está presente se cargaautomáticamente durante lainicialización de WordPress (tanto paralas páginas de administración como laspúblicas). 53
  54. 54. functions.phpAlgunos usos sugeridos para estefichero: 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. 55. functions.phpEl tema por defecto de WordPresscontiene un fichero functions.php quedefine la mayoría de estasfuncionalidades, por lo que podemosusarlo como modelo.Puesto que el fichero functions.phpbásicamente opera como un plugin, lapágina Function_Reference[1] es elmejor sitio para ver qué podemos hacerdesde este fichero.[1] http://codex.wordpress.org/Function_Reference 55
  56. 56. Estructura de una página header.php sidebar.php index.php footer.phpCompuesta de tres bloques básicos: unacabecera, el cuerpo y un pie de página. Lasbarras laterales añaden funcionalidadextra. 56
  57. 57. index.php Source: http://www.flickr.com/photos/koalazymonkey/3627199749/Muestra el contenido desde “ElBucle” (título, artículos, etc.)Llama a get_header(), get_sidebar(),get_footer() 57
  58. 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. 59. header.phpLlamada conget_header() desdelos ficheros deplantilla.Incluye lo que Source: http://www.flickr.com/photos/dbreg2007/5679962186/in/photostreamviene antes de la etiqueta <body>,incluida ésta: información meta,scripts, hojas de estilo, nombre delsitio, navegación, etc. 59
  60. 60. footer.phpLlamada conget_footer().Incluye todo loque vienedespués delcuerpo y lasbarras laterales:créditos, Source: http://www.flickr.com/photos/mickeysucks/29719905/información de copyright, etc. 60
  61. 61. sidebar.phpSe le llama conget_sidebar ().Añade informacióncontextual del sitio.Habitualmenteincluye widgets. 61
  62. 62. Jerarquía de ficheros de plantillaOrden en que se eligen los ficherosde plantilla a utilizar para mostrar uncontenido determinado:http://codex.wordpress.org/Template_Hierarchy 62
  63. 63. Visualización de la portada1. home.php2. index.php 63
  64. 64. Visualización de artículos individuales1. single-{tipo_de_artículo}.php Por ejemplo, si el tipo de artículo es mis-videos, WordPress buscará el fichero single-mis-videos.php2. single.php3. index.php 64
  65. 65. Qué es un slugUnas pocas palabras que describenun artículo o una página.Son habitualmente una versión deURL amigable del título del artículo(generado automáticamente porWordPress).El slug del artículo http://wordpress.org/development/2006/06/wordpress-203/ es "wordpress-203". 65
  66. 66. Visualización de páginas1. 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.php3. page-{id}.php Si el ID es 99, WordPress buscará el fichero page- 99.php4. page.php5. index.php 66
  67. 67. Visualización de categorías1. category-{slug}.php Si el slug de la categoría es XYZ, se buscará el fichero category-XYZ.php2. category-{id}.php Si el ID es 99, se buscará el fichero category-99.php3. category.php4. archive.php5. index.php 67
  68. 68. Visualización de etiquetas1. tag-{slug}.php Si el slug es XYZ, se buscará el fichero tag-XYZ.php2. tag-{id}.php Si el ID 99, se buscará el fichero tag-99.php3. tag.php4. archive.php5. index.php 68
  69. 69. Visualización de autores1. author-{alias}.php Si el alias del autor es XYZ, se buscará el fichero author-XYZ.php2. author-{id}.php Si el ID es 99, se buscará el fichero author-99.php3. author.php4. archive.php5. index.php 69
  70. 70. Visualización de fechas1. date.php2. archive.php3. index.php 70
  71. 71. Visualización de búsquedas1. search.php2. index.php 71
  72. 72. Visualización de 404 (No Encontrado)1. 404.php2. index.php 72
  73. 73. Visualización de adjuntos1. {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
  74. 74. Entorno de desarrolloPara poder ejecutar WordPresslocalmente: 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. 75. Control de versionesSimplifica el desarrollo colaborativo,el seguimiento de cambios, lapublicació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. 76. “El Bucle”Muestra cada uno de los artículospublicados en el bloghttp://codex.wordpress.org/The_Loop 76
  77. 77. “El Bucle”<?phpif (have_posts()) : while (have_posts()) : the_post();?>Añadir etiqueas de plantilla paramostrar el contenido del artículo.<?php endwhile; else: ?><p><?php _e(No hay artículos.); ?></p><?php endif; ?> 77
  78. 78. Artículos de consultaquery_posts(cat=1&showposts=5);http://codex.wordpress.org/Function_Reference/query_posts 78
  79. 79. query_posts()Se usa para controlar qué artículosse 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. 80. query_posts()<?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();?> 80
  81. 81. query_posts()<?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();?>... 81
  82. 82. query_posts()<?php// Mostrar sólo el artículo con ID=5query_posts( p=5 );if (have_posts()) : while (have_posts()) : the_post();?>... 82
  83. 83. query_posts()<?php// Mostrar sólo el adjunto con ID=5query_posts( attachement_id=5 );if (have_posts()) : while (have_posts()) : the_post();?>... 83
  84. 84. query_posts()<?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();?>... 84
  85. 85. query_posts()La función query_posts() estápensada para modificar sólo el Buclede la página principal.No esá pensada como una forma decrear Bucles secundarios en lapágina.Si queremos crear Bucles separadosfuera del Bucle principal, deberemosusar get_posts() en su lugar. 85
  86. 86. get_posts()get_posts(cat=1&numberposts=5);http://codex.wordpress.org/Template_Tags/get_posts 86
  87. 87. get_posts()<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> 87
  88. 88. Etiquetas de plantillaSe usan para mostrar informacióndinámica en las plantillas, o parapersonalizar el aspecto de las mismas.http://codex.wordpress.org/Template_Tags 88
  89. 89. Etiquetas includeSe usan dentro de un fichero deplantilla (p. ej. index.php) paraincluir/ejecutar el HTML/PHP de otrofichero 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. 90. Etiquetas includeget_header() - Incluye header.php oheader-{nombre}.phpget_footer() - Incluye footer.php ofooter-{nombre}.phpget_sidebar() - Incluye sidebar.php osidebar-{nombre}.php 90
  91. 91. Etiquetas includeget_template_part() - Incluye{slug}.php o {slug-nombre}.phpget_search_form() - Incluyesearchform.phpcomments_template() - Incluyecomments.php o wp-includes/theme-compat/comments.php 91
  92. 92. body_class()Ayuda a aplicar los estilos CSS deforma más efectiva, al aplicardiferentes 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. 93. post_class()Como body_class(), ayuda a aplicar losestilos CSS, al aplicar diferentes clases alelemento 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. 94. get_template_part()Permite recuperar elementosespecíficos de la plantilla, conbúsqueda jerárquica.http://codex.wordpress.org/Function_Reference/get_template_part 94
  95. 95. get_template_part()get_template_part(loop, index);Busca el fichero loop-index.php enel tema actual.Si no lo encuentra, busca loop.php.Si es un tema hijo y no encuentra losficheros anteriores, repite labúsqueda en el tema padre. 95
  96. 96. get_template_part()Todas las “plantillas principales”(archive.php, author.php,category.php, etc) usan estafuncionalidad para encontrar unaplantilla específica para el tipo devista. 96
  97. 97. Formatos de artículoMetadato 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 97
  98. 98. Formatos de artículoTenemos que usaradd_theme_support() para decirle aWordPress que formatos vamos asoportar. add_theme_support( post-formats, array( aside, gallery ) );Hay que hacerlo en el ficherofunctions.php.Lo ideal es usar el hookafter_setup_theme para hacerlo 98
  99. 99. Formatos de artículoTambién tenemos que usaradd_post_type_support() para decirqué 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. 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. 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. 102. Añadir JavascriptUsar wp_enqueue_script() para añadirnuestros propios scripts o bibliotecas.http://codex.wordpress.org/Function_Reference/wp_enqueue_script 102
  103. 103. wp_enqueue_script()<?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);?> 103
  104. 104. wp_enqueue_script()<?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);?> 104
  105. 105. Etiquetas condicionalesPermiten cambiar qué se muestra, ycomo se muestra, en función de lascondiciones que cumple la página amostrar.http://codex.wordpress.org/Conditional_Tags 105
  106. 106. Etiquetas condicionales<?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();}?> 106
  107. 107. Testeo y depuraciónwp-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 107
  108. 108. Referencias adicionalesAllan Cole, Raena Jackson Armitage, Brandon R.Jones, and Jeffrey Way. "Build Your Own WickedWordPress Themes". 2010. SitePoint Pty. Ltd.ISBN 978-0-9804552-9-8http://codex.wordpress.org/Theme_Developmenthttp://yoast.com/wordpress-theme-anatomy/http://codex.wordpress.org/Blog_Design_and_Layouthttp://codex.wordpress.org/Function_Referencehttp://www.evotech.net/blog/2007/06/introduction-to-firebug/ 108
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×