1. dariobf.com #WCAlicante2017
HTML&CSS
↓
WORDPRESS
DARIOBF
EXPERTO EN WORDPRESS #WCAlicante2017

2. dariobf.com #WCAlicante2017
DARIOBF
EXPERTO EN WORDPRESS
¡Hola! Soy Darío,
diseñador y maquetador front-end.
@DarioBF
dariobf.com #WCAlicante2017

3. dariobf.com #WCAlicante2017

4. #1
¿Qué es un tema?
dariobf.com #WCAlicante2017

5. dariobf.com #WCAlicante2017
¿Qué es un tema?
Un conjunto de ficheros que nos permite cambiar la apariencia y
funcionalidad de nuestro sitio hecho con WordPress.
Un tema WordPress nos permitirá personalizar las fuentes de los
textos, el tamaño de la letra, los colores del texto, de los links, el
fondo de la página; en definitiva, el aspecto del sitio web.
•Blog
•Tienda online
•Sitio web corporativo, institucionales, educativos
•Comunidad
•Wiki
•Portal
•…

6. dariobf.com #WCAlicante2017
index.phpstyle.css
¿Cómo es un tema?

7. dariobf.com #WCAlicante2017
style.css
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;
…
}
…
}

8. dariobf.com #WCAlicante2017
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the
blog, featuring a full range of post formats, each displayed
beautifully in their own unique way. Design details abound,
starting with a vibrant color scheme and matching header images,
beautiful typography and icons, and a flexible layout that looks
great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-
column, two-columns, right-sidebar, flexible-width, custom-
header, custom-menu, editor-style, featured-images,
microformats, post-formats, rtl-language-support, sticky-post,
translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've
learned with others.
*/

9. dariobf.com #WCAlicante2017
style.css
Apariencia → Temas

10. dariobf.com #WCAlicante2017
style.css

11. dariobf.com #WCAlicante2017
index.php
Plantilla más genérica.
Se muestra si no hay otra plantilla más específica para el
contenido que estamos mostrando.
»
home.php index.php
»

12. dariobf.com #WCAlicante2017

13. dariobf.com #WCAlicante2017
WordPress nos permite modularizar nuestro diseño; esto es, crear
ficheros para jerarquizar el front-end.
Además, nos permite modularizar funciones (plugins), de manera
que podemos reciclar trozos de código en diferentes proyectos.
Modularización

14. #2
La estructura de
un tema
dariobf.com #WCAlicante2017

15. dariobf.com #WCAlicante2017
index.phpstyle.css
Ficheros habituales de un
tema WordPress

16. dariobf.com #WCAlicante2017
Ficheros habituales de un
tema WordPress
header.php footer.php sidebar.php

17. dariobf.com #WCAlicante2017
header.php
footer.php
index.php sidebar.php

18. dariobf.com #WCAlicante2017
header.php
Declaración del documento.
Inclusión de los estilos.
Función wp_head();

19. dariobf.com #WCAlicante2017
footer.php
Pié de página.
Inclusión de Javascript.
Función wp_footer();

20. dariobf.com #WCAlicante2017
Plantillas para contenidos
home.php page.php
single.php archive.php

21. dariobf.com #WCAlicante2017
page.php y single.php

22. dariobf.com #WCAlicante2017
index
404
archive
author
category
tag
taxonomy
date
home
front_page
page
paged
search
single
text, plain, text_plain (all mime types)
attachment
comments
Todas las plantillas
Más información

23. dariobf.com #WCAlicante2017
Página especializada. Para una entrada, autor, página
concretos.
1. page-{slug}.php
2. page-{ID}.php
3. category-{ID}.php
4. tag-{ID}.php
5. author-{ID}.php
…
Plantillas personalizadas

24. dariobf.com #WCAlicante2017
Plantillas personalizadas
contacto.php about.php
location.php whatever.php
…

25. #3
El Loop
dariobf.com #WCAlicante2017

26. dariobf.com #WCAlicante2017
header.php
footer.php
index.php
sidebar.php

