Si estás creando tu blog en WordPress, seguro te habrás dado cuenta lo poca intuitiva que es su paginación. ¿A qué me refiero con paginación? Pues, digamos que tu blog sólo muestra, por ejemplo, 10 entradas por página. Si tenemos más de 10, entonces WordPress muestra las demás en nuevas páginas. La paginación es la forma de navegar entre esas páginas.
¿Hasta ahí todo bien verdad? El problema es que los enlaces clickeables de la paginación, para pasar a la siguiente, no son muy evidentes a simple vista. ¿Puedes ubicar el enlace en la imagen de abajo?
Y no lo digo yo, lo dicen mis clientes al reclamarme por qué no aparecen sus demás entradas.
Les explico que se mostrarán más al hacer click al texto de: “Entradas más antiguas”, y sólo en ese entonces se percatan de su existencia.
Y si nuestros clientes no entienden a simple vista que hay más entradas para mostrar, mucho peor será con los usuarios de su web.
Por eso, hoy veremos cómo mejorar radicalmente la paginación por defecto de WordPress. Y como bonus, el artículo incluye una herramienta para poder generar estilos personalizados para los botones de la paginación. 😉
¿Y qué hay de la paginación del módulo Blog de Divi?
El módulo Blog de Divi trabaja con la paginación por defecto de wordpress. Así que igualmente muestra los textos de “Entradas más antiguas” y “Entradas más recientes”.
Si hay algo que resaltar con respecto a la paginación en el Modulo de Divi es que llama a la siguiente página por medio de AJAX. Es decir, carga las siguientes entradas sin necesidad de recargar toda la página. Utilizando un elegante efecto. Punto a favor de Divi.
¿Ya tienes el tema Divi con licencia?
Si estás creando tu web (y su sección de Blog) utilizando Divi, te habrás dado cuenta que es una de las mejores inversiones que se pueden hacer en WordPress.
Si es que aún no cuentas con una licencia oficial, puedes adquirir una cuenta con licencias para usos ilimitados y con el soporte de Elegant Themes, al 20% de descuento desde éste enlace a la web oficial.
Por otro lado, si sólo deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Entonces, ¿Cómo mejoramos la paginación?
Lo haremos a través del plugin: WP-PageNavi. Lo único que necesitaremos es instalar y activar éste plugin desde el repositorio de WordPress y vualá. La páginación por defecto de WordPress que sólo muestra el texto de «Entradas más antiguas» y «Entradas más recientes», será reemplazada por una mucho más intuitiva paginación numérica.
Ahora verás que la paginación numérica ya aparece en las entradas que muestra el módulo Blog.
Desde la pestaña diseño y en la sección de «Mostrar paginación Texto» (En el módulo Blog), podemos cambiar algunos estilos de la paginación numérica. Los más importantes sean quizá: la alineación (Ubicación a la izquierda, centro o derecha) el tamaño y el color de las letras (lo cual recomiendo definir).
Cómo personalizar aún más los estilos de los botones de la paginación de WordPress
A pesar que pudimos definir algunos estilos desde el módulo blog de Divi, los botones de paginación que generamos con el plugin WP PageNavi se siguen viendo muy simples:
Vamos a mejorarlos con un poco de CSS. Como bonus, creé un a herramienta que genera los estilos para la paginación. Simplemente eliges tus opciones y al darle a «generar código», tendrás los estilos listos para copiar y pegar. Y podrás lograr que se vea como ésto:
Te puede interesar:
Cómo cambiar el tamaño de las imágenes de las entradas del módulo Blog Divi
Si te está gustando el artículo, éstos otros te van a encantar:
Herramienta generadora de estilos para la paginación
El funcionamiento es simple, para generar los estilos personalizados de los botones de la paginación, simplemente seleccionen el color principal que desean utilizar y la redondez del borde. Podrán ver un preview de cómo se ve la paginación en tiempo real.
Por último le hacen click al botón “Generar código” y vualá. Código listo CSS para copiar y pegar.
Para que puedan visualizar la herramienta, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver Herramienta”.
Y automáticamente aparecerá…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además, que tenemos una comunicación más directa para compartir y resolver dudas.
Si eres usuario premium, no será necesario que ingreses tu correo para visualizar la herramienta
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
¿Qué hacer con éste código?
El último paso será, simplemente, agregar al diseño donde tengas el módulo blog, un módulo código. Y dentro agregar el código css generado por la herramienta, entre las etiquetas <style></style> de la siguiente forma:
<style>
Reemplazar éste texto por el código generado por la herramienta
</style>
Guardas los cambios y listo. Los estilos se habrán aplicado.
Tambíen puedes aplicar ésta mejora en la paginación en los geniales estilos de nuestro pack Blog
En nuestra tienda tenemos un pack de asombrosos estilos para mostrar tus entradas con el módulo Blog. El pack incluye 22 estilos y viene en plantillas json listas para soltar directamente a nuestros diseños.
Obviamente, éste método para mejorar la paginación en el módulo Blog, también funciona con las plantillas de nuestro pack. ¡Pruébalo!
Palabras Finales
Como vimos, es muy fácil mejorar significativamente la paginación del módulo Divi Blog. Y personalizarla con la herramienta generadora de códigos.
Si te gusta éste tipo de contenido, no olvides confirmar tu suscripción desde el correo que te llegó a tu bandeja de entrada.
Además, dale una ojeada a nuestra tienda, seguramente hallarás elementos para Divi que te encantarán. Saludos y volverán a escuchar de mí en el próximo artículo.
Pdta. ¿Ya te suscribiste a mi canal de Youtube?, si no lo haz hecho aún, hazlo desde aquí
0 comentarios
Trackbacks/Pingbacks