Successfully reported this slideshow.
Your SlideShare is downloading. ×

Tunea tu wordpress

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 108 Ad
Advertisement

More Related Content

Slideshows for you (19)

Advertisement

Similar to Tunea tu wordpress (20)

Advertisement

Recently uploaded (20)

Tunea tu wordpress

  1. 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. 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. 3. Gestión de temas existentes Photo by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/
  4. 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. 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. 6. Gestión de temas Para ver que temas tenemos instalados:
  7. 7. Gestión de temas - widgets Los 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 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. 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 – borrado Para 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 – 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. 26. Gestión de plugins
  27. 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. 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. 29. Gestión de plugins
  30. 30. Gestión de plugins Para ver que plugins tenemos instalados:
  31. 31. Gestión de plugins
  32. 32. Gestión de plugins
  33. 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. 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. 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 - borrado Para deshabilitar/borrar los plugins:
  40. 40. Gestión de plugins - borrado
  41. 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. 42. Creación de nuevos temas Photo by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668
  43. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.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. 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. 61. sidebar.php Se le llama con get_sidebar (). Añade información contextual del sitio. Habitualmente incluye widgets. 61
  62. 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. 63. Visualización de la portada 1. home.php 2. index.php 63
  64. 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. 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. 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. 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. 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. 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. 70. Visualización de fechas 1. date.php 2. archive.php 3. index.php 70
  71. 71. Visualización de búsquedas 1. search.php 2. index.php 71
  72. 72. Visualización de 404 (No Encontrado) 1. 404.php 2. index.php 72
  73. 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. 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. 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. 76. “El Bucle” Muestra cada uno de los artículos publicados en el blog http://codex.wordpress.org/The_Loop 76
  77. 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. 78. Artículos de consulta query_posts('cat=1&showposts=5'); http://codex.wordpress.org/Function_Reference/query_posts 78
  79. 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. 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. 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. 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. 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. 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. 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. 86. get_posts() get_posts('cat=1&numberposts=5'); http://codex.wordpress.org/Template_Tags/get_posts 86
  87. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 Javascript Usar wp_enqueue_script() para añadir nuestros propios scripts o bibliotecas. http://codex.wordpress.org/Function_Reference/ wp_enqueue_script 102
  103. 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. 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. 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. 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. 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. 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

×