Aprende cómo pasar tu maqueta HTML y CSS a tema de WordPress.
Un amplio repaso a la estructura de un theme de WordPress y las buenas prácticas a la hora de desarrollar nuestro propio theme.
Aprende cómo se comporta un tema, controla el Loop, crea menús dinámicos, zonas de widgets, tipos de contenidos personalizados, metaboxes y alguna sorpresa más.
5. dariobf.com #WCBilbao
¿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
•…
7. dariobf.com #WCBilbao
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 #WCBilbao
/*
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.
*/
13. dariobf.com #WCBilbao
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
27. dariobf.com #WCBilbao
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 #WCBilbao
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 #WCBilbao
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
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
36. ¡CUIDADO!: Si un plugin de
WordPress llama a la misma función
o filtro que tu functions.php, los
resultados pueden ser…
39. dariobf.com #WCBilbao
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 #WCBilbao
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 #WCBilbao
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
42. dariobf.com #WCBilbao
/*
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 #WCBilbao
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 #WCBilbao
• 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 #WCBilbao
• 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 #WCBilbao
• 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 #WCBilbao
• 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 #WCBilbao
• 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 #WCBilbao
• 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
56. dariobf.com #WCBilbao
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