WP-PageNavi वर्डप्रेस प्लगइन स्टाइल करने के लिए गाइड

यदि आप से परिचित नहीं हैं WP-PageNavi वर्डप्रेस प्लगइन, यह आपको सामान्य पिछले / अगले नेविगेशन को अधिक उन्नत, क्रमांकित पेजिंग नेविगेशन के साथ बदलने की अनुमति देता है। यह एक ऐसी विशेषता है जिसे मैंने शामिल किए गए कई विषयों पर शामिल किया है, जिनमें मैं भी शामिल हूं RS16, Blogwave, RS17, तथा उज्ज्वल बिन्दु.


RS16 पेजनवी

इस ट्यूटोरियल में, मैं इस पर जाने वाला हूँ:

  • WP-PageNavi स्थापित करें और इसे अपने विषय में ठीक से एकीकृत करें.
  • डिफ़ॉल्ट प्लगइन शैलियों को अक्षम और / या ओवरराइड करने के दो तरीके.
  • WP-PageNavi द्वारा HTML मार्कअप आउटपुट का अवलोकन
  • अंत में, सीएसएस के माध्यम से अपने पृष्ठ नेविगेशन के रूप को कैसे बदलना है

प्लगइन स्थापित करें

जब WP-PageNavi प्लगइन स्थापित करने की बात आती है तो आपके पास दो विकल्प होते हैं.

  • से डाउनलोड करें WordPress.org, इसे अपने / wp-content / plugins / directory पर अपलोड करें, और सक्रिय करें (aka), पुराने तरीके से).
  • अपने होस्ट के आधार पर, आप अपने वर्डप्रेस व्यवस्थापक पैनल में प्लगइन्स के तहत “नया जोड़ें” पृष्ठ में खोज करके स्वचालित रूप से प्लग इन स्थापित कर सकते हैं। बस “pagenavi” के लिए खोज करें और आपको इसे ढूंढना चाहिए.

ठीक है, यह बहुत आसान होना चाहिए। अब यह आपके हाथों को एकीकरण भाग के लिए कोड में थोड़ा गंदा होने का समय है.

थीम एकीकरण

हमारे विषय एकीकरण में, हम कभी नहीं चाहते कि कोई भी त्रुटि प्रदर्शित हो, यदि WP-PageNavi सक्रिय न हो। इसके बजाय, हम यह सुनिश्चित करेंगे कि यह पुराने / अगले शैली के नेविगेशन पर वापस गिर जाए। ऐसा करने के लिए, हम एक का उपयोग करेंगे function_exists सशर्त जाँच करें.

मान लें कि यह आपका सामान्य पिछला / अगला वर्डप्रेस नेविगेशन कोड है:

<?php next_posts_link (‘«पुरानी प्रविष्टियाँ’) ?>
<?php पिछली_पोस्ट्स_लिंक (‘नई प्रविष्टियाँ »’) ?>

हम इसे निम्नलिखित में बदल देंगे:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } अन्य { ?>
<?php next_posts_link (‘«पुरानी प्रविष्टियाँ’) ?>
<?php पिछली_पोस्ट्स_लिंक (‘नई प्रविष्टियाँ »’) ?>
<?php} ?>

यह मूल रूप से यह देखने के लिए जाँच करता है कि क्या WP-PageNavi सक्रिय है और यदि यह है, तो यह नया पेज नेविगेशन कोड प्रदर्शित करता है। यदि नहीं, तो यह इनायत से पिछले / अगले नेविगेशन पर वापस गिर जाता है.

कृपया ध्यान दें: आपके सीएसएस को कैसे कोडित किया जाता है, इसके आधार पर, आप wp_pagenavi () डालना चाहते हैं; “नेविगेशन” (या समतुल्य) div के अंदर का हिस्सा। WP-PageNavi “wp-pagenavi” नामक एक नई कक्षा से बाहर निकलते समय ध्यान रखें, हालांकि हम अलग से शैली के लिए उपयोग कर सकते हैं.

