Minimice el desorden del sitio y mejore la interacción con pestañas para WordPress

Minimice el desorden del sitio y mejore la interacción con pestañas para WordPress

Cualquier cosa que pueda hacer para optimizar su sitio es algo bueno. Después de todo, cuanto menos tengan que hacer los visitantes del sitio de trabajo para obtener la información que necesitan, mejor. Sin embargo, esto puede ser un desafío si su sitio, por su propia naturaleza, necesita incluir mucha información. El resultado final de estos sitios generalmente involucra a aquellos con páginas realmente largas por las que casi nadie se desplazará por completo, y aquellos con un montón de páginas en las que, de manera similar, casi nadie hará clic.

Entonces, ¿cuál es la alternativa a una página muy larga o demasiadas páginas? ¡Pestañas, por supuesto! Y no se preocupe, no tiene que ser un genio de la codificación para obtener pestañas en su sitio. Hay muchos complementos que permiten esta función. He reunido algunos de los mejores para ayudarlo a agregar contenido con pestañas a su sitio de WordPress de manera rápida y fácil.

Publicaciones en pestañas de la interfaz de usuario

Publicaciones en pestañas de la interfaz de usuario

Las pestañas de la interfaz de usuario de publicación facilitan la adición de pestañas de jQuery a su contenido, ya sean publicaciones, páginas u otros tipos de publicaciones. Todo lo que tienes que hacer es insertar códigos cortos en el editor y activarás las pestañas.

El complemento incluye 24 temas de interfaz de usuario diferentes para que sea más fácil combinar su tema existente. O, si tiene las habilidades, cree una hoja de estilo personalizada para mejorar la apariencia.

Una vez que el complemento está instalado, todo lo que necesita hacer es hacer clic en el botón TinyMCE correspondiente en el editor de publicaciones para insertar el código corto apropiado. De acuerdo con la lista de directorios oficial de WordPress para las pestañas de Post UI, también puede insertar pestañas directamente usando los siguientes códigos cortos:

[tab name=”Your tab name 1″]El contenido de tu pestaña[/tab]
[tab name=”Your tab name 2″]El contenido de tu pestaña[/tab]
[tab name=”Your tab name 3″]El contenido de tu pestaña[/tab]
[end_tabset]

Siéntase libre de insertar HTML en estas pestañas. Esto debe manejarse sin problemas y terminará viendo su contenido mostrado como si estuviera en cualquier otro lugar de su sitio solamente, como puede haber adivinado que está contenido en una pestaña.

Pestañas fáciles de responder

Pestañas fáciles de responder

Otro complemento que definitivamente debería consultar si desea agregar pestañas a su sitio es Pestañas fáciles de responder. No solo es compatible con bootstrap 3.0, sino que también agrega botones TinyMCE al editor visual, lo que facilita la inserción de pestañas receptivas con un solo clic.

Una vez que haga clic en este botón, se abrirá un panel de configuración que le permitirá seleccionar el color para varios aspectos diferentes de las pestañas, incluidos encabezados, pestañas activas, desplazamiento, fondo, etc. También puede configurar pestañas para que aparezcan en la parte superior o inferior. Este complemento es uno de los favoritos debido a la facilidad de configuración y la implementación sencilla.

Pestañas Tabby sensibles

Pestañas Tabby sensibles

Si la capacidad de respuesta es una de sus principales preocupaciones, Pestañas Tabby sensibles es una buena opción para ti. En pocas palabras, este complemento le permite insertar pestañas receptivas en publicaciones y páginas utilizando códigos cortos. Admite más de un conjunto de pestañas en una sola página o publicación y utiliza jQuery para crear las pestañas y el efecto de acordeón en pantallas más pequeñas. También puede acceder a las pestañas con su teclado.

Para insertar pestañas, simplemente inserte dos códigos cortos: [tabby] y [tabbyending]. Específicamente, usarías [tabby title=“tabname”] para establecer el nombre de la pestaña. Luego, escribe el contenido que debe incluirse en esa pestaña, incluido el código HTML que desee. Puede insertar más pestañas si lo desea. Luego, para completar este conjunto de pestañas, use el [tabbyending] shortcode para cerrar el grupo de pestañas.

