[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-el-widget-jquery-tabber-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-el-widget-jquery-tabber-en-wordpress\/","headline":"C\u00f3mo agregar el widget jQuery Tabber en WordPress","name":"C\u00f3mo agregar el widget jQuery Tabber en WordPress","description":"\u00bfHas visto un \u00e1rea de tabulaci\u00f3n en sitios populares que te permite ver publicaciones populares, recientes y destacadas con solo un clic? Esto se llama ... Leer m\u00e1s<\/a>","datePublished":"2021-06-30","dateModified":"2021-06-30","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/tabberwidget.jpg","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/tabberwidget.jpg","height":250,"width":250},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-el-widget-jquery-tabber-en-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":1143,"articleBody":"\u00bfHas visto un \u00e1rea de tabulaci\u00f3n 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\u00edculo, le mostraremos c\u00f3mo agregar un widget jQuery Tabber en WordPress. \u00bfPor qu\u00e9 deber\u00eda agregar un widget jQuery Tabber?Al ejecutar un sitio web de WordPress, puede agregar elementos f\u00e1cilmente 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 \u00fatil. Ah\u00ed es exactamente cuando un tabber es \u00fatil. Te permite mostrar diferentes elementos en una misma \u00e1rea. Los usuarios pueden hacer clic en cada pesta\u00f1a y ver el contenido que m\u00e1s les interesa. Muchos sitios de renombre lo utilizan para mostrar art\u00edculos populares hoy, esta semana y este mes. En este tutorial le mostraremos c\u00f3mo crear un widget tabber. Sin embargo, no le mostramos qu\u00e9 agregar en sus pesta\u00f1as. Puedes agregar b\u00e1sicamente lo que quieras. Nota: este tutorial es para usuarios de nivel intermedio y requerir\u00e1 conocimientos de HTML y CSS. Para usuarios de nivel principiante, consulte este art\u00edculo en su lugar.Creando el widget jQuery Tabber en WordPressEmpecemos. Lo primero que debe hacer es crear una carpeta en su escritorio y nombrarla wpbeginner-tabber-widget. Despu\u00e9s 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\u00e1 c\u00f3digo HTML y PHP para crear pesta\u00f1as y un widget de WordPress personalizado. El segundo archivo que crearemos es wpb-tabber-style.css, y contendr\u00e1 estilo CSS para el contenedor de pesta\u00f1as. El tercer y \u00faltimo archivo que crearemos es wpb-tabber.js, que contendr\u00e1 el script jQuery para cambiar de pesta\u00f1a y agregar animaci\u00f3n. Empecemos con wpb-tabber-widget.php expediente. El prop\u00f3sito 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\u00eda de c\u00f3mo crear un widget de WordPress personalizado o simplemente copie y pegue este c\u00f3digo en wpb-tabber-widget.php expediente: <?php\/* Plugin Name: adrimadise\u00f1o jQuery Tabber WidgetPlugin URI: https:\/\/www.wpbeginner.comDescription: A simple jquery tabber widget.Version: 1.0Author: adrimadise\u00f1oAuthor URI: https:\/\/www.wpbeginner.comLicense: GPL2*\/\/\/ creating a widgetclass WPBTabberWidget extends WP_Widget {function WPBTabberWidget() {\t\t$widget_ops = array(\t\t'classname' => 'WPBTabberWidget',\t\t'description' => 'Simple jQuery Tabber Widget');$this->WP_Widget(\t\t'WPBTabberWidget',\t\t'adrimadise\u00f1o Tabber Widget',\t\t$widget_ops);}function widget($args, $instance) { \/\/ widget sidebar outputfunction wpb_tabber() { \/\/ Now we enqueue our stylesheet and jQuery scriptwp_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 themeecho $before_widget; $tabs = wpb_tabber(); \/\/ output tabs HTMLecho $tabs; \/\/ post-widget code from themeecho $after_widget; }}\/\/ registering and loading widgetadd_action('widgets_init',create_function('','return register_widget(\"WPBTabberWidget\");'));?>En el c\u00f3digo anterior, primero creamos un complemento y luego, dentro de ese complemento, creamos un widget. En la secci\u00f3n de salida del widget agregamos scripts y hojas de estilo y luego generamos la salida HTML para nuestras pesta\u00f1as. Por \u00faltimo, registramos el widget. Recuerde, debe agregar el contenido que desea mostrar en cada pesta\u00f1a. Ahora que hemos creado el widget con el c\u00f3digo PHP y HTML necesario para nuestras pesta\u00f1as, el siguiente paso es agregar jQuery para mostrarlas como pesta\u00f1as en el contenedor de pesta\u00f1as. Para hacer eso, debe copiar y pegar este c\u00f3digo 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\u00e1 listo con jQuery, el \u00faltimo paso es agregar estilo a las pesta\u00f1as. 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\u00e9s de FTP. Alternativamente, tambi\u00e9n puede agregar la carpeta a un archivo zip e ir a Complementos \u00bbAgregar nuevo en su \u00e1rea de administraci\u00f3n de WordPress. Haga clic en la pesta\u00f1a de carga para instalar el complemento. Una vez que el complemento est\u00e9 activado, vaya a Apariencia \u00bbWidgets, arrastre y suelte adrimadise\u00f1o 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\u00f3n o unirse a nosotros en Gorjeo o Google+. 4 \/ 5 ( 214 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar el widget jQuery Tabber en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-el-widget-jquery-tabber-en-wordpress\/#breadcrumbitem"}]}]