क्या आपको लोकप्रिय साइट्स पर एक टैबबेर क्षेत्र देखा गया है जो आपको लोकप्रिय, हालिया, और विशेष रुप से पोस्ट देखने के लिए एक क्लिक के साथ अनुमति देता है? इसे jQuery टैबबर विजेट कहा जाता है, और यह आपको अलग-अलग विगेट्स को एक में जोड़कर उपयोगकर्ता स्क्रीन पर अंतरिक्ष को बचाने के लिए अनुमति देता है। इस आलेख में, हम आपको दिखाएंगे कि कैसे वर्डप्रेस में एक jQuery टैबबर विजेट को जोड़ने के लिए।
क्यों आप एक jQuery Tabber विजेट जोड़ना चाहिए?
वर्डप्रेस वेबसाइट चलाने के दौरान, आप ड्रैग और ड्रॉप विजेट का उपयोग करके आसानी से अपने साइडबार में आइटम जोड़ सकते हैं। जैसे ही आपकी साइट बढ़ती है, आपको लगता है कि आपके पास सभी उपयोगी सामग्री दिखाने के लिए साइडबार में पर्याप्त जगह नहीं है। यह वास्तव में जब एक tabber काम में आता है यह आपको एक ही क्षेत्र में विभिन्न मदों को दिखाने की अनुमति देता है। उपयोगकर्ता प्रत्येक टैब पर क्लिक कर सकते हैं और उस सामग्री को देख सकते हैं जिसमें वे सबसे अधिक रुचि रखते हैं। बहुत बड़ी साइट साइट आज इसका लोकप्रिय लेख, इस सप्ताह और इस महीने दिखाने के लिए उपयोग करती है। इस ट्यूटोरियल में हम आपको दिखाएंगे कि टैबबर विजेट कैसे बनाया जाए। हालांकि, हम आपको नहीं दिखा रहे हैं कि आपके टैब में क्या शामिल होना है। आप मूलभूत रूप से कुछ भी जोड़ सकते हैं।
नोट: यह ट्यूटोरियल इंटरमीडिएट स्तर के उपयोगकर्ताओं के लिए है और HTML और CSS ज्ञान की आवश्यकता होगी। शुरुआती स्तर के उपयोगकर्ताओं के लिए कृपया इसके बजाय इस आलेख का संदर्भ लें।
WordPress में jQuery Tabber विजेट का निर्माण
आएँ शुरू करें। आपको जो कुछ करना है, वह अपने डेस्कटॉप पर एक फ़ोल्डर बनायेगा और इसे नाम दें साइट-tabber-विजेट । इसके बाद, आपको नोटपैड जैसे सादा पाठ संपादक का उपयोग करके इस फ़ोल्डर के अंदर तीन फाइलें बनाने की आवश्यकता है
पहली फाइल हम बनाने के लिए जा रहे हैं WPB-tabber-widget.php । इसमें टैब और एक कस्टम वर्डप्रेस विजेट बनाने के लिए HTML और PHP कोड शामिल होंगे। दूसरी फाइल जो हम पैदा करेंगे I WPB-tabber-style.css , और इसमें टैब कंटेनर के लिए सीएसएस स्टाइल शामिल होगा तीसरी और आखिरी फाइल हम पैदा करेंगे WPB-tabber.js , जिसमें टैब स्विच करने और एनीमेशन जोड़ने के लिए jQuery स्क्रिप्ट शामिल होगा।
चलो साथ – साथ शुरू करते हैं WPB-tabber-widget.php फ़ाइल। इस फ़ाइल का उद्देश्य एक प्लग इन बनाने के लिए है जो विजेट को पंजीकृत करता है यदि यह आपकी पहली बार एक वर्डप्रेस विजेट है, तो हम सलाह देते हैं कि आप कस्टम वर्डप्रेस विजेट गाइड बनाने या बस इस कोड को कॉपी और पेस्ट में कैसे देखें WPB-tabber-widget.php फ़ाइल:
साइट
प्लगइन यूआरआई: http://www.site.com
विवरण: एक साधारण jquery tabber विजेट
संस्करण: 1.0
लेखक: साइट
लेखक यूआरआई: http://www.site.com
लाइसेंस: जीपीएल 2
* /
// एक विजेट बनाना
वर्ग WPBTabberWidget WP_Widget विस्तारित {
फ़ंक्शन WPBTabberWidget () {
$ widget_ops = सरणी (
'classname' => 'WPBTabberWidget',
'विवरण' => 'सरल jQuery टैबर विजेट'
);
$ This-> WP_Widget (
'WPBTabberWidget',
'साइट टैबर विजेट',
$ widget_ops
);
}
फ़ंक्शन विजेट ($ आर्ग्स, $ उदाहरण) {// विजेट साइडबार आउटपुट
फ़ंक्शन wpb_tabber () {
// अब हम अपने स्टाइलशीट और 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__), सरणी ('jquery'));
wp_enqueue_style ( 'WPB-tabber शैली');
wp_enqueue_script ( 'WPB-tabber-विजेट-js');
// टैब बनाना आप प्रत्येक टैब के अंदर अपना कोड जोड़ेंगे
?>
- टैब 1
- टैब 2
- टैब 3
ऊपर दिए गए कोड में, हमने सबसे पहले एक प्लगइन बनाया और फिर उस प्लगइन के अंदर हमने एक विजेट बनाया। विजेट आउटपुट अनुभाग में हमने स्क्रिप्ट और स्टाइलशीट जोड़ा और फिर हमने हमारे टैब के लिए HTML आउटपुट जेनरेट किया। अंत में हमने विजेट को पंजीकृत किया याद रखें, आपको उस सामग्री को जोड़ने की आवश्यकता है जिसे आप प्रत्येक टैब पर प्रदर्शित करना चाहते हैं।
अब जब हमने हमारे टैब के लिए आवश्यक PHP और HTML कोड वाला विजेट बनाया है, तो अगला कदम टैब कंटेनर में टैब के रूप में प्रदर्शित करने के लिए jQuery को जोड़ना है। ऐसा करने के लिए आपको इस कोड को कॉपी और पेस्ट करना होगा WP-tabber.js फ़ाइल।
(फ़ंक्शन ($) {
$ ( "। Tab_content") को छिपाने ()।;
$ ("उल। टीएबीएस ली: प्रथम")। ऐडक्लास ("सक्रिय")। शो ();
$ ( "। Tab_content: पहले") शो ();।
$ ("उलटैब्स ली")। क्लिक करें (फ़ंक्शन () {
$ ("उल। टीएबीएस ली")। निकालेंक्लॅस ("सक्रिय");
$ (This) .addClass ( "सक्रिय");
$ ( "। Tab_content") को छिपाने ()।;
var activeTab = $ (this)। ढूँढें ("a")। attr ("href");
// $ (activeTab) .fadeIn ();
अगर ($ .browser.msie) {$ (activeTab) .show ();}
else {$ (activeTab)। fadeIn ();}
विवरण झूठा है;
});
}) (JQuery);
अब हमारे विजेट को jQuery के साथ तैयार है, टैब में स्टाइल जोड़ने के लिए अंतिम चरण है। हमने एक नमूना स्टाइलशीट बनाया है जिसे आप कॉपी और पेस्ट कर सकते हैं WPB-tabber-style.css फ़ाइल:
ul.tabs {
स्थिति: रिश्तेदार;
z- सूचकांक: 1000;
बाईंओर तैरना;
सीमा-बाएं: 1 पीएक्स ठोस # सी 3 डी 4 ईए;
}
उलटेबस ली {
स्थिति: रिश्तेदार;
छिपा हुआ सैलाब;
ऊंचाई: 26 पिक्सेल;
बाईंओर तैरना;
मार्जिन: 0;
पैडिंग: 0;
रेखा-ऊंचाई: 26px;
पृष्ठभूमि रंग: # 99 बी 2 बी 7;
सीमा: 1 पीएक्स ठोस # सी 3 डी 4 ईए;
सीमा-बायां: कोई नहीं;
}
उलटेबस ली एक {
प्रदर्शन क्षेत्र;
पैडिंग: 0 10px;
रूपरेखा: कोई नहीं;
पाठ-सजावट: कोई नहीं;
}
html ul.tabs li.active,
एचटीएमएल उल। टीएबीएस ली। एक्टिव ए: होवर {
पृष्ठभूमि रंग: # D5DED9;
सीमा नीचे: 1px ठोस # D5DED9;
}
.widget-area .widget .tabs a {
रंग: # एफएफएफएफएफएफ;
}
.tab_container {
स्थिति: रिश्तेदार;
शीर्ष: -1px;
z- इंडेक्स: 99 9;
चौड़ाई: 100%;
बाईंओर तैरना;
फ़ॉन्ट-आकार: 11px;
पृष्ठभूमि रंग: # D5DED9;
सीमा: 1 पीएक्स ठोस # सी 3 डी 4 ईए;
}
.tab_content {
पैडिंग: 7px 11px 11px 11px;
रेखा-ऊंचाई: 1.5;
}
.tab_content ul {
मार्जिन: 0;
पैडिंग: 0;
सूची शैली: कोई नहीं;
}
.tab_content li {
मार्जिन: 3px 0;
}
.tab-clear {
दोनों को साफ करो;
}
साइट
साइट
हम आशा करते हैं कि इस ट्यूटोरियल ने आपको अपने वर्डप्रेस साइट के लिए एक जेयिबैब टैबर बनाने में मदद की है। प्रश्नों और प्रतिक्रिया के लिए आप नीचे एक टिप्पणी छोड़ सकते हैं या ट्विटर या Google+ पर हमसे जुड़ सकते हैं