Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducción al desarrollo de                                     plantillas de WordPressjueves 22 de septiembre de 2011
Hashtag #adwe_murjueves 22 de septiembre de 2011
Introducción al desarrollo de plantillas                                                                                  ...
Introducción al desarrollo de plantillas                                                                                de...
Breve introducción a WordPress                   - WordPress es un CMS (Content Management System) de                   có...
Breve introducción a WordPress                                  Web de Dymo          Awwwards                         Fran...
Breve introducción a WordPress                                       Spotify       Typographica                         Fr...
Breve introducción a WordPress                                  Web de Andy Roddick    Blog de Play Station               ...
Breve introducción a WordPress                   - Varios aspectos importantes para tener en cuenta WordPress             ...
Introducción al desarrollo de plantillas                                                                             de Wo...
Formato de un theme en Wordpress                  - Secciones a tener en cuenta de un blog con WordPress:              Loo...
Formato de un theme en Wordpress                                                               Cabecera                   ...
Formato de un theme en Wordpress              - Estructura básica de ficheros en              WordPress                    ...
Introducción al desarrollo de plantillas                                                                             de Wo...
Conceptos básicos de PHP                 - Hay ciertos conocimientos sobre PHP que debemos tener para                 prog...
Conceptos básicos de PHP                                                     Bucles                             Recorremos...
Conceptos básicos de PHP                                                  Arrays y objetos                             Es ...
Conceptos básicos de PHP                                                  Condicionales                             Podrem...
Introducción al desarrollo de plantillas                                                                                de...
Funciones básicas de WordPress                 - get_header(): Incluir la cabecera en alguna plantilla, es decir, el      ...
Funciones básicas de WordPress                 - wp_head(): Esta función es importante que esté en nuestro fichero         ...
Funciones básicas de WordPress                 - WP_Query(): Más que una función, es una clase. Nos permite               ...
Funciones básicas de WordPress                                             Función                         Descripción    ...
Introducción al desarrollo de plantillas                                                                         de WordPr...
Manos a la obra                 - La maqueta preparada consta de tres ficheros:                     - Un index.html con la ...
Manos a la obra                                       Principal   Post                         Fran Morenojueves 22 de sep...
Manos a la obra                 - El theme base para adaptar la plantilla a WordPress ha sido                 Nakeme. Por ...
Manos a la obra                 - El theme Nakeme está alojado en GitHub y puede descargarse                 de forma grat...
Manos a la obra                         Fran Morenojueves 22 de septiembre de 2011
Manos a la obra                                       ¡Al código!                         Fran Morenojueves 22 de septiemb...
Introducción al desarrollo de plantillas                                                                     de WordPress ...
Funciones básicas de WordPress                                                   Link                                     ...
Introducción al desarrollo de plantillas                                                                            de Wor...
Upcoming SlideShare
Loading in …5
×

Presentacion adwe

1,411 views

Published on

Introducción al desarrollo de plantillas para WordPress, por Fran Moreno

Published in: Education
  • Be the first to comment

