Nueva sección en nuestra web: ¡cursos online!

Publicada en WordPress.

En Nelio hemos lanzado una nueva sección en nuestra web, Nelio Academy, para que aprendas cosas nuevas de WordPress con nuestros cursos online.

Creación de contenidos con el editor de bloques Gutenberg

Como no podía ser de otra forma, el primer curso que hemos creado para ti es el de Creación de Contenidos con el editor de bloques de WordPress, Gutenberg. En este curso aprenderás a manejar y dominar a nivel de usuario avanzado el nuevo editor de WordPress desde cero.

Este editor, también conocido como Gutenberg, viene instalado por defecto desde la versión 5.0 de WordPress. Es un editor que cambia radicalmente la confección de entradas y páginas de una web siendo mucho más cercano a otros editores visuales. Ahora, una entrada o página se compone por bloques de contenidos. Tienes bloques para párrafos, para imágenes, para encabezados, para citas, y mucho más.

Este curso no pretende ser un manual de usuario de Gutenberg. Lo que busca es que de una forma práctica y eficiente aprendas a crear nuevas entradas y páginas de tu web. Y es por eso que a lo largo de más de 2 horas de vídeos, divididos en 20 lecciones, aprenderás a dominar el entorno del editor de WordPress. Pero también conocerás muchos detalles del proceso que seguimos en Nelio cuando escribimos una nueva entrada o confeccionamos una nueva página.

Verás como, gracias a las posibilidades que te ofrece este editor, podrás diseñar gran cantidad de elementos o secciones que puedes encontrar en nuestras páginas de esta web o cualquier otra web profesional. Ya no necesitas ser un diseñador para maquetar tus contenidos con destreza y estilo. Tú mismo puedes hacerlo con el catálogo de bloques de contenido que WordPress incluye por defecto.

El curso se divide en 3 partes:

  • Introducción,
  • Escribiendo entradas,
  • Diseñando páginas

Introducción

En la primera parte veremos las novedades que nos trae este editor y las diferencias entre el editor clásico y el de bloques. De esta forma podrás empezar a conocer este nuevo entorno, su interfaz y donde encontrar las distintas barras de herramientas, así como información y propiedades de los distintos bloques que puedes usar.

Escribiendo una entrada

A continuación veremos el proceso de escritura de una entrada, a la que le añadiremos los elementos más comunes de las entradas de un blog: títulos, imágenes, párrafos, listas, citas, versos o vídeos. También conocerás trucos para dominar el editor y ganar en eficiencia.

Además, como ya sabes, antes de publicar cualquier entrada debes asegurarte de que no te olvidas la información necesaria para mejorar el posicionamiento en los buscadores y su promoción en las redes sociales. Por ese motivo, también te explicamos cómo se integra el nuevo editor con los plugins de Yoast y Nelio. Y así te familiarizas con la integración de cualquier plugin con el editor.

Diseño de páginas

En las lecciones de diseño de páginas, aprenderás el proceso básico que debes seguir antes de empezar a crear cualquier página de tu web. Y continuaremos viendo otro conjunto nuevo de bloques que son particularmente útiles en el diseño de páginas: el bloque fondo, de medios y texto, columnas, elementos de diseño, galería de imágenes y widgets. Para cada uno de ellos, verás ejemplos prácticos y reales que te servirán de idea para crear nuevas secciones en tus páginas web. E incluso aprenderás a combinar bloques de una forma que nadie te había explicado antes, abriendo así un nuevo abanico de posibilidades de diseño.

Sección de página web
Sección de página web creada en el curso con los bloques que ofrece Gutenberg por defecto.

Y por supuesto, acabaremos el diseño de las páginas aprendiendo a crear y a usar los bloques reutilizables, de gran utilidad para ganar eficiencia en el diseño de nuevas páginas.

Lecciones

Aquí tienes la lista de lecciones que compone el curso:

Todas las lecciones muestran ejemplos prácticos y reales para su aplicación inmediata en tu web.

Y sin ya querer hacer más spoilers, sólo me queda invitarte a que te apuntes el curso que seguro que te gustará.

Apúntate ya al curso

Apuntarme

Domina la creación de contenidos en WordPress

Imagen destacada de JESHOOTS.COM en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Desarrollo Gutenberg con ejemplos: Google Maps (parte 3)

Publicada en WordPress.

Bienvenido a la tercera y última entrada sobre la creación de un plugin de mapas para Gutenberg. La entrada de la semana pasada fue bastante densa y vimos un montón de cosas variadas: qué atributos tiene nuestro bloque, cómo insertar un mapa usando un componente de React, cómo usar componentes de WordPress o incluso crear nuestros propios componentes para definir la interfaz de usuario, etc.

Hoy toca algo más sencillo pero no por ello menos importante: veremos cómo renderizar el mapa de Google Maps en el front-end. Para ello, analizaremos el último fichero que nos quedó pendiente del bloque nelio-maps que creamos en la entrada anterior y realizaremos las modificaciones pertinentes al plugin para que todo funcione. También aprovecharé esta última entrada para comentar algún punto que quizás haya quedado poco claro hasta ahora.

Cómo guardar nuestro bloque de mapas para visualizarlo en el front-end

Para conseguir visualizar el mapa en el front-end, lo primero que tenemos que hacer es definir el HTML que queremos que se renderice allí. En un bloque de Gutenberg, esto lo conseguimos definiendo el método save de la función registerBlockType. Tal y como ya te adelanté en la entrada anterior, este método lo tienes definido en el fichero save.js dentro de packages/blocks/nelio-maps/.

De nuevo, estamos ante una función extremadamente sencilla de entender:

  • De la línea 7 a la 25 extraemos todos los atributos que son relevantes para nuestro bloque. Es decir, todos los atributos que habíamos definido en attributes.js y que sirven para parametrizar la apariencia del mapa.
  • En la línea 41 abrimos el div que servirá de contenedor para el mapa en si y el posible fragmento de texto con información sobre el marcador.
  • En la línea 47 encontramos el div que debe mostrar el mapa. Fíjate en algo muy interesante: este div incluye el objeto attributesen su definición. Esto quiere decir que todas las propiedades que incluye attributes (por ejemplo, 'data-lat': lat de la línea 34) se renderizarán como atributos HTML (es decir, suponiendo que la variable lat vale 2.48171, aparecerá en el HTML final como data-lat="2.48171").
  • En la línea 49 se añade un pequeño div que contiene las coordenadas del marcador.
  • En la línea 59 se vuelca el contenido del RichText que habíamos definido en edit.js.

Es decir, en esencia el método save sirve para representar en HTML todos los valores que son relevantes para renderizar el mapa en el front-end. ¿Cuál es el problema? Que si vamos al front-end, lo único que veremos es esto:

Captura de pantalla donde debería verse un mapa y no se ve
Captura de pantalla donde debería verse un mapa y no se ve. ¿Qué está pasando?

Un bloque en blanco sin ningún tipo de mapa y en el que sólo vemos el contenido del RichText. ¿Qué ha pasado?

Cómo modificar el plugin para renderizar un mapa de Google Maps creado con nuestro bloque Gutenberg

Para poder visualizar el mapa de Google en el front-end es necesario que carguemos la librería de mapas de Google junto con un componente propio que «construya» el mapa con esa librería. Esto es extremadamente sencillo y si has desarrollado alguna vez para WordPress, deberías saber cómo hacerlo.

Lo primero que deberemos hacer es crear un script que sepa construir un mapa de Google usando los datos que hemos puesto en el HTML. Este script lo tienes en assets/src/js/public/public.js. Fíjate cómo funciona:

  • En la línea 9 buscamos todos los nodos que contengan un mapa de los nuestros (filtrando por una de las clases que hemos incluido en el método save) y, para cada uno de ellos, llamamos al método initGoogleMap.
  • Este método se apoya en dos funciones para hacer su trabajo. Por un lado, extrae las coordenadas de un posible marcador con la función extractMarkerPositionIfAny de la línea 55 y, por otro, extrae todas las propiedades del mapa (coordenadas para centrarlo, el nivel de zoom, qué botones tiene activos, etc ) con la función extractMapOptions de la línea 26. Date cuenta de que ambas funciones se dedican, sencillamente, a leer los valores de los atributos data-algo que habíamos metido en el método save.
  • Finalmente, creamos un mapa (línea 18) y le añadimos un marcador (línea 21) usando las clases Map y Marker, respectivamente, que nos proporciona la librería de mapas de Google.

Una vez tenemos este mapa, sólo debemos realizar dos cambios adicionales a nuestro proyecto:

Una vez realizados todos estos cambios, este es el resultado final:

Mapa de Google con el plugin Nelio Maps en el front-end
Captura de pantalla de un mapa de Google con el plugin Nelio Maps en el front-end.

Sé lo que estás pensando: ¿por qué, en lugar de hacer todo esto a mano, no utilizamos el componente React de mapas de Google que habíamos usado en edit.js? A fin de cuentas, internamente hace lo mismo que acabamos de hacer nosotros a mano, pero nos ahorra un montón de trabajo, ¿no?

Efectivamente, usando el componente React que vimos en la entrada anterior no tendríamos que hacer todo esto, pero hay un precio a pagar. Para poder usarlo, deberíamos cargar también las librerías de React en el front-end, con lo que añadiríamos a nuestra web una carga y un peso innecesarios.

Detalles pendientes

Para finalizar la entrada de hoy, me gustaría explicar brevemente un par de aspectos que, si se dejan en el tintero, pueden confundir ligeramente.

La API Key de Google Maps

Para poder usar Google Maps necesitas tener una API key. Cómo conseguirla es algo que Antonio nos explicó hace unos días. Ahora bien, ¿cómo la usamos?

Una opción sería meter nuestra API key dentro del propio plugin, hardcoded. Si el plugin sólo lo vas a usar tú, es una solución sencilla y te ahorras complicarte la vida. Pero si quieres distribuir tu plugin a usuarios reales es una muy mala idea, porque no todos los servicios de Google son gratis. En algunos hay que pagar y, si mucha gente accede a un servicio de Google con la misma API key (la tuya), llegará un punto en que te llegue una factura inesperada.

¿Qué hacer en estos casos? La idea es muy sencilla: basta con añadir una opción de configuración en el plugin para que la gente introduzca su propia API key.

En nuestro caso, si añades un mapa sin API key, verás el siguiente mensaje de aviso:

Mensaje de aviso cuando no hay una API key disponible
Mensaje de aviso que se muestra al usuario cuando no hay una API key disponible.

instándote a que añadas la API key.

Normalmente, cuando tu plugin tiene ajustes propios, se recomienda crear una página de configuración para poderlos manipular. Pero para el plugin que hemos creado en este tutorial me parecía una complicación innecesaria, así que he optado por una solución alternativa.

En WordPress hay una página de opciones en /wp-admin/options.php con la siguiente pinta:

Opción para meter la API key
Cómo añadir la API key desde los ajustes de WordPress.

Se trata de una especie de «interfaz bonita» para editar (casi) todas las opciones que se han registrado en WordPress y están en la tabla wp_options. Así pues, lo único que tiene que hacer nuestro plugin es asegurarse de que dicha opción existe siempre en la base de datos (aunque su valor sea el string vacío) y ya tendremos una «interfaz bonita» para que el usuario pegue su API key.

