Todos los shortcodes de Sensei LMS

Si tienes pensado montar una academia online el LMS (Learning Management System, o sistema de gestión de aprendizaje) que recomiendo es Sensei, por ser el que requiere menos curva de aprendizaje y ser el más fácil para empezar a ofrecer cursos online.

Y, aunque es muy fácil de utilizar, si además conoces todos los shortcodes, podrás personalizar tus páginas de cursos, ofrecer determinados cursos en entradas y páginas, en definitiva, disponer de todo el contenido de tus cursos online para mostrarlo donde quieras.

Para empezar … ¿qué es un shortcode?

Cierto, antes de meternos en harina, una pequeña explicación…

Un shortcode de WordPress es un atajo de programación que te permite mostrar contenido en entradas y páginas de manera sencilla y rápida, sin tener que copiar y pegar códigos PHP, HTML o similares.

Hay montones de plugins que usan shortcodes, e incluso el mismo WordPress, que cuando, por ejemplo, insertas una galería de imágenes, lo hace mediante un shortcode (

gallery

).

WordPress interpretará el shortcode y mostrará en tu web el código resultante del mismo, por ejemplo un formulario de contacto, una lista de productos como con los shortcodes de WooCommerce, o contenido de cursos, como vamos a ver en esta guía.

¿Cómo se añade un shortcode?

¡Sencillísimo!

Puedes añadirlo simplemente tecleándolo en el editor, o insertando un bloque de shortcode.

Mira, así de fácil, como te explico en este vídeo:

Los shortcodes de Sensei

Así que, una vez hechas las presentaciones, vamos a por la lista de todos los shortcodes de Sensei LMS y para lo que sirve cada uno.

Cursos

[sensei_courses]

– Lista de todos los cursos. Es el shortcode que debería haber en tu página de cursos, que genera Sensei automáticamente, y sino puedes añadirlo manualmente por tu cuenta.

Opción Descripción Valores Por defecto
category
Muestra cursos de una categoría concreta Cualquier ID, slug o nombre de una categoría de curso existente nada (todas las categorías)
exclude
Curso(s) específico(s) a excluir de la visualización Cualquier ID (separados por comas) válido de curso nada
ids
Curso(s) específico(s) a mostrar Cualquier ID (separados por comas) válido de curso nada (todos los cursos)
number
Número de cursos a mostrar Cualquier número válido 10
order
Criterio de ordenación
asc

desc
desc

 (

asc

cuando

orderby

es

menu_order

)

orderby
Cómo ordenar los cursos Cualquier parámetro

orderby

disponible aquí

date
teacher
Muestra cursos de profesor(es) específico(s) Cualquier ID(s) o nombre(s) de usuario válido(s) (separados por comas) nada (todos los profesores)

Ejemplo

[sensei_courses category="music" exclude="23" number="10" order="asc" orderby="name" teacher="123"]

Cursos destacados

[sensei_featured_courses]

– Lista de los cursos destacados.

Options

Opción Descripción Valores Por defecto
number
Número de cursos destacados a mostrar Cualquier número válido 10
order
Criterio de ordenación
asc

desc
desc

 (

asc

cuanado

orderby

es

menu_order

)

orderby
Cómo ordenar los cursos Cualquier parámetro

orderby

disponible aquí

date
teacher
Muestra cursos solo de un profesor concreto ID o nombre de usuario nada (todos los profesores)

Ejemplo

[sensei_featured_courses number="5" order="asc" orderby="name" teacher="123"]

Cursos por usuario

[sensei_user_courses]

 – A list of courses the currently logged in user is taking.

Options

Opción Descripción Valores Por defecto
number
Número de cursos a mostrar por página Any valid number 10
order
Criterio de ordenación
asc

desc
asc
orderby
Cómo ordenar los cursos Cualquier parámetro

orderby

disponible aquí

title
status
Si mostrar los cursos activos o completos
active

complete
sin estado (muestra tanto los activos como los completos)

Ejemplo

[sensei_user_courses number="5" order="desc" orderby="name" status="complete"]

Profesores

[sensei_teachers]