27. dariobf.com #WCAlicante2017
WordPress determina qué contenido debe mostrar en
base a URL y configuración.
El Loop o bucle
Ejemplos:
- Un sólo post o página.
- Un grupo de posts o páginas.
- Consulta parámetros (URL)

28. dariobf.com #WCAlicante2017
El Loop o bucle
<?php
if(have_posts()) :
while(have_posts()) :
the_post();
?>
<h1><?php the_title() ?></h1>
<div class='post-content'><?php the_content() ?></div>
<?php
endwhile;
else:
?>
Vaya, no hay entradas.
<?php
endif;
?>

29. <?php
$args = array('cat' => 4);
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<h1><?php the_title() ?></h1>
<div class='post-content'><?php the_content() ?></div>
<?php
endwhile;
else:
?>
Vaya, no hay entradas.
<?php
endif;
?>
Clase que modifica (o crea) el objeto $wp_query
Loop por defecto:
Clase WP_Query

30. dariobf.com #WCAlicante2017
Loop normal vs Loop WP_Query:
1.Construir la consulta: Con WP_Query hay que indicar
qué contenido queremos extraer de la base de datos.
2.Inicializar WP_Query y consultar.
3.Crear el loop.
4.Trabaja como siempre.
Clase WP_Query
Más información

31. #4
Menús
personalizados
dariobf.com #WCAlicante2017