Para conseguirlo, enganchánte al hook init de WordPress (mira la línea 73 de este commit) con una función (línea 134) que siempre actualice tu opción a su valor. Cuando la opción no existe, el valor que se pone es el valor por defecto (en nuestro caso, el string vacío). Cuando la opción sí existe, el valor que intentamos «actualizar» es el que ya teníamos y WordPress sencillamente no hace nada con la instrucción. Un pequeño hack, ¡fácil y sencillo!

En resumen

En esta entrada hemos superado la última barrera que nos quedaba por superar en nuestro proyecto: cómo guardar el mapa y cómo conseguir que se visualice en el front-end. Para conseguirlo, únicamente necesitamos un div con toda la información relevante sobre el mapa (su centro, opciones de visualización de los botones, el marcador, etc) y un pequeño script para reconstruirlo en el front-end. También hemos resuelto algunos puntos que (creo) habían quedado en el aire en las entradas anteriores.

Espero que este tutorial te haya gustado y te sirva como ejemplo para emprender tus propios proyectos. Como puedes ver, si partes de una buena base como la que hemos creado en Nelio con el boilerplate para desarrollo Gutenberg, es muchísimo más sencillo que tus ideas se materialicen en proyectos reales.

Si tienes cualquier duda, escríbenos en la sección de comentarios. ¡Un saludo y mucha suerte!

Imagen destacada de Artem Bali en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Combinando Nelio A/B Testing y WPML aumentarás las conversiones internacionales de clientes

Publicada en WordPress.

Traducción de How Combining Nelio A/B Testing and WPML Can Help You Increase International Customer Conversions por Ruth Raventós.

Si te preguntara qué es lo primero que debes hacer para atraer clientes extranjeros a tu web, podrías pensar que la respuesta es obvia. Y lo es.

Para vender a clientes que hablan otro idioma, necesitas traducir tu sitio web. La respuesta no solo es simple, también lo es elegir la mejor manera de hacerlo. WPML es el plugin más popular para traducir sitios web de WordPress. Y con razón.

WPML viene con su conocido editor de traducción avanzada para hacer la traducción más rápida, es compatible con los plugins y temas más populares y cuenta con la confianza de los servicios de traducciónmás reconocidos.

El siguiente paso es encontrar la mejor manera de mantener a los clientes en tu sitio web para que eventualmente se conviertan, es decir realicen aquella acción que esperas que realicen. Mediante el uso de Nelio A/B Testing puedes identificar rápidamente la mejor estrategia para tus diferentes clientes en cada país. Puedes usar Nelio A/B Testing para testear tu contenido, temas, widgets y casi cualquier otra cosa y así ver qué funciona mejor para quién.

Usando Nelio A/B Testing y los complementos de WPML.
Captura de pantalla de Nelio A/B Testing con WPML.

La buena noticia es que WPML y Nelio A/B Testing son completamente compatibles. Antes de ver cómo puedes usar WPML y Nelio A/B Testing juntos para aumentar tus conversiones internacionales, veamos por qué necesitas cada uno de estos plugins.

Por qué necesitas traducir tu sitio web para clientes internacionales

Cuando tus clientes naveguen por tu sitio web, querrás darles tantas razones como te sea posible para que hagan una compra. Del mismo modo, querrás evitar darles una excusa para no comprar tu producto. Una de las cosas que puedes conseguir con poco esfuerzo es traducir de tu sitio web a su idioma nativo.

La traducción de tu sitio web aumentará la confianza de los clientes en tu empresa y garantizará que se sientan cómodos al usar tus páginas. El 72% de los clientes prefieren usar su lengua materna cuando compran en línea. Y mientras que podrías pensar que el precio es un factor importante para realizar una compra, el 56% de los consumidores dicen que obtener información en su propio idioma es realmente más importante para ellos.

Claramente, una de las maneras más rápidas y fáciles de lograr que los clientes estén de tu parte es hablándoles su idioma.

¿Por qué usar WPML para traducir tu sitio web?

WPML se encarga de todo lo que un sitio web de una empresa necesita para traducir su sitio web y dar la bienvenida a nuevos clientes:

  • Localiza tu sitio web – puedes usar WPML no solo para traducir su contenido, sino también para cambiar su moneda, traducir todas las cadenas (eslogan, textos de administración, etc.) y muchas otras funciones. Por ejemplo, Zespoke usa WPML para traducir del inglés al alemán y cambiar la moneda de libras a euros.
  • Traducciones más rápidas y de mayor calidad – con el Editor de traducción avanzada de WPML, puedes traducir el contenido en menos tiempo que nunca y con mayor precisión.
Traduciendo textos repetidos.
  • SEO multilingüe: WPML te asegurará de que ocupes un lugar destacado en las búsquedas de Google en otros idiomas actualizando los enlaces de Hreflang, organizando tus idiomas en diferentes páginas y facilitando traducciones de alta calidad.
  • Asociación con los principales servicios de traducción: WPML está totalmente integrado con los principales servicios de traducción de todo el mundo. Esto significa que pueden proporcionarte traducciones de alta calidad de forma rápida y sin complicaciones.
  • Compatible con plugins: desde Yoast a Elementor, WooCommerce y muchos otros, WPML funciona a la perfección con los plugins que necesitas para administrar tu negocio.

Por qué los tests A/B son importantes para tu negocio

Una vez que hayas traducido tu sitio web, aún te queda una pregunta importante. ¿Cómo sé qué contenido aumentará realmente mis ventas en un país en particular? La mejor manera de averiguarlo es a través de tests A/B.

A pesar de los mitos sobre los tests A/B que puedas haber escuchado, los tests A/B son una forma sin riesgos de probar diferentes métodos de marketing y publicidad para ver cuál es el más efectivo con tu audiencia en particular. Quizás necesitas cambiar tus encabezados? ¿O necesitas un tema diferente? ¿O simplemente una imagen diferente? Con los tests A/B puedes probar todo esto y mucho más.

Mediante los tests A/B, puedes utilizar los datos para tu beneficio. Puedes añadir cambios, medir los resultados y comprender mejor qué funciona y qué no funciona con tus clientes. El resultado final es un aumento de las conversiones.

¿Por qué usar Nelio para tus tests A/B?

Si está utilizando WordPress para tu negocio, Nelio A/B Testing es la mejor manera de aumentar tus conversiones a través de tests A/B.

  • Prueba todo: ya sea páginas, publicaciones, custom post types, widgets, temas, mapas de calor o cualquier otra cosa, puedes probarla con Nelio A/B Testing.
Ejemplo de mapa de calor
Ejemplo de mapa de calor
  • Sin salir de WordPress: Al usar Nelio, puedes realizar todos los tests sin tener que dejar el Escritorio de WordPress.
  • Compatible con los proveedores de hosting de WordPress: la flexibilidad de Nelio significa que puedes usarlo con los proveedores de hosting más populares, incluidos WPEngine, Siteground, Kinsta y Pagely.
  • Actualizaciones instantáneas: tan pronto como encuentras la fórmula ganadora, puedes actualizar automáticamente tus páginas.

Cómo funcionan juntos WPML y Nelio A/B Testing

Puedes combinar WPML y Nelio A/B Testing para realizar tests A/B de tus páginas traducidas. La mejor parte es que es tan fácil como realizar un test en una página no traducida.

Imaginemos que tienes una web inmobiliaria en inglés que se ha traducido al francés. Y ahora quieres ver qué título funciona mejor en su traducción al francés.

Aquí está uno de nuestros anuncios inmobiliarios en francés:

Anuncio francés para la venta de una casa.
Anuncio francés para la venta de una casa.

En tu escritorio de WordPress, todo lo que necesitas hacer es:

1. Vé a la sección de idioma francés de tu sitio web haciendo clic en la bandera francesa.

2. Ahora puedes seguir las instrucciones para crear experimentos test A/B de tipos de contenido personalizado como lo haríamos en una página no traducida.

3. Bajo el menú Nelio A/B Testing -> Experimentos, haz clic en Añadir nuevo y luego en Nuevo Test A/B para Tipos de contenidos personalizados.

4. Completa la información básica para t experimento, incluido el nombre, el tipo de contenido personalizado y el contenido personalizado original.

Experimento de tipo post personalizado con Nelio A / B Testing
Añadiendo un experimento de tipo de contenido personalizado con Nelio A/B Testing.

5. Ahora queremos crear una página alternativa para nuestra página inmobiliaria francesa. Añadiremos un Nombre para la página alternativa, la Fuente (el enlace a la página original) y luego haremos clic en Crear para crear nuestra nueva página.

6. Una vez que nombramos nuestra página, podemos hacer clic en Guardar Experimento y Editar Contenido para comenzar a editarlo.

7. Ahora podemos cambiar el título de nuestra página de test. Probemos poner Maison contemporaine avec piscine.

Nueva versión del anuncio.
Nueva versión del anuncio de casa creado con Nelio A/B Testing.

8. Ahora que hemos definido el experimento y creado su alternativa, puedes ir a Experimentos, encontrarlo y hacer clic en Iniciar.

Mientras nuestro test está en funcionamiento, podemos hacer un seguimiento de nuestros resultados en el Escritorio.

Mostrando los resultados del experimento.
Mostrando los resultados del experimento después de su creación.

Prueba WPML y Nelio A/B Testing juntos

Ahora puedes probar WPML con Nelio A/B Testing tú mismo. Descárgate los dos plugins hoy para iniciar el proceso de bienvenida a nuevos clientes de todo el mundo.

¿Ya has utilizado ambos plugins y realizado tests A/B de tus páginas traducidas? ¡Cuéntanos tu experiencia en los comentarios más abajo!

Imagen destacada de Duangphorn Wiriya en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Desarrollo Gutenberg con ejemplos: Google Maps (parte 2)

Publicada en WordPress.

Ya estamos de vuelta con nuestro tutorial para desarrollar en Gutenberg. La semana pasada empezamos un proyecto que añadía un bloque de mapas en nuestro WordPress. En aquella primera entrada definimos cuáles eran los requisitos que nuestro plugin tiene que cumplir y dejamos listo el esqueleto del que acabará siendo el producto final, partiendo del fantástico plugin boilerplate que hemos creado en Nelio.

Hoy llega la segunda parte del tutorial sobre cómo crear el bloque de mapas. En esta entrada veremos cómo añadir un mapa de Google Maps dentro del editor de WordPress y cómo implementar una interfaz de usuario que nos permita manipular su comportamiento.

Un vistazo al estado actual del proyecto…

En el estado actual del proyecto tenemos un sencillo bloque llamado Demo en packages/blocks/demo/. Este pequeño bloque es el que viene de ejemplo en el plugin boilerplate del que hemos partido y tiene la siguiente pinta:

Bloque de demo que nuestro boilerplate incluye por defecto en el editor de bloques.
Bloque de demo que nuestro boilerplate incluye por defecto en el editor de bloques.

Pero claro, nosotros no queremos un bloque con un corazón y algo de texto, ¿verdad? Lo que nosotros queremos hacer es algo así:

Captura de pantalla de Nelio Maps
Captura de pantalla del bloque de mapas de Nelio Maps.

Es decir, queremos un bloque donde se vea un mapa de Google con un posible marcador. ¿Cómo podemos pasar del bloque de ejemplo original que tenía nuestro boilerplate a este otro bloque más potente? Pues eso es lo que vamos a responder hoy mismo

