Ați văzut o zonă cu file pe site-uri populare care vă permite să vedeți postări populare, recente și recomandate printr-un singur clic? Aceasta se numește widget-ul tabber jQuery și vă permite să economisiți spațiu pe ecranul utilizatorului combinând diferite widget-uri într-unul singur. În acest articol, vă vom arăta cum să adăugați un widget tabber jQuery în WordPress.
De ce ar trebui să adăugați un widget tabber jQuery?
Când rulezi un site WordPress, poți adăuga cu ușurință elemente în barele laterale folosind widget-uri drag and drop. Pe măsură ce site-ul tău crește, s-ar putea să simți că nu ai suficient spațiu în bara laterală pentru a afișa tot conținutul util. Exact atunci un tabber devine util. Acesta îți permite să afișezi elemente diferite în aceeași zonă. Utilizatorii pot face clic pe fiecare filă și pot vedea conținutul care îi interesează cel mai mult. Multe site-uri cunoscute îl folosesc pentru a afișa articole populare de astăzi, de săptămâna aceasta și de luna aceasta. În acest tutorial îți vom arăta cum să creezi un widget tabber. Cu toate acestea, nu îți vom arăta ce să adaugi în filele tale. Poți adăuga practic orice dorești.
Notă: acest tutorial este pentru utilizatori de nivel intermediar și va necesita cunoștințe de HTML și CSS. Pentru utilizatorii de nivel începător, vă rugăm să consultați acest articol în schimb.
Crearea unui widget tabber jQuery în WordPress
Să începem. Primul lucru pe care trebuie să-l faceți este să creați un folder pe desktop și să-l numiți wpbeginner-tabber-widget. După aceea, trebuie să creați trei fișiere în acest folder folosind un editor de text simplu, cum ar fi Notepad.
Primul fișier pe care îl vom crea este wpb-tabber-widget.php. Acesta va conține cod HTML și PHP pentru a crea file și un widget WordPress personalizat. Al doilea fișier pe care îl vom crea este wpb-tabber-style.css, și va conține stilizarea CSS pentru containerul filei. Al treilea și ultimul fișier pe care îl vom crea este wpb-tabber.js, care va conține scriptul jQuery pentru comutarea filelor și adăugarea de animații.
Să începem cu fișierul wpb-tabber-widget.php. Scopul acestui fișier este de a crea un plugin care înregistrează un widget. Dacă este prima dată când creezi un widget WordPress, îți recomandăm să arunci o privire la ghidul nostru despre cum să creezi un widget WordPress personalizat sau pur și simplu să copiezi și să lipești acest cod în fișierul 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");')
);
?>
În codul de mai sus, am creat mai întâi un plugin și apoi, în interiorul acelui plugin, am creat un widget. În secțiunea de ieșire a widget-ului am adăugat scripturi și fișier de stiluri și apoi am generat ieșirea HTML pentru filele noastre. În final, am înregistrat widget-ul. Rețineți, trebuie să adăugați conținutul pe care doriți să îl afișați pe fiecare filă.
Acum că am creat widget-ul cu codul PHP și HTML necesar pentru filele noastre, următorul pas este să adăugăm jQuery pentru a le afișa ca file în containerul de file. Pentru a face acest lucru, trebuie să copiați și să lipiți acest cod în fișierul 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);
Acum widget-ul nostru este gata cu jQuery, ultimul pas este să adăugăm stiluri filelor. Am creat un fișier de stiluri exemplu pe care îl puteți copia și lipi în fișierul 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;
}
Atât. Acum doar încărcați folderul wpbeginner-tabber-widget în directorul /wp-content/plugins/ al site-ului dvs. WordPress prin FTP. Alternativ, puteți adăuga și folderul într-o arhivă zip și puteți accesa Plugins » Add New din zona de administrare WordPress. Faceți clic pe fila de încărcare pentru a instala plugin-ul. Odată ce plugin-ul este activat, accesați Appearance » Widgets, trageți și plasați WPBeginner Tabber Widget în bara laterală și gata.
Sperăm că acest tutorial v-a ajutat să creați un tabber jQuery pentru site-ul dvs. WordPress. Pentru întrebări și feedback, puteți lăsa un comentariu mai jos sau ni se puteți alătura pe Twitter sau Google+.
Nitish Chauhan
Salut,
Pluginul meu este activat, dar în secțiunea widget-uri afișează mesajul „Nu există opțiuni pentru acest widget.” Te rog spune-mi cum să activez toate funcțiile și vreau să creez un plugin ca
„jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Fields wrapper
var add_button = jQuery(“.add_field_button”); //Add button ID
//numărul inițial de casete text
jQuery(add_button).click(function(e){ //la clic pe butonul de adăugare intrare
e.preventDefault();
//numărul maxim de casete de intrare permise
//incrementare casetă text
jQuery(wrapper).prepend(‘×’); //adăugare casetă de intrare
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //utilizatorul dă clic pe eliminare text
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});
codul meu de java script. vă rog să sugerați dacă aveți vreo soluție.
Mulțumesc
Nabam Rikam
Am inserat plugin-urile în bara laterală, dar când încerc să dau clic, spune că nu există nicio opțiune pentru acest plugin. Și după ce îl navigăm pe site, vedem trei casete goale. Ghidează-mă puțin aici, frate.
goutham
Nu primesc file sau widget-uri pe site-ul meu. Am copiat și lipit același cod. Nu funcționează.
Kunle
vreau să plasez pluginul tocmai creat într-un loc de pe pagina mea, și nu în barele laterale sau în footer.
cum fac asta, să îl plasez oriunde pe pagina mea web
Zadius
Acesta este al doilea tutorial pe care l-am încercat și, din anumite motive, fișierul plugin-ului nu apare în directorul plugin-urilor de pe site-ul meu. Încărc fișierul direct prin FTP, dar când mă conectez în zona de administrare WordPress, nu apare nimic sub fila plugin-uri. Vă rog să mă sfătuiți. Mulțumesc.
Actualizare: Am arhivat fișierul și l-am încărcat prin interfața plugin-ului WordPress. Fișierul nu apare în folderul plugin-ului meu pe interfața FTP, așa că nu am nicio idee unde apare. Dar l-am instalat, deci mulțumesc!
John
Vă mulțumesc pentru tutorial. Cu toate acestea, am observat că titlul lipsește atunci când adaug widget-ul în zona de widget-uri. Cum pot adăuga spațiu pentru titlu pentru a introduce un titlu?
Drazen
Salut
Mulțumesc pentru asta. Mă întrebam doar cum să adaug o opțiune, astfel încât, atunci când vizualizez widget-ul, să pot pur și simplu să lipesc link-uri în el, în fiecare filă?
De exemplu:
Tab 1 (opțiune de redenumire în opțiunile widget-ului)
– Casetă de text sub ea în opțiunile widget-ului (pentru a putea adăuga text, link-uri etc.)
Fila 2 (opțiune de redenumire în opțiunile widgetului)
– Casetă de text sub ea în opțiunile widgetului (pentru a putea adăuga text, linkuri etc.)
Tab 3 (opțiune de redenumire în opțiunile widget-ului)
– Casetă de text sub ea în opțiunile widget-ului (pentru a putea adăuga text, linkuri etc.)
Mulțumesc
Gavin Wilshen
Tutorial genial. Mulțumesc, băieți!
Grant
Îmi dă în continuare această eroare:
Pluginul nu a putut fi activat deoarece a declanșat o eroare 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
Suport WPBeginner
Grant, tocmai am verificat din nou codul. Plugin-ul s-a activat fără probleme la noi.
Admin
Rahul
Mulțumesc, ești un geniu. Tocmai urma să cumpăr un plugin premium de pe codecanyon și apoi am găsit acest ghid.
Jonathan
De ce, atunci când instalez acest plugin, spune că trebuie actualizat și actualizarea este de la un alt dezvoltator & are peste 3 ani?
Suport WPBeginner
Nu ar trebui să facă asta. Dacă ați schimbat numele pluginului și acesta se potrivește cu alt plugin, atunci WordPress îl va confunda cu celălalt plugin.
Admin
Jonathan
Nu am schimbat nimic; am făcut doar ceea ce ați arătat mai sus.
Jonathan
Acesta este pluginul pe care WordPress îl crede și pe care încearcă să-l actualizeze. http://wordpress.org/plugins/tabber-widget/
Tocmai am actualizat plugin-ul la versiunea 2.0 & și (din orice motiv) asta l-a făcut să nu mai ceară actualizarea la celălalt plugin. Aș încerca să redenumesc & să schimb informațiile celuilalt plugin, dar asta a fost singurul lucru care a părut să funcționeze.
Suport 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.
Suport WPBeginner
Nu am putut reproduce acest lucru. Aveți acces la un alt site WordPress unde puteți încerca acest lucru, doar pentru a testa dacă nu este nimic în neregulă din partea dumneavoastră?
Doris
Acest lucru anulează scopul WordPress de a fi dinamic, nu-i așa? Codificarea textului direct într-un widget? Există o modalitate de a extrage conținut dinamic din baza de date? Noi, începătorii, nu avem multă experiență în codare, știți... S-ar crede că există un plugin care ar face asta...
Suport WPBeginner
Acest tutorial este destinat utilizatorilor de nivel intermediar, iar scopul aici este de a le arăta cum să creeze un widget tabber. Pentru utilizatorii de nivel începător, există mai multe etichete de șablon încorporate care pot genera dinamic conținut în fiecare filă. De exemplu:
Afișează o listă a paginilor tale WordPress:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Afișează Postări Aleatorii:
<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
Afișează comentariile recente:
1-click Use in WordPress
Și multe altele.
Admin
manoj sakhwar
Articol frumos. mulțumesc...
Grant
Ceea ce nu înțeleg este unde să lipesc codul. În ce tip de document pun codul? (Am Mac).
Suport WPBeginner
Utilizați TextEdit pentru a crea aceste fișiere.
Admin
Keith Davis
Ador acest lucru, băieți.
Caut mereu modalități de a folosi mai bine spațiul limitat.
Jim Davis
Am instalat fișierele și am activat widget-ul. Se afișează conform așteptărilor, însă, clic pe filele Tab 2 și Tab 3 nu schimbă conținutul. Conținutul rămâne cel de sub Tab 1. Am omis ceva? Vedeți site-ul meu de test la http://jimdavis.org/blog/
Jim
Suport WPBeginner
Jim, nu ai ratat nimic. Acesta este un widget exemplu și îl poți edita. Introdu propriul cod și conținut în fiecare tab editând fișierul plugin-ului wpb-tabber-widget.php
Admin