प्लगइन शैलियों को ओवरराइड करें

डिफ़ॉल्ट रूप से, WP-PageNavi स्वचालित रूप से अपनी प्लगइन निर्देशिका से अपनी साइट के हेडर में pagenavi-css.css नामक एक CSS फ़ाइल सम्मिलित करता है। हम नहीं चाहते कि ये डिफ़ॉल्ट शैलियाँ हमारी अपनी शांत कस्टम-निर्मित शैलियों के साथ हस्तक्षेप करें, इसलिए हम पूरी तरह से इनसे छुटकारा पा लेंगे, और ऐसा करने के दो सरल तरीके हैं.

  • अपनी थीम डायरेक्टरी में CSS फ़ाइल जोड़ें – यह डिफ़ॉल्ट WP-PageNavi शैलियों को ओवरराइड करने का शायद सबसे आसान तरीका है। यदि आपके पास अपनी थीम डायरेक्टरी में pagenavi-css.css नामक एक फाइल है, तो WP-PageNavi प्लगइन निर्देशिका में डिफ़ॉल्ट एक के बजाय इसका उपयोग करेगा।.
  • अपने कार्यों के लिए एक स्निपेट जोड़ें। पीडीएफ फाइल – निम्न कोड स्निपेट I से लिया गया WP व्यंजनों उपरोक्त व्यवहार को पूरी तरह से अक्षम कर देगा और प्लगइन से किसी भी स्टाइलशीट को शामिल नहीं करेगा (या तो डिफ़ॉल्ट एक या आपकी थीम निर्देशिका में ओवरराइड).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

फ़ंक्शन my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

बस उस कोड को अपनी थीम के फंक्शन्स में डाल दें। फाइल को सीएसएस करें और अपने नियमित विषय की स्टाइलशीट में सीएसएस स्टाइल को जोड़ें (आमतौर पर स्टाइल। टीसीपी).

ध्यान दें: सुनिश्चित करें कि कोड को कोष्ठक से घिरा हुआ है जैसे <?php … ?> यदि आपकी फ़ंक्शन फ़ाइल वर्तमान में रिक्त है.

WP-PageNavi HTML मार्कअप और सीएसएस चयनकर्ता

यहाँ WP-PageNavi मार्कअप कैसा दिखता है। निम्नलिखित उदाहरण में, चार पृष्ठ हैं, वर्तमान में पृष्ठ दो पर हैं.

पिछला1
2
3
आगे

अंतिम »

उपरोक्त HTML मार्कअप को लक्षित करने के लिए हम निम्नलिखित CSS चयनकर्ताओं का उपयोग कर सकते हैं:

  • .wp-pagenavi – सीएसएस क्लीयर, पैडिंग / मार्जिन, फॉन्ट साइज और स्टाइल (बोल्ड, इटैलिक, आदि) के लिए उपयोगी, संपूर्ण डिव पर लागू होता है।
  • .wp-pagenavi a – पृष्ठ संख्या और पिछले / अगले सहित पृष्ठ नेविगेशन के अंदर सभी लिंक को लक्ष्य करता है.
  • .wp-pagenavi a.page – विशेष रूप से लक्ष्य पृष्ठ संख्या
  • .wp-pagenavi a.first – विशेष रूप से “पहले” लिंक को लक्ष्यित करें (ऊपर सूचीबद्ध नहीं)
  • .wp-pagenavi a.last – विशेष रूप से “अंतिम” लिंक को लक्ष्य करता है
  • .wp-pagenavi span – वर्तमान पृष्ठ संख्या को विस्तार भाग (तीन बिंदुओं वाली चीज़) के साथ लक्ष्यित करता है
  • .wp-pagenavi span.current – विशेष रूप से वर्तमान पृष्ठ संख्या को लक्षित करता है
  • .wp-pagenavi span.extend – विशेष रूप से विस्तार (तीन डॉट्स चीज़) को लक्षित करता है
  • .wp-pagenavi span.pages – विशेष रूप से पृष्ठ संख्या प्रदर्शन को लक्षित करता है (यानी 4 के पृष्ठ 1)

