Cómo Agregar Un Widget Jquery Tabber En Wordpress

Cómo agregar un widget jQuery Tabber en WordPress

¿Ha visto un cuadro de pestaña en sitios populares que le permite ver publicaciones populares, recientes y destacadas con solo un clic? Se llama el widget tabber jQuery y le ahorra 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?

Cuando ejecuta 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 descubra que no tiene suficiente espacio en la barra lateral para mostrar todo el contenido útil. Aquí es exactamente cuando un tabber es ú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 grandes lo utilizan para publicar 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 lo que quieras. Nota: Este tutorial está destinado a usuarios de nivel intermedio y requerirá algunos conocimientos de HTML y CSS. Para usuarios de nivel principiante, consulte este artículo en su lugar.

Crear un widget jQuery Tabber en WordPress

Empecemos. Lo primero que debe hacer es crear una carpeta en su escritorio y asígnele el nombre MundoCMS-tabber-widget. Después de eso, debe crear tres archivos en 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 widgets y pestañas de WordPress personalizados. El segundo archivo que vamos a crear 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 jQuery para cambiar de pestaña y agregar animación. Comencemos con el archivo wpb-tabber-widget.php. 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 el archivo wpb-tabber-widget.php:

‘WPBTabberWidget’, ‘description’ => ‘Widget jQuery Tabber simple’); $ this-> WP_Widget (‘WPBTabberWidget’, ‘MundoCMS Tabber Widget’, $ widget_ops); } function widget ($ args, $ instance) {// widget sidebar output function wpb_tabber () {// Ahora ponemos en cola nuestra hoja de estilo y script 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’); // Al crear pestañas, ¿agregará su propio código en 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 una hoja de estilo, y luego generamos la salida HTML para nuestras pestañas. Finalmente, registramos el widget. Recuerde que 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 esto, debe copiar y pegar este código en el archivo wp-tabber.js. (función ($) {$ («. tab_content»). hide (); $ («ul.tabs li: first»). addClass («active»). show (); $ («. tab_content: first») .show (); $ («ul.tabs li»). click (function () {$ («ul.tabs li»). removeClass («activo»); $ (esto) .addClass («activo»); $ («. 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 un estilo a las pestañas. Hemos creado una hoja de estilo de ejemplo que puede copiar y pegar en el archivo wpb-tabber-style.css: ul.tabs {position: related; índice z: 1000; flotador izquierdo; borde izquierdo: 1px sólido # C3D4EA; } ul.tabs li {posición: relativa; desbordamiento oculto; altura: 26px; flotador izquierdo; margen: 0; acolchado: 0; altura de la fila: 26px; color de fondo: # 99B2B7; borde: 1px sólido # C3D4EA; borde izquierdo: ninguno; } ul.tabs li a {display: block; relleno: 0 10px; esquema: ninguno; decoración de texto: ninguna; } html ul.tabs li.active, html ul.tabs li.active to: hover {background-color: # D5DED9; borde inferior: 1px sólido # D5DED9; } .widget-area .widget .tabs tiene {color: #FFFFFF; } .tab_container {posición: relativa; alto: -1px; índice z: 999; ancho: 100%; flotador izquierdo; tamaño de fuente: 11px; color de fondo: # D5DED9; borde: 1px sólido # C3D4EA; } .tab_content {relleno: 7px 11px 11px 11px; altura de la fila: 1,5; } .tab_content ul {margin: 0; acolchado: 0; estilo de lista: ninguno; } .tab_content li {margen: 3px 0; } .tab-clear {clear: both; } Es todo. Ahora simplemente cargue la carpeta MundoCMS-tabber-widget en el directorio / wp-content / plugins / de su sitio de WordPress a través de FTP. También puede agregar la carpeta a un archivo zip y navegar a Complementos »Agregar nuevo en su área de administración de WordPress. Haga clic en la pestaña de descarga para instalar el complemento. Una vez que el complemento esté activado, vaya a Apariencia »Widgets, arrastre y suelte MundoCMS Tabber Widget en su barra lateral y listo.

Arrastre Y Suelte El Widget Mundocms Tabber En Su Barra Lateral
Esperamos que este tutorial le haya ayudado a crear una pestaña jQuery para su sitio de WordPress. Si tiene preguntas y comentarios, puede dejar un comentario a continuación o unirse a nosotros en Twitter o Google+.

Leave a Reply