Presentacion adwe

  1. 1. Introducción al desarrollo de plantillas de WordPressjueves 22 de septiembre de 2011
  2. 2. Hashtag #adwe_murjueves 22 de septiembre de 2011
  3. 3. Introducción al desarrollo de plantillas de WordPress Indice - Breve introducción a WordPress - Estructura de un Theme - Conceptos básicos de PHP - Funciones básicas de WordPress - Manos a la obra - Enlaces Fran Morenojueves 22 de septiembre de 2011
  4. 4. Introducción al desarrollo de plantillas de WordPress Breve introducción a WordPress Fran Morenojueves 22 de septiembre de 2011
  5. 5. Breve introducción a WordPress - WordPress es un CMS (Content Management System) de código abierto desarrollado por Automattic y con la colaboración de un inmenso número de desarrolladores. - La curva de aprendizaje es mucho menor que en Drupal, el mantenimiento de la web es más sencillo. - Pero con WordPress sólo se pueden hacer blogs, no? Fran Morenojueves 22 de septiembre de 2011
  6. 6. Breve introducción a WordPress Web de Dymo Awwwards Fran Morenojueves 22 de septiembre de 2011
  7. 7. Breve introducción a WordPress Spotify Typographica Fran Morenojueves 22 de septiembre de 2011
  8. 8. Breve introducción a WordPress Web de Andy Roddick Blog de Play Station Fran Morenojueves 22 de septiembre de 2011
  9. 9. Breve introducción a WordPress - Varios aspectos importantes para tener en cuenta WordPress como plataforma para desarrollo web: - Plugins: Hay una inmensa cantidad de plugins disponibles. - Themes: Tanto free como premium, de muy diversos tipos. - Comunidad: Una comunidad de usuarios muy amplia. - El codex: Documentación clara y bien organizada. - Desarrollar un theme o un plugin es bastante fácil. Fran Morenojueves 22 de septiembre de 2011
  10. 10. Introducción al desarrollo de plantillas de WordPress Formato de un Theme en WordPress Fran Morenojueves 22 de septiembre de 2011
  11. 11. Formato de un theme en Wordpress - Secciones a tener en cuenta de un blog con WordPress: Loop la iteración de los distintos artículos del blog. Puede ser general, de una categoría, de una etiqueta... Single Un artículo en particular. Suele llevar un apartado de comentarios Page Una página estática, por ejemplo, Acerca de... Header Parte superior de la web, con el logo, navegación, etc... Footer Información que queramos poner en el pie de la web Sidebar Barra lateral con enlaces de interés Fran Morenojueves 22 de septiembre de 2011
  12. 12. Formato de un theme en Wordpress Cabecera Loop Sidebar Footer Fran Morenojueves 22 de septiembre de 2011
  13. 13. Formato de un theme en Wordpress - Estructura básica de ficheros en WordPress Imprescindibles - Hay ficheros prescindibles, pero que nos ayudan a organizarnos mejor - Es una buena práctica usar directorios para organizar los elementos como imágenes, css, scripts... Fran Morenojueves 22 de septiembre de 2011
  14. 14. Introducción al desarrollo de plantillas de WordPress Conceptos básicos de PHP Fran Morenojueves 22 de septiembre de 2011
  15. 15. Conceptos básicos de PHP - Hay ciertos conocimientos sobre PHP que debemos tener para programar un theme en WordPress, dejando de lado el HTML y CSS, que en teoría vienen de la maqueta, e incluso el JS. - Si usamos un theme base podemos no necesitar escribir apenas líneas de PHP, pero en cuanto tengamos que añadir cualquier modificación o mejora, necesitaremos conocer las bases. Fran Morenojueves 22 de septiembre de 2011
  16. 16. Conceptos básicos de PHP Bucles Recorremos un array de elementos y para cada uno de ellos hacemos alguna acción, en este caso mostrar por pantalla su contenido. Fran Morenojueves 22 de septiembre de 2011
  17. 17. Conceptos básicos de PHP Arrays y objetos Es importante diferenciar la forma de acceder a los elementos de un array y a los de un objeto. Fran Morenojueves 22 de septiembre de 2011
  18. 18. Conceptos básicos de PHP Condicionales Podremos necesitar que algún elemento se muestre en unas ocasiones especiales, para eso usaremos condicionales. Fran Morenojueves 22 de septiembre de 2011
  19. 19. Introducción al desarrollo de plantillas de WordPress Funciones básicas de WordPress Fran Morenojueves 22 de septiembre de 2011
  20. 20. Funciones básicas de WordPress - get_header(): Incluir la cabecera en alguna plantilla, es decir, el fichero header.php. - get_sidebar(): Incluir la barra lateral en cualquier parte de nuestra página, fichero sidebar.php. - get_footer(): Incluir el pie de página, fichero footer.php. Fran Morenojueves 22 de septiembre de 2011
  21. 21. Funciones básicas de WordPress - wp_head(): Esta función es importante que esté en nuestro fichero header.php para que wordpress incluya los ficheros que necesite para su funcionamiento. - wp_footer(): Similar al anterior, es importante incluirlo en nuestro fichero footer.php para que se carguen correctamente algunos scripts que necesita WordPress. Fran Morenojueves 22 de septiembre de 2011
  22. 22. Funciones básicas de WordPress - WP_Query(): Más que una función, es una clase. Nos permite realizar consultas sobre las páginas y posts de nuestra web, para por ejemplo listar todos los posts de una categoría, obtener un post en concreto, etc. Fran Morenojueves 22 de septiembre de 2011
  23. 23. Funciones básicas de WordPress Función Descripción the_title() Obtiene el título de un post the_content() Muestra el contenido completo de un post the_excerpt() Muestra un resumen de un post the_category() Muestra un listado de categorías de un post the_tags() Listado de tags de un post previous_post_link() Enlace al post anterior next_post_link() Enlace al siguiente post Fran Morenojueves 22 de septiembre de 2011
  24. 24. Introducción al desarrollo de plantillas de WordPress Manos a la obra Fran Morenojueves 22 de septiembre de 2011
  25. 25. Manos a la obra - La maqueta preparada consta de tres ficheros: - Un index.html con la página principal del blog que contiene un listado de noticias. - Un single.html con la vista de una noticia en particular con comentarios. - Un style.css con los estilos de los distintos elementos de la web. - Además, todos los css necesarios para que tenga el aspecto y layout deseados. - Se ha hecho uso de 1140px css grid y de html5 boilerplate. Fran Morenojueves 22 de septiembre de 2011
  26. 26. Manos a la obra Principal Post Fran Morenojueves 22 de septiembre de 2011
  27. 27. Manos a la obra - El theme base para adaptar la plantilla a WordPress ha sido Nakeme. Por los siguientes motivos: - Lo he hecho yo ;) - Es muy sencillo y no tiene apenas opciones que puedan distraernos de lo que queremos desarrollar. - Ofrece las funcionalidades básicas para empezar una nueva web desde cero. Fran Morenojueves 22 de septiembre de 2011
  28. 28. Manos a la obra - El theme Nakeme está alojado en GitHub y puede descargarse de forma gratuita. - Además, si alguien quiere colaborar en su desarrollo, puede hacerlo sin problemas. Fran Morenojueves 22 de septiembre de 2011
  29. 29. Manos a la obra Fran Morenojueves 22 de septiembre de 2011
  30. 30. Manos a la obra ¡Al código! Fran Morenojueves 22 de septiembre de 2011
  31. 31. Introducción al desarrollo de plantillas de WordPress Enlaces Fran Morenojueves 22 de septiembre de 2011
  32. 32. Funciones básicas de WordPress Link Descripción Web principal de la documentación de WordPress. Podemos encontrar toda la http://codex.wordpress.org/ información necesaria para desarrollar themes y plugins. Web donde podemos encontrar gran cantidad de themes para WordPress bastante http://themeforest.net/category/wordpress bien diseñados y programados. http://www.wpbeginner.com/ Interesante web para empezar con WordPress http://www.wprecipes.com/ Otra web con tutoriales y ejemplos. Fran Morenojueves 22 de septiembre de 2011
  33. 33. Introducción al desarrollo de plantillas de WordPress MUCHAS GRACIAS!!!! Fran Moreno twitter: @siner Web: www.franmoreno.comjueves 22 de septiembre de 2011

×