WordCamp Alicante 2017 - De HTML a WordPress

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

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

#1
¿Qué es un tema?

¿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
•…

index.phpstyle.css
¿Cómo es un tema?

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;
…
}
…
}

/*
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.
*/

style.css
Apariencia → Temas

style.css

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
»

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

#2
La estructura de
un tema

index.phpstyle.css
Ficheros habituales de un
tema WordPress

Ficheros habituales de un
tema WordPress
header.php footer.php sidebar.php

header.php
footer.php
index.php sidebar.php

header.php
Declaración del documento.
Inclusión de los estilos.
Función wp_head();

footer.php
Pié de página.
Inclusión de Javascript.
Función wp_footer();

Plantillas para contenidos
home.php page.php
single.php archive.php

page.php y single.php

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

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

Plantillas personalizadas
contacto.php about.php
location.php whatever.php
…

#3
El Loop

header.php
footer.php
index.php
sidebar.php

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)

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;
?>

<?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();
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>
Clase que modifica (o crea) el objeto $wp_query
Loop por defecto:
Clase WP_Query

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

#4
Menús
personalizados

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 {

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'
));
?>

#5
functions.php

• 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

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

WordCamp Alicante 2017 - De HTML a WordPress

#10
Proceso:
HTML&CSS → WordPress

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

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…

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()

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

• 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

• 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

• 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

• Elimina el contenido estático e incluye el loop de WordPress:
VI. Dinamiza las plantillas
<?php
if(have_posts()) :
while(have_posts()) :
the_post();
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>

• 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

• 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

BONUS
CHEATSHEET

EXTRA
BONUS
Custom Post Types

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

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

#7
Metaboxes
EXTRA
BONUS

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

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

WordCamp Alicante 2017 - De HTML a WordPress

WordCamp Alicante 2017 - De HTML a WordPress

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Destacado

Destacado(19)

Similar a WordCamp Alicante 2017 - De HTML a WordPress

Similar a WordCamp Alicante 2017 - De HTML a WordPress(20)

Último

Último(8)

WordCamp Alicante 2017 - De HTML a WordPress