¿Has visto un área de pestañas en sitios populares que te permite ver publicaciones populares, recientes y destacadas con solo un clic? Esto se llama widget de tabulador 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?
Cuando se ejecuta un sitio web de WordPress, puede agregar fácilmente elementos a sus barras laterales utilizando arrastrar y soltar widgets. A medida que su sitio crezca, puede sentir que no tiene suficiente espacio en la barra lateral para mostrar todo el contenido útil. Eso es exactamente cuando un tabber es útil. Le permite mostrar diferentes artículos en la misma área. Los usuarios pueden hacer clic en cada pestaña y ver el contenido que les interesa más. Muchos sitios famosos lo usan 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 te mostramos qué agregar en tus pestañas. Puedes agregar básicamente todo lo que quieras.
Nota: este tutorial es para usuarios de nivel intermedio y requerirá conocimiento de HTML y CSS. Para usuarios principiantes, consulte este artículo en su lugar.
Creación de un widget jQuery Tabber en WordPress
Empecemos. Lo primero que debe hacer es crear una carpeta en su escritorio y nombrarla sitio-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á un estilo CSS para el contenedor de pestañas. El tercer y último archivo que crearemos es wpb-tabber.js , que contendrá la secuencia de comandos jQuery para cambiar pestañas y agregar animación.
Empecemos con wpb-tabber-widget.php archivo. 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 consulte cómo crear una guía personalizada de widgets de WordPress o simplemente copie y pegue este código en wpb-tabber-widget.php archivo:
sitio
Plugin URI: http://www.site.com
Descripción: Un widget de tabulador jquery simple.
Versión: 1.0
Autor: sitio
URI del autor: http://www.site.com
Licencia: GPL2
* /
// creando un widget
La clase WPBTabberWidget extiende WP_Widget {
función WPBTabberWidget () {
$ widget_ops = array (
'classname' => 'WPBTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$ this-> WP_Widget (
'WPBTabberWidget',
'sitio de Widget Tabber',
$ widget_ops
);
}
widget de función ($ args, $ instance) {// widget barra lateral de salida
función wpb_tabber () {
// Ahora encolamos nuestra hoja de estilo y la secuencia de comandos 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ás tu 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 salida del widget agregamos scripts y hojas de estilo y luego generamos el resultado 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, necesita copiar y pegar este código en wp-tabber.js archivo.
(función ($) {
$ (". tab_content"). hide ();
$ ("ul.tabs li: first"). addClass ("active"). show ();
$ (". tab_content: first"). show ();
$ ("ul.tabs li"). clic (función () {
$ ("ul.tabs li"). removeClass ("activo");
$ (this) .addClass ("activo");
$ (". tab_content"). hide ();
var activeTab = $ (this) .find ("a"). attr ("href");
// $ (activeTab) .fadeIn ();
if ($ .browser.msie) {$ (activeTab) .show ();}
else {$ (activeTab) .fadeIn ();}
falso retorno;
});
}) (jQuery);
Ahora nuestro widget está listo con jQuery, el último paso es agregar estilo a las pestañas. Creamos una hoja de estilo de muestra que puede copiar y pegar wpb-tabber-style.css archivo:
ul.tabs {
posición: relativa;
índice z: 1000;
flotador izquierdo;
border-left: 1px solid # C3D4EA;
}
ul.tabs li {
posición: relativa;
desbordamiento: oculto;
altura: 26px;
flotador izquierdo;
margen: 0;
relleno: 0;
línea-altura: 26px;
color de fondo: # 99B2B7;
borde: 1px sólido # C3D4EA;
border-left: none;
}
ul.tabs li a {
bloqueo de pantalla;
relleno: 0 10px;
esquema: ninguno;
texto-decoración: ninguno;
}
html ul.tabs li.active,
html ul.tabs li.active a: hover {
color de fondo: # D5DED9;
borde inferior: 1px sólido # D5DED9;
}
.widget-area .widget .tabs a {
color: #FFFFFF;
}
.tab_container {
posición: relativa;
arriba: -1px;
índice z: 999;
ancho: 100%;
flotador izquierdo;
tamaño de letra: 11px;
color de fondo: # D5DED9;
borde: 1px sólido # C3D4EA;
}
.tab_content {
relleno: 7px 11px 11px 11px;
línea-altura: 1.5;
}
.tab_content ul {
margen: 0;
relleno: 0;
lista-estilo: ninguno;
}
.tab_content li {
margen: 3px 0;
}
.tab-clear {
Limpia los dos;
}
sitio
sitio
Esperamos que este tutorial lo haya ayudado a crear un tabber jQuery para su sitio de WordPress. Para preguntas y comentarios, puede dejar un comentario a continuación o unirse a nosotros en Twitter o Google+.