ध्यान दें: डिफ़ॉल्ट रूप से पिछले और अगले लिंक, उन पर कोई सीएसएस वर्ग नहीं है। यदि आप उन्हें पृष्ठ संख्याओं और पहले / अंतिम लिंक से पूरी तरह से अलग करना चाहते हैं, तो उन्हें .wp-pagenavi चयनकर्ता में जोड़ी गई किसी भी शैली को रीसेट करना होगा। अगर इसका कोई मतलब नहीं है, तो निम्नलिखित (वास्तव में सरलीकृत) उदाहरण पर एक नज़र डालें.

उदाहरण के लिए: मान लीजिए कि आप पिछले और अगले लिंक को बोल्ड बनाना चाहते हैं, लेकिन हर दूसरे लिंक का वजन सामान्य है। आपको निम्नलिखित करने की आवश्यकता होगी:

.wp-pagenavi a {font-weight: bold; } / * पिछला और अगला लिंक केवल * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {फ़ॉन्ट-भार: सामान्य; } / * अन्य लिंक * /

मैंने उदाहरण के उद्देश्यों के लिए एक नियम में पेज नंबर लिंक, पहला लिंक, और अंतिम लिंक संयुक्त किया। बेशक, आप उन्हें अलग कर सकते हैं और प्रत्येक में अधिक विशिष्ट शैलियों को जोड़ सकते हैं.

यदि डिफ़ॉल्ट रूप से पिछले / अगले लिंक में एक वर्ग जोड़ा गया था, तो यह बहुत आसान होगा, लेकिन वहाँ नहीं है। यह बहुत बड़ी बात नहीं है क्योंकि आप उन्हें वैसे भी रीसेट कर सकते हैं.

महत्वपूर्ण अपडेट: से अद्यतन के लिए धन्यवाद scribu टिप्पणियों में, यह WP-PageNavi का सबसे नया संस्करण निकला है, उन पर पिछली / अगली कक्षाएं हैं (भाग में धन्यवाद) Yoast).

आप क्रमशः .wp-pagenavi a .prepretpostslink और .wp-pagenavi a.nextpostslink क्रमशः पिछले और अगले लिंक का चयन करने के लिए उपयोग कर सकते हैं.

बहुत ऊपर सब कुछ ऊपर जब तक चयनकर्ताओं की अव्यवस्थित सूची अब तक प्रासंगिक नहीं है, लेकिन मैं इसे सिर्फ इसलिए रखूंगा क्योंकि यह कुछ अन्य स्थितियों में सीएसएस को ओवरराइड करने में एक उपयोगी सबक हो सकता है। नीचे दिए गए CSS उदाहरण अभी भी लागू होंगे क्योंकि मैंने वैसे भी उन चयनकर्ताओं का उपयोग नहीं किया था.

एक सीएसएस उदाहरण

यहाँ एक PageNavi स्टाइल का एक उदाहरण है, जिसे मैंने बनाया था Blogwave विषय.

Blogwave नवीनीकृत पेजनवी

इस कोड को मैंने इस लुक के लिए इस्तेमाल किया है, मल्टी-सिंगल-लाइन सीएसएस वैकल्पिक है:

.wp-pagenavi a, .wp-pagenavi span {
गद्दी: 5 पीएक्स; मार्जिन-राइट: 10px;
फ़ॉन्ट-आकार: 15 पीएक्स; रंग: # 03719 सी; पाठ-सजावट: कोई नहीं;
बॉर्डर: 3px ठोस #ccc; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
पृष्ठभूमि: # 03719 सी;
रंग: #fff;
बॉर्डर: 3px ठोस #AFAFAF;
}
.wp-pagenavi span.current {फ़ॉन्ट-वजन: बोल्ड; }

