¿Has visto un área de pestañas en sitios populares que te permite ver publicaciones populares, recientes y destacadas con un solo clic? Esto se llama el widget de pestañas jQuery, y te permite ahorrar espacio en la pantalla del usuario al combinar diferentes widgets en uno. En este artículo, te mostraremos cómo agregar un widget de pestañas jQuery en WordPress.
¿Por qué deberías agregar un widget de pestañas jQuery?
Al administrar un sitio web de WordPress, puedes agregar fácilmente elementos a tus barras laterales usando widgets de arrastrar y soltar. A medida que tu sitio crece, es posible que sientas que no tienes suficiente espacio en la barra lateral para mostrar todo el contenido útil. Ahí es exactamente cuando un widget de pestañas resulta útil. Te permite mostrar diferentes elementos 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 usan para mostrar artículos populares del día, de la semana y del mes. En este tutorial te mostraremos cómo crear un widget de pestañas. Sin embargo, no te mostraremos qué agregar en tus 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, consulta este artículo en su lugar.
Creación de un widget de pestañas jQuery en WordPress
Empecemos. Lo primero que debes hacer es crear una carpeta en tu escritorio y nombrarla wpbeginner-tabber-widget. Después de eso, necesitas 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 de jQuery para cambiar de pestaña y agregar animación.
Empecemos con el archivo wpb-tabber-widget.php. El propósito de este archivo es crear un plugin que registre un widget. Si es la primera vez que creas un widget de WordPress, te recomendamos que eches un vistazo a nuestra guía sobre cómo crear un widget personalizado de WordPress o simplemente copies y pegues este código en el archivo wpb-tabber-widget.php:
<?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 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 scripts y hojas de estilo y luego generamos la salida HTML para nuestras pestañas. Finalmente, registramos el widget. Recuerda, necesitas agregar el contenido que deseas 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 el archivo wp-tabber.js.
(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 estilo a las pestañas. Hemos creado una hoja de estilo de ejemplo que puedes copiar y pegar en el archivo wpb-tabber-style.css:
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 la carpeta wpbeginner-tabber-widget al directorio /wp-content/plugins/ de tu sitio de WordPress a través de FTP. Alternativamente, también puedes agregar la carpeta a un archivo zip e ir a Plugins » Agregar nuevo en tu área de administración de WordPress. Haz clic en la pestaña de carga para instalar el plugin. Una vez que el plugin esté activado, ve a Apariencia » Widgets, arrastra y suelta WPBeginner Tabber Widget en tu barra lateral y eso es todo.
Esperamos que este tutorial te haya ayudado a crear un tabulador jQuery para tu sitio de WordPress. Para preguntas y comentarios, puedes dejar un comentario abajo o unirte a nosotros en Twitter o Google+.
Nitish Chauhan
Hola,
Mi plugin está activado pero en la sección de widgets muestra el mensaje “No hay opciones para este widget”. Por favor, dime cómo activar todas las funciones y quiero crear un plugin como
“jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); // Campos contenedor
var add_button = jQuery(“.add_field_button”); // Botón de agregar ID
// Contador inicial de cuadros de texto
jQuery(add_button).click(function(e){ // Al hacer clic en el botón de agregar entrada
e.preventDefault();
// Máximo cuadro de texto permitido
// Incremento de cuadro de texto
jQuery(wrapper).prepend(‘×’); // Agregar cuadro de entrada
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ // El usuario hace clic en eliminar texto
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
mi código de javascript. Por favor, sugiera si tiene alguna solución.
Gracias
Nabam Rikam
He insertado los plugins en la barra lateral, pero cuando intento hacer clic, dice que no hay opción para este plugin. Y después de que lo navegamos en el sitio web, vemos tres cuadros de texto en blanco. Guíame un poco, hermano.
goutham
No me aparecen las pestañas ni los widgets en mi sitio. He copiado y pegado el mismo código. No funciona.
Kunle
Quiero colocar el plugin recién creado en un lugar de mi página, y no en las barras laterales o el pie de página.
¿Cómo hago eso, para colocarlo en cualquier parte de mi página web?
Zadius
Este es el segundo tutorial que intento y por alguna razón el archivo del plugin no aparece en el directorio de plugins de mi sitio. Subo el archivo directamente usando FTP, pero cuando inicio sesión en mi área de administración de WordPress, no aparece nada en la pestaña de plugins. Por favor, asesórame. Gracias.
Actualización: Comprimí el archivo y lo subí a través de la interfaz del plugin de WordPress. El archivo no aparece en la carpeta de mi plugin en mi interfaz FTP, así que no tengo ni idea de dónde aparece. ¡Pero logré instalarlo, así que gracias!
John
Gracias por el tutorial. Sin embargo, noté que falta el título cuando agrego el widget al área de widgets. ¿Cómo puedo agregar el espacio para el título para ingresar un título?
Drazen
Hola
Gracias por esto. Me preguntaba cómo agregar una opción para que, cuando esté viendo el widget, pueda simplemente pegar enlaces en él, en cada pestaña.
Por ejemplo:
Pestaña 1 (opción para renombrarla en las opciones del widget)
– Cuadro de texto debajo en las opciones del widget (para poder agregar texto, enlaces, etc.)
Pestaña 2 (opción para renombrarla en las opciones del widget)
– Cuadro de texto debajo en las opciones del widget (para poder agregar texto, enlaces, etc.)
Pestaña 3 (opción para renombrarla en las opciones del widget)
– Cuadro de texto debajo en las opciones del widget (para poder agregar texto, enlaces, etc.)
Gracias
Gavin Wilshen
Tutorial brillante. ¡Gracias, chicos!
Grant
Me sigue dando este error:
No se pudo activar el plugin porque provocó un error fatal.
Parse error: syntax error, unexpected T_NS_SEPARATOR, expecting T_STRING in /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php on line 16
Soporte de WPBeginner
Grant, acabamos de revisar el código de nuevo. El plugin se activó sin problemas de nuestra parte.
Administrador
Rahul
Gracias, eres un genio. Iba a comprar un plugin premium de codecanyon y luego encontré esta guía.
Jonathan
¿Por qué al instalar este plugin dice que necesita ser actualizado, y la actualización es de otro desarrollador y tiene más de 3 años de antigüedad?
Soporte de WPBeginner
No debería hacer eso. Si cambiaste el nombre del plugin y coincide con otro plugin, WordPress lo confundiría con el otro plugin.
Administrador
Jonathan
No cambié nada; solo hice lo que mostraste arriba.
Jonathan
Este es el plugin que WordPress cree que es y al que intenta actualizar. http://wordpress.org/plugins/tabber-widget/
Acabo de actualizar el plugin a la versión 2.0 y eso (por alguna razón) hizo que dejara de pedir la actualización al otro plugin. Intentaría renombrar y cambiar la información del otro plugin, pero eso fue lo único que pareció funcionar.
Soporte de WPBeginner
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
Soporte de WPBeginner
No pudimos reproducir esto. ¿Tienes acceso a otro sitio de WordPress donde puedas probar esto, solo para verificar que no haya nada malo de tu lado?
Doris
¿Esto no va en contra del propósito de que WordPress sea dinámico? ¿Codificar texto directamente en un widget? ¿Hay alguna forma de extraer contenido dinámico de la base de datos? Nosotros los novatos no tenemos mucha experiencia en codificación, ¿saben? Uno pensaría que existe un plugin que haga esto...
Soporte de WPBeginner
Este tutorial está dirigido a usuarios de nivel intermedio y el objetivo aquí es mostrarles cómo crear un widget de pestañas. Para usuarios de nivel principiante, existen varias etiquetas de plantilla integradas que pueden generar contenido dinámicamente dentro de cada pestaña. Por ejemplo:
Muestra una lista de tus páginas de WordPress:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Mostrar publicaciones aleatorias:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Mostrar comentarios recientes:
1-click Use in WordPress
Y muchos más.
Administrador
manoj sakhwar
Buen artículo. Gracias…
Grant
Lo que no entiendo es dónde pegar el código. ¿En qué tipo de documento pongo el código? (Tengo Mac).
Soporte de WPBeginner
Usa TextEdit para crear estos archivos.
Administrador
Keith Davis
Me encanta este, chicos.
Siempre buscando formas de aprovechar mejor los espacios limitados.
Jim Davis
Instalé los archivos y activé el widget. Se muestra como se esperaba; sin embargo, hacer clic en las pestañas 2 y 3 no cambia el contenido. El contenido sigue siendo el contenido de la pestaña 1. ¿Me he perdido algo? Vea mi sitio de prueba en http://jimdavis.org/blog/
Jim
Soporte de WPBeginner
Jim, no te has perdido nada. Este es un widget de ejemplo y puedes editarlo. Ingresa tu propio código y contenido dentro de cada pestaña editando el archivo del plugin wpb-tabber-widget.php
Administrador