– Lista de usuarios con el perfil de profesor, con enlaces a sus respectivas páginas de autor.

Options

Opción Descripción Valores Por defecto
exclude
Profesores a excluir Cualquier ID o nombre(s) de usuario válido(s) (separados por comas) nada (muestra todos los profesores)
include
Profesores a incluir Cualquier ID o nombre(s) de usuario válido(s) (separados por comas) nada (muestra todos los profesores)

Ejemplo

[sensei_teachers exclude="23"]

Mensajería de usuarios

[sensei_user_messages]

– Lista de los mensajes privados de Sensei del usuario actual.

Opciones

No hay ninguna opción para este shortcode, simplemente muestra todos los mensajes.

Página de curso

[sensei_course_page]

– Muestra el contenido de la página de un curso específico por ID de curso.

Opción Descripción Valores Por defecto
id

(obligatorio)

El ID del curso a mostrar Cualquier ID  de curso válido nada

Ejemplo

[sensei_course_page id="123"]

Categorías del curso

[sensei_course_categories]

– Lista de las categorías del curso.

Options

Opción Descripción Valores Por defecto
exclude
Categorías del curso a excluir Cualquier ID, slug o nombre de categoría de curso válido  (separados por comas) nada (muestra todas)
hide_empty
Muestra solo las categorías que tengan al menos un curso
true

false
false
include
Categorías de un curso específico a mostrar Cualquier ID, slug o nombre de categoría de curso válido  (separados por comas) nada (muestra todas)
number
Número de categorías a mostrar Cualquier número válido 100
order
Criterio de ordenación
asc

desc
asc
orderby
Cómo ordenar las categorías Cualquier parámetro

orderby

disponible aquí

name
parent
Muestra solo las categorías con una superior específica Cualquier ID de categoría válido. Para mostrar solo las categorías superiores poner

parent="0"

.

nada (muestra todas)

Ejemplo

[sensei_course_categories exclude="music" hide_empty="true" order="desc" orderby="slug"]

Cursos no comprados

[sensei_unpurchased_courses]

– Lista de todos los cursos, enlazados al producto de WooCommerce que el usuario actual no haya comprado aún.

Opción Descripción Valores Por defecto
number
Número de cursos a mostrar Cualquier número válido 10
order
Criterio de ordenación
asc

desc
desc

 (

asc

cuando

orderby

es

menu_order

)

orderby
Cómo ordenar los cursos Cualquier parámetro

orderby

disponible aquí

title

Ejemplo

[sensei_unpurchased_courses number="5" order="asc" orderby="date"]

Shortcodes abandonados

Estos shortcodes han quedado obsoletos, y no deberían usarse en versiones de Sensei superiores a la 1.9:

[newcourses]

– Muestra los últimos cursos.

[featuredcourses]

– Muestra los cursos marcados como destacados.

[freecourses]

– Muestra los cursos que sean gratuitos.

[paidcourses]

– Muestra los cursos por los que haya que pagar para hacerlos.

[usercourses]

– Muestra los cursos activos/completados del usuario activo, o un formulario de acceso/registro si no está conectado.

¿Cómo encuentro los ID?

Te habrás fijado que en varias opciones se te pide el ID de un curso, profesor, etc. Localizarlos es muy fácil, simplemente edita el curso, lección, lo que sea, y en la barra de direcciones del navegador verás un número, ese es el ID.

La entrada Todos los shortcodes de Sensei LMS la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Vivir de un blog – Resumen de marzo 2020

Vivir de un blog resumen mensual del blog