Pero antes de ello vamos a dedicar un par de minutos a explicar de dónde venimos. Si eres capaz de entender cómo está funcionando el bloque de Demo, lo demás será pan comido.

Entendiendo el bloque de ejemplo…

Toda la chicha del bloque de Demo del que partimos está, como te decía, en packages/blocks/demo/. Allí hay los estilos del bloque, su icono y varios ficheros con el código que implementa su funcionamiento. Veamos los ficheros más importantes.

Por un lado, está el fichero principal index.js. Este fichero exporta tres variables: el nombre del bloque (name), la definición del bloque (settings) y los estilos que admite el bloque (styles). Estas tres variables son las que se usan en packages/blocks/index.js para registrar el bloque en Gutenberg (con registerBlockType) y que esté disponible para usarse.

Este fichero principal, pues, sirve de punto de entrada para entender el bloque que estamos creando. En el objeto de ajustes (settings), vemos tres propiedades importantes: attributes, edit y save. Cada una de estas propiedades está definida en su propio fichero JavaScript con igual nombre, así que comentemos rápidamente qué hay en cada uno de ellos:

  • El fichero attributes.js define todas aquellas propiedades de nuestro bloque que son dinámicas y que, por lo tanto, queremos que el usuario pueda modificar. En el caso del bloque de Demo, el único atributo que hay es el texto que ha escrito el usuario, pero el bloque de mapa tendrá muchas más opciones: las coordenadas del centro del mapa, el nivel de zoom que queremos aplicar, si hay que mostrar ciertos botones, etc.
  • El fichero edit.js es el que define cómo se visualiza el bloque en el editor de WordPress y qué ajustes se ofrecen al usuario (tanto en la barra de herramientas como en la barra lateral de ajustes del bloque). En el caso de Demo, la edición incluye simplemente el componente RichText de WordPress para escribir el contenido. Como veremos, el bloque de mapas será más complejo e incluirá también ajustes adicionales.
  • Finalmente, el fichero save.js define el método que convertirá el bloque que estábamos editando en el HTML que deberá renderizarse en el front-end. De nuevo, en Demo vemos que esta función simplemente guarda el contenido de un RichText usando RichText.Content, pero podría ser cualquier otra cosa (tal y como veremos la semana que viene en la tercera y última entrada de este tutorial).

Creación del bloque de mapas basándonos en el bloque de ejemplo incluido en el plugin boilerplate

Una vez entendido exactamente cómo funciona el bloque que tenemos ahora mismo de demostración, ¿cómo creamos el nuestro? Pues muy fácil: tal y como nos contaba Toni hace unos días, duplicamos el directorio packages/blocks/demo/ en packages/blocks/nelio-maps/ y empezamos a modificar todo lo que sea necesario.

Ya te he dicho que lo primero que habrá que modificar será el fichero attributes.js. Ahí definiremos todas las propiedades que queremos que sean parametrizables de nuestro mapa. En la entrada anterior especificamos qué requisitos debería cumplir nuestro plugin y, por lo tanto, esbozábamos qué cosas se tienen que poder manipular. Pues bien, echando un vistazo al attributes.js resultante verás qué cosas se pueden tocar del bloque de mapas que vamos a crear. Es algo tan sencillo que no merece la pena dedicarle más líneas.

El siguiente punto a modificar es todo lo que concierne a la edición del bloque en Gutenberg. Para ello, debemos meternos en el fichero edit.js e ir tirando del hilo. Si lo miras con detenimiento, verás que no es mucho más complicado que lo que teníamos en el bloque Demo.

Lo más importante está en el método render del bloque (línea 33), donde recuperamos los atributos del objeto this.props que el bloque necesita para funcionar y donde acabamos renderizando toda la interfaz. Fíjate que la interfaz consta de tres partes:

  1. Una barra de herramientas ToolbarControls (línea 66), que sacamos de un fichero llamado toolbar.js y que veremos más adelante.
  2. Los ajustes de bloque que aparecen en la barra lateral del editor (línea 68), que encontramos en un componente llamado Inspector que definimos en inspector.js.
  3. El contenido del bloque en si, que tiene dos estados:
    1. Si no tengo una API key de Google Maps disponible, mostramos un aviso al usuario (línea 122).
    2. Si disponemos de dicha clave, mostramos el mapa en si con el objeto MapBlock (línea 83) y lo acompañamos (a) de un marcador Marker (línea 97), que únicamente está visible si el marcador está activado, y (b) de un div (línea 104) con la información adicional sobre el marcador.

Google Maps como componente React

Está claro que si queremos meter un mapa de Google en nuestro editor, deberemos usar algún componente que nos permita usar la API de mapas de Google Maps. Teniendo en cuenta que Gutenberg está creado usando React, lo más lógico es buscar si existe un componente React de Google Maps. ¡Y existe, claro que sí!

Tal y como puedes leer en la documentación del proyecto, lo primero que tenemos que hacer para poder usar dicho componente es añadirlo a nuestro proyecto. Esto lo conseguimos instalando y añadiendo la dependencia a nuestro plugin:

npm install react-google-maps --save-dev

lo cual añade una nueva entrada en nuestro package.json.

Cómo crear un componente de WordPress que encapsule un componente React

Si seguimos mirando la documentación de este componente React para Google Maps, veremos que nos recomiendan encapsular el componente GoogleMap en un componente propio. Una vez esté encapsulado, deberemos usar este componente propio en nuestro plugin.

Para ello, lo único que hacemos es crear un componente llamado MapBlock en su propio fichero map-block.js (por aquello de tenerlo todo bien ordenadito) siguiendo exactamente los pasos que nos indica la documentación. Ni más, ni menos.

Cómo añadir ajustes de bloque en la barra lateral de WordPress

Ahora que ya tenemos un mapa, es hora de poder configurar cómo deberá verse y comportarse el mapa en el front-end. Para ello, deberemos añadir varias secciones de ajustes en la barra lateral de Gutenberg. Como ya te he avanzado, esto lo conseguimos con un componente que hemos llamado Inspector y que hemos definido en el fichero inspector.js.

Si echas un vistazo a este fichero, verás que se sigue el mismo patrón de siempre: estamos definiendo un componente Component con un método render. Este método se queda con los atributos de this.props que le son relevantes y devuelve el JSX con todos los controles. En este caso en concreto, devuelve un InspectorControls (esto le indica a WordPress que este contenido va a la barra lateral) con varias secciones PanelBody. Veamos cada sección en detalle.

Ajustes básicos del mapa

El primer PanelBody que encontramos (línea 47) no tiene título title y, por lo tanto, aparece siempre como una sección que no se puede cerrar:

Ajustes básicos del mapa de Nelio
Ajustes básicos del bloque de mapas de Nelio Maps. Escoge el tamaño y el nivel de zoom con estos dos selectores.

La sección define un par de controles de rango RangeControl, cuyo resultado puedes ver en la captura anterior. Estos dos controles nos permiten modificar el alto del mapa y el nivel de zoom del mismo.

Otra sección interesante y sencilla es la que encontramos en la línea 121. Aquí añadimos unas cuantas opciones para activar o desactivar los botones que deberán mostrarse en el mapa cuando éste se visualice en el front-end:

Botones del mapa
Configura qué botones del mapa estarán visibles en el front-end.

Para ello, simplemente tenemos que usar el componente por defecto de WordPress CheckboxControl.

Cómo añadir una sección personalizada de estilos para nuestro mapa

Otra sección interesante de nuestro bloque es la sección de estilo (línea 68). Puedes ver el resultado final en la siguiente captura:

Estilos de Google Maps
Puedes cambiar la apariencia del mapa usando la sección de Estilos en la configuración del bloque.

Se trata de una sección especial porque el componente que usamos (MapStyles) no es algo que exista en WordPress por defecto, sino que lo hemos creado a drede para la ocasión. Tal y como puedes ver en el enlace anterior, se trata de un compontente que carga un conjunto de estilos predefinidos en un componente de tipo ImagePicker (el cual, por cierto, tampoco existe por defecto en WordPress; puedes encontrarlo en packages/components/image-picker/) .

Cuando el usuario selecciona alguno de los estilos incluidos en ImagePicker, el componente MapStyles invoca la función onChange que le hayan pasado (fíjate en la línea 76 de inspector.js) pasando dos valores: el nombre del estilo seleccionado y el JSON asociado.

Finalmente, fíjate que una de las opciones que incluye MapStyles es el «estilo personalizado»:

Estilo personalizado de mapa en Nelio Maps
Además de los 5 estilos por defecto incluidos en el bloque, existe la posibilidad de añadir tu propio estilo del mapa usando un JSON.

Cuando se selecciona, el componente renderiza un cuadro de texto adicional (línea 45) para que el usuario pueda meter su propio estilo en formato JSON. Porque, por si no lo sabías, los mapas de Google Maps se pueden personalizar una barbaridad.

Cómo añadir un marcador a nuestro mapa

La siguiente sección que tenemos es la que controla nuestro marcador (línea 81). Esta sección nos permite mostrar u ocultar el marcador del mapa (línea 86) y, cuando está activo, nos da algunos ajustes adicionales:

Cómo añadir un marcador al mapa
El bloque permite añadir un marcador al mapa para así señalizar algún punto en concreto del mismo.

Como ves, aparece un cuadro de búsqueda para buscar ubicaciones en Google Maps (el cual hemos implementado, de nuevo, con un componente personalizado llamado AddressSearch) y la posibilidad de mostrar u ocultar el bloque de texto en el que meter información adicional sobre el marcador.

Por cierto, fíjate que este componente para buscar ubicaciones en Google se basa en un componente llamado StandaloneSearchBox, el cual también forma parte del proyecto React que hemos añadido a nuestro plugin para usar el mapa en primer lugar. ¡Qué gustazo da reaprovechar el trabajo de otros!

Cómo configurar la barra de herramientas de un bloque

Lo último que nos queda por explicar hoy es la barra de herramientas. Si has entendido como funciona la barra lateral, la barra de herramientas es una chorrada.

Barra de herramientas de Nelio Maps
La barra de herramientas ofrece un acceso rápido a las opciones más importantes del mapa de Nelio Maps.

La barra de herramientas de nuestro plugin está representada por el componente ToolbarControls definido en toolbar.js. Aquí sencillamente añadimos un componente para definir la alineación del bloque (BlockAlignmentToolbar, en la línea 42), un par de desplegables para centrar el mapa (línea 50) y/o modificar la ubicación del marcador (línea 79) y un par de botones extra para cambiar la ubicación del cuadro de texto en el que podemos meter información sobre el marcador (líneas 107 y 120).

Búsqueda de ubicaciones integrada en WordPress
Con la búsqueda de ubicaciones integrada, puedes buscar cualquier negocio o dirección sin salir del editor de bloques.

Resumiendo

Hoy hemos visto cómo crear toda la interfaz de edición del bloque de mapas. Como ves, se trata de un proceso que, si bien puede resultar ligeramente costoso en tiempo, cualquiera con ganas puede aprender. Al final, el secreto está en partir de un código de ejemplo que esté bien organizado e ir construyendo la interfaz poco a poco, reaprovechando los componentes que ofrece WordPress, los componentes que ya existen o creando los tuyos propios.

Nos vemos la semana que viene con la última entrega de este tutorial, donde veremos cómo guardar nuestro mapa y cómo visualizarlo en el front-end de la web.