Ahora, si desea realizar cambios de estilo en estas pestañas, deberá profundizar un poco más en el código. Dependiendo de la página del directorio de WordPress del complemento, deberá copiar la hoja de estilo del complemento en un tema secundario y realizar cambios en el estilo de pestaña o en el estilo de acordeón como mejor le parezca.

Widgets en pestañas

A veces, sus necesidades en las pestañas individuales son un poco más complejas. Para estos casos, existe el Widgets en pestañas conectar. Le permite colocar los widgets que desee, todo en pestañas para ahorrar espacio y crear una experiencia más organizada en su sitio web. Tiene multitud de usos.

Por ejemplo, puede optar por utilizar pestañas para mostrar los widgets Artículos recientes y Comentarios recientes. Puede agregar categorías para completar la visualización de la pestaña. O puede crear un grupo de pestañas dedicadas a los widgets de redes sociales incorporados, como un cuadro de Me gusta de Facebook, un feed de Twitter, Google+, un panel de Pinterest, etc.

Una cosa que realmente me gusta de los widgets de pestañas es que no incluyen sus propios estilos, por lo que pueden adaptarse a su tema. Las pestañas se integran perfectamente con su sitio y parecen pertenecer.

Los títulos de las pestañas también se pueden desplazar, lo que es una buena alternativa al enfoque tradicional apilado. También hay opciones de animación para las transiciones entre widgets, y puede establecer la cantidad de segundos que tomará cambiar entre pestañas.

Al igual que con todos los demás complementos de pestañas enumerados aquí, se inserta fácilmente gracias al código corto [wit].

Interfaz de usuario de WP: pestañas, acordeones, controles deslizantes

Interfaz de usuario de WP

El último complemento del que voy a hablar aquí es WP UI: pestañas, acordeones, controles deslizantes. Este complemento no solo simplifica la integración de pestañas en publicaciones y páginas, sino que también permite una fácil integración de otros estilos de formato como acordeones, controles deslizantes y cuadros de diálogo. El complemento funciona con jQuery y puede usar más de un tema de jQuery UI en cada página si lo desea.

Viene con una página de opciones fácil de usar que facilita la configuración y el uso. También agrega menús y cuadros de diálogo dedicados para facilitar la navegación. Como todos los complementos anteriores, este se basa principalmente en códigos cortos para una implementación rápida. El shortcode [wp tabs] se puede mejorar fácilmente con el argumento de estilo, que se puede cambiar de aproximadamente 24 formas diferentes, como “wpui-blue”, para que las pestañas se vean más coherentes con su tema.

Sin embargo, lo más destacado de este complemento para mí es la capacidad de mostrar publicaciones y feeds en pestañas o acordeones. El shortcode es [wptabposts] y le permite mostrar los artículos en una serie de pestañas. O, si desea mostrar un feed en una página o publicación, simplemente use el [wpuifeeds] pequeño código. De acuerdo con la lista de directorios de WordPress para WP UI, puede usar [wpspoiler post=“3028”] para mostrar un solo artículo en este formato especializado.

Códigos cortos de Symple

Pestañas de códigos cortos de símbolos mínimos

Por supuesto, si solo necesita las pestañas básicas, asegúrese de considerar el complemento hecho a mano de WordPress Symple Shortcodes aquí en WPExplorer. El complemento viene con bonitas pestañas mínimas que puede usar en cualquier página de su sitio, junto con muchas otras funciones de organización de contenido. Agregue columnas, conmutadores, acordeones y muchos otros acentos (botones, íconos sociales, etc.).


Si bien puede parecer complicado al principio, el proceso de agregar pestañas a su sitio es bastante sencillo. Los complementos anteriores lo hacen muy sencillo y el resultado final es atractivo y funcional. En mi opinión, vale la pena verlos. Los visitantes de su sitio tienen acceso a toda la información que necesite sin saturar el diseño general. Es una solución rápida para sitios con muchos recursos y contenido.

¿Utiliza pestañas en su sitio? ¿Qué pasa con uno de estos complementos, en particular? Si es así, ¿te han funcionado? ¿Ha encontrado otra forma de incorporar pestañas en su sitio? ¡Me encantaría escuchar tu experiencia con este ingenioso truco de organización en los comentarios!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba