Cómo agregar el widget jQuery Tabber en WordPress

¿Ha visto un área de tabber en sitios populares que le permite ver publicaciones populares, recientes y destacadas con un solo clic? Esto se conoce como el widget tabber de jQuery y le permite ahorrar espacio en la pantalla del usuario combinando diferentes widgets en uno. En este artículo, le mostraremos cómo agregar un widget jQuery Tabber en WordPress.

¿Por qué debería agregar un widget jQuery Tabber??

Al ejecutar un sitio web de WordPress, puede agregar fácilmente elementos a sus barras laterales utilizando los widgets de arrastrar y soltar. A medida que su sitio crezca, es posible que sienta que no tiene suficiente espacio en la barra lateral para mostrar todo el contenido útil. Eso es exactamente cuando un tabber es útil. Te permite mostrar diferentes elementos en una misma área. Los usuarios pueden hacer clic en cada pestaña y ver el contenido en el que están más interesados. Muchos sitios de renombre lo usan para mostrar artículos populares de hoy, esta semana y este mes. En este tutorial te mostraremos cómo crear un widget de tabber. Sin embargo, no le mostramos qué agregar en sus pestañas. Básicamente puedes agregar lo que quieras..

Nota: este tutorial es para usuarios de nivel intermedio y requerirá conocimientos de HTML y CSS. Para usuarios principiantes, consulte este artículo..

Creando el widget jQuery Tabber en WordPress

Empecemos. Lo primero que debe hacer es crear una carpeta en su escritorio y nombrarla wpbeginner-tabber-widget. Después de eso, debe crear tres archivos dentro de esta carpeta usando un editor de texto plano como el Bloc de notas.

El primer archivo que vamos a crear es wpb-tabber-widget.php. Contendrá código HTML y PHP para crear pestañas y un widget personalizado de WordPress. El segundo archivo que crearemos es wpb-tabber-style.css, y contendrá el estilo CSS para el contenedor de pestañas. El tercer y último archivo que crearemos es wpb-tabber.js, que contendrá el script jQuery para cambiar de pestaña y agregar animación.

Empecemos con wpb-tabber-widget.php expediente. El propósito de este archivo es crear un complemento que registre un widget. Si esta es la primera vez que crea un widget de WordPress, le recomendamos que eche un vistazo a nuestra forma de crear una guía personalizada de widgets de WordPress o simplemente copie y pegue este código. wpb-tabber-widget.php expediente:

  'WPBTabberWidget', 'description' => 'Simple jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  function widget ($ args, $ instance) // widget sidebar output function wpb_tabber () // Ahora ponemos en nuestra hoja de estilo y script jQuery wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style. css ', __FILE__)); wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), array ('jquery')); wp_enqueue_style ('wpb-tabber-style'); wp_enqueue_script ('wpb-tabber-widget-js'); // Creando pestañas, ¿agregará su propio código dentro de cada pestaña?> 
 
Pestaña 1
 
Pestaña 2
 
Pestaña 3
 
              

En el código anterior, primero creamos un complemento y luego dentro de ese complemento creamos un widget. En la sección de resultados del widget agregamos scripts y hojas de estilo y luego generamos el resultado HTML para nuestras pestañas. Por último registramos el widget. Recuerde que debe agregar el contenido que desea mostrar en cada pestaña.

Ahora que hemos creado el widget con el código PHP y HTML necesario para nuestras pestañas, el siguiente paso es agregar jQuery para mostrarlas como pestañas en el contenedor de pestañas. Para hacer eso necesitas copiar y pegar este código en wp-tabber.js expediente.

 (function ($) $ (". tab_content"). hide (); $ ("ul.tabs li: first"). addClass ("active"). show (); $ (". tab_content: first") .show (); $ ("ul.tabs li"). click (función () $ ("ul.tabs li"). removeClass ("active"); $ (this) .addClass ("active"); $ (". tab_content"). hide (); var activeTab = $ (this) .find ("a"). attr ("href"); // $ (activeTab) .fadeIn (); if ($ .browser .msie) $ (activeTab) .show (); else $ (activeTab) .fadeIn (); return false;);) (jQuery); 

Ahora nuestro widget está listo con jQuery, el último paso es agregar estilo a las pestañas. Hemos creado una hoja de estilo de muestra que puede copiar y pegar wpb-tabber-style.css expediente:

 ul.tabs posición: relativa; índice z: 1000; flotador izquierdo; borde izquierdo: 1px sólido # C3D4EA;  ul.tabs li posición: relativa; desbordamiento: oculto; altura: 26px; flotador izquierdo; margen: 0; relleno: 0; línea de altura: 26px; color de fondo: # 99B2B7; borde: 1px sólido # C3D4EA; borde izquierdo: ninguno;  ul.tabs li a display: block; relleno: 0 10px; esquema: ninguno; texto-decoración: ninguno;  html ul.tabs li.active, html ul.tabs li.active a: hover background-color: # D5DED9; borde inferior: 1px sólido # D5DED9;  .widget-area .widget .tabs a color: #FFFFFF;  .tab_container posición: relativo; arriba: -1px; índice z: 999; ancho: 100%; flotador izquierdo; tamaño de fuente: 11px; color de fondo: # D5DED9; borde: 1px sólido # C3D4EA;  .tab_content relleno: 7px 11px 11px 11px; línea de altura: 1.5;  .tab_content ul margen: 0; relleno: 0; estilo de lista: ninguno;  .tab_content li margen: 3px 0;  .tab-clear clear: ambos;  

Eso es todo. Ahora solo cargue wpbeginner-tabber-widget carpeta a su sitio de WordPress / wp-content / plugins / Directorio a través de FTP. Alternativamente, también puede agregar la carpeta a un archivo zip e ir a Complementos »Añadir Nuevo En tu área de administración de WordPress. Haga clic en la pestaña de carga para instalar el complemento. Una vez que el complemento está activado, vaya a Apariencia »Widgets, arrastre y suelte WPBeginner Tabber Widget en su barra lateral y eso es todo.

Esperamos que este tutorial te haya ayudado a crear una tabla jQuery para tu sitio de WordPress. Para preguntas y comentarios, puede dejar un comentario a continuación o unirse a nosotros en Twitter o Google+.