Imagen destacada de rawpixel en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Desarrollo Gutenberg con ejemplos: Google Maps (parte 1)

Publicada en WordPress.

No sé si te has enterado, pero hace unos días publicamos un nuevo plugin en el directorio de plugins de WordPress.org: Nelio Maps. Tal y como el nombre desvela, se trata de un plugin de mapas que añade un nuevo tipo de bloque en el editor de WordPress. Con él, podemos añadir fácilmente un mapa de Google en nuestras página o entradas. Te dejo con una captura del plugin en cuestión:

El plugin Nelio Maps permite insertar y personalizar un mapa de Google a tus páginas o entradas WordPress.

Nelio Maps es uno de nuestros primeros plugins íntegramente diseñado para Gutenberg. A pesar de ser un plugin relativamente sencillo, se trata de un producto muy útil. Por un lado, porque cualquier usuario que quiera añadir mapas a su web ahora puede hacerlo instalando un plugin sencillo y ligero. Por otro lado, porque cualquier desarrollador que quiera ponerse a desarrollar en Gutenberg ahora tiene un ejemplo real de cómo crear un plugin «desde cero», simplemente leyendo esta entrada.

Como soy consciente de que el desarrollo de un plugin como este no es lo más sencillo del mundo, he organizado este tutorial en tres entradas diferentes. Hoy te explicaré cómo crear el plugin «desde cero» y dejar montado el esqueleto con el que trabajar. En la segunda entrada te explicaré cómo conseguir tener un mapa interactivo en el editor de bloques de WordPress y veremos todos los componentes que he creado para hacer un plugin con un acabado profesional. Y en la tercera y última entrada veremos cómo guardar el mapa en la base de datos y cómo podemos visualizarlo en el front-end de nuestra web.

Definición del tipo de plugin que queremos crear

Puede parecer una perogrullada, pero antes de embarcarnos con cualquier nuevo proyecto, lo primero que debemos realizar es definir qué es lo que queremos conseguir con nuestro proyecto. En función de las funcionalidades que queramos incluir, tendremos unas necesidades u otras. Así que vamos a definir qué tipo de plugin de mapas queremos implementar en este tutorial.

Estos son los requisitos del proyecto:

  1. Queremos poder añadir un mapa (o más de uno) a una página de nuestra web
  2. El mapa tiene que poder centrarse en cualquier punto del globo
    1. O bien arrastrando y soltando el mapa
    2. O bien buscando la ubicación en un cuadro de búsqueda
  3. El tamaño del mapa tiene que poder modificarse, tanto en ancho como en alto
  4. El mapa tiene que poder presentarse con diferentes estilos (en blanco y negro, con una paleta de colores diferente, etc)
  5. El mapa tiene que poder incluir un marcador señalando una ubicación concreta
  6. Si existe un marcador, el mapa tiene que estar acompañado por un cuadro de texto con información adicional sobre dicho marcador.

Ambicioso, ¿verdad? Pues venga, ¡manos a la obra!

Cómo crear nuestro plugin Gutenberg «desde cero»

Si sigues nuestro blog, habrás visto que hace unos días Antonio publicó una entrada explicando cómo crear plugins usando un modelo que hemos creado en Nelio. Si no has leído su entrada, te recomiendo que empieces por ahí, porque nuestro punto de inicio será, precisamente, el plugin boilerplate wp-beb que Antonio explica ahí.

Para empezar nuestro proyecto, lo primero que haremos será realizar una copia de este plugin boilerplate. Para ello, crea un nuevo proyecto en tu cuenta de GitHub y sigue las instrucciones que hay en la ayuda de GitHub para crear una copia de otro repositorio:

git clone --bare https://github.com/avillegasn/wp-beb.git
cd wp-beb.git
git push --mirror https://github.com/tu-usuario/tu-repo.git

Una vez tienes creado el proyecto, sigue las instrucciones del README.md, podrás compilar y ver el resultado del plugin de ejemplo en tu WordPress.

Cómo convertir la copia del plugin boilerplate en nuestro plugin

Tal y como aparece en la propia documentación del plugin boilerplate, lo primero que tenemos que hacer es cambiar el nombre en el código fuente. Es decir, hay que cambiar todas las apariciones de wp-beb (tanto en mayúsculas como en minúsculas, con guiones o con guiones bajos) por el nombre de nuestro plugin (en mi caso, nelio-maps).

Para ello, podemos usar el siguiente script:

en el que obviamente deberás cambiar los nelio maps de las líneas 5, 8, 9 y 10 por el nombre de tu plugin.

Por otro lado, ahora también es un buen momento para cambiar la documentación del plugin. Es decir, por un lado tienes que editar los ficheros README.md y readme.txt para que reflejen el propósito de tu nuevo plugin (sin olvidar hacer una mención al hecho de que estás usando nuestro boilerplate como base, claro). Y, por otro, deberás cambiar el comentario inicial del fichero principal.

Puedes ver cómo realicé todos estos cambios en el primer commit del proyecto Nelio Maps.

Cómo limpiar el proyecto modelo para quedarnos con lo que nos interesa

El plugin boilerplate de Nelio incluye, por defecto, un par de componentes: un nuevo bloque de demo y una extensión en la barra lateral de Gutenberg. Dado que a nosotros nos interesa únicamente crear un bloque (el de mapas), vamos a eliminar todo aquello que nos sobra (la barra lateral de Gutenberg).

Este paso es bastante sencillo, puesto que básicamente se basa en «borrar» cosas innecesarias del plugin. En concreto, deberemos:

  1. Deshacernos de todo el contenido que aparece en la carpeta assets (que es donde se añadía esa barra lateral, su estilo y su icono).
  2. Limpiar el fichero webpack.config.js, puesto que existen un par de reglas que usaban los ficheros de assets que acabamos de cargarnos.
  3. Limpiar el fichero principal del plugin, puesto que encola una hoja de estilos y un fichero JavaScript que ya no existen.

Puedes ver todos los cambios en este commit. Si vuelves a compilar el código, verás que sigue existiendo el bloque llamado Demo, pero ya no está el plugin de Gutenberg que sí teníamos originalmente.

Resumen

En la entrada de hoy hemos visto cómo crear un plugin para Gutenberg. En primer lugar, hemos definido el tipo de proyecto que queremos realizar y hemos identificado qué necesitaremos para llevarlo a cabo. A continuación, hemos visto los pasos necesarios para adaptar el plugin boilerplate de Nelio a un nuevo proyecto. Es decir, hemos visto cómo clonar el proyecto y limpiarlo de polvo y paja.

Nos vemos la semana que viene con la segunda parte de este tutorial, donde modificaremos el bloque de demostración para que realice todas las funciones que hemos descrito al principio de nuestra entrada.

Imagen destacada de Brett Zeck en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

9 Trucos para dominar el editor de bloques de WordPress

Publicada en WordPress.

El editor de bloques de WordPress es muy intuitivo. Sí. Pero incluso siendo un usuario del editor de bloques desde el día cero, como nosotros, es posible que aún haya trucos y cosillas en las que no te has fijado y que te pueden facilitar parte del trabajo como escritor.

Y por eso que creo que vale la pena que le dediques unos minutos de tu tiempo a leer esta entrada que te ayudará a dominar el editor de bloques.

Si todavía estás con el editor clásico de WordPress y no sabes cómo empezar con el editor de bloques, te recomiendo que leas este artículo de introducción a Gutenberg de David.

Asumiendo que ya estás familiarizado con el nuevo editor, te comento a continuación una lista de nuevas funcionalidades o trucos que quizá desconoces.

Empezaré comentándote algunos nuevos bloques con los que es mucho más fácil crear contenido y, luego, algunos trucos que puedes usar en el editor que pueden serte prácticos.

#1 Añadir un botón

Con el editor clásico de WordPress, si querías añadir un botón en medio de una entrada o una página básicamente tenías dos opciones: o cambiar a modo HTML y escribir el código, o usar algún plugin que te creara un shortcode para el botón en cuestión.

El editor de bloques ya incorpora el bloque botón que te permite rápidamente crear un botón en medio de una entrada:

Elementos de diseño de Gutenberg.
Bloques de elementos de diseño de Gutenberg.

El bloque Botón te permite crear un botón en el que defines su aspecto, el color de fondo y de la letra e incluso puedes añadirle una clase CSS.

Crear un botón con el editor de bloques
Crear un botón es facilísimo con el editor de bloques.

Ya ves que rápido. Aquí tienes el botón que acabo de crear. Ahora sólo tienes que hacer clic y subscribirte a Nelio Content 😉.

#2 Añadir una tabla

Al igual que con el botón, añadir una simple tabla con el editor clásico también implicaba hacerlo con HTML y CSS o con algún plugin. De hecho, muchas veces era más fácil crear la tabla con cualquier otro editor e insertarlo luego en una entrada como una imagen.

Ahora dispones del bloque Tabla que encontrarás en el conjunto de bloques de Formatos.

Bloques de formatos
Bloques de formatos que tienes disponibles por defecto en el editor.

Tras seleccionar el bloque Tabla, te pide que indiques el número de filas y columnas que por defecto quieres crear. Pero tranquilo, luego tienes la opción de añadir o eliminar filas y columnas. Y también puedes indicar el estilo de la tabla.

Creando una tabla con el nuevo editor.
Creando una tabla con el nuevo editor.

De esta forma, se puede crear la siguiente tabla con algunas características de Nelio A/B Testing de forma muy sencilla.

BasicProfessionalEnterprise
$29 /mo$89 /mo$259 /mo
5,000 tested page views35,000 tested page views200,000 tested page views
1 site5 sites10 sites
For IndividualsFor Small BusinessFor Large Businesses

#3 Incrustar un elemento externo con sólo copiar y pegar

Otros bloques que te pueden ser muy útiles son los de tipo incrustado que te permiten incrustar elementos externos como vídeos, publicaciones de Facebook, Twitter, etc.

Blocs de inscrutados de Gutenberg.
Bloques de incrustados de Gutenberg.

Pero también puedes, en vez de crear un bloque de este tipo, directamente copiar y pegar la URL que quieres incrustar y automáticamente ya te inserta el elemento en cuestión. Aquí tienes el vídeo que acabo de incrustar al copiar la dirección del vídeo de youtube de Nelio Content: https://youtu.be/RstwyyAZ97k

#4 Usa el bloque espaciador para incrementar el espacio entre bloques

Este es uno de los bloques que quizás tampoco sabías que existían: el bloque espaciador. Su función, como bien indica su nombre, es el de incrementar el espaciado entre bloques.

El bloque espaciador tiene por defecto exactamente 100 píxeles pero puedes personalizar la altura del mismo como quieras. Tan sólo debes posicionar el cursor encima del punto azul que hay debajo del bloque e incrementar el tamaño arrastrando el punto azul a la distancia que quieras.

Bloque espaciador
Personaliza el tamaño del bloque espaciador subiendo o bajando el punto azul.

Además, también puedes utilizar una clase CSS adicional para definir cómo quieres que sea el bloque espaciador. Esto te puede ser muy útil en la creación de páginas.

#5 Información sobre el número de palabras y estructura

En el editor clásico seleccionabas una entrada y, automáticamente, te aparecía el número de palabras que tenía dicha entrada. Y ahora, ¿dónde tengo esta información?

