¿Qué es el efecto Parallax?

El efecto Parallax (paralaje en castellano) es un efecto por el que el fondo de la página se mueve a una velocidad diferente que el contenido. Esto nos permite añadir profundidad y movimiento al hacer scroll.

¿Cómo lo hacemos en Gutenberg?

Para conseguir este efecto en Gutenberg, vamos a usar el bloque Fondo (Cover si tienes Wordpress configurado en inglés).

En una entrada o página pulsamos el icono de añadir bloque y buscamos “Fondo”, seleccionando el bloque.

Subimos la foto que queremos usar de fondo pulsando en “Subir” (o en “Biblioteca de medios” si ya la tenemos en nuestro Wordpress).

Queremos que la imagen ocupe todo el ancho de la pantalla, por lo que en las opciones de alineación seleccionamos “Ancho Completo”.

Dentro de las opciones del bloque “Fondo” que hemos creado, activamos la opción “Fondo Fijo”. De esta forma ya

Opciones del bloque

Este bloque tiene tres opciones más para la foto que hemos usado:

1. Con el “Minimun Height of Cover” podemos especificar la altura mínima de la imagen.
2. En “Superposición” podemos seleccionar el color sólido (o degradado) que queremos superponer a la imagen.
3. En “Opacidad” seleccionamos el nivel de opacidad que le vamos a dar al color superpuesto a la imagen. 0 es que no sobreponemos nada y 100 ocultaremos completamente la imagen.

Resultado

Este es el resultado que obtenemos:

Como ves es muy sencillo y no hay que instalar nada.

La entrada ¿Cómo hacer Parallax con Gutenberg? se publicó primero en TodoWP.

Para mejorar la optimización también vamos a necesitar saber cuál de los diferentes procesos que ocurren cuando se carga una página es el que está tardando más en ejecutarse.

En este artículo os vamos a presentar una serie de herramientas para analizar el tiempo de carga de nuestra página y la mejor forma de usarlas.

Herramientas recomendadas

Hay infinidad de herramientas para medir la velocidad de carga de una página. Para no perdernos en esta infinidad de posibilidades, hemos seleccionado cuatro. Son las más conocidas y usadas, pero esto no significa que sean las mejores.

PageSpeed Insights

Es la página gratuita que ofrece Google para comprobar la velocidad de las páginas. Puedes acceder a ella desde aquí. Posiblemente es la herramienta más utilizada (por ser de Google) y en la que nos puntúa nuestra página de 0 a 100, tanto para la versión móvil como la de ordenador.

Te ofrece los tiempos de carga de diferentes aspectos, dando consejos para mejorar esos tiempos.

Lo que menos nos gusta es la clasificación de 0 a 100. No te obsesiones con ella. Recuerda que lo importante es el tiempo que tarda tu usuario en descargar tu página.

Pingdom Tools

Es una de nuestras preferidas. Información muy detallada que nos proporciona una clasificación parecida a la de PageSpeed además del tiempo de carga, peticiones realizadas y el tamaño de la página. Puedes acceder a ella desde aquí.

Nos ofrece varias ubicaciones desde las que realizar los test y quizás es la más fácil de usar (salvo PageSpeed).

GTMetrix

Igual de conocida de Pingdom, funciona de forma similar. Algunas veces hay que esperar un buen rato para obtener los resultados. Puedes acceder a ella desde aquí.

Si no te das de alta, sólo puedes hacer los test desde Canadá. Si crear una cuenta gratuita te permite indicar otras localizaciones para los test. Es nuestra herramienta preferida para medir la velocidad de nuestras páginas.

Webpagetest

Esta es quizás la herramienta más completa pero con  una web poco amigable. Es la que nos proporciona más datos para hacer un ajuste final de la optimización de nuestra página, pero quizás a un nivel muy experto. Puedes acceder a ella desde aquí.

¿Cómo medimos la velocidad de nuestra página?

No te aconsejamos usar todas las herramientas que hemos mencionado en el apartado anterior de forma simultánea. Nuestra recomendación es usar GTMetrix y Pingdom.

Si quieres realizar, como última fase, ajustes muy finos, recurrimos a Webpagetest.



Y finalmente pasamos el PageSpeed, especialmente si tenemos que mostrar los resultados a un tercero. En este caso os recomendamos guardar la primera prueba que hicisteis antes de optimizar nada para poder mostrar los resultados de la optimización, incluyendo PageSpeed.

Para ejecutar las pruebas en un entorno realista, seguimos estos pasos:

Protocolo y Dominio

Usamos el protocolo y dominio que va a usar nuestro usuario, o el que usa Google como resultado de sus búsquedas. Por ejemplo HTTPS://todowp.info.

Si usamos http://www.todowp.info, lo primero que va a ocurrir es que vamos a tener dos redirecciones para llegar a nuestra página, una de http a https y otra de www.todowp.info a todowp.info.

Localización

Como hemos vistos, GTMetrix y Pingdom te permiten seleccionar una localización desde donde hacer las pruebas. Selecciona la localización desde donde tus principales clientes acceden a tu página. Por ejemplo, en nuestro caso España y los países de habla hispana de América.

Cache

Si ya tienes en tu página un sistema de Cache o una CDN, haz la prueba dos o tres veces para que se cache en los servidores de las herramientas de prueba. En la primera prueba funcionara como cuando un usuario visita por primera vez tu página. En la segunda o tercera prueba será el escenario de un usuario que entra de forma habitual a tu página.