Bueeeeeeno, pues así con la tontería ya estamos en abril y ya sabes lo que toca, resumen del blog en marzo. Además que este mes con todo el jaleo del coronavirus los datos del blog han sido bastante «interesantes» ahora que la gente se tiene que quedar en casa (cosa que deberías hacer tú también, […]

Este post tan chulo Vivir de un blog – Resumen de marzo 2020 se publicó primero en Posicionamiento web | Vivir de un blog 😊

Cómo vender cursos online desde tu propia academia online en tu web

Siempre es una buena idea, pero en situaciones en las que el mercado mira al mundo online, como en situaciones de crisis, tiene más sentido que nunca plantearse ofrecer cursos online desde tu web, bien sea para compensar la falta de ventas en el modelo tradicional o para explorar nuevas posibilidades de aumentar los ingresos.

Y montar una academia online en realidad es muy sencillo, y con WordPress además muy barato, así que si te estás planteando ofrecer cursos online aquí tienes una guía para que veas lo fácil que es.

Qué necesitas para vender cursos online

Vamos a ello porque la lista es sencilla y el coste ridículo.

Hosting profesional

Lo primero es contratar un alojamiento web para tu academia online, si aún no tienes una web claro.

Hay muchos posibles, pero debes tener en cuenta algunos requisitos mínimos que debe ofrecer:

  • Certificados SSL gratuitos, imprescindible para cualquier comercio online.
  • Compatible PCI, un estándar de fiabilidad para comercio electrónico.
  • Copias de seguridad diarias.
  • Soporte 24/7 especializado en WordPress y WooCommerce.
  • Instalación de WordPress a un clic.
  • Seguridad y prestaciones de última generación.

Mi recomendación ahora mismo, que cumpla estos básicos, a un precio imbatible, es SiteGround, que ahora mismo tiene una oferta de 3 meses por menos de 1 euro, así que no hay mejor modo de empezar.

WordPress y WooCommerce

Por supuesto, el motor de tu academia online debe ser la combinación de WordPress + WooCommerce, el plugin que añade a tu sitio las funcionalidades completas de una tienda online.

Su precio es de cero euros y a pesar de ello son imbatibles, líderes en la creación web y de comercio electrónico en el mundo, no hay discusión.

Para instalarlos no necesitas conocimientos avanzados, tu empresa de hosting te ofrecerá con toda seguridad la instalación a un clic de WordPress o incluso de ambos, y sino repasa estas guías:

Pasarelas de pago online

Necesitas facilitar que te paguen los cursos online ¿verdad?

Pues para ello lo mejor es optar por pasarelas de pago puramente online, y las más rápidas de implantar, con plugin para WordPress, son las siguientes:

En ambos casos el proceso de implantación es sencillo, y tiene los mismos pasos:

  1. Darte de alta en la plataforma (Stripe | PayPal).
  2. Instalar el plugin de la pasarela (Stripe | PayPal).
  3. Configurarlas en WooCommerce, un proceso muy sencillo, solo tienes que pasar por sus ajustes y seguir las instrucciones en cada pantalla.

Tema preparado para WooCommerce

Hay muchos temas, de hecho miles, y muchos gratuitos, pero por compatibilidad, y si no tienes unos requisitos muy altos de personalización, mi recomendación es que instales el tema gratuito StoreFront.

Si prefieres optar por un tema premium, con más opciones de personalización, te recomiendo Divi, que se integra de maravilla con lo plugins necesarios para crear una academia online.

Plugins imprescindibles

Sí, hay miles de plugins que puedes instalar en WordPress, y muchos gratis, pero para crear una academia online en la que vender cursos solo necesitas un plugin – además de WooCommerce, que también es un plugin –.

Me refiero a WooCommerce Sensei Paid Courses de los mismos autores que WooCommerce.

Hay muchos otros plugins para crear cursos online pero te aseguro que los he probado todos y este es el más sencillo de utilizar, y de hecho el que yo mismo utilizo en mis cursos online, y por solo 129$ de licencia anual no hay nada mejor ahora mismo.

Además, tienes un montón de extensiones gratuitas para aumentar sus funcionalidades.

Una plataforma de vídeo

Una posible necesidad adicional sería la de una plataforma de vídeo que te permita que los vídeos no se puedan descargar o incluso que solo se puedan visualizar en webs concretas, para evitar el robo de contenido.

En este caso la decisión está clara: Vimeo Plus.

Por el ridículo precio de 69 € al año tienes todo lo que necesitas para tus vídeos de tutoriales online:

  • 5 GB de espacio a la semana para subir archivos(hasta 250 GB al año)
  • Conversión prioritaria de video
  • Ancho de banda ilimitado en el reproductor de Vimeo
  • Reproductor personalizable
  • Controles de privacidad
  • Distribución automática en redes sociales.
  • Compatibilidad con 4K y HDR
  • Sin anuncios antes, durante, ni después de tu video
  • Pantallas finales personalizables
  • Protección por contraseña
  • Privacidad a nivel de dominio
  • Vínculos privados para compartir vídeos
  • Panel de análisis
  • Estadísticas de medios sociales
  • Informes personalizados
  • Listas de reproducción insertables

Cómo crear cursos online

Una vez tengas el hosting, WordPress, tu tema activo, y por supuesto WooCommerce y Sensei Paid Courses instalado, y tus pasarelas de pago y cuenta de vídeo activa.

Una vez tienes todo en marcha vamos a crear el primer curso…

Graba tus vídeos

Como la mayoría de los cursos online llevan vídeos asociados el primer paso es grabar estos vídeos, y luego subirlos a tu cuenta de Vimeo Plus por supuesto.

Algunos consejos a la hora de grabar tus vídeos:

  1. Utiliza una buena cámara: Yo utilizo la Canon EOS M50, una joya, sencilla de usar y con capacidad de grabar hasta en 4K a un precio la mitad que una DSLR estándar. Si tu presupuesto es más ajustado hay webcams como la Logitech C920 HD que da muy buenos resultados.
  2. Utiliza un buen micro: Un mal vídeo lo puede salvar un buen audio, pero un mal audio es insoportable. Yo te recomiendo el Yeti, un absoluto estándar.
  3. Buena luz: Da igual lo buena que sea tu cámara de vídeo, si la luz es mala el vídeo será malo. Yo uso uno como este de Amzdeal, barato y completo.
  4. Haz un guión: No improvises, o lo mínimo. Apunta qué harás o hablarás en cada vídeo en cada minuto. Si te equivocas no te apures, repite cuántas veces haga falta.
  5. Vídeos cortos: El problema más grande con los cursos online es actualizar los vídeos cuando el temario cambia, así que graba muchos vídeos cortos en vez de pocos largos, así será más fácil actualizar tus contenidos.
  6. Edita los vídeos lo justo: No se trata de conseguir un Óscar a la mejor producción de vídeo, sino de vender cursos online que se vean y oigan bien, con contenido de interés. Si usas un ordenador Mac el mismo programa iMovie incluido de serie es más que suficiente para editar vídeos de manera casi profesional. Y sino hay alternativas baratas para todas las plataformas. Por ejemplo, OBS Studio es multiplataforma, de código abierto y gratis.

Crea el producto

Antes de nada hay que crear el producto que habrá que pagar para poder acceder al curso, y crearlo es igual de sencillo que crear un producto simple de WooCommerce.

De hecho no te compliques mucho, con que tenga lo siguiente es suficiente:

  • Título del producto/curso
  • Descripción corta
  • Imagen del producto
  • Descripción del producto/curso
  • Precio del producto/curso

En mi opinión cuanto más pongas aquí peor. Sí es importante una buena descripción del producto/curso, para que el alumno tenga un resumen aproximado de lo que va a aprender.

Pero ten en cuenta que la página buena, dónde de verdad el alumno verá el temario, será la página del curso, donde aparezcan todas las lecciones y la descripción de cada una.

Crea el curso

Cuando instalas Sensei Paid Courses verás un nuevo menú, en el que crear nuevos cursos y lecciones. El primer paso es crear un nuevo curso.

Y, ¿a que no imaginas cuál es la interfaz para construir el contenido del curso y las lecciones?

Efectivamente, el editor de WordPress, el que usas para crear entradas y páginas, el mismo.

Una vez pones el título y describes el curso, igual que harías con cualquier otro contenido, y pongas enlaces, imágenes, cualquier bloque o contenido que quieras.

Esta página, la página del curso, será como la presentación, donde irán apareciendo las lecciones, y también desde donde se podrá comprar el curso.

Una vez pongas el texto y demás, lo siguiente es una caja en la que puedes añadir el vídeo, aquí normalmente de presentación.

Aquí debes saber que no hay que poner el código de inserción, sino solamente la URL del vídeo. El reproductor del vídeo se mostrará entre el título y el texto que hayas escrito.

Más abajo tendrás una lista de las lecciones de las que comprende el curso, o si aún no hay ninguna, un enlace para que crees tu primera lección.

Para finalizar, y lo más importante, los ajustes de Sensei, dónde debes asignar a qué producto de WooCommerce estará asociado el curso, qué producto hay que comprar para poder acceder al curso.

Y ahora que ya tenemos el producto y la presentación del curso toca crear las lecciones ¿no?

Crea los módulos

Pues no, es un error muy común, porque en realidad te recomiendo que antes crees los módulos del curso, una taxonomía personalizada, un modo de organizar tus lecciones de manera ordenada, sobre todo si tienes muchas.

Se crean igual que las categorías de entradas.

Solo tienes que ir al menú

Cursos > Módulos

  y crear tantos como partes tenga tu curso o cursos.

El proceso de creación es bien sencillo, solo tienes que completar los campos siguientes:

  • Nombre del módulo.
  • Curso al que pertenece

El resto de campos es opcional.

Puede haber cursos, con pocas lecciones en los que no haga falta organizarlas en módulos, pero si tienes – digamos – más de 5 lecciones, mi consejo es que las organices en módulos.

Además, queda mucho más bonito y organizado tu curso.

Crea las lecciones

Y ya casi lo tienes, ahora te queda ir creando las lecciones.

¡Adivina! ¿Cómo imaginas que se crean las lecciones?

Pues igual que los cursos, entradas y páginas, con tu editor de WordPress, así de sencillo.

Desde el menú

Lecciones > Añadir

  abrirás el editor de WordPress, con los elementos habituales, más los específicos de Sensei.

Una vez puesto el título y descripción de tu lección, lo siguiente es especificar lo siguiente en los ajustes que te señalo en la captura anterior:

  • A qué curso pertenece la lección.
  • A qué módulo de ese curso pertenece la lección.
  • Si hay algún prerrequisito (haber realizado antes alguna otra lección, por ejemplo)
  • Si permites previsualización, si esa lección será visible, incluso el vídeo, para visitantes que no hayan comprado el curso. Algo recomendable en todos los cursos, para que los visitantes aprecien la calidad del contenido.

Hechos estos ajustes, lo siguiente es la información de la lección.

Información de la lección

Como verás es poco lo que hay que configurar:

  • La duración estimada para completar la lección.
  • La complejidad de la lección (nada, fácil, media, difícil)
  • Vídeo, que como te expliqué antes solo tienes que poner la URL, como ves en el ejemplo.

Cuestionarios de la lección

Una característica opcional que puedes incorporar en tus lecciones son los cuestionarios, pudiendo elegir entre los siguientes tipos:

  • Respuesta múltiple
  • Verdadero o falso
  • Llenar el vacío
  • Línea única
  • Multilíneas
  • Subir un archivo

Crearlos es enormemente sencillo, solo tienes que rellenar los campos según el tipo de cuestionario que elijas, ponerle valoración si quieres, y añadirlo.

Y, más abajo, puedes especificar algunos ajustes para los cuestionarios, como si será obligatorio aprobarlos para pasar la lección, por ejemplo.

Por descontado que en la lección se verán genial.

Extracto

Algo que no es muy obvio, y te recomiendo, es que siempre definas un extracto de la lección.

Es muy recomendable, porque será lo que verán los visitantes que aún no hayan comprado el producto/curso, y es un muy buen argumento de venta cuando está bien redactado.

¡Y ya está!

Una vez hayas creado la lección publícala y estará totalmente operativa, lista en el curso, y si alguien compra el producto asociado al curso podrá acceder a su contenido.

Por supuesto, tienes aún que crear el resto de lecciones, pero el proceso es repetitivo.

¡Promoción, promoción, promoción!

Una vez creado el curso con sus lecciones, tienes que empezar a promocionarlo como si no hubiese un mañana, si es que quieres que alguien lo compre.

Lo primero es optimizar tu web para SEO, para que poco a poco vayan apareciendo tus cursos y lecciones en los buscadores.

Y a partir de aquí cualquier acción que harías para promocionar algo vale, a saber:

  • Difusión en redes sociales.
  • Newsletters.
  • Anuncios en Google, Facebook, Instagram, Twitter, etc.
  • Anuncios en medios tradicionales.
  • Vídeos promocionales y lecciones parciales en YouTube.
  • Afiliación.
  • Crea un modelo de suscripción.
  • Cuéntaselo a tus amigos y seguidores por cualquier medio.

Si tienes cualquier duda no dejes de plantearla en los comentarios.

La entrada Cómo vender cursos online desde tu propia academia online en tu web la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

WordPress 5.4 ya disponible ¿actualizo ya?

Si te has pasado por el escritorio de administración de tu web WordPress habrás comprobado que tienes un aviso de que ya está disponible la versión 5.4 de WordPress.

Ahora bien ¿debo actualizar ya? ¿merece la pena?

Actualizar siempre es recomendable por seguridad

No me canso de decir que siempre debes tener todo actualizado: WordPress, tema y plugins. No obstante, cuando llega una actualización mayor, por ejemplo de la 5.3.x a la 5.4 hay que tomar algunas precauciones, o al menos comprobar qué aporta y cómo abordar la actualización.

Dicho lo cual vamos a meternos en detalles…

¿Incorpora WordPress 5.4 mejoras de seguridad?

No, si tienes WordPress 5.3.2 estás al día en cuanto a actualizaciones de seguridad.

¿Qué mejoras o novedades incorpora WordPress 5.4?

Vamos al lío, porque hay unas cuantas, ya te aviso que la inmensa mayoría para el editor de bloques.

Bloque de botones

El anteriormente conocido como bloque de botón ahora se llama bloque de botones, y por fin es algo realmente útil.

Hasta ahora, si querías poner dos o más botones en horizontal tenías antes que insertar un bloque de columnas y, dentro de cada columna, insertar un bloque de botón.

Ahora, con WordPress 5.4, el nuevo bloque de botones por defecto permite añadir botones en horizontal, tantos como quieras.

Bloque de iconos sociales

El que sí es nuevo del todo es el bloque de iconos sociales.

Con él, puedes añadir bonitos botones con enlaces a tus perfiles sociales favoritos, todos en horizontal.

Puedes añadir más botones, y para añadir la URL asociada a cada uno solo tienes que hacer clic en el botón y añadir la URL a tu perfil en esa red social.

Imágenes destacadas en el bloque de entradas relacionadas

El bloque de entradas relacionadas por fin tiene sentido, pues ahora puedes activar un ajuste para que se muestre la imagen destacada asociada a cada entrada relacionada, algo que tendrá mucho éxito especialmente a la hora de crear páginas de portada.

Widget de salud del sitio en el escritorio

Para que los administradores sean/seamos más conscientes de la optimización y seguridad de nuestra web, ahora en el escritorio hay un widget con el indicador de salud del sitio y un enlace para ir a la pantalla de información de saludo del sitio.

Mejoras de accesibilidad

  • Mejor gestión del enfoque en las pantallas de menús, personalizador y salud del sitio para corregir algunos problemas actuales de navegación con el teclado.
  • Navegación con el teclado más sencilla para una mejor semántica en las ventanas emergentes de medios.
  • Una guía de política de privacidad más fácil de leer.

Pantalla completa por defecto

Esto me parece un error, pero bueno, doctores hay.

Ahora, la primera vez que abras el editor se mostrará a pantalla completa, ocultando la barra vertical de administración de WordPress.

En la parte superior izquierda se ha sustituido la flecha por un logo de WordPress, porque antes era engañoso y parecía que era para quitar la pantalla completa.

No obstante sigo pensando que esa debería ser su utilidad, y no ir al listado de entradas, lo que te saca del editor sin guardar cambios, un peligro que no veas.

Si no te gusta, ya sabes, «Más herramientas y opciones >  Modo a pantalla completa» y lo desactivas.

Otras mejoras y novedades

Además de estos cambios, hay otras novedades que quizás te interesen:

  • Más opciones de color para los bloques de botón, fondo, grupo y columnas.
  • Navegación más sencilla en las migas de pan de bloques.
  • En móviles la barra de herramientas se queda fija arriba, para que no la pierdas.
  • Redimensión de imágenes más sencilla en el bloque de galería.
  • Arrastrar y soltar imágenes en la caja de imagen destacada.
  • Leyendas en el bloque de tabla.
  • Ahora puedes subir un archivo .ico como favicon, en caso de no subir ninguno se usará el logo de WordPress.
  • Nuevo incrustado de TikTok, con lo que esta guía ya queda obsoleta 🙁
  • Ahora puedes dar color a solo algunas partes del texto en cualquier bloque de texto enriquecido.
  • Posibilidad de cambiar el atributo de título de una imagen dentro del bloque de imagen.
  • Reducción del tiempo de carga del editor de bloques del 14% y una reducción de tiempo de tecleo del 51%.
  • Mejoras en el aspecto de la guía de privacidad.

¿Qué debo hacer antes de actualizar?

Lo importante es que antes de actualizar a WordPress 5.4 o cualquier otra actualización de WooCommerce o de lo que sea, debes probar que todo funcionará.

¿Qué cómo lo haces?

Sencillo:

  1. Haz una copia exacta (clon o staging) de tu sitio completo.
  2. Actualiza en la copia.
  3. Prueba que funcione TODO.
  4. Si todo ha ido bien actualiza en el sitio real

¿Merece la pena actualizar ya o no?

A ver, pues yo creo que deberías esperar unos días, por si salen incompatibilidades, y así de paso das tiempo a  los desarrolladores de plugins y temas a actualizar sus códigos y hacer pruebas, y si fuese necesario sacar actualizaciones.

No es nada malo, sino todo lo contrario. De hecho siempre recomiendo actualizar antes plugins y temas que WordPress, especialmente a versiones mayores.

Pero esto no significa que no debas actualizar, solo que esperes unos días prudenciales.

Pero ¿merece la pena actualizar una vez vistas las novedades?

  • Si no usas el editor de bloques casi no aporta nada relevante.
  • Si no necesitas imperiosamente usar los nuevos bloques o sus mejoras entonces no.
  • Si necesitas imperiosamente usar los nuevos bloques o sus mejoras sí, claro.

En resumen, y bajo mi punto de vista, no es una actualización mayor en cuanto a novedades relevantes, que te vayan a cambiar la vida o el modo de crear, así que no te matará esperar unos días y, tras las pruebas pertinentes, cuando todos tus plugins y temas sepas a ciencia cierta que son compatibles con la nueva versión, entonces si, actualizar.

La entrada WordPress 5.4 ya disponible ¿actualizo ya? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo añadir estilos de ancho amplio y ancho completo a bloques WordPress

El editor de bloques de WordPress, también conocido como Gutenberg, ha cambiado el modo en el que crear contenido con nuestro querido WordPress.

Pero también ha abierto nuevas posibilidades, como todo cambio.

Si hablamos de estilos, uno de los más interesantes es la posibilidad de añadir bloques en formato de «ancho amplio» o «ancho completo» a una página o entrada.

Esta característica permite a un bloque del editor romper el ancho por defecto del contenido de un tema, que no es cosa pequeña, y es algo que era prácticamente imposible con el editor clásico.

Y luego están las enormes posibilidades de diseño que ofrecen los bloques con ancho amplio o ancho completo, como por ejemplo crear nuevas secciones de página con un fondo a ancho completo con un texto o imagen superpuesto, lo más parecido a los famosos elementos Hero de los temas y maquetadores modernos.

Y solo hay un requisito: Tu tema tiene que ser compatible con bloques anchos.

Afortunadamente es algo bastante fácil de hacer, así que aquí  te traigo  un rápido tutorial sobre cómo añadir la compatibilidad con bloques conn ancho amplio y completo a tu tema WordPress, y de paso de cómo aplicar estilo a los bloques mediante CSS.

Añadir la compatibilidad del tema

Lo primero que tenemos que hacer es añadir  una única línea de código al archivo

functions.php

del tema activo.

Modifícalo con tu editor favorito, lo encontrarás en 

/wp-content/themes/tu-tema/

(¿hace falta recordar que debes cambiar lo de «tu-tema» por el nombre de la carpeta de tu tema activo?. Lego copia y pega el siguiente código PHP:

add_theme_support( 'align-wide' );

Guarda los cambios.

Este pequeño código le indica al tema que quieres bloques con anchos amplios y completos. Sí, todo en esa simple línea de código.

Ahora, para comprobar que funciona, abre el editor de WordPress y comprueba si algunos bloques (fondo, imagen, vídeo, etc.) tienen las nuevas opciones de alineación llamadas «Ancho amplio» y «Ancho completo».

Estilos básicos en los bloques

Ahora que ya tenemos el tema compatible con los estilos de ancho amplio y completo tocaría darle un poco de estilo.

Hay muchas técnicas y formas de hacerlo, aquí tienes un ejemplo:

@media screen and (min-width: 960px) {
     .alignwide, .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);
     }
}