Tranquilo, que en la barra de herramientas tienes esta información en todo momento muy a mano haciendo clic en el icono de un círculo con una i.

Y no solo te cuenta las palabras, si no que también te informa de la estructura de toda la entrada o página que estás editando.

Información sobre entrada de Gutenberg
En la barra de herramientas superior encuentras el icono de información sobre el número de palabras y estructura de tu entrada o página.

#6 Mover la barra de herramientas de bloque a la parte superior

Esto va a gustos, pero por defecto, cuando estás editando un bloque tienes la barra de herramientas del bloque flotando en la parte superior del propio bloque. La gran ventaja de que sea así es que lo tienes más a mano pero el problema con las barras de herramientas flotantes es que pueden tapar parte del bloque anterior.

Barra de herramientas flotante en Gutenberg.
Barra de herramientas flotante en Gutenberg.

Como puedes ver en la imagen, la barra de herramientas me está tapando parte del título anterior. Si esto lo encuentras poco práctico o molesto, lo puedes cambiar fácilmente. Haz clic en los tres puntitos de más herramientas y opciones y marca la opción Barra de herramientas superior.

Barra de herramientas de Gutenberg
Selecciona si quieres la barra de herramientas de Gutenberg en la parte superior del editor.

Una vez marcado, ya tienes la barra de herramientas fija en la parte superior de tu editor.

Barra de herramientas fija en la parte superior del editor.
Barra de herramientas fija en la parte superior del editor.

#7 Usa la barra (/) como atajo

El editor de bloques te proporciona unos atajos para que puedas ser más eficiente editando tus entradas. El primero que deberías usar es la barra, /. Tan fácil como empezar a escribir el nombre de un bloque con la barra y te mostrará los tipos de bloques que puedes añadir:

Atajo de Gutenberg
Empieza un bloque con / y escoge el tipo de bloque que quieras.

#8 Conoce otros atajos de teclado

Una de las características que ha incorporado el nuevo editor es que dispongas de muchos otros atajos de teclado que pueden ayudarte a ser mucho más rápido escribiendo. Para conocerlos todos, haz clic en los tres puntitos de más herramientas y opciones:

Atajos de teclado del editor de WrodPress
Mira los atajos de teclado que tienes disponibles en el editor.

Alternativamente, también puedes acceder a esta ayuda con el atajo o ctrl  H (en caso de Mac) o Alt H (en caso de Windows). Y a continuación te muestro los atajos que creo que te pueden resultar más útiles.

Acciones globalesAtajo en MacAtajo en Windows
Muestra esta ayudactrl  H  Alt H
Guarda tus cambios SCtrl S
Deshace tus últimos cambios ZCtrl Z
Rehace tu último deshacer ZCtrl  Z
Muestra u oculta la barra lateral de ajustes ,Ctrl  ,
Abre el menú de navegación de bloquesctrl  O  Alt O
Cambia entre el editor visual y el editor de código    MCtrl  Alt M
Acciones de bloquesAtajo en MacAtajo en Windows
Duplica el/los bloques(s) seleccionados D Ctrl D
Quita el/los bloque(s) seleccionadosctrl  o  Alt Z
Inserta un nuevo bloque antes de/los bloque(s) selecciona(s).  TCtrl Alt T
Inserta un nuevo bloque después de/los bloque(s) selecciona(s).  YCtrl Alt Y
Cambia el tipo de bloque después de agregar un nuevo párrafo/ /
Formatos de textoAtajo en MacAtajo en Windows
Cambia el texto seleccionado a negrita B Ctrl B
Cambia el texto seleccionado a cursiva I Ctrl I
Subraya el texto seleccionado UCtrl U
Convierte el texto seleccionado en un enlace KCtrl K
Quita el enlace  K Ctrl K
Añade un tachado al texto seleccionadoctrl  D  Alt D
Muestra el texto seleccionado en fuente monoespacioctrl  x  Alt X

#9 Convierte un bloque en encabezado con almohadilla (#)

Esto lo podrías considerar como un atajo de teclado. El editor de bloques de Gutenberg soporta tres tipos de encabezados: H2, H3y H4. Cuando estás escribiendo el bloque por defecto es de tipo párrafo. Pero puedes convertirlo en encabezado muy fácilmente: empieza a escribir el nuevo párrafo con ## para H2, ### para H3y #### para H4. Pruébalo y verás qué fácil es.

Conclusión

La primera experiencia que tienes con el nuevo editor de bloques tras haber estado años usando el editor clásico de WordPress puede que no sea precisamente la más agradable que esperabas encontrarte. Pero es normal, los cambios cuestan.

Al principio hay cosas que no sabes donde están y otras que no te funcionan como antes o van más lentas… sí. Es cierto: el editor de bloques todavía necesita mejorar en bastantes aspectos. Pero si vas aprendiendo a dominarlo, poco a poco le irás viendo sus ventajas y verás que hay cosas que antes no podías hacer fácilmente que ahora ya puedes hacer.

¿Nuestra recomendación? Anímate a cambiar al nuevo editor y verás que muy pronto te habrás olvidado de cómo funcionaba el clásico.

Imágen destacada de Rana Sawalha en Unsplash

FlojaNo está malBienMuy bien¡Impecable! (2 votos, promedio: 5,00 de 5)
Cargando…

Actualiza tu WordPress de forma segura

Publicada en WordPress.

¿Sabes cada cuánto deberías actualizar WordPress, los temas y los plugins? No tengas dudas sobre la respuesta: SIEMPRE (o tan pronto como puedas).

Cuanto más tiempo dejes pasar sin tener todo actualizado, no sólo quizá te perderás nuevas funcionalidades interesantes, si no que además corres el riesgo de que haya cosas que dejen de funcionarte correctamente, te aparezcan incompatibilidades entre plugins o con tu tema, o puedas tener una brecha de seguridad en tu web.

Dicho esto, el proceso de actualización no es trivial. Primero tienes que saber en qué orden actualizar. Por ejemplo, no tendría sentido actualizar un plugin que sirve para adaptarse a una nueva versión de WordPress sin haber previamente instalado dicha versión. Y al revés también te puede pasar, que actualizas primero WordPress y te encuentras que los plugins que tienes instalados en tu web no están preparados para este cambio. Precisamente este ha sido uno de los problemas más importantes que hemos sufrido con la nueva versión 5.0 de WordPress.

Además, ten en cuenta que no todas las actualizaciones son siempre seguras. Más de una vez una actualización de un plugin ha supuesto una incompatibilidad con otro plugin y ha dejado de funcionar algo que antes estaba funcionando la mar de bien.

Viendo clara la necesidad de tener actualizada nuestra web, veamos cómo asegurarnos de que lo hacemos de forma segura.

Actualización automática del Core, plugins y temas

Parto de la base de que tu web utiliza un buen servicio de hosting que de entrada te garantiza unos mínimos. Esto es, que tienes:

  • PHP versión 7.2 o superior.
  • MySQL versión 5.6 o superior, o MariaDB versión 10.0 o superior.
  • Compatibilidad con HTTPS.

Y si no es el caso, mi recomendación es que este año 2019 te decidas por cambiar de servicio de hosting.

Dicho esto, vayamos al tema de las actualizaciones automáticas: como ya debes saber, tras la versión de WordPress 3.7 (octubre 2013), por defecto WordPress realiza automáticamente las actualizaciones menores del Core. Esto ya te asegura que se arreglan ciertas vulnerabilidades que puedan aparecer.

Así que si ya instalaste la versión 5.0 de WordPress, automáticamente ya pasaste a la 5.0.1 que solucionaba problemas de seguridad, a la 5.0.2 que solucionaba 73 fallosy a la 5.0.3 que arreglaba 37 errores e incluía 7 mejoras en el editor de bloques. Pero en el momento en que aparezca la versión 5.1 no esperes a que se actualice sólo, ya que sería una actualización «mayor» y estas no se ejecutan solas por defecto.

Ya que estamos aprovecho para recordarte cómo suele funcionar el sistema de numeración de versiones de software:

  • 2.0 – una actualización de la versión 1.0 a la 2.0 está indicando que el software es una versión totalmente diferente a la anterior.
  • 2.1 – una actualización de 2.0 a 2.1 es una actualización mayor en la que pueden haber nuevas funcionalidades que no existían anteriormente.
  • 2.1.1 – se trata de un parche menor en el que se está corrigiendo un error o solucionando una brecha de seguridad detectada. No debería implicar ningún problema que la actualización sea automática.

Los plugins y los temas no se actualizan automáticamente por defecto pero tienes diversas alternativas para automatizar actualizaciones. Eso sí, si decides automatizar algún tipo de actualizaciones, minimiza los riesgos realizando antes una copia de seguridad de tu WordPress siguiendo los pasos que te explicamos.

Activación en WordPress

Si tienes una web corporativa o un blog, quieres automatizar las actualizaciones y eres amante del riesgo, puedes añadir la siguiente línea en el fichero wp-config.php:

define( 'WP_AUTO_UPDATE_CORE', true );

De esta forma, siempre se actualizará automáticamente tu WordPress. Recuerda que aunque deberías siempre tener actualizado tu WordPress, la actualización automática de este no está exenta de riesgos, ya que puede provocar incompatibilidades con tus plugins.

Activación en el Servicio de Hosting

Muchos servicios de hosting disponen de sus propias herramientas que te permiten activar actualizaciones automáticas e indicar qué plugins quieres que se actualicen automáticamente.

Si te animas a que algunos plugins se actualicen automáticamente, la recomendación es que sean sólo aquellos que tienen algún efecto en el Escritorio pero no en la interfaz de usuario (lo que el visitante ve) como pueden ser plugins de:

  • SEO
  • Analítica
  • Herramientas de Admin tales como duplicar entradas o columnas
  • Comprobadores de enlaces rotos
  • Redirecciones
  • Optimización de la base de datos
  • Backups
  • Seguridad

Las empresas de hosting competentes hacen una copia de seguridad de tu web antes de hacer la actualización automática por si la actualización no se hace correctamente. Sus herramientas comprueban automáticamente si tu web está funcionando correctamente y si detectan algún error, revertirán los cambios y te lo notificarán.

Actualizaciones con Easy Updates Manager

De la misma forma en que hay empresas de hosting que tienen sus propias herramientas para que se realicen actualizaciones automáticas, Easy Updates Manager es un plugin gratuito que puedes usar en un WordPress para administrar las actualizaciones.

Con este plugin, tienes la flexibilidad de personalizar que tipo de actualizaciones quieres automatizar:

Easy Updates Manager
Configuración del plugin Easy Updates Manager.

También puedes indicarle que te notifique por e-mail cada vez que haya una nueva actualización.

Actualizaciones con ManageWP

Otra alternativa para administrar las automatizaciones de plugins y temas es usar el panel de administración ManageWP. Con esta herramienta podrás gestionar todos los sitios de WordPress que quieras bajo una misma interfaz de administración similar a la nativa de WordPress. Para ello es necesario que tras registrarte en ManageWP con un email, a las webs que vayamos a gestionar les añadamos y activemos el plugin ManageWP Worker, el cual nos va a permitir su acceso desde ManageWP.

Puedes administrar las copias de seguridad y personalizar las actualizaciones del core, plugins y temas como quieras para cada sitio.

