¿Alguna vez ha visto un área con pestañas en sitios web populares donde puede ver publicaciones populares, recientes y destacadas con solo un clic? Esto se denomina widget tabber de jQuery y le permite ahorrar espacio en la pantalla del usuario al combinar diferentes widgets en uno. En este artículo, le mostraremos cómo agregar un widget jQuery Tabber en WordPress.

Un widget tabber impulsado por jQuery en WordPress

¿Por qué agregar el widget jQuery Tabber?

Al ejecutar su sitio de WordPress, puede agregar fácilmente elementos a la barra lateral usando widgets de arrastrar y soltar. A medida que crece su sitio web, puede sentir que no hay suficiente espacio en la barra lateral para mostrar todo el contenido útil. Aquí es cuando tabber es útil. Le permite mostrar diferentes elementos en la misma área. Los usuarios pueden hacer clic en cada pestaña para ver lo que más les interesa. Es utilizado por muchos sitios web de renombre para mostrar los artículos de moda de hoy, esta semana y este mes. En este tutorial, le mostraremos cómo crear un widget tabber. Sin embargo, no le mostraremos qué agregar a la etiqueta. Básicamente puedes agregar lo que quieras.

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

Crear un widget jQuery Tabber en WordPress

Empecemos.Lo primero que debe hacer es crear una carpeta en su escritorio y darle un nombre wpbeginner-tabber-widgetDespués de eso, debe crear tres archivos en esta carpeta utilizando un editor de texto sin formato como el Bloc de notas.

El primer archivo que vamos a crear es wpb-tabber-widget.phpContendrá código HTML y PHP para crear pestañas y widgets personalizados de WordPress.El segundo archivo que crearemos es wpb-tabber-style.css, que contendrá estilos CSS para el contenedor de etiquetas.El tercer y último archivo que crearemos es wpb-tabber.js, que contendrá scripts jQuery para cambiar de pestaña y agregar animaciones.

Empecemos con wpb-tabber-widget.php documento. El propósito de este archivo es crear un complemento que registre widgets.Si es la primera vez que crea un widget de WordPress, le recomendamos que consulte nuestra guía Cómo crear un widget de WordPress personalizado, o simplemente copie y pegue este código en wpb-tabber-widget.php documento: 

<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.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',
		'WPBeginner 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 >
<li ><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 >

<div  >
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div   >
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div   >
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

<div ></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 complemento, y luego en ese complemento creamos un widget. En la sección de salida del widget, agregamos el script y la hoja de estilo, y luego generamos la salida HTML para nuestra pestaña. Finalmente registramos el widget. Recuerde que debe agregar lo que desea mostrar en cada pestaña.

Ahora que hemos creado los widgets con el código PHP y HTML necesarios para las pestañas, el siguiente paso es agregar jQuery para mostrarlos como pestañas en un contenedor de pestañas.Para hacer esto, debe copiar y pegar este código en wp-tabber.js documento. 

(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 que nuestro widget está listo para usar jQuery, el paso final es diseñar las pestañas.Hemos creado una hoja de estilo de muestra donde puede copiar y pegar wpb-tabber-style.css documento: 


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 wpbeginner-tabber-widget carpeta a su sitio de WordPress /wp-content/plugins/ Accede al directorio a través de FTP.Alternativamente, también puede agregar la carpeta al archivo zip e ir a Complementos » Agregar nuevo en su área de administración de WordPress. Haga clic en la pestaña Cargar para instalar el complemento.Después de activar el complemento, vaya a Apariencia » Widgets, arrastre y suelte el Widget de WPBeginner Tabber a su barra lateral y eso es todo.

Arrastre y suelte el widget WPBeginner Tabber en su barra lateral

Esperamos que este tutorial le haya ayudado a crear un tabber de jQuery para su sitio de WordPress.Para preguntas y comentarios, puede dejar un comentario a continuación o unirse a nosotros Gorjeo o Google+.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.