Presentación utilizada por Ernesto Jiménez en el evento 1ª WordPress Málaga Meetup realizado el 21 de Febrero de 2012 en las instalaciones de Forman, Málaga
Principios básicos de WordPress y la anatomía de un theme
1. WordPress: Principios básicos
y anatomía de un tema
WordPress: Principios básicos
y anatomía de un tema
Ernesto Jiménez
Málaga, 21 de febrero 2012
twitter.com/ernest_jimenez
hola@ernestojimenez.net
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
3. WordPress: Principios básicos
y anatomía de un tema
¿Qué es WordPress?
• Publicación de blogs (es mucho más)
• Código abierto
• Es gratis (tiene gran valor)
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
4. WordPress: Principios básicos
y anatomía de un tema
¿Qué es WordPress?
• En su origen es un sistema de publicación
de blogs:
a. categorías y etiquetas
b. archivo cronológico
c. participación de los lectores:
comentarios
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
5. WordPress: Principios básicos
y anatomía de un tema
¿Qué es WordPress?
• No sólo posts: también páginas estáticas
• Plugins: funciones desarrolladas que
amplian las posibilidades de WordPress
hasta límites desconocidos
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
6. WordPress: Principios básicos
y anatomía de un tema
¿Qué es WordPress?
• Es un sistema de blogs pero es mucho más
• WP fue diseñado para ser ampliado
• En definitiva es un sistema que nos da el
CONTROL DEL CONTENIDO
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
7. WordPress: Principios básicos
y anatomía de un tema
Las ventajas de WordPress
• Fácil de instalar (cinco minutos)
• Requisitos básicos (MySql y PHP)
• Versátil y fácil de ampliar
• Gran comunidad
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
8. WordPress: Principios básicos
y anatomía de un tema
Las ventajas de WordPress
• Optimizamos los recursos
• No reinventamos la rueda
• Flexible
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
9. WordPress: Principios básicos
y anatomía de un tema
Blog con
estructura
tradicional
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
10. WordPress: Principios básicos
y anatomía de un tema
Sitio web
corporativo
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
11. WordPress: Principios básicos
y anatomía de un tema
Medios de
información
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
12. WordPress: Principios básicos
y anatomía de un tema
Las ventajas de WordPress
• Optimizamos los recursos
• No reinventamos la rueda
• Flexible
• Podemos dedicarnos al contenido
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
13. WordPress: Principios básicos
y anatomía de un tema
Anatomía
de un tema
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
14. WordPress: Principios básicos
y anatomía de un tema
Estructura de
archivos
(WordPress los llama
«plantillas»)
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
15. WordPress: Principios básicos
y anatomía de un tema
Hay plantillas
que aparecen
en todos los
temas
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
16. WordPress: Principios básicos
y anatomía de un tema
Archivos esenciales de un tema
• index.php
• style.css
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
17. WordPress: Principios básicos
y anatomía de un tema
Sin style.css no hay tema
function search_theme_directories(){
…
if ( $theme_file == ‘style.css’ ) {
$theme_files[$theme_dir] = array( ‘theme_file’ =>
$theme_dir . ‘/’ . $theme_file, ‘theme_root’
=> $theme_root );
$found_stylesheet = true;
break;
…
}
…
}
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
18. WordPress: Principios básicos
y anatomía de un tema
style.css
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
19. WordPress: Principios básicos
y anatomía de un tema
index.php
• plantilla más genérica
• se muestra si no hay otra más específica
xxxxxxxx
» »
Inicio home.php index.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
20. WordPress: Principios básicos
y anatomía de un tema
Archivos habituales de un tema
• header.php
• footer.php
• sidebar.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
21. WordPress: Principios básicos
y anatomía de un tema
index.php header.php
get_header();
get_sidebar();
get_footer(); index.php sidebar.php
footer.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
22. WordPress: Principios básicos
y anatomía de un tema
header.php
• declaración del documento
• inclusión de los estilos
• función wp_head()
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
23. WordPress: Principios básicos
y anatomía de un tema
footer.php
• pie de la página
• inclusión de JavaScript
• función wp_footer()
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
25. WordPress: Principios básicos
y anatomía de un tema
sidebar.php
• la barra lateral
• widgets
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
27. WordPress: Principios básicos
y anatomía de un tema
Plantillas para contenido
• home.php
• page.php
• single.php
• archive.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
28. WordPress: Principios básicos
y anatomía de un tema
page single
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
29. WordPress: Principios básicos
y anatomía de un tema
archive.php 404.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
31. WordPress: Principios básicos
y anatomía de un tema
El blucle (the loop)
• Determina qué contenido debe mostrar WP
• Un solo post o página
• Un grupo de posts o páginas
• Consulta parámetros (URL)
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
32. WordPress: Principios básicos
y anatomía de un tema
header.php
index.php sidebar.php
footer.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
33. WordPress: Principios básicos
y anatomía de un tema
Estructura básica del bucle
<?php
if(have_posts()) : while (have_posts()) : the_post();
…
endwhile; else:
…
endif;
?>
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
35. WordPress: Principios básicos
y anatomía de un tema
Etiquetas de plantilla dentro del bucle
• the_title() • the_author()
• the_content() • the_time()
• the_permalink() • the_tags()
• the_ID() • the_category()
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
36. WordPress: Principios básicos
y anatomía de un tema
Otras plantillas
• 404.php
• searchform.php
• search.php
• comments.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
37. WordPress: Principios básicos
y anatomía de un tema
Jerarquía de archivos
404 404.php index.php
Búsqueda search.php index.php
Inicio home.php index.php
single-
Single single.php index.php
{post-type}.php
Página {plantilla}.php page-{slug}.php page-{id}.php page.php index.php
category-{slug}. category-{id}.
Categoría category.php archive.php index.php
php php
Tag tag-{slug}.php tag-{id}.php tag.php archive.php index.php
Archive archive.php index.php
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
39. WordPress: Principios básicos
y anatomía de un tema
Functions.php
• El cerebro del tema
• Tipos de posts personalizados
• Campos personalizados
• Funciones
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012
40. WordPress: Principios básicos
y anatomía de un tema
¡Gracias!
hola@ernestojimenez.net
twitter.com/ernest_jimenez
I Meetup WordPress Málaga
Málaga, 21 de febrero de 2012