Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Bilbao - De HTML a WordPress - @DarioBF

687 views

Published on

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.

Published in: Internet
  • Be the first to comment

WordCamp Bilbao - De HTML a WordPress - @DarioBF

  1. 1. dariobf.com #WCBilbao HTML&CSS ↓ WORDPRESS DARIOBF EXPERTO EN WORDPRESS #WCBilbao
  2. 2. dariobf.com #WCBilbao DARIOBF EXPERTO EN WORDPRESS #WCBilbao ¡Hola! Soy Darío, diseñadory maquetador front-end. @DarioBF dariobf.com
  3. 3. dariobf.com #WCBilbao
  4. 4. #1 ¿Qué es un tema? dariobf.com
  5. 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 •…
  6. 6. dariobf.com #WCBilbao index.phpstyle.css ¿Cómo es un tema?
  7. 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. 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. */
  9. 9. dariobf.com #WCBilbao style.css Apariencia → Temas
  10. 10. dariobf.com #WCBilbao style.css
  11. 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 »
  12. 12. dariobf.com #WCBilbao
  13. 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. 14. #2 La estructura de un tema dariobf.com
  15. 15. dariobf.com #WCBilbao index.phpstyle.css Ficheros habituales de un tema WordPress
  16. 16. dariobf.com #WCBilbao Ficheros habituales de un tema WordPress header.php footer.php sidebar.php
  17. 17. dariobf.com #WCBilbao header.php footer.php index.php sidebar.php
  18. 18. dariobf.com #WCBilbao header.php Declaración del documento. Inclusión de los estilos. Función wp_head();
  19. 19. dariobf.com #WCBilbao footer.php Pié de página. Inclusión de Javascript. Función wp_footer();
  20. 20. dariobf.com #WCBilbao Plantillas para contenidos home.php page.php single.php archive.php
  21. 21. dariobf.com #WCBilbao page.php y single.php
  22. 22. 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
  23. 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. 24. dariobf.com #WCBilbao Plantillas personalizadas contacto.php about.php location.php whatever.php …
  25. 25. #3 El Loop
  26. 26. dariobf.com #WCBilbao header.php footer.php index.php sidebar.php
  27. 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. 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. 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. 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
  31. 31. #4 Menús personalizados
  32. 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. 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' )); ?>
  34. 34. #5 functions.php
  35. 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. 36. ¡CUIDADO!: Si un plugin de WordPress llama a la misma función o filtro que tu functions.php, los resultados pueden ser…
  37. 37. #10 Proceso: HTML&CSS → WordPress dariobf.com
  38. 38. 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
  39. 39. 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…
  40. 40. 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
  41. 41. 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. */
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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; ?>
  47. 47. 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
  48. 48. 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
  49. 49. BONUS CHEATSHEET
  50. 50. dariobf.com #WCBilbao
  51. 51. EXTRA BONUS Custom Post Types
  52. 52. dariobf.com #WCBilbao Custom Post Types Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
  53. 53. dariobf.com #WCBilbao Custom Post Types Utilidades: • Catálogos de productos. • Portfolios. • Editorial. … Cómo crearlos y más información
  54. 54. #7 Metaboxes EXTRA BONUS
  55. 55. 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
  56. 56. dariobf.com #WCBilbao ¡GRACIAS! #WCBilbao @DarioBF dariobf.com ¿PREGUNTAS?

×