कैसे MakeUseOf की तरह अपने खुद के चिपचिपा हैडर बार बनाने के लिए

विज्ञापन

लगभग एक महीने पहले, हमने MakeUseOf के लिए एक नया इंटरफ़ेस तत्व पेश किया - एक फ्लोटिंग नेविगेशन और सर्च बार। हमें जो फीडबैक मिल रहा है वह लगभग पूरी तरह से सकारात्मक है, आंतरिक खोज ट्रैफ़िक ने धूम मचा दी है, और कुछ पाठक यह पूछ रहे हैं कि अपनी साइट के लिए कैसे बनाया जाए, इसलिए मैंने सोचा कि मैं इसका हिस्सा हूँ।

हम स्क्रीन के शीर्ष पर पट्टी को चिपकाने के लिए jQuery का उपयोग करेंगे - लेकिन केवल एक निश्चित बिंदु पर ही। मैं डिफ़ॉल्ट वर्डप्रेस थीम - ट्वेंटी इलेवन में यह सब करूंगा, हालांकि यह किसी भी विषय या वेबसाइट पर लागू किया जा सकता है जिसे आप पर्याप्त रूप से समझते हैं कि कैसे संशोधित किया जाए।

HTML

सबसे पहले, शीर्ष लेख खोलें ।php और उस नेविगेशन बार की पहचान करें जिसे हम चिपचिपा बना रहे हैं। जैसा कि मैंने कहा, नीचे का कोड डिफ़ॉल्ट बीस-ग्यारह के लिए है; तुम्हारा अलग-अलग हो सकता है।

सबसे पहले, इस पूरे NAV अनुभाग के आसपास एक नया DIV कंटेनर जोड़ें।

इसके अलावा, उस डिफ़ॉल्ट खोज बार को यहां ले जाने दें। आप इसे थीम के शीर्ष दाईं ओर डिफ़ॉल्ट रूप से जोड़ेंगे; लाइन ढूंढो php get_search_form (); और इसे हमारे नेविगेशन अनुभाग में पेस्ट करें। इस फ़ाइल में इसके अन्य सभी इंस्टेंस को हटा दें।

यदि आप अभी बचत करते हैं और ताज़ा करते हैं, तो आप खोज फ़ॉर्म को वास्तव में नेविगेशन बार में दिखाई नहीं देंगे - यह अभी भी शीर्ष दाईं ओर दिखाता है। क्योंकि यह सीएसएस के साथ बिल्कुल तैनात है, और हम एक सेकंड में वह सब हटा देंगे।

सीएसएस

मुख्य style.css फ़ाइल खोलें और खोज फ़ॉर्म के लिए अनुभाग ढूंढें:

#ब्रांडिंग # खोज {{ }

इसके अंदर जो कुछ भी है उसे बदलें (इसके साथ कुछ पूर्ण स्थिति सहित चार लाइनें होनी चाहिए):

#ब्रांडिंग # खोज बाईंओर तैरना; पृष्ठभूमि: सफेद; मार्जिन: 7 पीएक्स; }

रंग या मार्जिन को समायोजित करने के लिए स्वतंत्र महसूस करें। यदि आप बार के दाईं ओर दिखाई देते हैं, तो फ्लोट को बदलें। इस विषय में, जब उपयोगकर्ता इसके अंदर क्लिक करता है, तो खोज का विस्तार किया जाता है; इस ट्यूटोरियल के दायरे से बाहर, लेकिन आप हमारे MakeUseOf खोज पर एक समान प्रभाव देख सकते हैं।

jQuery

यदि आप सोच रहे हैं कि हम ऐसा करने के लिए jQuery का उपयोग क्यों कर रहे हैं, तो यह सरल है: CSS तय हो गया है, और इसे गतिशील रूप से समायोजित नहीं किया जा सकता है। जबकि हम एक चिपचिपा हेडर बनाने के लिए CSS का उपयोग कर सकते हैं, यह पृष्ठ पर शीर्ष तत्व होना चाहिए। हमारे पास समस्या यह है कि हमारा मेनू शीर्ष तत्व नहीं है, इसलिए हम इसे चिपचिपा होने के साथ शुरू नहीं कर सकते। यह वह जगह है जहाँ jQuery का उपयोग किया जाता है; जब उपयोगकर्ता किसी निश्चित बिंदु पर जाता है, तो हम जांच कर सकते हैं; तब, और केवल तब, इसे चिपचिपा बनाएं।

