Novedades de WordPress 6

Transcript

1. imanolteran.com WORDPRESS 6.0 Novedades WordPress 6.0
2. WordPress 6.0 imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran
3. WordPress 6.0 imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com WordPress 6.0
4. WordPress 6.0 imanolteran.com MÁS FORMACIÓN EN IMANOLTERAN.COM/FORMACION
5. imanolteran.com 1. Introducción 2. Novedades 3. Planes de futuro índice WordPress 6.0
6. imanolteran.com 01 Introducción Pongámonos en situación WordPress 6.0
7. WordPress 6.0 imanolteran.com Introducción 01 7 DE WEBS A NIVEL GLOBAL ESTÁN HECHAS EN WORDPRESS 43% https://w3techs.com/technologies/history_overview/content_management/all
8. WordPress 6.0 imanolteran.com • La última gran versión, la 5.0, vino en Diciembre de 2018. • La gran novedad de aquella versión, fue el nuevo editor de bloques, conocido como Gutenberg. • Supuso un cambio de paradigma en el entorno WordPress. • Sentó las bases del futuro de la plataforma. Introducción 01 8
9. imanolteran.com 02Novedades En la 6.0 WordPress 6.0
10. WordPress 6.0 imanolteran.com • La anterior versión, 5.9, vino en Enero de 2022. • En esta nueva versión de WordPress, vienen más de 1.000 actualizaciones y soluciones de errores. • * 6.0.1 - Versión de mantenimiento 13/7/22 Novedades 02 10
11. WordPress 6.0 imanolteran.com • Seleccionador de estilos. • Editor de código. • Más opciones de plantillas. • Nuevas herramientas de diseño. • Nuevos bloques. • Mejoras de bloques. Novedades 02 11
12. WordPress 6.0 imanolteran.com • Patrones de bloques. • Exportador de temas. • Nuevos hooks. • API de Webfonts. • Mejoras de rendimiento y usabilidad. Novedades 02 12
13. WordPress 6.0 imanolteran.com • Sin duda, una de las funcionalidades más esperadas. • Permite a creadores de themes usar diferentes variaciones de estilo sobre un mismo theme. • Se cambia muy fácilmente entre uno y otro, con un clic. Novedades 02 13 SELECCIONADOR DE ESTILOS
14. WordPress 6.0 imanolteran.com • Hay que ir al panel de estilos globales y a “Examinar estilos”. • Opción solo disponible cuando el tema cuente con estas variaciones de estilo. • Para añadir una nueva variación, hay que añadir un fichero JSON en el directorio “styles” del theme. Novedades 02 14 SELECCIONADOR DE ESTILOS
15. WordPress 6.0 imanolteran.com Novedades 02 15 SELECCIONADOR DE ESTILOS
16. WordPress 6.0 imanolteran.com • Twenty Twenty-Two viene con 4 variaciones de estilo. • https://themes.trac.wordpress.org/browser/ twentytwentytwo/1.2/styles?rev=168451 Novedades 02 16 SELECCIONADOR DE ESTILOS
17. WordPress 6.0 imanolteran.com • Práctica: • Añadir un nueva variación al theme Twenty- Two • https://gist.github.com/kjellr/ 1307387f8d97e84662c4b07af873a896 Novedades 02 17 SELECCIONADOR DE ESTILOS
18. WordPress 6.0 imanolteran.com • Ahora, el editor de bloques tiene un editor de código. • De esta forma, los usuarios podemos editar el HTML de un tema. • Hay que acceder desde el icono de 3 puntos en la parte superior derecha —> Editor de código. Novedades 02 18 EDITOR DE CÓDIGO
19. WordPress 6.0 imanolteran.com • Ahora, tenemos cinco nuevos tipos de plantillas: • Autor. • Categoría. • Fecha. • Etiqueta. • Taxonomía. Novedades 02 19 OPCIONES DE PLANTILLAS
20. WordPress 6.0 imanolteran.com • Accedemos a ellos al agregar una nueva plantilla en el editor de bloques. • Estos nuevos tipos de plantilla facilitan el proceso de edición del sitio. • Ya no tenemos que crear plantillas de página personalizadas para estas acciones. Novedades 02 20 OPCIONES DE PLANTILLAS
21. WordPress 6.0 imanolteran.com • El panel de Plantillas lo encontramos en la barra lateral izquierda del editor —> Agregar nuevo. Novedades 02 21 OPCIONES DE PLANTILLAS
22. WordPress 6.0 imanolteran.com • Nuevo panel de color. • Opción de transparencia. • Tipografía específica para un grupo de bloques. Novedades 02 22 NUEVAS HERRAMIENTAS DE DISEÑO
23. WordPress 6.0 imanolteran.com • Contamos con 5 nuevos bloques. • Comentarios. • Sin resultados. • Leer más. • Biografía de autor. • Avatar. Novedades 02 23 NUEVOS BLOQUES
24. WordPress 6.0 imanolteran.com • Bloque Bucle de comentarios. • Reemplaza al bloque de comentarios de publicación. • Comprende bloques secundarios. • Título del comentario. • Autor. • Contenido. Novedades 02 24 NUEVOS BLOQUES
25. WordPress 6.0 imanolteran.com • Bloque Bucle de comentarios. • Podemos personalizar cada una de estas partes, de forma individual. Novedades 02 25 NUEVOS BLOQUES
26. WordPress 6.0 imanolteran.com • Bloque Sin resultados. • Con este nuevo bloque podemos mostrar un texto o un conjunto de bloques cuando no hay un resultado que mostrar en una búsqueda. • Este bloque solo puede ir dentro del bloque de bucle de consulta. Novedades 02 26 NUEVOS BLOQUES
27. WordPress 6.0 imanolteran.com • Bloque Leer más. • Ahora, este bloque es independiente del de Extracto de la publicación. • Aumenta sus niveles de personalización. • Podemos cambiar color, estilo de borde o tipografía a este enlace. Novedades 02 27 NUEVOS BLOQUES
28. WordPress 6.0 imanolteran.com • Bloque Biografía del autor. • En WordPress 6.0, la información sobre autor de una entrada queda dividida. • Este bloque muestra la descripción del perfil del autor. Novedades 02 28 NUEVOS BLOQUES
29. WordPress 6.0 imanolteran.com • Bloque Avatar. • Por su parte, este otro muestra la imagen del autor. • Así, obtenemos más opciones al mostrar esta información. Novedades 02 29 NUEVOS BLOQUES
30. WordPress 6.0 imanolteran.com • No solo se han añadido nuevos bloques, sino que también se han introducido mejoras en algunos de los ya existentes. • Imagen destacada para el bloque de fondo. • Espaciado de bloques de galería. • Mejoras en bloque de navegación. • Transformación de bloques. Novedades 02 30 MEJORAS DE BLOQUES
31. WordPress 6.0 imanolteran.com • Transformación de bloques: • Grupo, fila o pila. • Logotipo a título. • Extracto a contenido. • Nube de etiquetas a categorías. • Calendario a archivos. • Párrafo a código. • Grupo a fila. Novedades 02 31 MEJORAS DE BLOQUES
32. WordPress 6.0 imanolteran.com • Ahora, el insertado rápido de bloques, no solo nos recomienda bloques individuales. • También nos permite insertar patrones. • Así, nos es más sencillo crear una sección concreta. • Para ello, debemos acceder a él fuera de cualquier bloque, en el nivel raíz. Novedades 02 32 PATRONES DE BLOQUES
33. WordPress 6.0 imanolteran.com • Cualquier puede crear nuevos patrones: • Puedes construir, editar y enviar tus patrones de bloques al Directorio de Patrones • https://wordpress.org/patterns/new-pattern/ • https://wordpress.org/patterns/about/ Novedades 02 33 PATRONES DE BLOQUES
34. WordPress 6.0 imanolteran.com • Los desarrolladores de themes pueden añadir patrones recomendados en sus themes. • Los usuarios encontrarán los patrones recomendados en el insertador de bloques. • https://github.com/WordPress/gutenberg/blob/ trunk/docs/how-to-guides/themes/theme- json.md#patterns Novedades 02 34 PATRONES DE BLOQUES
35. WordPress 6.0 imanolteran.com • A partir de WordPress 6.0 podemos exportar nuestros temas. • Así, podemos llevarnos nuestras variaciones en un .zip y reaprovecharlo en otros proyectos. • Hay que acceder desde el icono de 3 puntos en la parte superior derecha —> Exportar. Novedades 02 35 EXPORTADOR DE TEMAS
36. WordPress 6.0 imanolteran.com Novedades 02 36 NUEVOS HOOKS
37. WordPress 6.0 imanolteran.com • Ahora podemos agregar nuevas fuentes a través del fichero theme.json • A partir de ahí, aparecerán en el panel de tipografías de estilos globales. • Con este nuevo método, se agiliza el proceso de registro de fuentes web locales. Novedades 02 37 API DE WEBFONTS
38. WordPress 6.0 imanolteran.com • Práctica: • Agregar fuente Montserrat a theme Twenty Two. • Descargar fuente: https://fonts.google.com/ • Subir fuente a /assets/fonts/montserrat • Editar theme.json Novedades 02 38 API DE WEBFONTS
39. WordPress 6.0 imanolteran.com • Práctica: { "fontFamily": "\"Montserrat\", sans-serif", "name": "Montserrat", "slug": "Montserrat", "fontFace": [ { "fontFamily": "Monserrat", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/montserrat/Montserrat.ttf" ] } ]} Novedades 02 39 API DE WEBFONTS
40. WordPress 6.0 imanolteran.com • WordPress 6.0 mejora la experiencia del usuario para brindar una mejor usabilidad. • También obtenemos un flujo de trabajo más fluido. Novedades 02 40 MEJORAS DE RENDIMIENTO Y USABILIDAD
41. WordPress 6.0 imanolteran.com • Mejora de la vista de lista. • Selección de texto en bloques. • Bloqueo de bloques. • Retención de estilos de bloque. • Vista previa de estilo de bloque. • Recordatorio de categoría de publicación. Novedades 02 41 MEJORAS DE RENDIMIENTO Y USABILIDAD
42. WordPress 6.0 imanolteran.com • Mejora de la vista de lista. • Ahora mostrará una vista contraída para todos los bloques de forma predeterminada. • De esta manera, puedes encontrar bloques relevantes más fácilmente. • Especialmente útil cuando se trabaja con una estructura compleja que tiene muchos bloques anidados. Novedades 02 42 MEJORAS DE RENDIMIENTO Y USABILIDAD
43. WordPress 6.0 imanolteran.com • Mejora de la vista de lista. • También te permite seleccionar varios bloques usando Shift + clic. • Puedes realizar acciones masivas como mover, eliminar o duplicar numerosos bloques. Novedades 02 43 MEJORAS DE RENDIMIENTO Y USABILIDAD
44. WordPress 6.0 imanolteran.com • Selección de texto en bloques. • Ahora te permite seleccionar texto en múltiples bloques. • A continuación, puedes eliminar, reemplazar o copiar el texto seleccionado. • Esto facilita enormemente la edición de texto. Novedades 02 44 MEJORAS DE RENDIMIENTO Y USABILIDAD
45. WordPress 6.0 imanolteran.com • Bloqueo de bloques. • Podemos evitar que un bloque se mueva o elimine. • Hay dos formas de bloquear un bloque. • Desde la barra de herramientas del bloque. • Desde el panel de vista de lista. Novedades 02 45 MEJORAS DE RENDIMIENTO Y USABILIDAD
46. WordPress 6.0 imanolteran.com • Retención de estilos de bloque. • Esta opción mantiene los estilos de un bloque, aunque lo transformemos en otro. • También aplica cuando queremos crear botones nuevos. • Esto nos permite ahorrar tiempo. Novedades 02 46 MEJORAS DE RENDIMIENTO Y USABILIDAD
47. WordPress 6.0 imanolteran.com • Vista previa de estilo de bloque. • Cambia a una ventana emergente al pasar el mouse sobre una opción de estilo. • Esto brinda una mejor visualización porque la vista previa parece más grande. Novedades 02 47 MEJORAS DE RENDIMIENTO Y USABILIDAD
48. WordPress 6.0 imanolteran.com • Recordatorio de categoría de publicación. • Al publicar una post sin seleccionar una categoría, el editor de publicaciones ahora sugerirá agregar una. • Evitamos publicar accidentalmente un post sin categoría. Novedades 02 48 MEJORAS DE RENDIMIENTO Y USABILIDAD
49. imanolteran.com 03Planes de futuro Lo que está por venir WordPress 6.0
50. WordPress 6.0 imanolteran.com • Editor de bloques VS Editores visuales. • Interfaz de administrador. • Rendimiento. • Multiidioma. • Accesibilidad. Planes de futuro 03 50
51. WordPress 6.0 imanolteran.com 51 bit.ly/AED_Wordpress6
52. imanolteran.com WordPress 6.0 hola@imanolteran.com Eskerrik asko