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

1. Introducción al desarrollo de
plantillas de WordPress
jueves 22 de septiembre de 2011

2. Hashtag #adwe_mur
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

4. Introducción al desarrollo de plantillas
de WordPress
Breve introducción a WordPress
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

6. Breve introducción a WordPress
Web de Dymo Awwwards
Fran Moreno
jueves 22 de septiembre de 2011

7. Breve introducción a WordPress
Spotify Typographica
Fran Moreno
jueves 22 de septiembre de 2011

8. Breve introducción a WordPress
Web de Andy Roddick Blog de Play Station
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

10. Introducción al desarrollo de plantillas
de WordPress
Formato de un Theme en WordPress
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

12. Formato de un theme en Wordpress
Cabecera
Loop Sidebar
Footer
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

14. Introducción al desarrollo de plantillas
de WordPress
Conceptos básicos de PHP
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

18. Conceptos básicos de PHP
Condicionales
Podremos necesitar que algún elemento se muestre en unas
ocasiones especiales, para eso usaremos condicionales.
Fran Moreno
jueves 22 de septiembre de 2011

19. Introducción al desarrollo de plantillas
de WordPress
Funciones básicas de WordPress
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

24. Introducción al desarrollo de plantillas
de WordPress
Manos a la obra
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

26. Manos a la obra
Principal Post
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

29. Manos a la obra
Fran Moreno
jueves 22 de septiembre de 2011

30. Manos a la obra
¡Al código!
Fran Moreno
jueves 22 de septiembre de 2011

31. Introducción al desarrollo de plantillas
de WordPress
Enlaces
Fran Moreno
jueves 22 de septiembre de 2011

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 Moreno
jueves 22 de septiembre de 2011

33. Introducción al desarrollo de plantillas
de WordPress
MUCHAS GRACIAS!!!!
Fran Moreno
twitter: @siner
Web: www.franmoreno.com
jueves 22 de septiembre de 2011