wordcamp bilbao - de html a wordpress - @dariobf
TRANSCRIPT
![Page 2: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/2.jpg)
dariobf.com #WCBilbao
DARIOBFEXPERTO EN WORDPRESS
#WCBilbao
¡Hola! Soy Darío, diseñador y maquetador front-end.
@DarioBF
dariobf.com
![Page 5: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/5.jpg)
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 • …
![Page 7: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/7.jpg)
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;…
}…}
![Page 8: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/8.jpg)
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.*/
![Page 11: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/11.jpg)
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
»
![Page 13: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/13.jpg)
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
![Page 15: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/15.jpg)
dariobf.com #WCBilbao
index.phpstyle.css
Ficheros habituales de un tema WordPress
![Page 16: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/16.jpg)
dariobf.com #WCBilbao
Ficheros habituales de un tema WordPress
header.php footer.php sidebar.php
![Page 18: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/18.jpg)
dariobf.com #WCBilbao
header.php
Declaración del documento.
Inclusión de los estilos.
Función wp_head();
![Page 19: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/19.jpg)
dariobf.com #WCBilbao
footer.php
Pié de página.
Inclusión de Javascript.
Función wp_footer();
![Page 20: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/20.jpg)
dariobf.com #WCBilbao
Plantillas para contenidos
home.php page.php
single.php archive.php
![Page 22: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/22.jpg)
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
![Page 23: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/23.jpg)
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
![Page 24: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/24.jpg)
dariobf.com #WCBilbao
Plantillas personalizadas
contacto.php about.php
location.php whatever.php
…
![Page 25: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/25.jpg)
#3
El Loop
![Page 27: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/27.jpg)
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)
![Page 28: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/28.jpg)
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;?>
![Page 29: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/29.jpg)
<?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
![Page 30: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/30.jpg)
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
![Page 31: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/31.jpg)
#4
Menús personalizados
![Page 32: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/32.jpg)
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 {
![Page 33: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/33.jpg)
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'));
?>
![Page 34: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/34.jpg)
#5
functions.php
![Page 35: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/35.jpg)
• 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
![Page 36: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/36.jpg)
¡CUIDADO!: Si un plugin de WordPress llama a la misma función
o filtro que tu functions.php, los resultados pueden ser…
![Page 37: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/37.jpg)
![Page 39: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/39.jpg)
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
![Page 40: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/40.jpg)
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…
![Page 41: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/41.jpg)
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
![Page 42: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/42.jpg)
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.*/
![Page 43: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/43.jpg)
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
![Page 44: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/44.jpg)
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
![Page 45: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/45.jpg)
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
![Page 46: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/46.jpg)
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
![Page 47: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/47.jpg)
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;?>
![Page 48: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/48.jpg)
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
![Page 49: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/49.jpg)
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
![Page 50: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/50.jpg)
BONUS
CHEATSHEET
![Page 52: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/52.jpg)
EXTRA BONUS
Custom Post Types
![Page 53: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/53.jpg)
dariobf.com #WCBilbao
Custom Post Types
Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
![Page 54: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/54.jpg)
dariobf.com #WCBilbao
Custom Post Types
Utilidades: • Catálogos de productos. • Portfolios. • Editorial. …
Cómo crearlos y más información
![Page 55: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/55.jpg)
#7
Metaboxes
EXTRA BONUS
![Page 56: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/56.jpg)
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
![Page 57: WordCamp Bilbao - De HTML a WordPress - @DarioBF](https://reader033.vdocuments.mx/reader033/viewer/2022042723/587d6f8f1a28ab32318b7817/html5/thumbnails/57.jpg)
dariobf.com #WCBilbao
¡GRACIAS!
#WCBilbao
@DarioBF
dariobf.com
¿PREGUNTAS?