Nakakita ka ba ng tabber area sa mga sikat na site na nagbibigay-daan sa iyo upang makita ang mga sikat, kamakailang, at itinatampok na mga post sa isang click lamang? Ito ay tinatawag na jQuery tabber widget, at nagbibigay-daan ito sa iyo upang i-save ang puwang sa screen ng gumagamit sa pamamagitan ng pagsasama-sama ng iba’t ibang mga widget sa isa. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng jQuery Tabber Widget sa WordPress.
Bakit Dapat Mong Magdagdag ng jQuery Tabber Widget?
Kapag nagpapatakbo ng isang website ng WordPress, maaari mong madaling magdagdag ng mga item sa iyong mga sidebar gamit ang drag and drop widgets. Habang lumalaki ang iyong site, maaari mong madama na wala kang sapat na espasyo sa sidebar upang ipakita ang lahat ng kapaki-pakinabang na nilalaman. Iyon ay eksaktong kapag ang isang tabber ay madaling gamitin. Pinapayagan ka nitong magpakita ng iba’t ibang mga item sa isang parehong lugar. Ang mga gumagamit ay maaaring mag-click sa bawat tab at makita ang nilalaman na kanilang pinaka-interesado. Ang isang pulutong ng mga malalaking pangalan ng mga site na gamitin ito upang ipakita ang tanyag na artikulo ngayon, sa linggong ito, at sa buwang ito. Sa tutorial na ito ipapakita namin sa iyo kung paano lumikha ng tabber widget. Gayunpaman, hindi namin ipinakita sa iyo kung ano ang idaragdag sa iyong mga tab. Maaari kang magdagdag ng anumang bagay na gusto mo.
Tandaan: ang tutorial na ito ay para sa mga gumagamit ng antas ng intermediate at mangangailangan ng kaalaman sa HTML at CSS. Para sa mga gumagamit ng antas ng beginner, mangyaring sumangguni sa artikulong ito sa halip.
Paglikha ng jQuery Taber Widget sa WordPress
Magsimula na tayo. Ang unang bagay na kailangan mong gawin ay lumikha ng isang folder sa iyong desktop at pangalanan ito site-tabber-widget . Pagkatapos nito, kailangan mong lumikha ng tatlong file sa loob ng folder na ito gamit ang plain text editor tulad ng Notepad.
Ang unang file na aming gagawin ay wpb-tabber-widget.php . Maglalaman ito ng HTML at PHP code upang lumikha ng mga tab at isang custom na widget ng WordPress. Ang pangalawang file na aming gagawin ay wpb-tabber-style.css , at naglalaman ito ng estilo ng CSS para sa mga tab na lalagyan. Ang ikatlo at ang huling file na gagawin namin ay wpb-tabber.js , na naglalaman ng jQuery script para sa mga switching tab at pagdaragdag ng animation.
Magsimula tayo sa wpb-tabber-widget.php file. Ang layunin ng file na ito ay upang lumikha ng isang plugin na nagrerehistro ng isang widget. Kung ito ang iyong unang pagkakataon na lumikha ng isang WordPress widget, inirerekumenda namin na tingnan mo ang aming kung paano lumikha ng isang pasadyang WordPress widget na gabay o kopyahin at i-paste ang code na ito sa wpb-tabber-widget.php file:
lugar
Plugin URI: http://www.site.com
Paglalarawan: Ang isang simpleng jquery tabber widget.
Bersyon: 1.0
May-akda: site
May-akda ng URI: http://www.site.com
Lisensya: GPL2
* /
/ / paglikha ng isang widget
klase WPBTabberWidget nagpalawak WP_Widget {
function na WPBTabberWidget () {
$ widget_ops = array (
'classname' => 'WPBTabberWidget',
'paglalarawan' => 'Simple jQuery Taber Widget'
);
$ this-> WP_Widget (
'WPBTabberWidget',
'Site Taber Widget',
$ widget_ops
);
}
function na widget ($ args, $ halimbawa) {// sidebar output ng widget
function wpb_tabber () {
/ / Ngayon enqueue namin ang aming stylesheet at 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');
/ / Paglikha ng mga tab na iyong idaragdag sa iyo ang sariling code sa loob ng bawat tab
?>
- Tab 1
- Tab 2
- Tab 3
Sa code sa itaas, kami ay unang lumikha ng isang plugin at pagkatapos ay nasa loob ng plugin na nilikha namin ang isang widget. Sa seksyon ng output ng widget nagdagdag kami ng mga script at stylesheet at pagkatapos ay nakabuo kami ng output ng HTML para sa aming mga tab. Sa wakas ay nakarehistro namin ang widget. Tandaan, kailangan mong idagdag ang nilalaman na nais mong ipakita sa bawat tab.
Ngayon na nilikha namin ang widget na may PHP at HTML code na kinakailangan para sa aming mga tab, ang susunod na hakbang ay upang magdagdag ng jQuery upang maipakita ang mga ito bilang mga tab sa lalagyan ng tab. Upang gawin iyon, kailangan mong kopyahin at idikit ang code na ito wp-tabber.js file.
(function ($) {
$ (". tab_content"). itago ();
$ ("ul.tabs li: first"). addClass ("aktibo"). ipakita ();
$ (". tab_content: first"). ipakita ();
$ ("ul.tabs li"). click (function () {
$ ("ul.tabs li"). removeClass ("aktibo");
$ (this) .addClass ("aktibo");
$ (". tab_content"). itago ();
var activeTab = $ (this) .find ("a"). attr ("href");
// $ (activeTab) .fadeIn ();
kung ($ .browser.msie) {$ (activeTab) .show ();}
ibang {$ (activeTab) .fadeIn ();}
bumalik mali;
});
}) (jQuery);
Ngayon ang aming widget ay handa na gamit ang jQuery, ang huling hakbang ay upang magdagdag ng estilo sa mga tab. Gumawa kami ng sample stylesheet na maaari mong kopyahin at i-paste wpb-tabber-style.css file:
ul.tabs {
posisyon: kamag-anak;
z-index: 1000;
lumutang pakaliwa;
hangganan-kaliwa: 1px solid # C3D4EA;
}
ul.tabs li {
posisyon: kamag-anak;
overflow: nakatago;
taas: 26px;
lumutang pakaliwa;
margin: 0;
padding: 0;
line-height: 26px;
background-color: # 99B2B7;
hangganan: 1px solid # C3D4EA;
border-left: none;
}
ul.tabs li a {
display: block;
padding: 0 10px;
balangkas: wala;
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 {
kulay: #FFFFFF;
}
.tab_container {
posisyon: kamag-anak;
itaas: -1px;
z-index: 999;
lapad: 100%;
lumutang pakaliwa;
laki ng font: 11px;
background-color: # D5DED9;
hangganan: 1px solid # C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
estilo ng listahan: none;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
malinaw: parehong;
}
lugar
lugar
Umaasa kami na nakatulong ang tutorial na lumikha ka ng jQuery tabber para sa iyong WordPress site. Para sa mga tanong at puna maaari kang mag-iwan ng komento sa ibaba o sumali sa amin sa Twitter o Google+.