WordCamp Bilbao - De HTML a WordPress - @DarioBF
57
dariobf.com #WCBilbao HTML&CSS ↓ WORDPRESS DARIOBF EXPERTO EN WORDPRESS #WCBilbao
Transcript of WordCamp Bilbao - De HTML a WordPress - @DarioBF
dariobf.com #WCBilbao
DARIOBFEXPERTO EN WORDPRESS
#WCBilbao
¡Hola! Soy Darío, diseñador y maquetador front-end.
@DarioBF
dariobf.com
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 • …
dariobf.com #WCBilbao
style.cssSin 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;…
}…}
dariobf.com #WCBilbao
/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor 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.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: 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-readyText 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.*/
dariobf.com #WCBilbao
index.phpPlantilla 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
»
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
dariobf.com #WCBilbao
index.phpstyle.css
Ficheros habituales de un tema WordPress
dariobf.com #WCBilbao
Ficheros habituales de un tema WordPress
header.php footer.php sidebar.php
dariobf.com #WCBilbao
header.php
Declaración del documento.
Inclusión de los estilos.
Función wp_head();
dariobf.com #WCBilbao
footer.php
Pié de página.
Inclusión de Javascript.
Función wp_footer();
dariobf.com #WCBilbao
Plantillas para contenidos
home.php page.php
single.php archive.php
dariobf.com #WCBilbao
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
dariobf.com #WCBilbao
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
dariobf.com #WCBilbao
Plantillas personalizadas
contacto.php about.php
location.php whatever.php
…
#3
El Loop
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)
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>
<?phpendwhile;
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();
?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>
<?phpendwhile;
else:?>
Vaya, no hay entradas.<?php
endif;?>
Clase que modifica (o crea) el objeto $wp_query Loop por defecto:
Clase WP_Query
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
#4
Menús personalizados
dariobf.com #WCBilbao
Podemos registrar tantos menús como queramos
// Añado un menú sólofunction register_my_menu() { register_nav_menu('header-menu',__( ‘Primary Navigation' ));}// Añado varios menúsfunction 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 {
dariobf.com #WCBilbao
Para mostrarlo en el front-end:
<?php wp_nav_menu(array( 'theme_location' => 'header-menu')); ?>
Añadiendo menús
Más información
<?phpwp_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
dariobf.com
¡CUIDADO!: Si un plugin de WordPress llama a la misma función
o filtro que tu functions.php, los resultados pueden ser…
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
dariobf.com #WCBilbao
II. Prepara el temaCrea 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…
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
dariobf.com #WCBilbao
/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor 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.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: 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-readyText 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.*/
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
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
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
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
dariobf.com #WCBilbao
• Elimina el contenido estático e incluye el loop de WordPress:
VI. Dinamiza las plantillas
<?phpif(have_posts()) :
while(have_posts()) :the_post();
?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>
<?phpendwhile;
else:?>
Vaya, no hay entradas.<?php
endif;?>
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
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
BONUS
CHEATSHEET
EXTRA BONUS
Custom Post Types
dariobf.com #WCBilbao
Custom Post Types
Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
dariobf.com #WCBilbao
Custom Post Types
Utilidades: • Catálogos de productos. • Portfolios. • Editorial. …
Cómo crearlos y más información
#7
Metaboxes
EXTRA BONUS
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
dariobf.com #WCBilbao
¡GRACIAS!
#WCBilbao
@DarioBF
dariobf.com
¿PREGUNTAS?
