Cómo agregar jQuery Tabber Widget en WordPress

¿Ha visto un área de tabulación en sitios populares que le permite ver publicaciones populares, recientes y destacadas con solo un clic? A esto se le llama el widget tabber jQuery y le permite ahorrar espacio en la pantalla del usuario al combinar varios 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 elementos fácilmente a las barras laterales usando widgets de arrastrar y soltar. A medida que su sitio crece, es posible que sienta que no tiene suficiente espacio en la barra lateral para mostrar todo el contenido útil. Aquí es exactamente cuando un tabber es útil. Te permite mostrar diferentes objetos en la misma área. Los usuarios pueden hacer clic en cada pestaña y ver el contenido que más les interesa. Muchos sitios de renombre lo utilizan para mostrar artículos populares hoy, esta semana y este mes. En este tutorial, le mostraremos cómo crear un widget tabber. Sin embargo, no le mostramos qué agregar en sus listados. Puede agregar prácticamente cualquier cosa que desee.

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

Creando el widget jQuery Tabber en WordPress

Vamos a empezar. Lo primero que debe hacer es crear una carpeta en su escritorio y nombrarla trucoswp-tabber-widget. A continuación, debe crear tres archivos dentro de esta carpeta con un editor de texto simple como el Bloc de notas.

El primer archivo que crearemos es wpb-tabber-widget.php. Contendrá código HTML y PHP para crear pestañas y un widget de WordPress personalizado. El segundo archivo que crearemos es wpb-tabber-style.cssy 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 archivo. El propósito de este archivo es crear un plugin que registre un widget. Si es la primera vez que crea un widget de WordPress, le recomendamos que eche un vistazo a nuestra guía sobre cómo crear una guía de widgets de WordPress personalizada o simplemente copie y pegue este código en wpb-tabber-widget.php archivo:

<?php
/* Plugin Name: TrucosWP jQuery Tabber Widget
Plugin URI: https://trucoswp.com/
Description: A simple jquery tabber widget.
Version: 1.0
Author: TrucosWP
Author URI: https://trucoswp.com/
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
		$widget_ops = array(
		'classname' => 'WPBTabberWidget',
		'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
		'WPBTabberWidget',
		'TrucosWP Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() { 

// Now we enqueue our stylesheet and jQuery script

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');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpb_tabber(); 
// output tabs HTML
echo $tabs; 
// post-widget code from theme
echo $after_widget; 
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

En el código anterior, primero creamos un plugin y luego dentro de ese plugin creamos un widget. En la sección de salida del widget, agregamos un script y una hoja de estilo y luego generamos una salida HTML para nuestras pestañas. Finalmente registramos el widget. Recuerde, 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 esto, debe copiar y pegar este código en wp-tabber.js archivo.

(function($)  {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("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 el estilo a las pestañas. Hemos creado una hoja de estilo de muestra que puede copiar y pegar. wpb-tabber-style.css archivo:

ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

Eso es todo. Ahora solo sube trucoswp-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 Plugin »Agregar nuevo en su área de administración de WordPress. Haga clic en la pestaña de carga para instalar el plugin. Una vez que el plugin está activado, vaya a Apariencia »Widget, arrastre y suelte TrucosWP Tabber Widget en la barra lateral y listo.

Esperamos que este tutorial le haya ayudado a crear un tabulador jQuery para su sitio de WordPress. Para preguntas y comentarios, puede dejar un comentario a continuación.