Date cuenta de que en el ejemplo estoy usando una media query de CSS solo para integrar este estilo cuando el tamaño de pantalla sea de 950 píxeles o más ancho.

Esto es debido a que normalmente no es  necesario este tipo de efecto en pantallas más pequeñas.

Además, en este caso he usado los mismos estilos para ambos anchos de bloque, aunque es totalmente posible aplicarles estilos diferentes para que cada ancho se muestre de manera diferente en la web.

También te debo avisar de un pequeño inconveniente, y es que en algunos diseños al usar esta técnica se verá una barra de desplazamiento horizontal (si no lo digo Ana me mata).

Si fuera el caso añade el siguiente CSS al elemento

body

:

body {
     overflow-x:  hidden;
}

¿Funciona?

Pues claro, y es uno de los recursos que más van a marcar diferencias en el inmediato futuro de WordPress, pues con este sencillo campo te adentras en el mundo, hasta ahora exclusivo, de los maquetadores.

Desde el momento en el que añadimos a los bloques la posibilidad de saltarse el ancho del contenido estándar del tema y aplicar anchos amplios y completos a los bloques, entramos directamente en una nueva fase de diseño sin salir del editor de WordPress.

Así, podrás crear fácilmente bloques de vídeo a ancho completo…

Y luego, cuando estén publicados los cambios, el bloque se verá como queríamos, ocupando el bloque todo el ancho de la página, mientras que el resto del contenido sigue el ancho predefinido del tema.