अपने विषय में jQuery जोड़कर शुरू करें। आपकी थीम पहले से ही लोड हो सकती है; यदि नहीं, तो कोई चिंता नहीं। आप निम्न को अपने कार्यों में जोड़ सकते हैं, जैसे कि निम्नलिखित कोडों को जोड़कर।

php। फ़ंक्शन my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

या आप बस वर्डप्रेस को पूरी तरह से बायपास कर सकते हैं और हेडर फाइल में इसे हार्डकोर कर सकते हैं। अपने सिर के खंड में कहीं, बस इस पंक्ति को जोड़ें:

यदि आप पहली विधि का उपयोग करते हैं, तो इसे लोड किया जाएगा कोई विवाद नहीं मोड, जिसका अर्थ है कि आपको jQuery फ़ंक्शन का उपयोग करने के लिए अपने कोड में "jQuery" का उपयोग करने की आवश्यकता होगी। यदि आप इसे सीधे अपने हेडर में जोड़ने की दूसरी विधि का उपयोग करते हैं, तो आप मानक jQuery के एक्सेसर का उपयोग कर सकते हैं $. मैं नीचे दिए गए कोड में दूसरी विधि मानूंगा।

इसलिए, कुछ वास्तविक jQuery कोड जोड़ने के लिए, निम्नलिखित को अपने अंत में कहीं रखें header.php - मैंने अपने से ठीक पहले मुझे रखा

पहली चीज जो स्क्रिप्ट करती है, वह यह पता लगाना है कि नेविगेशन बार कहां से शुरू होता है, और उस मूल्य को याद रखता है। दूसरे, हम स्क्रॉल इवेंट से जुड़ते हैं - इसका मतलब है कि हर बार जब उपयोगकर्ता पेज को स्क्रॉल करता है, तो हम कोड के इस ब्लॉक को चला सकते हैं। जब कोड चलता है, तो दो तरीके हो सकते हैं:
1. यदि विंडो ने नेविगेशन बार को स्क्रॉल किया है, तो हम इसे एक निश्चित सीएसएस बनाते हैं (यह "चिपचिपा" भाग है)।
2. यदि विंडो का शीर्ष नेविगेशन बार की मूल स्थिति से अधिक है (यानी, उपयोगकर्ता को फिर से ऊपर स्क्रॉल किया गया है), तो हम इसे डिफ़ॉल्ट स्थिर स्थिति में वापस रख देते हैं।

ऐसे दो बिंदु हैं जिन पर मैं आपका ध्यान आकर्षित करना चाहता हूं:

• गलत स्थिति प्राप्त करने के बग को ठीक करने के लिए 5:8 है; इसके बिना, बार जल्द ही अपनी चिपचिपी अवस्था को शुरू कर रहा है - यह देखने के लिए कि मेरा क्या मतलब है इसे हटा दें। यह सभी विषयों में उपयोगी नहीं होगा, और आप शायद एक बेहतर समाधान के साथ आ सकते हैं।
• जब यह चिपचिपी अवस्था में चला जाता है, तो नेविगेशन बार बदलते हुए चौड़ाई की समस्या को ठीक करने के लिए, शैली को संपादित करें। एसएमएस, पंक्ति 550, पढ़ने के लिए 1000 पिक्सेल के बजाय 100%

यह, आपका नेविगेशन बार अब अच्छी तरह से चिपचिपा होना चाहिए।

सारांश:

पूर्ण प्रतिस्थापन header.php इस ट्यूटोरियल के लिए कोड पाया जा सकता है यह पास्टबीन; और प्रतिस्थापन style.cssयहाँ. मुझे आशा है कि आपने इस छोटे से ट्यूटोरियल का आनंद लिया है; यदि आपको कोई समस्या हो रही है, तो टिप्पणियों में पोस्ट करें, लेकिन कृपया अपनी साइट को सार्वजनिक रूप से सुलभ बनाने के लिए याद रखें ताकि मैं साथ जा सकूं और स्वयं देख सकूं। यदि आप यहां नए हैं, तो हमारे सभी अन्य की जांच करना सुनिश्चित करें ब्लॉगर और वेब विकास लेख.