Analiza varias páginas

Tenemos que analizar nuestra página principal y todas aquellas que tengan más tráfico o consideres más importantes. Si sólo analizas la página principal te puedes llevar alguna sorpresa negativa.

Analiza después de cada optimización

Optimizar una página creada con Wordpress supone implementar una serie de herramientas y configuraciones. Te recomendamos que analices la velocidad cada vez que implementes en tu página uno de esos pasos. Muchas veces, al configurar un plugin o cambiar alguna opción conseguimos el efecto negativo de aumentar el tiempo de carga.



Si sólo mido después de implementar todos los cambio, puede que alguno no esté bien y, no te des cuenta o tengas que deshacer todos los cambios para volverlos a hacer uno a uno.

Ya estamos preparados para medir la velocidad de nuestra página.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada ¿Cómo medir la velocidad de tu web? se publicó primero en TodoWP.

Si nos centramos en el universo Wordpress, Gutenberg es el editor de bloques integrado en Wordpress.

Los orígenes de Gutenberg: Wordpress 5.0

El editor de Wordpress llevaba mucho tiempo sin grandes cambios y se había quedado anticuado, especialmente cuando lo comparabas con otras herramientas para la creación de Web o CMS. Es cierto que existían muchos y muy buenos maquetadores visuales, pero eran plugins de otras empresas y que en la mayoría de los casos eran complicados de usar.

La Gutenberg nace como un editor sencillo de usar pero que permita crear páginas y entradas “complejas”.

Wordpress 5.0 fue lanzado el 6 de diciembre de 2018 siendo Gutenberg la principal novedad de esta versión.

¿Qué es el editor de Bloques?

Es un editor de contenido en el que añades bloques de información, uno tras otro. Cada bloque de información puede ser de diferentes tipos: Títulos, párrafo de texto, foto, vídeo, columnas para añadir más bloques, etc.

De esta forma, añadiendo bloques de diferentes tipos crear una entrada o una página.

Un mal comienzo

Gutenberg comenzó a generar comentarios negativos antes de su estreno oficial con la versión 5.0.

Uno de los motivos para estos comentarios fue la imposición del nuevo modelo de bloques sin consultar a la comunidad por parte de Automattic.

Otros motivos de este descontentos fueron algunos errores iniciales, la necesidad de adaptar muchos themes y plugins al nuevo estándar y lo que creemos más importantes: era un cambio profundo a la forma de trabajar con Wordpress que todo el mundo conocía.

Aunque inicialmente Automattic insinuó/afirmo que el antiguo editor, ahora denominado “editor clásico” desaparecería, finalmente dio marcha atrás a medias…

El editor clásico no está en la versión 5.0 (y posteriores).

Pero te puedes instalar un plugin creado por Automattic que mantiene todas las opciones del editor clasico y puedes configurarlo como el editor por defecto. Este es uno de los plugins de Worpdress más usados…

Gutenberg no nos gusta para entradas

No usamos Gutenber para entradas de nuestro blog. ¿Por qué?

Normalmente escribimos nuestros artículos en nuestro procesador de textos favorito. Luego copiamos el texto y lo copiamos al editor clásico, añadiendo posteriormente las fotos, videos y anuncios de Adsense que queramos.

Con la versión 5.0 probamos y nos dio algún problema, por lo que seguimos usando el editor clásico.

Ahora, con la versión 5.4 hemos vuelto a probar y cuando pegamos el texto desde nuestro procesador de textos, Gutenberg configura correctamente títulos y texto, pero la costumbre nos puede y seguimos con el editor clásico.

El futuro de Wordpress

Gutenberg vino para quedarse y ya no es el futuro de Wordpress, es el presente.

Nosotros no usamos Gutenberg durante las primeras versiones. Nos parecía engorroso para lo poco que ofrecía y seguíamos haciendo nuestras páginas con Elementor y nuestras entradas con el editor clásico más una capa de Elementor.

Ahora hemos cambiado de idea y empezamos a usar Gutenberg.

Pero de una forma limitada. ¿Por qué?

Porque Gutenberg ha alcanzado el nivel de madurez suficiente para crear páginas interesantes de una forma sencilla. Y al compararlo con maquetadores visuales como el mencionado Elementor, las páginas creadas con Gutenberg a nivel código son mucho más limpias y su carga es más rápida.

Para, has dicho de forma limitada, ¿qué quieres decir?

Sólo lo usamos en páginas sencillas, si queremos desarrollar una página un poco más elaborada, Gutenberg se nos queda corto.

Siempre nos ha gustado usar diferentes herramientas y usarlas sólo para lo que creemos que nos aportan más valor. La herramienta maravillosa que lo hace todo y bien es poco habitual. Por eso tenemos varias herramientas y las usamos en los casos donde más valor nos aportan.

• Editor tradicional: para crear rápidamente nuestras entradas, aunque estos es por costumbre y no por necesidad.
• Elementor: para páginas complejas y dar una capa de personalización a nuestras entradas.
• Gutenberg: páginas sencillas que no necesitan mucho desarrollo.

Otro de los motivos para usarlo es, como mencionábamos antes, que Gutenberg es el presente de Wordpress y la evolución de la plataforma se hará en torno al editor de bloques.

La única pregunta que queda abierta es si Gutenberg conseguirá superar y sustituir a los actuales maquetadores visuales tipo Elementor o Divi. A día de hoy, no. En uno o dos años lo vemos improbable, aunque tenemos que ver la evolución de Gutenberg. En un plazo más largo, no lo sabemos.

