¿Has visto un área de tabulación en sitios populares que te permite ver publicaciones populares, recientes y destacadas con solo un clic? Esto se llama el widget tabber 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.
¿Por qué debería agregar un widget jQuery Tabber?
Al ejecutar un sitio web de WordPress, puede agregar elementos fácilmente a sus 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. Ahí 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 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 pestañas. Puedes agregar básicamente lo que quieras.
Nota: este tutorial es para usuarios de nivel intermedio y requerirá conocimientos de HTML y CSS. Para usuarios de nivel principiante, consulte este artículo en su lugar.
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 con un editor de texto sin formato 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 de WordPress personalizado. El segundo archivo que crearemos es wpb-tabber-style.css, y contendrá 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 es la primera vez que crea un widget de WordPress, le recomendamos que eche un vistazo a nuestra guía de cómo crear un widget de WordPress personalizado o simplemente copie y pegue este código en wpb-tabber-widget.php expediente:
<?php
/* Plugin Name: adrimadiseño jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: adrimadiseño
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',
'adrimadiseño 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 complemento y luego, dentro de ese complemento, creamos un widget. En la sección de salida del widget agregamos scripts y hojas de estilo y luego generamos la salida HTML para nuestras pestañas. Por último, 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 eso, debe 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(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 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 {
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/ directorio a través de FTP. Alternativamente, también puede agregar la carpeta a un archivo zip e ir a Complementos »Agregar nuevo en su á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 adrimadiseño Tabber Widget en su barra lateral y listo.
Esperamos que este tutorial le haya ayudado a crear un tabulador de jQuery para su sitio de WordPress. Si tiene preguntas y comentarios, puede dejar un comentario a continuación o unirse a nosotros en Gorjeo o Google+.