Las funcionalidades más destacadas de la versión gratuita de ManageWP son:

  • Crear copias de seguridad de manera automática y restaurarlas con tan solo 1 click,
  • Actualizar plugins a nuevas versiones, con tan solo 1 click, en todos los sitios de WordPress a la vez,
  • Actualizar los temas de cada instalación,
  • Revisión manual de seguridad y de optimización,
  • Revisar y administrar los últimos comentarios
  • Optimizar la base de datos de la instalación de WordPress (borrar transiciones, revisiones, temporales…),
  • Consultar las estadísticas de Google Analytics de cada sitio, y
  • Consultar informes de rendimiento y posicionamiento.

Además, desde ManageWP, puedes acceder al Escritorio de cada WordPress con un 1 click, ahorrándote tener que acceder a la URL de cada uno de ellos.

Y con las opciones de pago también podrás hacer copias de seguridad de forma regular con la frecuencia que tu indiques o automatizar la revisión de seguridad y de optimización entre otras funcionalidades.

Actualización manual

Finalmente, si quieres quedarte tranquilo y asegurate de que una actualización no rompe nada de tu WordPress, siempre tienes la opción de hacerlo manualmente con tu supervisión.

Como sabes, en el Escritorio de WordPress, en todo momento se te informa de las actualizaciones que tienes pendientes de instalar en tu sitio.

Actualizaciones pendientes
El Escritorio te indica si tienes actualizaciones pendientes (en la imagen ves que hay tres).

Recuerda que ya hemos dicho que no es recomendable ir a saco a actualizarlo todo sin más. La forma más segura para hacer cualquier cambio en tu web es disponer de un servicio de hosting que te ofrezca un entorno de desarrollo y otro de producción; de esta forma puedes hacer los cambios en desarrollo tranquilamente mientras que la instalación de producción se encarga de dar servicio a tus usuarios. Cuando todo funciona correctamente en desarrollo, podrás copiar el entorno de desarrollo a producción.

Pero si no dispones de este servicio, entonces el primer paso es  crea una nueva copia de seguridad. 

Actualización manual del Core mediante FTP

En el caso de que vayas a actualizar el Core, WordPress recomienda que primero desactives todos los plugins que tengas instalados. Esto lo puedes hacer fácilmente seleccionándolos en la lista de plugins, marcándolos todos y aplicando la opción de Desactivar.

#1 Reemplaza ficheros de WordPress

  1. Descarga el fichero de la última versión del corey extrae el paquete localmente en tu ordenador.
  2. A continuación accede a tus archivos mediante FTP. Borra los directorios de wp-admin y wp-includes.
  3. Mediante FTP sube los nuevos directorios que has extraído y tienes en local de wp-admin y wp-includes.
  4. En el caso de los archivos del directorio de wp-content, no borres ni sobreescribas esta carpeta.
  5. A continuación, copia el resto de ficheros sobreescribiendo los que tenías.
  6. Y finalmente, revisa wp-config-sample.php por si has de realizar alguna modificación en tu wp-config.

#2 Actualiza la instalación

  1. Una vez actualizados los ficheros, entra al Escritorio de WordPress. Si hay la necesidad de actualizar la base de datos, WordPress lo detecta y te mostrará el enlace que te lleva a /wp-admin/upgrade.php. Sigue el enlace y completa los pasos que se te indican para actualizar la base de datos y que sea compatible con la última versión del código.
  2. Ya sólo te queda volver a la lista de plugins y volverlos a reactivar todos. Puedes hacerlo, reactivándolos todos a la vez o, uno a uno e ir comprobando que todo sigue igual.

#3 Borra la cache

No te olvides de borrar la cache para finalizar el proceso de actualización del Core de WordPress y asegurarte de que todos tus visitantes están accediendo a la última versión de tu WordPress.

Y si surge algún problema…

Si surge algún problema en la actualización del Core de WordPress, en el Codex de WordPress te explican con más detalle todo el proceso en casos más complejos y los problemas más habituales con los que te puedes encontrar y cómo resolverlos.

Actualización de plugins

La actualización de plugins, en principio, es mucho más sencilla. Eso sí, como siempre te he comentado, no te olvides de hacer una copia de seguridad.

Como sabes la actualización de plugins y temas que están en el Directorio de WordPressla puedes hacer directamente desde el Escritorio de tu WordPress.

Pero antes de actualizar cualquier plugin, te recomiendo que te leas su Changelog en el que puedes ver si se trata de una actualización mayor o de un parche con pequeños cambios.

Recuerda que el número de versión es un buen indicador del tipo de cambio que supone dicha actualización. Si se trata de un cambio mayor, vigila que no pueda haber algún tipo de incompatibilidad con tu sitio (con el Core o algún plugin o tema).

En la mayoría de casos la única forma que tendrás de descubrirlo será probándolo. Así que la mejor recomendación para cambios mayores es primero probarlo en una instalación de staging y tras ver que todo funciona, hacer el cambio en la instalación que tienes en producción.

Actualización de temas

La actualización del tema de tu sitio web puede ser un poco más peliaguda ya que cualquier tipo de personalización que hayas echo al tema o modificación en la configuración del mismo pueden perderse.

Así que antes de animarte a actualizar un tema ten presente lo siguiente:

  • Entiende bien de qué tipo de cambio se trata.
  • Si has modificado algún fichero core del tema, tenlo en cuenta. Si no creaste un tema hijo para dichos cambios, los vas a perder.
  • Si creaste un tema hijo no deberías tener excesivos problemas al actualizar el tema padre, pero es posible que algunos cambios los tengas que volver a recrear.
  • Si el nuevo tema tiene nuevos identificadores y classes en el HTML, tu hoja de estilo puede dejar de funcionar.
  • A la larga, los temas que no se actualizan pueden causar problemas con nuevas versiones de plugins. Así, aunque pueda ser más complejo, no dejes de actualizar tu tema.

Conclusión

Mantener actualizado un sitio hecho con WordPress puede parecer a veces un trabajo engorroso. No lo dejes para mañana. Es necesario para la seguridad y el buen funcionamiento del mismo. Así que no escatimes tiempo y recursos para asegurarte de que tu web está actualizada correctamente y así dormir más tranquilo.  😊

Imagen destacada de Wes Hicks en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

Cómo ayudar a traducir WordPress a tu idioma

Publicada en Comunidad.

Lo he dicho mil veces y no me cansaré de repetirlo: lo mejor de WordPress, aquello que lo hace especial, lo que ha conseguido encumbrarlo encima de todo es su naturaleza open source. WordPress se distribuye bajo una licencia GPL, lo cual nos da a los usuarios cuatro libertades:

  1. Libertad de ejecutar el programa para lo que queramos
  2. Libertad de estudiar cómo funciona y de cambiarlo
  3. Libertad para redistribuirlo
  4. Libertad para distribuirlo con nuestras modificaciones

Lo bonito del software libre es que permite que nazca una comunidad alrededor de él que contribuya de forma activa al proyecto: como los desarrolladores tienen acceso al código fuente, cualquiera puede proponer correcciones a los errores, mejoras, etc. ¿Pero qué pasa si no eres un desarrollador? ¿No puedes contribuir al proyecto?

Para que un paquete de software como WordPress alcance la popularidad que tiene, no basta con ser open source; esto es un requisito necesario, pero no suficiente. La clave está en su comunidad. Y la comunidad no son solo desarrolladores: la comunidad también son diseñadores; la comunidad también son usuarios que ayudan a otros usuarios en los foros de soporte; la comunidad también son los formadores y divulgadores. La comunidad somos todos, amigo.

Si eres un feliz usuario de WordPress y quieres aportar tu granito de arena al proyecto, ¿por qué no te apuntas al equipo de traducciones? Es relativamente sencillo y el equipo de traductores voluntarios que hay en español garantiza que aprenderás un montón y que lo pasarás bien.

Traducciones en WordPress

Hace ya bastante tiempo escribí una entrada para desarrolladores donde explicaba qué tenían que hacer si querían que sus plugins o temas fueran traducibles. Ese era el primer paso que necesitamos si queremos tener WordPress en nuestro idioma: el desarrollador debe escribir de tal forma que su aplicación sea traducible. ¿Cuál es el siguiente paso? Que alguien lo traduzca…

Colabora con WordPress
Puedes contribuir al proyecto WordPress en diferentes áreas: traducciones, foros de soporte, diseño…

En la página oficial del proyecto WordPress hay una sección llamada Colabora donde puedes ver las diferentes áreas en las que, como miembro de la comunidad, puedes contribuir. Entre ellas, está la sección que nos interesa hoy: las traducciones.

Cómo participar

Para poder traducir WordPress (el propio código, la web, plugins, temas, apps móviles, etc) a tu idioma, necesitarás, en primer lugar, una cuenta en WordPress.org. Si no la tienes todavía, podrás crear una desde esta página. Si ya tienes cuenta, inicia sesión.

Realizar traducciones no es sencillo. Hay que conocer bien el idioma original (normalmente el inglés) y hay que conocer aún mejor el idioma objetivo (español, catalán, euskera, gallego… el que sea). Lo primero que te recomiendo es que leas atentamente el manual de traductores, ya que allí encontrarás consejos muy buenos. Algunos de estos consejos son:

  • No traduzcas literalmente; interpreta. La forma de construir frases, el tono, el vocabulario, etc del inglés puede ser muy diferente a, por ejemplo, la forma en que lo hacemos en español. Tenlo en cuenta y no te limites a calcar estructuras.
  • Usa el nivel de (in)formalidad adecuado. Por ejemplo, las traducciones en español de España de WordPress se dirigen al usuario como «tú» en lugar de como «usted», usando fórmulas educadas pero informales.
  • Consistencia. Las traducciones son un trabajo colaborativo en el que participa un montón de gente. Lo que no puede ser es que cada persona traduzca como le dé la gana; tenemos que ser consistentes y coherentes los unos con los otros.

Equipos de traducción

Como puedes imaginar, WordPress está disponible en un montón de idiomas además del inglés: español, alemán, francés, italiano… Las traducciones a cada idioma están gestionadas por su propio equipo. En cualquier equipo de traductores de WordPress existen diferentes roles. Los más importantes son:

  • Editores general de traducciones (o GTE por sus siglas en inglés). Es el encargado de dar por buenas las traducciones que se hacen en su idioma. La única forma de convertirse en GTE de un idioma es que lo haga otro GTE de ese mismo idioma (probablemente después de haber contribuido de forma activa en ese idioma durante un buen tiempo y con traducciones de calidad).
  • Editor de traducciones de un proyecto (o PTE). Es el que da por buenas las traducciones de un proyecto concreto que se hacen en un cierto idioma. Por ejemplo, yo soy PTE en español y catalán de las traducciones de los plugins que hemos hecho en Nelio. De nuevo, la única forma de convertirte en uno es que un GTE dé el visto bueno, pero en este caso suele bastar con que lo pidas tú mismo (y seas mínimamente bueno con las traducciones) o que lo pida el propio creador del plugin o tema.
  • Contribuidor. Voluntarios que traducen los diferentes proyectos a su idioma. En estos casos, sus traducciones se consideran «sugerencias» y deben ser aprobadas por un GTE o por un PTE.

Cuando empieces a traducir serás un contribuidor más de ese idioma. ¡Qué emocionante!

Guías de traducción y glosarios