El tiempo lo dirá.

La entrada ¿Qué es Gutenberg? se publicó primero en TodoWP.

¿Qué es Google Search Console?

Es un conjunto de herramientas gratuitas de Google que nos permite conocer cómo ve Google nuestra página, nos avisa si hay algo que no le gusta a Google y nos da estadísticas de la gente que accede a nuestra página a través del buscador de Google y las queries relacionadas con nuestra página, todo GRATIS.

Imprescindible para mejorar nuestro posicionamiento SEO y aumentar el número de nuestras visitas.

¿Cómo vinculo mi página en Google Search Console?

Lo primero que necesitas es una cuenta de Google. La cuenta de tu Gmail nos vale.

Entramos en Google Search Console.

Si ya tenemos alguna página vinculada a este usuario, nos aparecerán las estadísticas del sitio. Para añadir una nueva página desplegamos en la dirección de la página.

Y pulsamos “añadir propiedad”.

Nos aparece esta pantalla.

Si es la primera vez que entramos a Google Search Console, nos dirigirá directamente a esta pantalla.

Seleccionamos “Prefijo de la URL” (1) y ponemos la url de nuestra página (incluyendo https:// si es una página segura o http:// si no lo es) (2). Pulsamos en “Continuar”. Si queremos vincular todo el dominio seleccionamos “Dominio”, pero el proceso de verificación es un poco más engorroso teniendo que hacerlos a través de nuestro proveedor del dominio.

Google nos pide que le demostremos que la página que le hemos indicado es nuestra. Hay varias formas de hacerlo. Si has configurado ya Google Analytics puedes seleccionar esa opción. Nosotros vamos a hacerlo usando el fichero que nos propone Google.

Descargamos el fichero (1) y lo subimos al directorio raíz de nuestra página.

Es importante no borrar este fichero una vez que se ha verificado la propiedad de la página para asegurarnos que no tenemos problemas cada vez que Google compruebe nuestra propiedad.

Una vez que lo hemos subido pulsamos en “Verificar” (2).

Nos aparece durante unos segundos una pantalla donde se comprueba la propiedad.

Una vez que se ha verificado con éxito, nos aparece esta pantalla.

Ya hemos vinculado nuestra página con el Google Search Console. Pulsamos en “IR A LA PROPIEDAD”.

Todas las estadísticas aparecen vacías. ¿HEMOS HECHO ALGO MAL? Nada, todo está bien. Google tarda unos días en empezar a recopilar datos. Paciencia.

¿Tengo que hacer algo más?

Una vez vinculada nuestra página, es interesante que le indiques a Google donde se encuentra tu sitemap.

¿Qué es un sitemap? Es el listado de las páginas de nuestra web y como sugerimos a los buscadores que queremos que se indexen. Google (y otros buscadores) lo leerán nuestro sitemap y decidirán si siguen nuestra “sugerencia” o no.

Vamos al plugin con el que hemos generado nuestro Sitemap y copiamos la dirección. En nuestro caso utilizamos Yoast.

En Google Search Console seleccionamos la opción de “Sitemaps” y indicamos la dirección en “Añadir Sitemap”. Como puedes ver, el dominio de nuestra página ya aparece por defecto. Pulsamos “Enviar”.

Nos aparece una página confirmando que el Sitemap es correcto y nos aparecerá en el listado de Sitemaps enviados.

¡Ya tenemos nuestra página en Google Search Console!

La entrada Vincular una página a Google Search Console se publicó primero en TodoWP.

¿Qué es un sticky menú?

Un menú sticky o pegajoso es un menú (u otro elemento de la página) que permanece fijo en una parte de la página, aunque nos desplacemos hacía abajo (o hacía arriba). Es como si esa zona permaneciera pegada, aunque el resto se muevo, de ahí su nombre.

¿Cuándo tenemos que usarlo?

Usaremos este recurso cuando queramos que un elemento de nuestra página siempre este visible para nuestro usuario, independientemente de la zona de la página en la que se encuentre.

Normalmente vamos a querer mostrar nuestro menú principal, botones para compartir en las redes sociales a algún tipo de Call to Action. Nosotros no solemos crear menús pegajosos. Preferimos usarlo sólo para los botones de redes sociales o CtA.

En nuestra página lo usamos para mantener fijos los botones para compartir en redes sociales.

Es muy importante donde fijamos el menú. Tenemos que buscar una zona que no interfiera con la lectura de la página cuando el usuario se mueve por ella.

¿Cómo creamos un menú pegajoso?

Para implementar un sticky menú en nuestra página necesitamos código, bien JavaScript o CSS. Pero tenemos otra forma de implementarlo sin necesidad de escribir ni una línea de código y de una forma muy sencilla: Elementor Pro.

La mala noticia: esta característica sólo esta disponible en la versión de pago de Elementor.

Implementando un Sticky menú con Elementor

Seleccionamos el objeto de Elementor que queremos dejar fijo, por ejemplo, un Nav Menu.

Nos vamos a la sección de Avanzado, desplegamos las opciones de Efectos de Movimiento y en el desplegable Sticky seleccionamos si queremos que el elemento se quede fijo arriba o abajo en la página.

Ya lo tenemos. Si nos desplazamos por la página, el menú queda fijo.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada Cómo crear un Sticky menú con Elementor se publicó primero en TodoWP.

Elementor es uno de los maquetadores visuales con más éxito actualmente y con mayor crecimiento durante los últimos dos años. Nosotros usamos la combinación del tema GeneratePress Pro y Elementor Pro para crear nuestras páginas con Wordpress.

Versiones de Elementor

Elementor tiene dos versiones o partes. La primera parte es la básica que instala en tu página las partes básicas de Elementor. Es gratuita, y la puedes instalar desde el repositorio de plugins.

La segunda parte es la denominada Elementor Pro. Este segundo plugin añadirá las funcionalidades más potentes del maquetador y un conjunto de widgets adicionales.

Como podéis imaginar, esta segunda parte es de pago.

Instalación

Lo instalamos desde el repositorio de plugins de Wordpress:

1. En el menú lateral pulsamos “Añadir nuevo”.
2. Ponemos Elementor en la caja de búsqueda.
3. Pulsamos en “Instalar ahora” y luego en “Activar”.

Opciones de configuración deElementor

Tras activar Elementor, nos aparece una nueva entrada en el menú lateral con varias opciones. Vamos a repasarlas todas.

Ajustes

En la primera pestaña, “General”, podemos configurar:

1. Tipos de contenido: Que componente de Wordpress podemos editar con Elementor. Por defecto señalamos entradas y páginas. Esto no significa que tengamos que crear todas las páginas o entradas que creemos con Elementor, tan solo nos da la opción de poder crearlas con el maquetador.
2. Desactivar colores por defecto: La marcamos (importante) para que Elementor use los colores definidos en nuestro tema. De esta forma evitamos añadir código y elementos innecesarios.
3. Desactivar fuentes por defecto: La marcamos (importante) para que Elementor use las fuentes definidas en nuestro tema. De esta forma evitamos añadir código y elementos innecesarios.
4. Seguimiento de datos de uso: Si marcamos esta opción, enviamos datos de nuestro uso de forma anónima a Elementor para ayudarles a mejorar el plugin. Tu decides lo que haces con esta opción.

En la siguiente pestaña, “Estilo” configuramos:

1. Fuentes genéricas predeterminadas: La fuente que cargaremos si las predefinidas no funcionan.
2. Ancho del contenido: Ancho por defecto de la página. Es importante que lo ajustes a la misma cifra que has usado en tu tema.
3. Espacio entre widgets: Espacio por defecto entre los widgets de Elementor. Lo dejamos a 20 pixels. Podemos modificarlo de forma individual cuando maquetamos páginas o entradas.
4. Extender hasta ajustar sección: El ancho de las secciones se ajustarán al elemento CSS indicado aquí. Por defecto dejamos Body.
5. Selector de título de página: Para ocultar el título de página necesitamos indicar el selector. Por defecto dejamos el que nos muestra Elementor. Si tu tema usa otro, tienes que indicarlo aquí.
6. Punto de ruptura en tableta: Por debajo de los pixeles indicados de ancho, la página se configurará como vista en tableta.
7. Punto de ruptura en móvil: Por debajo de los pixeles indicados de ancho, la página se configurará como vista en tableta.
8. Caja de luz de imagen: Si marcamos esta opción, las imágenes que se abran a través de un link se abrirán en una caja de luz.

En la última pestaña, “Avanzado” tenemos estas opciones:

1. Métodos de impresión de CSS: Donde guardamos el código CSS generado. Lo recomendable es en un fichero externo.
2. Cambio del método de carga del editor: Por defecto de dejamos en Desactivar, pero lo podemos activar cuando no nos carga el editor de Elementor.
3. Controladores de edición: Activando esta opción, simplemente con pasar el cursor del ratón por un widget se desplegarán las opciones de ese widget. Tu decides cual es la opción más cómoda para ti.
4. Activar subidas de SVG: Si activamos esta opción, Elementor nos permitirá subir ficheros tipo SVG(http://multimedia.uoc.edu/blogs/labeines/es/introduccio/format-svg-i-exportacio-des-de-diferents-programes/). Recomendamos no activarla por motivos de seguridad.
5. Cargar compatibilidad con Font Awesome 4: Si usas este tipo de iconos, activa esta opción.

Por último, pulsamos en “Guardar cambios” para no perder los cambios que hemos hecho.

Gestor de perfiles

En esta opción, definimos que perfiles de Wordpress no tienen acceso al editor de Elementor. Para quitar el acceso, seleccionamos el perfil, desplegamos y marcamos la opción “Sin acceso al editor”. Pulsamos en “Guardar cambios”.

Herramientas

En la pestaña “General” tenemos estas opciones:

1. Regenerar CSS: Nos permite actualizar el código CSS generado por Elementor.
2. Sincronizar la biblioteca: Esta opción no la hemos usado nunca. Actualiza la biblioteca de elementos y plantillas de Elementor. Esto se realiza automáticamente todos los días, por lo que no usamos esta opción.
3. Modo seguro: Es una opción muy interesante que sólo usaremos si tenemos problemas. Cuando la activamos, desactiva los plugins y el tema de la página, cargando sólo Elementor, para poder analizar mejor el error.
4. Barra de depuración: Activa una opción en la barra de administración de Wordpress con información de los archivos que se están cargando para darnos más información en caso de problemas. Como la opción anterior, sólo la activamos cuando tengamos problemas y las desactivamos una vez solucionados estos.

La opción de “Reemplazar URL” nos permite cambiar el dominio de la página (o pasar de http a https). Preferimos otras formas de hacer este cambio. Si la usas, haz una copia de seguridad primero.

En la pestaña de “Control de versiones” encontramos dos opciones muy interesantes.

“Revertir versiones” nos permite, después de actualizar Elementor, volver a una versión anterior. Es muy interesante cuando detectamos problemas graves después de una actualización. Seleccionamos la versión que queremos instalar y pulsamos el botón Reinstalar VX.X.X (donde X.X.X es el número de versión que hemos seleccionado). Muy importante: haz copia de seguridad antes por si algo sale mal.

La otra opción es “Pruebas beta” que nos permite actualizar a versiones futuras de Elementor que están en pruebas. Desaconsejamos completamente usar esta opción para una página en producción. Sin embargo, es muy recomendable para probar futuros desarrollos de Elementor en una copia de pruebas de nuestra página.

La última pestaña de esta sección es la “Modo de mantenimiento.

Como indica el nombre, es para poner nuestra página web en modo de mantenimiento avisando a nuestros posibles usuarios. Tenemos que indicar:

1. Si estamos en modo “próximamente” o modo “mantenimiento”. El primer caso es para páginas que estamos desarrollando y tendremos terminadas en el futuro mientras el segundo modo es para cambios en la página (o actualizaciones) estando esta nuevamente operativa en un corto espacio de tiempo (horas o un día).
2. Quién puede acceder: Indicamos los perfiles de usuario de Wordpress que pueden acceder al backend de la página mientras esta en este modo.
3. Escoger plantilla: Seleccionamos la plantilla de Elementor que queremos mostrar para informar a nuestros usuarios del estado de la página.

Información del Sistema

Nos muestra la configuración del servidor y del Wordpress de nuestra página. Es una opción muy interesante si tenemos problemas con Elementor, ya que muchos de los problemas habituales están relacionados con alguna característica que necesita Elementor y no cumple nuestra página (por ejemplo, la versión de PHP o el límite de memoria).

Primeros Pasos

Nos muestra un video de introducción a Elementor.

Obtener ayuda

Nos lleva a la página de ayuda de Elementor.

Fuentes Personalizadas

Opción sólo disponible para Elementor Pro.

Ya tenemos preparado Elementor para crear nuestra primera página. Sencillo, ¿verdad?

La entrada Instalar y Configurar Elementor se publicó primero en TodoWP.

A pesar de las constantes actualizaciones de Elementor, uno de los widgets que hace tiempo que no actualizan es el de Posts. Este widget nos permite mostrar de diferentes formas las entradas de nuestro blog o página. En nuestra opinión, es de los peores widgets que tiene actualmente Elementor Pro, por las escasa opciones de visualización que nos proporciona.

Instalamos Blogmentor

Antes de instalarlo es importante recordar que este plugin realmente es un nuevo widget para Elementor, por lo que antes de instalar Blogmentor, tenemos que tener instalado Elementor.

Para instalar Blogmentor, acudimos al repositorio de Plugins y lo instalamos como cualquier otro plugin:

1. En el menú lateral pulsamos en “Añadir nuevo” dentro del menú Plugins.
2. Buscamos Blogmentor en el buscador.
3. En el plugin pulsamos “Instalar ahora” y luego “Activar”.

Ya tenemos un nuevo widget para nuestro Elementor.

¿Cómo usamos Blogmentor?

Como hemos comentado, Blogmentor es un widget para Elementor. Para usarlo, editamos una página con Elementor y añadimos este widget.

La mayoría de las opciones son las habituales de Elementor.

Las opciones principales de Blogmentor son estas.

La principal es “Layouts Type”. Define cómo vamos a presentar nuestras entradas en el widget. Tenemos tres opciones.

Grid: Es el tipo estándar de presentar entradas, en formato cuadricula.

Masonry: Es una variación de la anterior donde usamos una presentación de cuadricula “desordenada”.

Metro: la que más nos gusta, la primera entrada aparece en gran tamaño (normalmente la última entrada de nuestro blog), dos más en paralelo a la principal y el resto en formato grid.

Con cada una de estas opciones podemos seleccionar dos estilos.

En “Image Size” seleccionamos el tamaño de la imagen que aparece en cada ficha de las entradas.

“Show Image Effect” habilita la opción de crear un efecto en la imagen cuando se pasa el ratón sobre ella. Podemos definir el efecto mediante “Image Hover Effect”.

El resto de opciones son las habituales de Elementor y las que nos podemos encontrar en el widget Posts de Elementor Pro.

Puntos a mejorar

Es un plugin recién publicado, por lo que sus desarrolladores tienen recorrido para subsanar defectos y mejorar o añadir nuevas funcionalidades.

Hemos detectado algunos problemas:

• Algunas veces se pierden opciones de configuración cuando seleccionamos los layouts Masonry y Metro.
• No centra bien las imágenes en Metro.
• En un móvil, no hay diferencias en la presentación entre los tres layouts.

Conclusiones

Blogmentor es un widget muy interesante, que aporta funcionalidades que la versión Pro de Elementor no dispone a día de hoy.

Es un plugin recién salido, por lo que no recomendamos usarlo en páginas que estén en producción, ya que tiene muy pocas instalaciones activas por lo que pueden aparecer errores que los desarrolladores no hayan detectado (como los que hemos mencionado).

Pero, aunque de momento no recomendamos instalarlo, si vamos a hacer un seguimiento de la evolución del plugin para ver que nuevas presentaciones de nuestras entradas añaden y lo vamos a probar en profundidad en nuestras páginas de pruebas. Os seguiremos informando.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada Muestra las entradas de tu Blog con Blogmentor se publicó primero en TodoWP.

En está entrada vamos a ver como comprobar como tenemos definidos los permisos de las carpetas y ficheros de nuestra instalación de Wordpress y cómo cambiarlos de una forma sencilla.

¿Qué son los permisos en los ficheros de Wordpress?

Los sistemas de gestión de archivos modernos permiten especificar que usuarios pueden acceder a un archivo (o carpeta) y que acciones pueden realizar sobre esos ficheros. De forma genérica, es lo que se conoce como los derechos o permisos de acceso a un fichero.

Dependiendo del sistema operativo se gestionarán y asignarán estos permisos de forma diferente. Wordpress casi siempre se instala sobre un sistema operativo UNIX o un derivado de este.

Estos sistemas operativos asignan tres derechos básicos:

• Lectura del archivo, especificado con una r (read).
• Escritura del archivo, especificado por una w (write)
• Ejecución del archivo (si contiene código ejecutable), especificado por una x.

Estos permisos se agrupan en una serie de 10 caracteres y estos 10 caracteres se convierten en una serie de 4 dígitos tipo 0755 o 0644 que es lo que finalmente implementamos.

Si quieres profundizar en la notación usada por UNIX para gestionar la seguridad, os recomendamos esta entrada de la Wikipedia.

¿Qué permisos tengo que usar en mi Wordpress?

No hay una definición fija de los permisos que tenemos que usar para nuestra instalación de Wordpress. Estos son los más estándar.

• Los niveles superiores de nuestra instalación (la raíz del sitio y todos los ficheros que estén ahí situados) tienen que estar configurados como 0644.
• Las tres carpetas wp-admin, wp-content y wp-includes tienen que estar configuradas como 0755.
• Las carpetas uploads y plugins tienen que estar configuradas como 0755.
• Si quieres modificar el tema que estas usando desde la página de administración de wordpress, tienes que configurar el directorio del tema 0666, aunque no lo recomendamos.

Dependiendo de nuestra instalación, podemos endurecer nuestra política de permisos o por una necesidad específica, aumentar los usuarios que pueden leer o escribir en ciertos ficheros o carpetas. Pero si haces algún cambio sobre el estándar que os recomendamos, si no tienes los suficientes conocimientos, consulta con un experto.

¿Cómo comprueba como tengo configurados los permisos en mi instalación de Wordpress?

Tenemos varias formas de comprobar los permisos de nuestra instalación. Las dos que nos parecen más sencillas son mediante un cliente FTP o mediante un plugin de seguridad que tenga esta opción.

Comprobar los permisos mediante FTP

Hay muchos clientes FTP, muchos de ellos gratuitos. Nosotros usamos FileZilla.

Nos conectamos a nuestro servidor FTP con nuestro usuario y password y pulsamos “Conexión rápida”.

Navegamos a nuestro directorio donde tenemos instalado Wordpress (1).

En la ventana donde aparecen todos los ficheros y carpetas de nuestra instalación de Wordpress nos aparecen los permisos en la columna “Permisos”.

Comprobar los permisos mediante Ithemes Security

Ithemes Security tiene una opción que nos permite visualizar de una forma muy sencilla los permisos de nuestra instalación de Wordpress.

En el menú lateral seleccionamos “Seguridad” y luego “Ajustes”.

En la opción de “Permisos de Archivos” pulsamos en “Mostrar los detalles”.

Se despliega la ventana de esta opción y pulsamos en “Cargar los detalles de los permisos de archivos”.

Nos aparece la lista de los principales permisos con una comprobación de si estas correctamente configurados y un valor sugerido.

¿Cómo cambio los permisos?

La forma más sencilla de cambiar los permisos de nuestra instalación es mediante un cliente FTP.

Volvemos a usar FileZilla.

Nos conectamos a nuestro servidor FTP.

En la ventana con el listado de los ficheros de nuestro Wordpress, pulsamos botón derecho sobre el archivo o carpeta al que queremos modificar los permisos. Pulsamos la opción “Permisos de archivo”.

En la ventana que nos aparece tenemos que:

1. Indicar los nuevos permisos. Lo más sencillo es hacerlo en formato numérico.
2. Indicar si al aplicarlos a una carpeta, si queremos aplicarlos a los subdirectorios dentro de la carpeta.
3. Pulsamos “Aceptar” para finalizar el cambio.

Sencillo, ya tenemos los permisos de nuestra instalación cambiados.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada Cómo cambiar los permisos de los archivos de Wordpress se publicó primero en TodoWP.

¿Cuándo usamos una copia de seguridad?

Lo primero que te queremos comentar: restaurar una copia de seguridad es la última opción que tenemos para intentar recuperar una instalación Wordpress. Si tienes tiempo y conocimientos (o alguien con conocimientos de Wordpress que te pueda ayudar), prueba todas las opciones antes de restaurar tu copia.

¿Por qué no usar el backup que tengo directamente sin intentar nada más?

Principalmente, porque desde que hiciste la copia de seguridad que vas a recuperar hasta ahora puedes haber cambiado algo en la página, o tus usuarios haber añadido algo (por ejemplo, comentarios en un blog) y eso lo vas a perder.

Copias de seguridad con UpdraftPlus

UpdraftPlus es el plugin de copias de seguridad que usamos.

Ya vimos cómo instalar Updraftplus y cómo programar copias de seguridad en Wordpress.

Ahora, vamos a recuperar una de esas copias.

Te aconsejemos que lo hagas alguna vez con una copia local de tu página. De esa forma puedes probar que todo va bien y estar “entrenado” si alguna vez tienes un problema y tienes que usar la copia de seguridad.

Tenemos dos escenarios:

• Puedo acceder a la página de administración de mi Wordpress.
• No hay forma de acceder a mi Wordpress.

El primero, como puedes imaginar, es el escenario más sencillo y que nos dará menos problemas. Normalmente usaremos el backup en este escenario cuando hemos borrado alguna página o entrada y no la podemos recuperar. También podemos necesitar restaurar la copia de seguridad si hemos actualizado un plugin y algo no funciona (y no disponemos de la versión anterior del plugin).

El segundo caso es catastrófico, pero nuestro backup nos puede sacar de un gran apuro.

Restaurando el backup desde la página

Para restaurar una copia realizada con UpdraftPlus, primero entramos en Ajustes-> Respaldos UpdraftPlus.

En la pestaña de Copia de seguridad/Restaurar, en la sección “Respaldos existentes” tenemos el listado de las copias de seguridad disponibles.

Las tenemos de dos tipos, de archivos (1) y de base de datos (2).

Depende de que queramos recuperar, usaremos una, otra o las dos.

Pulsamos en el botón “Restaurar” de la copia de seguridad que queremos usar.

Si no encontramos ninguna copia de seguridad y sabemos que las tenemos, podemos subir manualmente los archivos (con la opción “Subir (upload) archivos del respaldo”) o conectarnos a la unidad en la nube que estemos usando con “Re-escaneado almacenamiento remoto”.

Tras pulsar el botón “Restaurar”, os aparece una ventana donde tenemos que seleccionar los componentes que queremos restaurar:

• Plugins: Nos restaura todo el directorio donde se guardan los plugins instalados
• Temas: Nos restaura todo el directorio donde se guardan los temas instalados.
• Ficheros subidos: Nos restaura todo el directorio donde se guardan los ficheros subidos (fotos, videos, etc.).
• Otros: Restaura otros elementos de nuestra instalación.
• Base de datos: Nos restaura la base de datos.

Pulsamos “Siguiente”.

Si tenemos las copias almacenadas en la nube (por ejemplo, Google Drive), las baja al servidor de nuestra página.

Una vez finalizada la bajada de los archivos, pulsamos en “Restaurar”.

UpdraftPlus comenzará a realizar una serie de pasos. Dependiendo del tamaño de la página y de la capacidad de nuestro hosting variará el tiempo necesario para el proceso de restauración.

Una vez terminado el proceso, nos informará del éxito de este. Pulsaremos en “Volver a la configuración de UpdraftPlus” para volver a la ventana de configuración del plugin.

Una vez terminado el proceso, es necesario comprobar que todo lo restaurado funciona correctamente.

En la ventana de configuración de UpdraftPlus nos informa que ha guardado copia de los archivos que hemos sustituido al restaurar el backup. Cuándo estemos seguros de que todo funciona bien, es aconsejable borrarlos pulsando en “Borrar directorios antiguos”.

Restaurando una copia de seguridad desde cero

Como hemos comentado, este es el peor escenario. No conseguimos entrar en nuestra página ni en la página de administración de Wordpress.

Después de haberlo intentado todo, nos decidimos a restaurar la copia.

UpdraftPlus en su versión gratuita no hace respaldo de los ficheros de la instalación de Wordpress. ¿Qué significa esto? Que tenemos que instalar primero Wordpress.

Lo primero que hacemos es mediante FTP hacer una copia de los ficheros actuales.

Después podemos hacer dos cosas:

• Recuperar la página copiando ficheros mediante FTP.
• Volviendo a hacer una instalación de Wordpress nueva, instalando y configurando el plugin de UpdraftPlus y restaurando todos los ficheros.

Cualquiera de estas dos opciones hay que realizarlas con mucha precaución y si es posible por alguien con conocimientos avanzados de Wordpress. Si se realiza mal, puedes perder la página o mucha información.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada Restaurar una copia de seguridad con UpdraftPlus se publicó primero en TodoWP.

Pero siempre es mejor tener dos copias, la de tu hosting y la tuya. De esa forma minimizamos la probabilidad de que algo no funcione y no tengamos una copia de seguridad cuando más la necesitamos (o la que tengamos sea muy antigua y perdamos datos).

¿Qué es una copia de seguridad?

Una copia de seguridad (o backup en inglés) es una copia de todos los archivos y datos que hay en tu web, realizada de tal forma que cuando restaures estas copias todo vuelva a funcionar de la misma forma que funcionaba en el momento que se hizo esa copia.

¿Por qué tengo que tener una copia de seguridad de mi web?

La respuesta es sencilla: la copia de seguridad es lo que te asegura que, si algo sale mal, no vas a perder tu página o tus datos. Y todos sabemos que siempre algo sale mal y, normalmente, en el peor momento. Pero tenemos que tener un backup bien hecho.

También es importante que hagas copias cada pocas horas o diarias para, en caso de tener que usarla, perder la menor cantidad de datos posible.

También es muy importante donde guardas esa copia. De nada sirve tener un backup y guardarlo en el servidor de nuestra web si no podemos acceder a ese servidor.

Por eso es muy importante guardarla en otro dispositivo, por ejemplo algún servicio de almacenamiento en la nube tipo Drive o OneDrive.

¿Cómo hago una copia de seguridad en Wordpress?

Cómo casi siempre en Wordpress, la respuesta es: usamos un plugin.

Hay muchos plugins para realizar copias de seguridad o plugins que incluyen la opción de copia de seguridad (como JetPack o Ithemes Security).

Nosotros usamos la versión gratuita de UpdraftPlus. Tiene las funcionalidades que necesitamos, funciona bien y la integración con soluciones de almacenamiento en la nube (como Google Drive o Microsoft Onedrive) es muy sencilla de configurar. Vamos a ver cómo instalar Updraftplus.

Updraft Plus: Instalación

Primero buscamos el plugin en el repositorio oficial de Wordpress. Pulsamos Plugin->Añadir Nuevo (1) y buscamos Updraft en la caja de búsqueda (2).

Pulsamos en Instalar ahora (3) y en Activar cuando se termina de instalar el plugin.

Configuración

Para configurar el plugin UpdraftPlus seleccionamos “Respaldos UpdraftPlus” dentro del menú ajustes.

Nos aparece información de:

• La próxima backup programada (2). Como acabamos de instalarlo no tenemos ninguna programación
• Respaldar ahora (3): Con esta opción podemos hacer una copia manual.
• Todas las copias disponibles (4).

Seleccionamos la pestaña Ajustes (1).

La primero opción es “programación de copia de seguridad” (2): en el primer desplegable indicamos cada cuanto vamos a hacer la copia de seguridad de los ficheros de nuestra web y en el segundo desplegable indicamos cuánto tiempo la conservamos. La configuración que solemos usar es una copia diaria y conservamos 14 copias.

Para web con muchas modificaciones en páginas (o productos si es una tienda online) sería recomendable varias copias al día.

Si hacemos una copia al día y conservamos 14 nos aseguramos poder recuperar una copia de hace 14 días.

Hay que tener en cuenta que las copias de seguridad consumen recursos en la web cuando se realizan y espacio donde las almacenemos.

La segunda opción que encontramos es “horario de copia de seguridad de base de datos” (3): indicamos en el primer desplegable cada cuanto vamos a hacer la copia de seguridad de la base de datos de nuestra web y en el segundo el tiempo que la conservamos. En esta opción usamos cada 8 horas y 42 copias (14 días).

Al igual que en la opción anterior, depende del movimiento y tipo de web, puede ser necesario hacer copias de seguridad de la base de datos cada menos tiempo y tener en cuenta los recursos y espacio consumidos.

La siguiente opción es “seleccione su almacenamiento externo” (4): Es muy importante guardar los ficheros con nuestras copias de seguridad en un lugar seguro fuera de donde guardamos nuestra web. Lo más cómodo es usar un servicio de almacenamiento en la nube.

Si no seleccionamos ninguna opción, las copias se guardarán en el servidor donde tenemos nuestra página.

En nuestro caso usamos Google Drive como ejemplo.

Al seleccionar Google Drive, nos aparece el directorio donde se guardarán las copias (1) así como un link al que tendremos que pulsar después de grabar los cambios en la configuración (2). El directorio donde se guardan las copias en la versión gratuita es “Updraftplus” y no lo podemos cambiar.

En la opción de “incluir ficheros de respaldo” dejamos marcados todos los tipos de fichero y usamos las excepciones que vienen por defecto.

• Plugins: Todos los plugins que tenemos instalados.
• Temas: Todos los temas que tenemos instalados.
• Directorio /Uploads con las excepciones creadas por defecto.
• Directorio /WP-Content con las excepciones creadas por defecto.

Frase de cifrado de la base de datos: Es una opción de la versión de pago que nos permite cifrar la copia de la base de datos.

Correo Electrónico (1): Si queremos que nos mande un resumen del backup al correo definido en la instalación de Wordpress. No lo marcamos ya que nos llenará nuestro buzón con numerosos mails que nunca leeremos. Cada cierto tiempo si es interesante asegurarnos de que se actualizan las copias en el destino que hemos definido.

Ajustes para expertos: una serie de ajustes adicionales que no modificaremos (2).

Por último, pulsamos en Guardar (3).

Muy Importante: La versión gratuita no permite programar la hora en la que se realizan las copias de seguridad, por lo que se programan en el momento que le damos a guardar. Si un día madrugas mucho o trasnochas, es un buen momento para dar a Guardar en la pestaña de ajustes y así programar los backup en horas donde sepamos que la página tiene menos tráfico.

Después de guardar, nos aparece una ventana que nos indica que nos tenemos que conectar con la cuenta de Google Drive donde queremos guardar las copias de seguridad. Pulsamos el enlace.

Nos abre una ventana donde indicaremos que cuenta de Google queremos usar.

Google nos solicita permiso para Updraft Plus. Pulsamos Permitir.

En la siguiente ventana, Updraft nos informa donde guardara las copias y sus políticas. Pulsamos en Complete Setup.

Ya tenemos nuestras copias de seguridad configuradas.

Si nos vamos a la pestaña “Copia de seguridad/Restaurar” podemos comprobar la fecha y hora en la que se hará la próxima copia de seguridad automática.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

La entrada Cómo instalar UpdraftPlus versión 2019 se publicó primero en TodoWP.