32. dariobf.com #WCAlicante2017
Podemos registrar tantos menús como queramos
// Añado un menú sólo
function register_my_menu() {
register_nav_menu('header-menu',__( ‘Primary Navigation' ));
}
// Añado varios menús
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( ‘Primary Navigation’ ),
'extra-menu' => __( ‘Top Bar Navigation’ )
)
);
}
add_action( 'init', 'register_my_menus' );
Añadiendo menús
Apariencia»Menús {

33. dariobf.com #WCAlicante2017
Para mostrarlo en el front-end:
<?php wp_nav_menu(array( 'theme_location' => 'header-menu')); ?>
Añadiendo menús
Más información
<?php
wp_nav_menu(array(
'theme_location' => ‘extra-menu',
'container_class' => ‘my_extra_menu_class'
));
?>

34. #5
functions.php
dariobf.com #WCAlicante2017

35. • Es un fichero de nuestro tema.
• Es una de las formas de cambiar las características que
WordPress ofrece por defecto.
• El functions.php funciona como un plugin:
• Añade mejoras y funcionalidades a un sitio WordPress.
• Puedes utilizarlo para llamar funciones, tanto PHP como de
WordPress.
• Sólo se ejecuta cuando el tema al que aplica está
activado.
functions.php
dariobf.com #WCAlicante2017

36. ¡CUIDADO!: Si un plugin de
WordPress llama a la misma función
o filtro que tu functions.php, los
resultados pueden ser…

38. #10
Proceso:
HTML&CSS → WordPress
dariobf.com #WCAlicante2017

39. dariobf.com #WCAlicante2017
I. Entorno de desarrollo
Servidor local: XAMPP, LAMP/WAMP/MAMP
Base de datos
Instalación de WordPress
Crea una carpeta para tu nuevo tema en wp-content/themes/
nombre-de-tu-tema

40. dariobf.com #WCAlicante2017
II. Prepara el tema
Crea los ficheros mínimos necesarios:
- style.css
- index.php
- header.php
- footer.php
- sidebar.php (si lo necesitas)
Activa tu tema. Debería mostrarse en blanco, por ahora…

41. dariobf.com #WCAlicante2017
III. Rellena los ficheros
• Copia y pega el contenido de la maqueta original en esos
ficheros.
• Copia lo que no sea del header.php, footer.php o sidebar.php en
el index.php
• En tus plantillas, haz la llamada a los ficheros de estructura con
get_header(), get_footer() o get_sidebar()

42. dariobf.com #WCAlicante2017
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the
blog, featuring a full range of post formats, each displayed
beautifully in their own unique way. Design details abound,
starting with a vibrant color scheme and matching header images,
beautiful typography and icons, and a flexible layout that looks
great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-
column, two-columns, right-sidebar, flexible-width, custom-
header, custom-menu, editor-style, featured-images,
microformats, post-formats, rtl-language-support, sticky-post,
translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've
learned with others.
*/

43. dariobf.com #WCAlicante2017
IV. Rutas a ficheros
• Organiza las fuentes, JavaScript e imágenes en carpetas (font, js e
img respectivamente) dentro de la carpeta del tema.
• Es hora de reparar las llamadas a ficheros (imágenes, tipografías,
JavaScript y demás) en tu style.css

44. dariobf.com #WCAlicante2017
• Repara la llamada al style.css
<link rel='stylesheet' id='dariobf-css' href=‘<?php
bloginfo(‘stylesheet_url’); ?>’ type='text/css' media='screen'/>
• Añade de la misma manera las demás hojas de estilos y
JavaScript que tengas.
• *MEJOR AÚN: Encólalo con wp_enqueue_script()
IV. Rutas a ficheros

45. dariobf.com #WCAlicante2017
• Cambia la información estática de la cabecera:
• Título del sitio: bloginfo(‘name’);
• Descripción del sitio: bloginfo(‘description’);
• Otros: Charset, Lenguaje, url RSS, etc.
V. Head

46. dariobf.com #WCAlicante2017
• Mueve el contenido de tu index.html a home.php o front-
page.php.
• Edita el index.php y coloca ahí el contenido referente a los
contenidos dinámicos (artículos o entradas).
• Crea un fichero page.php genérico y los específicos para las
páginas de tu sitio: contacto.php, about.php, etc.
VI. Plantillas principales

47. dariobf.com #WCAlicante2017
• Elimina el contenido estático e incluye el loop de WordPress:
VI. Dinamiza las plantillas
<?php
if(have_posts()) :
while(have_posts()) :
the_post();
?>
<h1><?php the_title() ?></h1>
<div class='post-content'><?php the_content() ?></div>
<?php
endwhile;
else:
?>
Vaya, no hay entradas.
<?php
endif;
?>

48. dariobf.com #WCAlicante2017
• Utiliza las funciones de WordPress para mostrar los contenidos
dentro del loop:
• the_title()
• the_permalink()
• the_content() o the_excerpt()
Ten en cuenta que cuando visualizamos un artículo, es como
cuando llamamos a varios, sólo que visualizamos una iteración.
VI. Dinamiza las plantillas

49. dariobf.com #WCAlicante2017
• Es hora de añadir cosas como menús (register_nav_menu) y
sidebar, zonas de widgets y demás extras de nuestro theme.
• Si haces uso de plugins de terceros, es el momento de
integrarlos y darles estilos: Formularios de contacto, breadcrumb,
VII. Añade los extras

50. BONUS
CHEATSHEET
dariobf.com #WCAlicante2017

51. dariobf.com #WCAlicante2017

52. EXTRA
BONUS
Custom Post Types
dariobf.com #WCAlicante2017

53. dariobf.com #WCAlicante2017
Custom Post Types
Por defecto:
• Entradas
• Páginas
• Adjuntos
• Revisión
• Menús de navegación.

54. dariobf.com #WCAlicante2017
Custom Post Types
Utilidades:
• Catálogos de productos.
• Portfolios.
• Editorial.
…
Cómo crearlos y más información

55. #7
Metaboxes
EXTRA
BONUS
dariobf.com #WCAlicante2017

56. dariobf.com #WCAlicante2017
Metaboxes
¿Qué es?:
• Nos permite añadir campos personalizados en la página de
edición de los posts.
• Guardar más información sobre un tipo de entrada (o todos)
¿Cómo se crean?:
• Con plugin.
• Con código.
Cómo crearlos y más información

57. dariobf.com #WCAlicante2017
¡GRACIAS!
@DarioBF
dariobf.com
¿PREGUNTAS?
#WCAlicante2017