Como te decía, una de las cosas más importantes a la hora de realizar las traducciones a tu idioma es la consistencia. Si queremos que WordPress en su totalidad sea una herramienta profesional, no podemos permitir que cada uno haga lo que le dé la gana y traduzca como le plazca. Todos los traductores debemos seguir las mismas reglas y principios.

En el caso del español de España, por ejemplo, disponemos de una guía de estilo y de un glosario con los que debes haberte familiarizado antes de empezar. En la guía de estilo del español encontramos muchas «normas» importantes:

  • Los nombres de los plugins y los temas no se traducen.
  • Las traducciones no pueden realizarse usando traductores automáticos.
  • Hay que dirigirse al usuario como «tú» y no como «usted».
  • Se usan mayúsculas cuando el texto se refiere a un elemento del sistema, pero solo en la primera palabra para evitar anglicismos.
  • etc

Por otro lado, y quizás aún más interesante, es el tema del glosario. Muchas veces estamos ante un concepto o verbo que puede tener varias traducciones (todas ellas válidas). ¿Con cuál nos quedamos? Pues lo que debes hacer en dichos casos es tener a mano el glosario y ver cuál se recomienda:

Glosario para las traducciones de WordPress al Español
Glosario para las traducciones de WordPress al Español.

El proceso de traducción

Vale, ahora que ya tienes tu usario y estás familiarizado con las normas de tu idioma objetivo, ¿cómo empiezas? Pues esto es, quizás, lo más sencillo. Escoge el plugin o tema que quieras traducir (te recomiendo que empieces por uno que tú uses y que esté sin traducir o a medio traducir) y ¡a por él!

Por ejemplo, imagina que quieres contribuir a las traducciones de Yoast SEO. Pues vas a la página del plugin en WordPress.org, haces clic en la pestaña Development y le das al enlace Translate «Yoast SEO» into your language:

Cómo traducir un plugin en WordPress.org
En la página del plugin de WordPress.org hay un apartado desde el que contribuir a sus traducciones.

Esto te lleva a la página de traducciones del plugin con todos los idiomas disponibles. Esta vista es muy interesante porque puedes ver el estado de las traducciones en cada idioma. En catalán, por ejemplo, vemos que este plugin tiene varias cadenas pendientes:

Estado de las traducciones en un cierto idioma
Estado de las traducciones en un cierto idioma.

Si entramos en el idioma en cuestión, podremos empezar a traducir una de las cuatro secciones:

  • Development (trunk). Son las cadenas de texto del propio plugin que se corresponden a la versión que está actualmente en desarrollo. Puedes traducirlas, aunque ten en cuenta que es posible que cambien y que, por lo tanto, parte de tu trabajo sea en balde.
  • Development Readme (trunk). Las cadenas de texto que aparecerán en el directorio de plugins de WordPress describiendo al plugin en cuestión. Una vez más, al tratarse de la versión de desarrollo, puede ser que las cadenas cambien y hayas traducido cosas innecesarias.
  • Stable (latest release). Son las cadenas que aparecen en la versión estable del propio plugin y, por lo tanto, las que los usuarios actuales necesitan traducidas.
  • Stable Readme (latest release). Son las cadenas de texto que están describiendo ahora mismo al plugin en el directorio de plugins de WordPress.

Entra en la sección que quieras traducir (una que tenga cadenas pendientes, claro), filtra las que están sin traducir (Untranslated) y empieza a meterle caña:

Ejemplo de traducción en WordPress
WordPress.org incluye una sección en la que podemos sugerir traducciones a las diferentes cadenas de texto.

Canal de Slack

Finalmente, merece la pena comentar que los equipos de traducción suelen estar en contacto entre ellos y hablan a menudo sobre las traducciones que gestionan. En el caso de la comunidad española (de España), disponemos un canal de Slack para organizarnos y coordinarnos:

Slack de WordPress España
Slack de WordPress España.

Una de las cosas más divertidas de formar parte de una comunidad de software libre es, precisamente, relacionarte con otros usuarios. Así que no te quedes solo en casa traduciendo; pásate por el canal de Slack y habla con todos nosotros.

¿Te animas?

Ahora te toca a ti. Si eres un usuario de WordPress feliz y quieres ayudar a que más gente lo adopte y a que siga creciendo, este es un buen momento para empezar. Saca provecho a esas clases de inglés a las que tus padres te apuntaban en verano y traduce WordPress a tu idioma.

Imagen destacada de Joshua Fuller en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

Aprende a configurar objetivos en Google Analytics

Publicada en Marketing Online.

Hablar de analítica web es sinónimo de hablar de Google Analytics. Quien más, quien menos ha usado alguna vez Google Analytics, aunque sea sólo para mirar las visitas de una web.

Además, si eres asiduo lector de este nuestro blog, seguro que no te perdiste las entradas anteriores sobre Google Analytics. Ni la guía básica para principiantes, ni los datos curiosos que puedes llegar a conocer. Y seguro que recuerdas cuando te hablamos de la cuenta de demo que Google te proporciona con un caso real.

Hoy vamos a ir un paso más allá y veremos cómo definir los objetivos de tu web en Google Analytics para conocer cómo de bien (o de mal) está funcionando.

Lo primero que necesitarás es una cuenta de Google Analytics, algo muy sencillo de obtener si ya tienes una cuenta de Google. Voy a asumir que esto ya lo tienes y que además tienes instalado el código de rastreo de Google Analytics en una web. Recuerda que siempre podrás revisar este artículo sobre el tema en caso de tener problemas al respecto.

Pues bien, para acceder a definir los objetivos de tu web en Google Analytics, has de ir a administrar tu cuenta y allí encontrarás el menú Objetivos dentro de la sección Vista.

En la configuración de Google Analytics encontrarás el menú Objetivos donde puedes definirlos.
En la configuración de Google Analytics encontrarás el menú Objetivos, desde donde puedes definirlos.

Dentro de ese menú tienes los objetivos que hayas definido anteriormente. Si no has creado ninguno, aparecerá vacío. Por suerte para ti, si no quieres liarla con tu instalación puedes ver los objetivos que hay definidos en la cuenta de demo de Google Analytics que antes te comentaba. No podrás definir nuevos objetivos en esa cuenta, pero oye, por lo menos podrás ver cómo están definidos.

Objetivos definidos en la cuenta de Google Analytics  de la tienda de merchandising de Google.
Objetivos definidos en la cuenta de demo de Google Analytics de la tienda de merchandising de Google.

Para crear tus objetivos en tu herramienta de analítica web has de, primero, saber qué quieres contabilizar como un objetivo de tu web. En Google Analytics hay tres tipos de objetivos básicos que puedes definir: de destino, de duración y de páginas/pantallas por sesión.

Además, tienes un cuarto tipo de objetivo que tiene en cuenta eventos, pero que dejaré para otro día y así nos centramos en los otros, más sencillos.

Ventana de creación de un objetivo en Google Analytics.
Ventana de creación de un objetivo en Google Analytics.

Veamos cada uno de estos tres tipos de objetivos sencillos, en qué consisten y cómo podemos definirlos para que contabilicen lo que queremos.

Duración

Si lo que quieres es medir en tu web cuántas veces tus visitantes pasan más de un cierto número de segundos en tu web, con los objetivos de tipo Duración de Google Analytics podrás hacerlo.

Esto es especialmente útil en webs con muchos contenidos para conocer si realmente los visitantes pasan el tiempo necesario para leerlos o bien se van antes de que les de tiempo a hacerlo.

O también en webs que venden productos. Está estudiado que si tus visitantes pasan más tiempo en tu web, más fácil es que acaben realizando una compra en ella. Si se van rápido, tienes un problema que deberás solucionar. Con este tipo de objetivo podrás conocer esta información.

Cómo configurar en Google Analytics un objetivo para medir la duración de tus visitantes en tu web.
Cómo configurar en Google Analytics un objetivo para medir la duración de tus visitantes en tu web.

Cuando vas a crear un nuevo objetivo en Google Analytics tendrás que elegir el tipo. Aquí escoges Duración y le pones un nombre que te sirva para rápidamente identificar qué objetivo es.

En el caso de la imagen anterior, lo que queremos hacer es contabilizar aquellos visitantes que pasan más de 1 minuto en nuestra web. Por eso hemos escogido «1 minuto o más» como nombre del objetivo.

Al hacer clic en Continuar, verás la siguiente parte del formulario de creación del objetivo:

Sólo tienes que indicar el tiempo mínimo que quieres que tus visitantes pasen en tu web y Google Analytics contará cuantos de ellos cumplen este objetivo.
Sólo tienes que indicar el tiempo mínimo que quieres que tus visitantes pasen en tu web y Google Analytics contará cuantos de ellos cumplen este objetivo.

En este momento has de indicar cuál es el tiempo que quieres marcar como umbral para contar como un objetivo cumplido si el visitante llega a ese instante de tiempo visitando tu web.

En nuestro ejemplo, si un visitante pasa del minuto visitando nuestra web, Google Analytics contará eso como una consecución del objetivo. Más adelante podremos ver la tasa de conversión para ese objetivo, que nos indicará el porcentaje de visitantes sobre el total que han cumplido el objetivo de tiempo (estar más de un minuto visitando la web).

Páginas/Pantallas por sesión

Otro tipo de objetivo es el que mide el número de páginas o pantallas a las que un visitante ha accedido en una sesión. Si estamos interesados en contabilizar esto, con Google Analytics tan solo hemos de elegir este tipo de objetivo, como puedes ver en la siguiente imagen:

Cómo crear un objetivo en Google Analytics para medir las páginas por sesión de tus visitantes.
Cómo crear un objetivo en Google Analytics para medir las páginas por sesión de tus visitantes.

En nuestro caso queremos que por lo menos se visiten 4 páginas en nuestra web, así que configuramos el objetivo de tal modo que el número de páginas visitadas sea mayor que 3 (4 o más).

En el momento que tu visitante cumpla este objetivo, Google Analytics se lo apuntará y así luego podrás consultar la tasa de conversión sobre esta métrica concreta que acabas de definir.

Para medir cuantos visitantes de tu web visitan un número mínimo de páginas, utiliza el objetivo apropiado de Google Analytics.
Para medir cuántos visitantes de tu web visitan un número mínimo de páginas, utiliza el objetivo apropiado de Google Analytics.

Hasta ahora, ya ves que tanto el objetivo de Duración como el de Páginas por sesión son bastante sencillitos tanto de entender como de definir. Vamos a complicarlo un poco más…

Destino

Si lo que quieres es medir cuantos de tus visitantes acceden a una cierta página de tu web, Google Analytics ya te da esa información. Sólo has de ir a ver las visitas de esa página y listo.

No obstante, el tipo de objetivo de Destino es muy útil porque no sólo te permite saber cuántos visitantes llegan a una página concreta, sino que además puedes definir las páginas anteriores por las que han de pasar para llegar a esa página. Así podrás ver todo el embudo por el que pasan tus usuarios y contabilizar donde los pierdes. ¿En el primer paso? ¿Justo antes de llegar a la página de destino final?

Con Google Analytics puedes medir cuántos de tus visitantes llegan a visitar una cierta página (después de haber visitado otras en cierto orden). De este modo medimos la calidad de nuestros embudos de conversión.
Con Google Analytics puedes medir cuántos de tus visitantes llegan a visitar una cierta página (después de haber visitado otras en cierto orden). De este modo medimos la calidad de nuestros embudos de conversión.

