WordCamp Alicante 2017 - De HTML a WordPress

666 visualizaciones

Publicado el

Presentación de la WordCamp Alicante 2017

Publicado en: Software
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
666
En SlideShare
0
De insertados
0
Número de insertados
55
Acciones
Compartido
0
Descargas
37
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

WordCamp Alicante 2017 - De HTML a WordPress

  1. 1. dariobf.com #WCAlicante2017 HTML&CSS ↓ WORDPRESS DARIOBF EXPERTO EN WORDPRESS #WCAlicante2017
  2. 2. dariobf.com #WCAlicante2017 DARIOBF EXPERTO EN WORDPRESS ¡Hola! Soy Darío, diseñador y maquetador front-end. @DarioBF dariobf.com #WCAlicante2017
  3. 3. dariobf.com #WCAlicante2017
  4. 4. #1 ¿Qué es un tema? dariobf.com #WCAlicante2017
  5. 5. dariobf.com #WCAlicante2017 ¿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 #WCAlicante2017 index.phpstyle.css ¿Cómo es un tema?
  7. 7. dariobf.com #WCAlicante2017 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 #WCAlicante2017 /* 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 #WCAlicante2017 style.css Apariencia → Temas
  10. 10. dariobf.com #WCAlicante2017 style.css
  11. 11. dariobf.com #WCAlicante2017 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 #WCAlicante2017
  13. 13. dariobf.com #WCAlicante2017 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 #WCAlicante2017
  15. 15. dariobf.com #WCAlicante2017 index.phpstyle.css Ficheros habituales de un tema WordPress
  16. 16. dariobf.com #WCAlicante2017 Ficheros habituales de un tema WordPress header.php footer.php sidebar.php
  17. 17. dariobf.com #WCAlicante2017 header.php footer.php index.php sidebar.php
  18. 18. dariobf.com #WCAlicante2017 header.php Declaración del documento. Inclusión de los estilos. Función wp_head();
  19. 19. dariobf.com #WCAlicante2017 footer.php Pié de página. Inclusión de Javascript. Función wp_footer();
  20. 20. dariobf.com #WCAlicante2017 Plantillas para contenidos home.php page.php single.php archive.php
  21. 21. dariobf.com #WCAlicante2017 page.php y single.php
  22. 22. dariobf.com #WCAlicante2017 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
  23. 23. dariobf.com #WCAlicante2017 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 #WCAlicante2017 Plantillas personalizadas contacto.php about.php location.php whatever.php …
  25. 25. #3 El Loop dariobf.com #WCAlicante2017
  26. 26. dariobf.com #WCAlicante2017 header.php footer.php index.php sidebar.php
  27. 27. dariobf.com #WCAlicante2017 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 #WCAlicante2017 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 #WCAlicante2017 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 dariobf.com #WCAlicante2017
  32. 32. dariobf.com #WCAlicante2017 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 #WCAlicante2017 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 dariobf.com #WCAlicante2017
  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 #WCAlicante2017
  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 #WCAlicante2017
  38. 38. dariobf.com #WCAlicante2017 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 #WCAlicante2017 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 #WCAlicante2017 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()
  41. 41. dariobf.com #WCAlicante2017 /* 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 #WCAlicante2017 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 #WCAlicante2017 • 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 #WCAlicante2017 • 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 #WCAlicante2017 • 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 #WCAlicante2017 • 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 #WCAlicante2017 • 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 #WCAlicante2017 • 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 dariobf.com #WCAlicante2017
  50. 50. dariobf.com #WCAlicante2017
  51. 51. EXTRA BONUS Custom Post Types dariobf.com #WCAlicante2017
  52. 52. dariobf.com #WCAlicante2017 Custom Post Types Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.
  53. 53. dariobf.com #WCAlicante2017 Custom Post Types Utilidades: • Catálogos de productos. • Portfolios. • Editorial. … Cómo crearlos y más información
  54. 54. #7 Metaboxes EXTRA BONUS dariobf.com #WCAlicante2017
  55. 55. dariobf.com #WCAlicante2017 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 #WCAlicante2017 ¡GRACIAS! @DarioBF dariobf.com ¿PREGUNTAS? #WCAlicante2017

×