Haciendo PageNavi responsive

PageNavi es un plugin casi obligatorio para todos los que usan WordPress, es excelente y de gran ayuda porque hace nuestra web más clara y simple de navegar (a nadie le gusta el «older post» o «entradas anteriores» de WordPress. Pero PageNavi tiene un error, no es responsive.

¿Qué es ser responsive? Es un atributo que se le adjudica comúnmente a sitios webs, pero no solo a ellos sino también a plugins, publicidades, videos, etc. Una pagina web es responsive si es capaz de adaptarse a diferentes tamaños. ¿Como sabemos si una web es responsive? Bueno si la visitamos con diferentes dispositivos podremos darnos cuenta facilmente, pero es más sencillo y rápido modificar el tamaño de la ventana y ver si la web cambia la disposición para que se adapte a la nueva ventana. Un tip simple, si la web tiene una barra de desplazamiento horizontal no es responsive.

El problema de PageNavi es que no es responsive, pero esto tiene solución. 😀

Tienes que agregar el siguiente codigo CSS en tu plantilla:

@media (max-width: 400px) {
.wp-pagenavi a.page, span.extend, a.last {
display: none;
}
}

Tan simple como eso.

Así se veía nuestra web antes de ser responsive:

Y así se ve ahora.

Claramente la funcionalidad de PageNavi se reduce en smartphone y tablet, solo podemos avanzar una pagina, ver la pagina actual y las totales. Pero es mejor eso, que mostrar la web descuadrada.