Successfully reported this slideshow.
Your SlideShare is downloading. ×

Modifica y crea temas de WordPress - Meetup WP Ourense

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 31 Ad

Modifica y crea temas de WordPress - Meetup WP Ourense

Download to read offline

¿Qué es un tema de WordPress? ¿Cómo modificarlo? ¿Qué es un tema hijo? ¿Cómo utilizar Underscores? ¿Y crear un tema desde cero? ¿Qué es Gutenberg?

¿Qué es un tema de WordPress? ¿Cómo modificarlo? ¿Qué es un tema hijo? ¿Cómo utilizar Underscores? ¿Y crear un tema desde cero? ¿Qué es Gutenberg?

Advertisement
Advertisement

More Related Content

Slideshows for you (18)

Similar to Modifica y crea temas de WordPress - Meetup WP Ourense (20)

Advertisement

More from Juan Hernando García (10)

Recently uploaded (20)

Advertisement

Modifica y crea temas de WordPress - Meetup WP Ourense

  1. 1. MODIFICA Y CREA TEMAS DE WORDPRESS
  2. 2. ¿QUIÉN SOY YO? Blog & Contacto en ciudadanob.com Diseño & Desarrollo Web @Vertixe Actualidad WP @EnlacePermanent Co-organizador @WPPontevedra JUAN HERNANDO @CIUDADANOB
  3. 3. GRACIAS, COMUNIDAD Todos hacemos mejor WordPress Todos ayudamos a crearlo compartiendo conocimiento, traduciendo… Siempre hacen falta más manos https://es.wordpress.org/colabora
  4. 4. ¿QUÉ ES UN TEMA? Es* lo que nos permite cambiar la apariencia de nuestra página web. También nos permite cambiar alguna funcionalidad, pero lo principal es el aspecto visual. *son archivos .php .css .js
  5. 5. ¿QUÉ QUEREMOS APRENDER HOY? Juan Versión 0.4: Modificar un tema del repositorio Juan Versión 0.7: Crear un tema hijo para modificar Juan Versión 1.0: Crear un tema basado en _s Juan Versión 1.4: Crear un tema desde cero Juan Versión 2.0: Ir conociendo Gutenberg
  6. 6. Como intentar explicar todo esto en media hora es un poco complicado y casi seguro que me voy a pasar de tiempo creo que es mejor hacer un repaso general de toda la información y después si hay preguntas vamos profundizando sobre algún tema en particular si es que tengo respuestas para todo que seguro que hay alguien preparándose alguna cuestión para pillarme pero no pasa nada porque estamos aquí todos para aprender yo el primero. El resto del texto aquí escrito es sólo para rellenar toda la diapositiva por puro efecto visual así que no lo tengáis muy en cuenta, ¡gracias!
  7. 7. ¿DÓNDE CONSIGO UN TEMA PARA MODIFICARLO? [Insertar aquí queja sobre ThemeForest] [Insertar aquí explicación sobre maquetadores tipo Divi] EN EL REPOSITORIO OFICIAL https://es.wordpress.org/themes MI RECOMENDACIÓN Los temas de Anders Norén http://www.andersnoren.se/teman/
  8. 8. MODIFICAR UN TEMA SIN CONOCIMIENTO(S PREVIOS) EL PERSONALIZADOR desde WordPress 3.4
  9. 9. MODIFICAR UN TEMA SIN CONOCIMIENTO(S PREVIOS) 1. Necesito una funcionalidad o cambiar un estilo 2. Busco en Google una solución a mi problema 3. Pego un código aleatorio en un archivo que tal vez… 4. Pantallazo blanco y ¡adiós web!
  10. 10. MODIFICAR UN TEMA SIN CONOCIMIENTO(S PREVIOS) Desde la versión 4.9 (¡actualizad siempre!)
  11. 11. MODIFICAR UN TEMA CON CONOCIMIENTO En la web en producción vs. En una copia local / staging En el propio editor de WP vs. En un editor de código Sin red de seguridad vs. Con control de versiones Copiando snippets vs. Entendiendo lo que se hace Añadiendo todo al functions vs. Creando un plugin Llenándolo de !important vs. Escribiendo buen CSS
  12. 12. MODIFICAR UN TEMA CON CONOCIMIENTO HTML CSS JavaScript PHP Estructura de un tema WP Función vs. diseño Códex de WordPress Hooks Uso del inspector del navegador Copy & Paste Avanzado
  13. 13. ESTRUCTURA DE UN TEMA WP https://dariobf.com/slides/WCMadrid2017/ style.css index.php
  14. 14. ESTRUCTURA DE UN TEMA WP https://dariobf.com/slides/WCMadrid2017/ style.css index.php Aquí cambiamos los coloritos Aquí cambiamos la estructura
  15. 15. ESTRUCTURA DE UN TEMA WP style.css index.php header.php sidebar.php footer.php header index footer sidebar
  16. 16. ESTRUCTURA DE UN TEMA WP page.php home.php archive.php single.php about.php single-producto.php template-parts/carrusel.php … https://codex.wordpress.org/Templates
  17. 17. FUNCIÓN VS. DISEÑO EL LOOP (BUCLE) DE WORDPRESS ¿Cómo demonios sale el contenido del backend en el frontend? <?php get_header(); if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; get_sidebar(); get_footer(); ?> https://codex.wordpress.org/es:The_Loop_in_Action
  18. 18. FUNCIÓN VS. DISEÑO EL ARCHIVO FUNCTIONS.PHP Un contenedor de funciones para modificar características de nuestro tema (si está activo) <?php /* Plugin Name: Plugin de funciones básicas Plugin URI: http://meetup-ourense.localhost Description: Me salvará la vida en el futuro. Version: 1.0 Author: CiudadanoB Author URI: https://ciudadanob.com License: GPL2 */ ?> O NUESTRO PROPIO PLUGIN
  19. 19. CREAR UN TEMA HIJO ¿Para qué? Necesito algunos cambios (CSS, funciones, plantillas) en un tema (el padre) ¿Por qué? No perder los cambios si se actualiza el tema padre ¿Cómo hacerlo? En cuatro sencillos pasos (y con algo de código) https://maugelves.com/wp-content/uploads/2017/04/carla-saiz-mi-primer-parto-en- wordpress.pdf
  20. 20. CREAR UN TEMA HIJO 1. Crea una carpeta en /themes con el nombre del padre y terminada en -child 2. Crea los archivos style.css y functions.php en la carpeta 3. Añade el código mínimo con la información del tema hijo y las funciones para cargar correctamente la hoja de estilos 4. Activa tu tema hijo desde WordPress https://codex.wordpress.org/Child_Themes
  21. 21. CREAR UN TEMA CON _s ¿Para qué? Para tener la libertad de aplicar cualquier estilo y estructura que queramos a nuestro tema ¿Por qué? Para tener un esqueleto básico y con buenas prácticas ¿Cómo hacerlo? En cuatro sencillos pasos (y con bastante código)
  22. 22. CREAR UN TEMA CON _s 1. Ve a underscores.me, rellena los datos de tu tema y descárgalo 2. Descomprímelo en tu carpeta /themes 3. Abre el tema con tu editor de código favorito y edítalo sin miedo 4. Activa este tema desde WordPress http://underscores.me/
  23. 23. CREAR UN TEMA CON _s
  24. 24. CREAR UN TEMA DESDE CERO ¿Para qué? Para tener la total libertad de hacer lo que queramos y conocer cada línea de código que tiene el tema ¿Por qué? Porque tienes conocimientos suficientes, te puedes adaptar 100% a cada proyecto y aunque parezca más lento, luego es más rápido ¿Cómo hacerlo? En dos sencillos pasos (y con todo el código)
  25. 25. CREAR UN TEMA DESDE CERO 1. Abre un archivo en blanco con tu editor de código favorito y empieza a generar todos los archivos del tema. 2. Activa este tema desde WordPress Theme Handbook & Recommendations https://make.wordpress.org/themes/handbook/review/recommended/
  26. 26. CREAR UN TEMA DESDE CERO https://ciudadanob.com/blog/2017/05/25/crear-tema-wordpress/ Tenemos un diseño, que es mobile first, claro Organizamos la estructura de lo que vemos Decidimos qué va en template-parts Decidimos qué va en functions.php y qué en plugin Enqueue scripts & styles Tamaños de imágenes (thumbnails) Los menús y los widgets ¿Usaremos el personalizador? Logo, colores… Internacionalización Accesibilidad Seguridad Integración con WooCommerce y otros plugins
  27. 27. LA MEJOR MANERA Descárgate un tema bien hecho, ábrelo con tu editor e investiga lo que hace y cómo lo hace.
  28. 28. GUTENBERG Algo más que el nuevo editor de WP
  29. 29. BLOQUES EVERYWHERE David Perálvarez: Gutenberg, el estado del arte https://silicodevalley.com/gutenberg-estado-del-arte/
  30. 30. PREGUNTAS ¿Me lo puedes repetir todo desde lo de “Gracias por invitarme…”?
  31. 31. OS ESPERAMOS EN LA WORDCAMP PONTEVEDRA EL 22 Y 23 DE SEPTIEMBRE DE 2018

×