Cómo personalizar la paginación en el editor de bloques de WordPress

La paginación es un componente crítico en el diseño web, particularmente para sitios web que presentan contenido de formato largo, como blogs o listados de productos. La paginación eficaz garantiza una experiencia de navegación fluida, mejorando tanto la satisfacción del usuario como la optimización de los motores de búsqueda (SEO).

La función de paginación en el editor de bloques de WordPress, comúnmente conocida como Gutenberg, es parte del bloque Query Loop, no un bloque independiente. El bloque Query Loop le permite mostrar publicaciones o crear plantillas personalizadas en un tema de bloque.

El bloque de paginación en Query Loop de Gutenberg es bastante limitado cuando se trata de personalización lista para usar. Es posible que su diseño predeterminado no siempre coincida con las necesidades estéticas de su sitio, pero puede mejorar su apariencia y funcionalidad utilizando CSS personalizado.

Este artículo lo guiará a través de los pasos para modificar y optimizar la paginación dentro del editor Gutenberg agregando CSS personalizado, lo que le permitirá mejorar la navegación de su sitio y la experiencia general del usuario.

Pasos para personalizar la paginación en el editor de bloques de WordPress

Paso 1: crear o editar una página o plantilla

Cree un nuevo tipo de publicación (página/publicación) o seleccione la existente. Si está utilizando un tema de bloque, también puede agregar una nueva plantilla o editar la existente usando el Editor del sitio.

En este ejemplo, crearemos una nueva página que usaremos como página de publicaciones (página de blog).

Agregar el bloque de bucle de consulta

En su panel de WordPress, navegue hasta Páginas -> Agregar nueva página . En Gutenberg, agregue un bloque Query Loop. Este bloque le permite mostrar publicaciones, páginas o tipos de publicaciones personalizadas.

Puede elegir un patrón para el bucle de consulta o comenzar en blanco. Para este ejemplo, elegimos la opción de inicio en negro y luego, para la variación del bucle de consulta, seleccionamos Imagen, Fecha y Título.

A continuación, puede editar y darle estilo a la apariencia de todos los elementos en el bloque Query Loop usando la configuración del bloque.

Paso 2: Identificar la clase CSS del elemento de paginación

Debe identificar su clase CSS específica antes de personalizar el elemento de paginación. Normalmente, el nombre de la clase depende del tema de WordPress y de cualquier complemento activo que utilice. Entonces, ¿cómo se obtiene el nombre de clase CSS de cada elemento de paginación en su página?

Obtenga una vista previa de su página haciendo clic en el botón Vista previa en una pestaña nueva .

Puede utilizar las herramientas de desarrollo integradas en su navegador web (casi todos los navegadores web tienen esta función). Si usa Google Chrome, puede hacer clic en el ícono de menú (ícono de tres puntos) y seleccionar Más herramientas -> Herramientas de desarrollador .

Una vez que haya ingresado a la ventana Herramientas para desarrolladores, haga clic en el ícono de flecha para inspeccionar un elemento en su página (vea la imagen a continuación).

A continuación, apunte el cursor a los elementos de paginación (contenedor de paginación principal, números de página individuales, número de página actual, botones anterior y siguiente) para determinar sus clases.

Como puede ver en la imagen de arriba, hemos identificado las clases CSS de nuestros elementos de paginación, a continuación:

Paso 3: Agregar CSS personalizado para la paginación

A continuación, agregaremos el fragmento de CSS al personalizador de temas de WordPress para personalizar el elemento de paginación en el bloque Query Loop. En su panel de WordPress, vaya a Apariencia -> Personalizador -> CSS adicional . Luego, copie el fragmento de CSS a continuación y péguelo en el campo disponible.

Nota : si está utilizando un tema de bloque, haga clic aquí para aprender cómo habilitar un personalizador de temas en su WordPress.

 .wp-bloque-query-paginación {
  pantalla: flexible;
  justificar-contenido: centro;
  margen: 20px 0;
}

.wp-block-query-paginación .números de página {
  relleno: 5px 8px;
  color de fondo: #f0f0f0;
  margen: 0 3px;
  color: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  color de fondo: #601599;
  color: blanco;
}

.wp-block-query-paginación-anterior {
  relleno: 8px 12px;
  antecedentes: #233b27;
  margen: 0 4px;
  color: #ffffff;
  radio del borde: 4px;

}