Y todo lo hemos conseguido simplemente con una única línea de código en el archivo

functions.php

  del tema y luego algo de estilo CSS, lo mínimo.

Y a pesar de este mínimo esfuerzo se nos abre un mundo de oportunidades de cosas que hacer con el diseño de nuestra web.

Si luego seguimos añadiendo CSS o nos centramos en aplicar estilos a bloques específicos, tendremos un enorme arsenal de posibilidades de diseño en nuestras manos.

Al menos de momento, en una instalación por defecto de WordPress, Gutenberg no ofrece todas las virguerías que encontramos en los maquetadores visuales, pero solo con añadir anchos amplios y completos entramos de cabeza en ese territorio.

Se acabaron los tiempos en que la estructura del tema limitaba tu capacidad de diseño desde el editor, y esto hará que WordPress sea más fácil para todos, especialmente para los nuevos usuarios, que ya no tendrán que decidir a la hora de diseñar el aspecto de sus páginas entre…

  • Cambiar de tema
  • Cambiar o añadir CSS
  • Usar un maquetador

Desde el primer momento el mismo editor de WordPress ya ofrece oportunidades de diseño que le permiten crear las tan populares secciones de ancho completo, algo que pronto todos los temas incorporarán, y sino aquí has aprendido cómo añadirle tú mismo esta funcionalidad a tu tema.

¿Quieres seguir aprendiendo?

Si te has animado y quieres seguir personalizando tu tema y sus estilos aquí te dejo un par de artículos de rabiosa actualidad:

La entrada Cómo añadir estilos de ancho amplio y ancho completo a bloques WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.