SlideShare a Scribd company logo
1 of 57
Download to read offline
dariobf.com #WCBilbao
HTML&CSS
↓
WORDPRESS
DARIOBF
EXPERTO EN WORDPRESS #WCBilbao
dariobf.com #WCBilbao
DARIOBF
EXPERTO EN WORDPRESS
#WCBilbao
¡Hola! Soy Darío,
diseñadory maquetador front-end.
@DarioBF
dariobf.com
dariobf.com #WCBilbao
#1
¿Qué es un tema?
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
index.phpstyle.css
¿Cómo es un tema?
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;
…
}
…
}
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.
*/
dariobf.com #WCBilbao
style.css
Apariencia → Temas
dariobf.com #WCBilbao
style.css
dariobf.com #WCBilbao
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
»
dariobf.com #WCBilbao
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
#2
La estructura de
un tema
dariobf.com
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
footer.php
index.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
page.php y single.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
header.php
footer.php
index.php
sidebar.php
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>
<?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();
?>
<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
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ó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 {
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
<?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
dariobf.com
¡CUIDADO!: Si un plugin de
WordPress llama a la misma función
o filtro que tu functions.php, los
resultados pueden ser…
#10
Proceso:
HTML&CSS → WordPress
dariobf.com
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 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…
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 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.
*/
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
<?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;
?>
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
dariobf.com #WCBilbao
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?

More Related Content

What's hot

Gestión de información con WordPress para no programadores - WordCamp Santa...
Gestión de información con WordPress para no programadores - WordCamp Santa...Gestión de información con WordPress para no programadores - WordCamp Santa...
Gestión de información con WordPress para no programadores - WordCamp Santa...Alvaro Gómez Velasco
 
Como hacer una pagina web
Como hacer una pagina webComo hacer una pagina web
Como hacer una pagina webAyllen Sanchez
 
Crear Plugin de WordPress desde Cero
Crear Plugin de WordPress desde CeroCrear Plugin de WordPress desde Cero
Crear Plugin de WordPress desde CeroEduardo Turiño
 
Taller de WordPress avanzado | #EBE11
Taller de WordPress avanzado | #EBE11Taller de WordPress avanzado | #EBE11
Taller de WordPress avanzado | #EBE11Rafael Poveda
 
Gestion y Administracion de WordPress con WP-CLI
Gestion y Administracion de WordPress con WP-CLIGestion y Administracion de WordPress con WP-CLI
Gestion y Administracion de WordPress con WP-CLIOscar Abad Folgueira
 
WordPress para programadores
WordPress para programadoresWordPress para programadores
WordPress para programadoreswpargentina
 
Instalación y configuración de un sitio web en Wordpress 3.8
Instalación y configuración de un sitio web en Wordpress 3.8Instalación y configuración de un sitio web en Wordpress 3.8
Instalación y configuración de un sitio web en Wordpress 3.8Dani Reguera Bakhache
 
De Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.orgDe Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.orgralcocer
 
Creación de un plugin para WordPress
Creación de un plugin para WordPressCreación de un plugin para WordPress
Creación de un plugin para WordPressDani Reguera Bakhache
 
Herramientas de lanzamiento. Nuestra web
Herramientas de lanzamiento. Nuestra webHerramientas de lanzamiento. Nuestra web
Herramientas de lanzamiento. Nuestra webLorena Fernández
 
VI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasVI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasJuan Hernando García
 
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...Instalación Wordpress y woocommerce con xampp y migración de base de datos de...
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...Laura Colorado
 
Cómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoCómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoJuan Hernando García
 
Tu negocio en internet. WordPress (nivel medio)
Tu negocio en internet. WordPress (nivel medio)Tu negocio en internet. WordPress (nivel medio)
Tu negocio en internet. WordPress (nivel medio)Fundació Bit
 

What's hot (20)

Gestión de información con WordPress para no programadores - WordCamp Santa...
Gestión de información con WordPress para no programadores - WordCamp Santa...Gestión de información con WordPress para no programadores - WordCamp Santa...
Gestión de información con WordPress para no programadores - WordCamp Santa...
 
Como hacer una pagina web
Como hacer una pagina webComo hacer una pagina web
Como hacer una pagina web
 
Crear Plugin de WordPress desde Cero
Crear Plugin de WordPress desde CeroCrear Plugin de WordPress desde Cero
Crear Plugin de WordPress desde Cero
 
Taller de WordPress avanzado | #EBE11
Taller de WordPress avanzado | #EBE11Taller de WordPress avanzado | #EBE11
Taller de WordPress avanzado | #EBE11
 
Gestion y Administracion de WordPress con WP-CLI
Gestion y Administracion de WordPress con WP-CLIGestion y Administracion de WordPress con WP-CLI
Gestion y Administracion de WordPress con WP-CLI
 
WordPress para programadores
WordPress para programadoresWordPress para programadores
WordPress para programadores
 
Wordcamp Perú 2009 - Themes
Wordcamp Perú 2009 - ThemesWordcamp Perú 2009 - Themes
Wordcamp Perú 2009 - Themes
 
Los mejores plugins para Wordpress
Los mejores plugins para WordpressLos mejores plugins para Wordpress
Los mejores plugins para Wordpress
 
Instalación y configuración de un sitio web en Wordpress 3.8
Instalación y configuración de un sitio web en Wordpress 3.8Instalación y configuración de un sitio web en Wordpress 3.8
Instalación y configuración de un sitio web en Wordpress 3.8
 
De Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.orgDe Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.org
 
Creación de un plugin para WordPress
Creación de un plugin para WordPressCreación de un plugin para WordPress
Creación de un plugin para WordPress
 
Herramientas de lanzamiento. Nuestra web
Herramientas de lanzamiento. Nuestra webHerramientas de lanzamiento. Nuestra web
Herramientas de lanzamiento. Nuestra web
 
Webperf wordpress
Webperf wordpressWebperf wordpress
Webperf wordpress
 
VI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasVI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temas
 
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...Instalación Wordpress y woocommerce con xampp y migración de base de datos de...
Instalación Wordpress y woocommerce con xampp y migración de base de datos de...
 
Carlos Pascual #WPvalladolid 2014
Carlos Pascual #WPvalladolid 2014Carlos Pascual #WPvalladolid 2014
Carlos Pascual #WPvalladolid 2014
 
Cómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoCómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseño
 
Acelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPOAcelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPO
 
wp-cli
wp-cliwp-cli
wp-cli
 
Tu negocio en internet. WordPress (nivel medio)
Tu negocio en internet. WordPress (nivel medio)Tu negocio en internet. WordPress (nivel medio)
Tu negocio en internet. WordPress (nivel medio)
 

Similar to WordCamp Bilbao - De HTML a WordPress - @DarioBF

WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child ThemesAmit Kvint
 
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programarCrea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programarDani Reguera Bakhache
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseJuan Hernando García
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2Raúl Carrión
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Julio Camarero
 
Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Sergio Nouvel Castro
 
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"WPCartagena
 
El funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalizaciónEl funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalizaciónComunidadRedDes
 
Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?German Cabezas Aceves
 
Sesion01
Sesion01Sesion01
Sesion01UB Art
 
Ataque masivo a WordPress con ILLOWP
Ataque masivo a WordPress con ILLOWPAtaque masivo a WordPress con ILLOWP
Ataque masivo a WordPress con ILLOWPQuantiKa14
 
Wordcamp2013 Todo lo podemos hacer con Wordpress
Wordcamp2013   Todo lo podemos hacer con WordpressWordcamp2013   Todo lo podemos hacer con Wordpress
Wordcamp2013 Todo lo podemos hacer con WordpressGoPymes SAC
 

Similar to WordCamp Bilbao - De HTML a WordPress - @DarioBF (20)

WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programarCrea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
 
Wordpress
WordpressWordpress
Wordpress
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP Ourense
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1
 
Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2
 
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"
30/11/2017 | Meetup "Aprende a crear tu propio Child Theme (taller)"
 
El funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalizaciónEl funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalización
 
Vistiendo a WordPress
Vistiendo a WordPressVistiendo a WordPress
Vistiendo a WordPress
 
Introducción a Wordpress OpenD
Introducción a Wordpress OpenDIntroducción a Wordpress OpenD
Introducción a Wordpress OpenD
 
Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
 
Qué es php
Qué es phpQué es php
Qué es php
 
Servidores.pptx
Servidores.pptxServidores.pptx
Servidores.pptx
 
Sesion01
Sesion01Sesion01
Sesion01
 
Ataque masivo a WordPress con ILLOWP
Ataque masivo a WordPress con ILLOWPAtaque masivo a WordPress con ILLOWP
Ataque masivo a WordPress con ILLOWP
 
Migraciones en WordPress
Migraciones en WordPressMigraciones en WordPress
Migraciones en WordPress
 
Wordcamp2013 Todo lo podemos hacer con Wordpress
Wordcamp2013   Todo lo podemos hacer con WordpressWordcamp2013   Todo lo podemos hacer con Wordpress
Wordcamp2013 Todo lo podemos hacer con Wordpress
 
Programacion web
Programacion webProgramacion web
Programacion web
 

Recently uploaded

RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfRESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfcoordinadorprimerode
 
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOS
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOSACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOS
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOSssuserac3cd81
 
trabajodetecnologa-240406000025-79ff7438.pdf
trabajodetecnologa-240406000025-79ff7438.pdftrabajodetecnologa-240406000025-79ff7438.pdf
trabajodetecnologa-240406000025-79ff7438.pdfvictorsamuelmiranda
 
Manual-básico-para-aprender-inglésss.pdf
Manual-básico-para-aprender-inglésss.pdfManual-básico-para-aprender-inglésss.pdf
Manual-básico-para-aprender-inglésss.pdfluismateo57
 
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...ls4231294
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfJohn Muñoz
 
amazon.teoriageneraldesistemas.presentacion
amazon.teoriageneraldesistemas.presentacionamazon.teoriageneraldesistemas.presentacion
amazon.teoriageneraldesistemas.presentacionmiguelbedoy23
 
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...NoemiPalacios7
 
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdf
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdfPractica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdf
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdfjosemanuelpadilla6
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11THALIAEUGENIOMAIZ
 

Recently uploaded (10)

RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfRESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
 
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOS
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOSACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOS
ACTIVIDADES DE APRENDIZAJE PARA LOS NIÑOS
 
trabajodetecnologa-240406000025-79ff7438.pdf
trabajodetecnologa-240406000025-79ff7438.pdftrabajodetecnologa-240406000025-79ff7438.pdf
trabajodetecnologa-240406000025-79ff7438.pdf
 
Manual-básico-para-aprender-inglésss.pdf
Manual-básico-para-aprender-inglésss.pdfManual-básico-para-aprender-inglésss.pdf
Manual-básico-para-aprender-inglésss.pdf
 
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...
EL PRECIO DE LA IGNORANCIA Y DE LA SOCIEDAD ENFERMA SUS CONSECUENCIAS NEGATIV...
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdf
 
amazon.teoriageneraldesistemas.presentacion
amazon.teoriageneraldesistemas.presentacionamazon.teoriageneraldesistemas.presentacion
amazon.teoriageneraldesistemas.presentacion
 
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...
UNIDAD DE APRENDIZAJE N° 01 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv...
 
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdf
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdfPractica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdf
Practica1_T15_Montaje_Abraham_Teba_Ojeda-1.pdf
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
 

WordCamp Bilbao - De HTML a WordPress - @DarioBF

  • 2. dariobf.com #WCBilbao DARIOBF EXPERTO EN WORDPRESS #WCBilbao ¡Hola! Soy Darío, diseñadory maquetador front-end. @DarioBF dariobf.com
  • 4. #1 ¿Qué es un tema? dariobf.com
  • 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. */
  • 11. dariobf.com #WCBilbao 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 »
  • 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
  • 14. #2 La estructura de un tema dariobf.com
  • 16. dariobf.com #WCBilbao Ficheros habituales de un tema WordPress header.php footer.php sidebar.php
  • 18. dariobf.com #WCBilbao header.php Declaración del documento. Inclusión de los estilos. Función wp_head();
  • 19. dariobf.com #WCBilbao footer.php Pié de página. Inclusión de Javascript. Función wp_footer();
  • 20. dariobf.com #WCBilbao Plantillas para contenidos home.php page.php single.php archive.php
  • 23. 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
  • 24. dariobf.com #WCBilbao Plantillas personalizadas contacto.php about.php location.php whatever.php …
  • 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
  • 32. dariobf.com #WCBilbao 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 #WCBilbao 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' )); ?>
  • 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…
  • 37.
  • 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
  • 53. dariobf.com #WCBilbao Custom Post Types Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
  • 54. dariobf.com #WCBilbao Custom Post Types Utilidades: • Catálogos de productos. • Portfolios. • Editorial. … Cómo crearlos y más información
  • 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