.wp-block-query-paginación-siguiente {
  relleno: 8px 12px;
  antecedentes: #233b27;
  margen: 0 4px;
  color: #ffffff;
  radio del borde: 4px;
}

.wp-block-query-pagination .números de página: hover {
  color de fondo: #be76f5;
  color: blanco;
}

.wp-block-query-pagination-anterior: flotar {
  antecedentes: #ffb300;
  color: #000000;
}

.wp-block-query-paginación-siguiente: pasar el cursor {
  antecedentes: #ffb300;
  color: #000000;
}

No olvide hacer clic en el botón Publicar para aplicar los cambios que ha realizado.

Eso es todo. Para ver el resultado, regrese a su página y luego obtenga una vista previa. Verás que tus elementos de paginación están personalizados. Siéntase libre de reemplazar los valores de las propiedades CSS para obtener la apariencia que coincida con su diseño general.

No olvides guardar tu página o publicarla si lo deseas.

¿Qué hizo el código CSS?

• Contenedor de paginación principal: .wp-block-query-pagination
  • Utiliza Flexbox para centrar los elementos de paginación y agrega espacio vertical (20 px).
• Números de páginas individuales: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px; : Crea espacios dentro de cada número de página. Agrega 5 píxeles de relleno vertical (superior e inferior) y 8 píxeles de relleno horizontal (izquierda y derecha), lo que aumenta el área en la que se puede hacer clic.
  • background-color: #f0f0f0; : establece el color de fondo de los números de página en gris claro (#f0f0f0).
  • margin: 0 3px; : Agrega espacio horizontal (3px tanto a la izquierda como a la derecha) entre los elementos del número de página. No hay margen vertical, por lo que el espaciado sólo afecta la alineación horizontal.
  • color: #000000; : Cambia el color del texto de los números de página a negro, asegurando que contraste bien con el fondo claro.
• Número de página actual: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599; : Cambia el color de fondo del número de página actual (activo) a un violeta intenso (#601599). Esto indica visualmente qué página está seleccionada actualmente.
  • color: white; : establece el color del texto en blanco, ofreciendo un alto contraste contra el fondo violeta, haciendo visible el número de página activa.
• Botones Anterior y Siguiente: .wp-block-query-pagination-previous y . wp-block-query-pagination-next
  • Diseñado con fondo verde oscuro, texto blanco, relleno y esquinas ligeramente redondeadas.
• Efectos de desplazamiento:
  • .wp-block-query-pagination .page-numbers:hover
    • Cuando el usuario pasa el cursor sobre cualquier número de página individual, el color de fondo cambia a violeta claro (#be76f5) para lograr un efecto interactivo sutil.
    • El color del texto cambia a blanco, mejorando el contraste y la legibilidad al pasar el cursor.Efectos de desplazamiento:
  • .wp-block-query-pagination-previous:hover y . wp-block-query-pagination-next:hover
    • Cuando el usuario pasa el cursor sobre los botones "Anterior" o "Siguiente", el fondo cambia a un vibrante amarillo anaranjado (#ffb300), lo que los hace resaltar.
    • El color del texto cambia a negro, lo que ofrece una legibilidad clara sobre el fondo brillante.

La conclusión

Este artículo muestra con qué facilidad puedes personalizar la paginación en WordPress Block Editor sin la ayuda de ningún complemento. Personalizar la paginación en el Editor de bloques de WordPress con CSS personalizado permite un mayor control sobre la apariencia y funcionalidad de la navegación de su sitio.

Al aprovechar CSS, puede adaptar la paginación para que coincida con el estilo de su marca, mejorar la experiencia del usuario y mejorar el diseño general de su sitio de WordPress. Ya sea que elija ajustar los colores, los tamaños o el diseño de los elementos de paginación, la flexibilidad del CSS personalizado le permite crear un recorrido de usuario fluido y visualmente atractivo a través de su sitio web.

Sin embargo, si desea opciones de diseño ricas sin la necesidad de CSS personalizado, le recomendamos encarecidamente que utilice un complemento de WordPress como Divi o Elementor, ya que ambos ofrecen creadores visuales intuitivos con amplias funciones de personalización, lo que le permite crear diseños sorprendentes y totalmente responsivos con Opciones avanzadas de paginación, contenido dinámico y estilo directamente dentro de la interfaz del creador de páginas.