Crea el objetivo, ponle un nombre y elige el tipo Destino. En el ejemplo anterior puedes ver que hemos elegido «Completar una compra» para nombrar al objetivo. Esto es así porque queremos conocer cómo está funcionando el embudo de ventas de nuestra web, desde que el usuario entra en el sistema de pagos hasta que realiza la venta.

Al pasar al siguiente paso del formulario de creación del objetivo, has de escoger cuál es la página de destino a la que el visitante acaba llegando al final. En nuestro caso ponemos /compra-completa, que es la URL parcial de la página final del embudo de ventas, a la que sólo se llega si la compra ha finalizado correctamente.

En los objetivos de Destino de Google Analytics puedes definir las páginas que forman el embudo de conversión.
En los objetivos de Destino de Google Analytics puedes definir las páginas que forman el embudo de conversión.

Luego, activamos el embudo de conversión (que como ves en la imagen anterior es opcional, y por defecto viene desactivado). Es aquí donde vamos creando los pasos necesarios para definir el embudo de ventas de nuestra web.

Como puedes ver en el ejemplo, hay 4 pasos antes de llegar a la página de destino (recuerda, la página /compra-completa). Ponemos estos pasos en orden y además de ponerles un nombre, indicamos la URL parcial de cada una de las páginas que forman el embudo de ventas.

Por tanto, nuestro embudo de ventas de ejemplo tienes los siguientes pasos:

  1. El visitante va a su carrito (que está en la página /carrito de nuestra web).
  2. Confirma que quiere pagar (salta a la página /datos-pago) e introduce los datos de pago.
  3. Continua el proceso y se le muestran los datos recogidos (en la página /revisar-info) para que confirme que son correctos.
  4. Al confirmar, pasa a la pasarela de pago (página /pasarela-pago).
  5. Cuando termina el pago, acaba en la página /compra-completa.
En la cuenta de demo de Google Analytics puedes ver el embudo de conversión de la tienda de merchandising de Google.
En la cuenta de demo de Google Analytics puedes ver el embudo de conversión de la tienda de merchandising de Google.

Para que veas que esto es útil de verdad, si vuelves a la cuenta de demo de Google Analytics, verás que tienen definido el objetivo Purchase Completed, que justamente controla los pasos por los que un comprado pasa en la tienda de merchandising de Google.

Puedes ver en la imagen anterior estos 4 pasos más la página de destino, y comprobar que son muy parecidos a lo que te he explicado en el ejemplo anterior.

La utilidad de esto viene cuando vas a ver las conversiones de los objetivos. Puedes ir al menú Gráfico del embudo de conversión, donde encontrarás el esquema del embudo que has definido. Así podrás ver de un vistazo cómo es el flujo de visitantes y dónde los pierdes:

En el apartado Conversiones de Google Analytics puedes ver el gráfico del embudo de conversión de tu web que definiste como un objetivo de destino.
En el apartado Conversiones de Google Analytics puedes ver el gráfico del embudo de conversión de tu web que definiste como un objetivo de destino. Aquí tienes un ejemplo extraído de la cuenta de demo de Google Analytics, donde se ve el embudo real de la tienda de merchandising de Google.

Resumen final

Google Analytics no sirve solo para ver el número de visitas mensual que tu página web recibe. El uso de objetivos en Google Analytics te permite controlar tus tasas de conversión e incluso saber en que punto de tu embudo de ventas tienes mayores problemas.

Si no has definido nunca un objetivo en tu web con Google Analytics, te animo a que no pierdas más tiempo y hagas la prueba. Seguro que los datos que obtienes te ayudan a seguir mejorando y a optimizar más si cabe el desempeño de tu web.

Imagen destacada de Dmitri Popov en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

Cómo gestionar WordPress desde la línea de comandos con WP-CLI

Publicada en WordPress.

A principios de mes publiqué una entrada sobre Docker en el desarrollo en local de WordPress, donde te explicaba cómo instalarlo, configurarlo y usarlo. La principal ventaja de Docker era que teníamos cada instalación de WordPress encapsulada y aislada de las demás dentro de un contenedor que, si recuerdas, arrancábamos con un sencillo docker-compose up -d. Fácil, sencillo y para todas las edades.

Ahora bien, la primera vez que ponías en marcha el contenedor Docker (o si lo eliminabas usando docker-compose down), tenías que pasar por el proceso de instalación de WordPress:

Instalar WordPress en un contenedor Docker
Instalar WordPress en un contenedor Docker.

y aunque estarás conmigo que no es excesivamente difícil de realizar (al final, es cuestión de seleccionar el idioma y poner la información del usuario de administración), es un poco aburrido tener que hacerlo desde el navegador web.

Cuando escribí esa entrada estuve pensando en que lo siguiente que tenía que contarte era, precisamente, cómo gestionar las instalaciones WordPress desde la propia línea de comandos. ¿Te imaginas qué gozada poder configurar WordPress desde el terminal, instalar temas, plugins, actualizarlos, borrarlos, gestionar usuarios…, sin salir de nuestro amado terminal? Pues eso es lo que te voy a contar hoy, amigo: cómo usar WP-CLI para gestionar instalaciones WordPress desde la consola.

Qué es WP-CLI

La línea de comandos es la mejor amiga de todo desarrollador: todo lo que puedas hacer escribiendo por pantalla y sin depender de un ratón es más eficiente. WP-CLI (WordPress Command Line Interface) trae la gestión y el mantenimiento de WordPress a nuestra línea de comandos, siendo, pues, un componente indispensable para cualquier desarrollador que quiera optimizar seriamente su tiempo. Con WP-CLI podrás actualizar plugins, configurar instalaciones multi-sitio y muchísimas cosas más sin tener que usar un navegador web.

Instalación de WP-CLI

En la popia documentación del proyecto nos explican cómo instalar WP-CLI. Existen muchas opciones para hacerlo, pero la más sencilla quizás sea descargarnos el «ejecutable» directamente:

y lanzarlo usando PHP:

Si queremos usar el comando de una forma más «amigable», podemos darle permisos de ejecución y moverlo a algún directorio que esté en nuestro $PATH:

y a partir de entonces podremos ejecutarlo así:

Por cierto, para poder usar el comando wp que acabamos de «crear» y que afecte a la instalación de WordPress que te interesa, ejecútalo desde el directorio raíz de dicho WordPress:

WP-CLI en Docker

Supongamos que estás interesado en usar WP-CLI en tu ordenador de desarrollo, para gestionar los diferentes proyectos con los que trabajas. Si seguiste mi guía de hace unas semanas, probablemente quieras usar Docker para gestionar todas tus instalaciones. Pues veamos ahora cómo podemos usar WP-CLI en Docker, de tal forma que el binario WP-CLI esté dentro del propio contenedor y podamos evitar su instalación en nuestra máquina anfitriona.

Idealmente, la propia imagen de WordPress que usamos debería incluir WP-CLI. Por desgracia, este no es el caso de momento y para conseguir tener WP-CLI en la imagen oficial de WordPress tenemos que hacer algunas triquiñuelas (tal y como puedes leer aquí, en la sección donde hablan de WP-CLI).

Mientras esperamos a que la imagen oficial de WordPress para Docker incluya WP-CLI, lo que podemos hacer es crear las instalaciones de desarrollo usando una imagen diferente. Así, en nuestro docker-compose.yml, en lugar de usar:

podemos usar:

¡Y listo! Ejecutando docker-compose up -d pasaremos a tener una imagen de WordPress con WP-CLI. El único problema que tenemos ahora es que WP-CLI está dentro del contenedor, en la «máquina huésped», y nosotros estamos usando nuestro terminal en la «máquina anfitriona».

Para ejecutar un comando de la máquina huésped desde nuestra máquina anfitriona debemos usar el comando docker-compose tal que así:

Por ejemplo, supongamos que estoy trabajando en nuestro plugin de Nelio Content, el cual tengo metido en un directorio llamado nelio-content. Si recuerdas, en el fichero docker-compose.yml habíamos definido dos servicios: uno para WordPress (al que llamamos wordpress) y el otro para la base de datos MySQL (al que llamamos mysql). Pues bien, como WP-CLI está en el contenedor de WordPress, debemos ejecutarlo tal que así:

Como esto es un poco pesado, podemos crearnos un alias:

y ejecutarlo tal que así:

Comandos en WP-CLI

Vale, ahora que ya tenemos instalado WP-CLI y sabemos cómo invocarlo, es hora de ver algunos ejemplos de lo que nos permite hacer.

Tipología de un comando

Ya lo he adelantado con los ejemplos anteriores, pero en general los comandos de WP-CLI tienen la siguiente forma:

En la documentación tienes información sobre todos los comandos que hay disponibles, sus parámetros y cómo usarlos. No olvides tenerla a mano para consultarla cuando lo necesites.

Gestión de WordPress

Instalación

Tal y como te he avanzado en la introducción, lo primero que tienes que hacer cuando inicias un nuevo contenedor Docker con WordPress es finalizar el proceso de instalación de WordPress. Con WP-CLI, esto es tan fácil como ejecutar el siguiente comando:

Actualización de WordPress

Si queremos actualizarnos a la última versión de WordPress, basta con ejecutar:

Y si queremos volver atrás, podemos forzar una cierta versión con el siguiente comando:

Gestión de plugins

Otra tarea bastante habitual a la que nos enfrentamos cuando trabajamos con WordPress es la gestión de plugins. Siguiendo el hilo de la sección anterior, después de instalar WordPress tenemos varios plugins que no nos interesan y que querremos borrar, así como activar aquellos con los que queremos trabajar. Veamos cómo hacerlo.

Listar los plugins disponibles

Si quieres ver los plugins que tienes instalados, ejecuta el subcomando list del comando plugin:

En mi caso, esto devuelve:

Borrar plugins

Para borrar plugins que no te interesen, únicamente tienes que lanzar el subcomando delete y especificar los plugins que quieres borrar:

Activar plugins

Y para activar un plugin, simplemente haz lo mismo usando el subcomando activate:

Instalar plugins

Para instalar un plugin nuevo, podemos hacerlo de la siguiente forma:

y WordPress se descarará el plugin del directorio de plugins en WordPress.org y lo activará automáticamente. Facilísimo, ¿verdad?

Gestión de temas

La gestión de temas es equivalente a la que acabamos de ver para los plugins. Podemos listar los temas que tenemos instalados, activarlos, eliminarlos, etc. Por ejemplo, para listar los temas disponibles tenemos el siguiente comando:

que nos da el siguiente resultado:

Si te fijas, el tema que tenemos activo es el twentyseventeen. ¿Puedes imaginar cómo cambiar a otro tema? Muy fácil:

¿Y si queremos actualizar los que están pendientes de actualizarse?

¡No me digas que no es una pasada!

Y ahora, ¿qué?

Esto ha sido una pequeña introducción al uso de WP-CLI. Si quieres ahondar más en las posibilidades que ofrece, en WordPress.org encontrarás toda la documentación sobre esta herramienta: cómo instalarla, cómo configurarla y cómo usarla. Te recomiendo que leas con calma la documentación y sigas descubriendo por tu cuenta el potencial de WP-CLI.

Imagen destacada de Hannah Joshua en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…