और यहाँ इसका क्या मतलब है:

पहला नियम
.Wp-pagenavi div के अंदर .wp-pagenavi a, .wp-pagenavi स्पैन सभी एंकर और स्पैन एलिमेंट्स (बहुत ज्यादा सब कुछ) का चयन करता है।.

  • नियम की पहली पंक्ति 5px की पैडिंग सेट करती है, इसलिए इसे हल्के भूरे रंग की सीमा (नीचे परिभाषित) के खिलाफ तैयार नहीं किया जाएगा। यह प्रत्येक तत्व के दाईं ओर 10px का एक सुसंगत मार्जिन भी सेट करता है, ताकि प्रत्येक के बीच बराबर रिक्ति हो.
  • दूसरी पंक्ति 15px का फ़ॉन्ट आकार सेट करती है, पाठ का रंग नीला करती है, और सुनिश्चित करती है कि लिंक की कोई रेखांकन नहीं है.
  • तीसरी पंक्ति सब कुछ पर एक ठोस 3px ग्रे बॉर्डर सेट करती है। सीमा-त्रिज्या कोड कोनों को गोल बनाता है.

दूसरा नियम
.Wp-pagenavi a: hover, .wp-pagenavi span.current क्रमशः लिंक होवर प्रभाव के साथ-साथ वर्तमान पृष्ठ संख्या का भी चयन करती है।.

  • पहली पंक्ति एक गहरे नीले रंग की पृष्ठभूमि का रंग निर्धारित करती है.
  • दूसरी पंक्ति पाठ को श्वेत बनाती है.
  • तीसरी लाइन थोड़ा गहरा बॉर्डर देती है.

तीसरा नियम
यह लिंक होवर प्रभाव (दूसरे नियम की तरह) को प्रभावित किए बिना वर्तमान पृष्ठ संख्या (फिर से) का चयन करता है। यह वर्तमान पृष्ठ संख्या को एक बोल्ड फ़ॉन्ट भार बनाता है.

इसका कारण मैंने इसे लिंक हॉवर प्रभाव के साथ शामिल नहीं किया है क्योंकि इसका असमान प्रभाव सामान्य से बोल्ड फ़ॉन्ट भार पर जा रहा है.

ध्यान दें: आपके सीएसएस को कैसे कोडित किया जाता है, इसके आधार पर, आपको अधिक विशिष्ट चयनकर्ताओं का उपयोग करना पड़ सकता है। उदाहरण के लिए, अगर #content a के लिए शैलियाँ हैं और आपका WP-PageNavi सामग्री div के अंदर है, तो आपको अपने PageNavi CSS को #content .wp-pagenavi a के रूप में फिर से लिखना होगा और किसी अन्य कम-विशिष्ट शैलियों को ओवरराइड करना होगा।.

निष्कर्ष

मुझे पता है कि यह एक अपेक्षाकृत सरल उदाहरण था, आपके पास विभिन्न लिंक और अन्य तत्वों को और भी अलग करने के लिए बहुत अधिक उन्नत सीएसएस नियम हो सकते हैं। उम्मीद है कि आपने रास्ते में कुछ CSS टिप्स भी उठाए हैं.

वैकल्पिक WP-PageNavi एकीकरण एक बहुत अच्छा फीचर थीम डेवलपर है जो अपने विषयों में एकीकृत कर सकता है। जिस एकीकरण विधि के साथ मैं ऊपर उल्लिखित था, उपयोगकर्ता आसानी से चुन सकते हैं कि इसका उपयोग करना है या नहीं, और यह बहुत सारे ब्लॉगों के लिए एक अच्छा विकल्प हो सकता है।.

आशा है कि आप सभी को ट्यूटोरियल पसंद आया होगा, और यदि आपके पास भविष्य के वर्डप्रेस ट्यूटोरियल या सीएसएस युक्तियों के लिए कोई अनुरोध है, तो मुझे टिप्पणियों में बताएं.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map