प्लगइन के बिना वर्डप्रेस में पेज नेविगेशन। प्लगइन के बिना वर्डप्रेस पेज नेविगेशन! WP-pagenavi बटनों का स्वरूप कैसे बदलें

मुख पृष्ठ पर, साथ ही श्रेणी पृष्ठों, अभिलेखों और खोज परिणामों पर, पृष्ठ नेविगेशन (जिसे पेजिनेशन के रूप में भी जाना जाता है) की आमतौर पर आवश्यकता होती है। वर्डप्रेस पर ब्लॉग कोई अपवाद नहीं हैं; वे पेजिनेशन का भी उपयोग करते हैं, जब सूचना आउटपुट के परिणाम कई पृष्ठों में विभाजित होते हैं।

पहले, इस सुविधा को लागू करने के लिए, तृतीय-पक्ष प्लगइन्स या विशेष फ़ंक्शन का उपयोग किया जाता था जो फ़ाइल में स्थित होते थे फ़ंक्शन.php. हालाँकि, वर्डप्रेस संस्करण 4.1 की रिलीज़ के साथ, पेजिनेशन सुविधा को सीएमएस के मूल में बनाया गया था, और अब वर्डप्रेस के आंतरिक कार्य पेज नेविगेशन को लागू करने के लिए पर्याप्त हैं और तीसरे पक्ष के कोड या प्लगइन्स को जोड़ने की कोई आवश्यकता नहीं है।

मैंने पहले TITLE टैग के संबंध में वर्डप्रेस की ओर से इसी तरह के सुधार के बारे में लिखा था - https://aboutwordpress.ru/post/wordpress-title/।

पेजिनेशन क्या है

पृष्ठांकन सूचना को पृष्ठों में विभाजित करना है। इस अवधारणा का अर्थ पृष्ठों की अनुक्रमिक संख्या भी है, जो पृष्ठ के नीचे, ऊपर या किनारे पर स्थित संख्याओं द्वारा दर्शाया जाता है।

WP-PageNavi - वर्डप्रेस पेजिनेशन प्लगइन

वर्डप्रेस के लिए सबसे लोकप्रिय पेजिनेशन प्लगइन WP-PageNavi है। ईमानदारी से कहें तो, यह पेजिनेशन कार्य को इतनी अच्छी तरह से संभालता है कि अन्य प्लगइन्स पर चर्चा और तुलना करने का कोई मतलब नहीं है।

वर्डप्रेस पेजिनेशन - WP-PageNavi प्लगइन

प्लगइन के बिना वर्डप्रेस पेजिनेशन

प्लगइन्स के बिना किसी वेबसाइट पर पेजिनेशन करने के लिए, हम अंतर्निहित वर्डप्रेस फ़ंक्शन the_posts_pagination() का उपयोग करेंगे। हमें जिस स्थान की आवश्यकता है, वहां हमें निम्नलिखित कोड डालना होगा (आमतौर पर ये फ़ाइलें होती हैं Index.php, श्रेणी.phpऔर जैसे):

The_posts_pagination() फ़ंक्शन का परिणाम लगभग निम्नलिखित HTML कोड होगा:

पेजिनेशन से H2 शीर्षक हटाना

H2 हेडर "पोस्ट नेविगेशन" तुरंत आपका ध्यान आकर्षित करता है। जिसका अधिकांश मामलों में साइट पर कोई स्थान नहीं है। इससे छुटकारा पाने के लिए फ़ाइल में निम्न कोड जोड़ें फ़ंक्शन.php:

/* पेजिनेशन से H2 हटाएं */ add_filter('नेविगेशन_मार्कअप_टेम्पलेट', 'my_navigate_template', 10, 2); फ़ंक्शन my_navigad_template($टेम्पलेट, $class)(वापसी "

"; }

पेजिनेशन पेज सेट करना

डिफ़ॉल्ट रूप से, the_posts_pagination() पहले और आखिरी पृष्ठ के साथ-साथ वर्तमान पृष्ठ के आसपास एक पृष्ठ प्रदर्शित करता है। अन्य सभी को इलिप्सिस से बदल दिया गया है। इस व्यवहार को तर्कों का उपयोग करके बदला जा सकता है:

show_all - सभी पृष्ठ दिखाएँ
End_size - सूची के आरंभ और अंत में पृष्ठों की संख्या
मध्य आकार - वर्तमान पृष्ठ के बाएँ और दाएँ पृष्ठों की संख्या

उदाहरण के लिए इस प्रकार:

2, "end_size" => 2,)); ?>

सीएसएस पेजिनेशन शैलियाँ

नमस्कार, ब्लॉग साइट के प्रिय पाठकों। आज हम बेहद लोकप्रिय WP-PageNavi प्लगइन के बारे में बात करेंगे, जो आपको अपने वर्डप्रेस ब्लॉग के पेज नेविगेशन को एक नए स्तर पर ले जाने की अनुमति देता है।

सिद्धांत रूप में, पेज नेविगेशन (पेजिनेशन), जो डिफ़ॉल्ट रूप से उपयोग किया जाता है, काफी उपयोगकर्ता के अनुकूल है, लेकिन यह एक्सटेंशन जो विकल्प प्रदान करता है वह अधिक आकर्षक लगता है।

WP-PageNavi प्लगइन का उपयोग क्यों करें

स्वयं निर्णय करें, डिफ़ॉल्ट पेजिनेशन इस प्रकार दिखता है:

और यह प्लगइन स्थापित करने के बाद:

या इस तरह:

यह इसकी सेटिंग विंडो में आपके द्वारा चुने गए विकल्पों पर निर्भर करता है।

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

आपको सबसे पहले प्लगइन डाउनलोड करना होगा यहाँ से. दाईं ओर "डाउनलोड" बटन ढूंढें और अपने कंप्यूटर पर wp-pagenavi.zip संग्रह सहेजें। फिर इसे अनज़िप करें और परिणामी फ़ोल्डर को प्लगइन्स wp-content/plugins/ के साथ निर्देशिका में होस्टिंग सर्वर पर अपलोड करें।

ऐसा करने के लिए, आपको FTP() के माध्यम से अपने WP ब्लॉग की फ़ाइलों और फ़ोल्डरों तक पहुंचने की आवश्यकता होगी।

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

WP-content/plugins/ फ़ोल्डर में प्लगइन फ़ाइलों को होस्टिंग सर्वर पर कॉपी करने के बाद, आपको वर्डप्रेस एडमिन पैनल (http://vash_sait.ru/wp-admin/) पर जाना होगा और "प्लगइन्स" का चयन करना होगा। बायां व्यवस्थापक मेनू " खुलने वाली "प्रबंधन" विंडो के शीर्ष पर, आपको "निष्क्रिय" लिंक पर क्लिक करना होगा (या, यदि कोई अनुवाद नहीं है, तो "निष्क्रिय")।

सभी इंस्टॉल किए गए लेकिन अभी तक सक्रिय नहीं किए गए एक्सटेंशन वाली एक विंडो खुलेगी। उनमें से "WP-PageNavi" ढूंढें और इसके नाम के नीचे स्थित "सक्रिय करें" लिंक पर क्लिक करें।

प्लगइन आउटपुट कोड को आवश्यक वर्डप्रेस टेम्पलेट्स में पेस्ट करें

प्लगइन सक्रिय है, लेकिन अपने ब्लॉग पर इसके काम के परिणाम देखने के लिए, आपको वर्तमान में उपयोग की जा रही थीम की फ़ाइलों में wp_pagenavi फ़ंक्शन को कॉल करने के लिए कोड डालने की भी आवश्यकता होगी। .

आमतौर पर, पेजिनेशन का उपयोग ब्लॉग होम पेज (आपके थीम फ़ोल्डर से INDEX.PHP फ़ाइल), संग्रह वेब पेज (ARCHIVE.PHP), और खोज परिणाम (SEARCH.PHP फ़ाइल) पर किया जाता है। दरअसल, हमें इन फाइलों (टेम्पलेट्स) में जिस फ़ंक्शन की आवश्यकता है उसे कॉल करने के लिए कोड डालना होगा।

वे। आपको एफ़टीपी के माध्यम से फिर से कनेक्ट करना होगा और वर्तमान थीम वाले फ़ोल्डर में जाना होगा:

Wp-सामग्री/थीम/आपकी थीम वाले फ़ोल्डर का नाम

इसमें INDEX.PHP ढूंढें और इसे आपके लिए सुविधाजनक संपादक में संपादन के लिए खोलें (मैं इस उद्देश्य के लिए उन्नत नोटपैड++ का उपयोग करता हूं - मेरे पास इसके साथ काम करने पर एक लेख है)। अब आपका काम INDEX.PHP में कोड का वह अनुभाग ढूंढना है जो पिछले या अगले पृष्ठ पर जाने के लिए ज़िम्मेदार है। आसान काम नहीं है, है ना? हालाँकि, निश्चित रूप से, यह किस पर निर्भर करता है।

INDEX.PHP बहुत बड़ा नहीं है, पेजिनेशन से संबंधित टिप्पणियों को देखने के लिए इसकी सामग्री का ध्यानपूर्वक अध्ययन करें, उदाहरण के लिए, ये:

आमतौर पर, वर्डप्रेस थीम निर्माता पेज नेविगेशन प्रदर्शित करने के लिए जिम्मेदार कोड क्षेत्र में ऐसी टिप्पणियाँ शामिल करते हैं। उदाहरण के लिए, मानक कोड स्वयं इस तरह दिख सकता है:

एक बार जब आप अपने आवश्यक टुकड़े की पहचान कर लेते हैं, तो आपको इसे wp_pagenavi फ़ंक्शन कॉल लाइन से बदलना होगा:

अब आपको INDEX.PHP में किए गए परिवर्तनों को सहेजना होगा, अपने ब्लॉग के मुख्य पृष्ठ पर जाएं और सुनिश्चित करें कि सब कुछ उसी तरह काम करता है जैसे उसे करना चाहिए। वे। वर्डप्रेस में उपयोग किए जाने वाले मानक पेजिनेशन के बजाय, आप WP-PageNavi की सुंदरता का उपयोग करते हैं।

वैसे, मानक पेजिनेशन को INDEX.PHP कोड से हटाने की आवश्यकता नहीं है, ताकि जब आप इस प्लगइन को हटा दें तो आपको बाद में इससे कोई समस्या न हो। ऐसा करने के लिए, आपको मानक नेविगेशन कोड के बजाय INDEX.PHP में लिखना होगा, एक शर्त जो यह निर्धारित करती है कि मानक को कब प्रदर्शित करना है और कब WP-PageNavi पैनल को प्रदर्शित करना है।

शर्त इस बात पर निर्भर करेगी कि आपके ब्लॉग पर WP-PageNavi प्लगइन इंस्टॉल है या नहीं। यह कुछ इस तरह दिख सकता है:

इस कोड में शर्त यह है:

यदि(function_exists("wp_pagenavi"))

जाँचता है कि प्लगइन स्थापित है या नहीं, और यदि यह स्थापित नहीं है, तो मानक स्क्रिप्ट चलेगी:

अन्यथा (?>

और यदि WP-PageNavi स्थापित है, तो इसके द्वारा नेविगेशन बार बनेगा:

{ ?>

}

हालाँकि, निश्चित रूप से, आपको परेशान होने की ज़रूरत नहीं है और बस एक को दूसरे से बदल देना है, लेकिन यह आप पर निर्भर है।

तो, अब आपको अपने थीम वाले फ़ोल्डर से ARCHIVE.PHP और SEARCH.PHP फ़ाइलों के लिए भी ऐसा ही करना होगा (wp-content/themes/आपके थीम वाले फ़ोल्डर का नाम)।

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

उनमें जाने के लिए, आपको व्यवस्थापक पैनल में "विकल्प" क्षेत्र में बाएं मेनू से "पृष्ठों की सूची" का चयन करना होगा। सक्रिय "पेज सूची टेम्पलेट्स" टैब के साथ एक विंडो खुलेगी:

उपरोक्त चित्र में "पृष्ठों की सामान्य सूची का टेम्पलेट" फ़ील्ड में, वर्तमान पृष्ठ का प्रदर्शन और पृष्ठों की कुल संख्या निर्धारित की गई है। इस फ़ील्ड को भरने के विकल्प के साथ, WP-PageNavi पैनल इस तरह दिखेगा:

यदि आप चाहें तो आप इस फ़ील्ड में "पेज" शब्द जोड़ सकते हैं:

पृष्ठ %TOTAL_PAGES% में से %CURRENT_PAGE%

और आप चाहें तो इसे पूरी तरह साफ भी कर सकते हैं. कॉलम "तत्व "वर्तमान पृष्ठ" और "तत्व "पृष्ठ" में सब कुछ वैसे ही छोड़ दें। यहां आप सीरियल नंबर के रूप में वर्तमान और अन्य सभी वेब पेजों के लिए लेबल का प्रदर्शन सेट कर सकते हैं। यह कुछ इस तरह दिखेगा:

"पहले पेज के लिए टेक्स्ट" और "अंतिम पेज के लिए टेक्स्ट" फ़ील्ड में आप पहले और आखिरी बटन के लिए टेक्स्ट सेट कर सकते हैं:

"पहले पृष्ठ के लिए पाठ" कॉलम में पाठ के बजाय, आप एक लिख सकते हैं, और "अंतिम पृष्ठ के लिए पाठ" फ़ील्ड - %TOTAL_PAGES% (इस शिलालेख के बजाय सभी वेब पेजों की संख्या प्रदर्शित की जाएगी):

"अगली पोस्ट के लिए पाठ" और "पिछली पोस्ट के लिए पाठ" फ़ील्ड में, तीर चिह्न अगले और पिछले बटन पर प्रदर्शित होने के लिए लिखे गए हैं:

मैंने अगले दो फ़ील्ड साफ़ कर दिए, क्योंकि... अन्यथा, इसके स्थान पर बिना पाठ वाले दो सफेद बटन प्रदर्शित होते थे। यह संभव है कि आपके पास यह नहीं होगा और आप स्वयं निर्णय लेंगे कि उनकी क्या आवश्यकता है।

आइए आगे की सेटिंग्स पर चलते हैं जिन्हें "सूची सेटिंग्स" कहा जाता है:

"Pagenavi-css.css का उपयोग करें" में चेकबॉक्स आपको प्लगइन के साथ आने वाली कैस्केडिंग स्टाइल शीट (CSS) फ़ाइल को अक्षम या सक्षम करने की अनुमति देता है। "सूची शैली" फ़ील्ड में, आप ड्रॉप-डाउन सूची से दो सीएसएस शैलियों में से एक का चयन कर सकते हैं।

आपने पिछले स्क्रीनशॉट में "सामान्य" देखा था, और जब आप "ड्रॉप-डाउन सूची" शैली का चयन करते हैं, तो आपको वर्डप्रेस में WP-PageNavi पैनल के इस दृश्य जैसा कुछ मिलेगा:

यदि आप "हमेशा पेज नेविगेशन दिखाएं" बॉक्स को चेक करते हैं, तो उन वेब पेजों के लिए भी जिन्हें अभी तक नंबरिंग की आवश्यकता नहीं है (मान लें कि विभाजन के लिए मुख्य पृष्ठ पर अभी तक पर्याप्त पोस्ट नहीं हैं), नेविगेशन अभी भी होगा कुछ इस तरह प्रदर्शित किया गया:

"दिखाने के लिए पृष्ठों की संख्या" में आप यह निर्धारित कर सकते हैं कि संख्याओं की एक सतत (अनुक्रमिक) श्रृंखला के रूप में कितने पृष्ठ प्रदर्शित होंगे। बाकी पर स्विच करना अगले और पिछले बटन का उपयोग करके संभव होगा, साथ ही पहले और आखिरी बटन पर स्विच करना भी संभव होगा। मैंने वहां पांच लगाया, जिसके परिणामस्वरूप:

"दिखाने के लिए बड़े पेज नंबरों की संख्या" में आप यह निर्धारित कर सकते हैं कि अगले बटन के बाद कितने दूर के वेब पेज नंबर (वर्तमान में प्रदर्शित संख्यात्मक मान संख्याओं से बड़े) दिखाए जाएंगे।

और "के गुणकों में बड़ी पृष्ठ संख्याएँ दिखाएँ" फ़ील्ड में आप वह चरण सेट कर सकते हैं जिसके साथ दूर के वेब पेजों की संख्याएँ प्रदर्शित की जाएंगी। मान लीजिए कि मैंने पहले खाने में तीन और दूसरे में दो डाले हैं:

परिणामस्वरूप, PageNavi पैनल इस तरह दिखेगा:

वे। केवल तीन दूर के वेब पेजों की संख्याएँ दो (6, 8, 10) के बराबर अंतराल (चरण) के साथ प्रदर्शित की जाती हैं। दूर की संख्याओं के प्रदर्शन का उपयोग न करने के लिए, आपको केवल "दिखाने के लिए बड़े पृष्ठ संख्याओं की संख्या" कॉलम में एक शून्य डालना होगा।

आपके द्वारा निर्दिष्ट परिवर्तनों को लागू करने और प्रदर्शित करने के लिए, प्लगइन सेटिंग्स में आपको नीचे स्थित "परिवर्तन सहेजें" बटन पर क्लिक करना होगा।

पेजिनेशन नेविगेशन बार का स्वरूप बदलना

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

सच है, इस आलेख में दिए गए स्क्रीनशॉट में दिखाए गए फॉर्म को लेने के लिए, मैंने प्लगइन की सीएसएस फ़ाइल (/wp-content/plugins/wp-pagenavi/pagenavi-css.css) में नहीं, बल्कि अतिरिक्त गुण जोड़े हैं फ़ाइल में मैंने थीम्स (wp-content/themes/theme/style.css वाले फ़ोल्डर का नाम) का उपयोग किया।

इस फ़ाइल में, CSS गुण जो WP-PageNavi पैनल की उपस्थिति को परिभाषित करते हैं, इस तरह दिखते हैं:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active (पैडिंग: 3px 8px 3px 8px; मार्जिन: 2px; टेक्स्ट-डेकोरेशन: कोई नहीं; रंग: #fff; बॉर्डर: 0px लाइन-ऊंचाई:24px; पृष्ठभूमि-रंग: #2b99ff; ) #सामग्री .wp-pagenavi a:hover (रंग:#fff; पृष्ठभूमि-रंग: #154b7d; ) #सामग्री .wp-pagenavi स्पैन.पेज ( पैडिंग: 3px 8px 3px 8px; मार्जिन: 2px 2px 2px 2px; ) #सामग्री .wp-pagenavi स्पैन.करंट (पैडिंग: 3px 8px 3px 8px; मार्जिन: 2px; लाइन-ऊंचाई: 25px; फ़ॉन्ट-वजन: बोल्ड; रंग: #जोड़ें352; पृष्ठभूमि:#26343सी;

कृपया ध्यान दें कि यहां प्रयुक्त वर्ग नाम और आईडी() विशेष रूप से मेरे टेम्पलेट को संदर्भित करते हैं। आइए मैं कुछ सीएसएस नियमों और गुणों का उद्देश्य समझाऊं।

पैनल बटनों के लिए बाहरी और आंतरिक मार्जिन (उनके बारे में देखें) सेट करता है (वास्तव में, इन बटनों के लिंक के लिए, क्योंकि ये गुण विशेष रूप से ए टैग द्वारा निर्दिष्ट लिंक पर लागू किए जाएंगे और wp-pagenav कंटेनर में रखे जाएंगे) .

यह नियम लिंक टेक्स्ट का रंग भी निर्धारित करता है (रंग गुण में सफेद रंग सेट होता है: #fff; - )।

लिंक के चारों ओर कोई सीमा नहीं होगी (सीमा संपत्ति: 0px), और इन लिंक वाले कंटेनरों के लिए पृष्ठभूमि का रंग पृष्ठभूमि-रंग संपत्ति द्वारा निर्धारित किया जाएगा: #2b99ff; . यह वह रंग है जिसे आप पृष्ठ नेविगेशन पैनल के निष्क्रिय बटनों के ऊपर स्क्रीनशॉट में देख सकते हैं।

सीएसएस नियम:

#सामग्री .wp-pagenavi a:hover (रंग:#fff; पृष्ठभूमि-रंग: #154b7d;)

उस लिंक के साथ कंटेनर (बटन) के टेक्स्ट और पृष्ठभूमि के लिए रंग सेट करता है जिस पर माउस कर्सर वर्तमान में मँडरा रहा है (मँडराने पर लिंक के सीएसएस गुण - ए: होवर -)।

लिंक टेक्स्ट का रंग सफ़ेद रहता है, लेकिन पृष्ठभूमि का रंग (वास्तव में बटन का रंग) गहरे रंग में बदल जाता है (पृष्ठभूमि-रंग: #154b7d;)। वे। जब कोई आगंतुक नेविगेशन बार पर बटनों पर माउस ले जाता है, तो उन्हें उस बटन का रंग बदलता हुआ दिखाई देगा, जिससे अन्तरक्रियाशीलता की भावना पैदा होगी।

सीएसएस नियम:

#सामग्री .wp-pagenavi स्पैन.करंट (पैडिंग: 3px 8px 3px 8px; मार्जिन: 2px; लाइन-ऊंचाई: 25px; फ़ॉन्ट-वजन: बोल्ड; रंग: #add352; पृष्ठभूमि:#26343c;)

वर्तमान में खुले ब्लॉग पेज की संख्या के साथ बटन की उपस्थिति सेट करता है (वर्तमान वर्ग के साथ स्पैन टैग इस लिंक के कोड में लिखा जाएगा)। यह बटन नीचे दी गई छवि में नंबर एक बटन जैसा ही दिखेगा:

यह सीएसएस नियम इस सक्रिय बटन के पृष्ठभूमि रंग को बदलने के लिए सेट करता है (संपत्ति पृष्ठभूमि: #26343सी), इस बटन पर लिंक टेक्स्ट का रंग (संपत्ति रंग: #add352), और इसके अलावा, लिंक टेक्स्ट का फ़ॉन्ट होगा इस सीएसएस संपत्ति के कारण बोल्ड - फ़ॉन्ट-वेट: बोल्ड()।

लेकिन पेज नेविगेशन पैनल का स्वरूप बदलने के लिए, आप प्लगइन की स्टाइलिंग फ़ाइल में आवश्यक सीएसएस गुण जोड़ सकते हैं। आप फ़ोल्डर से संपादन के लिए इस कैस्केडिंग स्टाइल शीट फ़ाइल को खोल सकते हैं:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

उदाहरण के लिए, इस तरह का एक पैनल प्राप्त करने के लिए:

आपको इस संग्रह को डाउनलोड करना होगा, इसे अनज़िप करना होगा और IMAGES फ़ोल्डर को WP-PageNavi प्लगइन फ़ोल्डर में कॉपी करना होगा, जिसे आप निम्नलिखित पथ में पा सकते हैं:

/wp-content/plugins/wp-pagenavi

IMAGES फ़ोल्डर में एक ग्राफ़िक फ़ाइल fon.gif है, जो PageNavi पैनल के लिए पृष्ठभूमि बनाएगी। अब आपको संपादन के लिए /wp-content/plugins/wp-pagenavi/pagenavi-css.css फ़ाइल खोलनी होगी और वहां कोड को निम्नलिखित नियमों से बदलना होगा:

Wp-pagenavi (चौड़ाई: 100%; अतिप्रवाह: छिपा हुआ; पैडिंग: 4px 0px 4px 0px; मार्जिन-बाएँ: 0px; सीमा: 1px ठोस #00598F; पृष्ठभूमि: url ("images/fon.gif") केंद्र बाएँ रिपीट-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited (पैडिंग: 4px 5px 4px 5px; मार्जिन: 2px 0px 2px 0px; रंग: #ffffff; फॉन्ट-वेट: बोल्ड; टेक्स्ट -सजावट: कोई नहीं; ) .wp-pagenavi a.last (पैडिंग: 4px 5px 4px 5px; ) .wp-pagenavi a.first (पैडिंग: 4px 5px 4px 5px; ) .wp-pagenavi a:hover (बैकग्राउंड-रंग: #00598F; रंग: #FFFFFF; फ़ॉन्ट-वजन: बोल्ड; .wp-pagenavi स्पैन.पेज (पैडिंग: 4px 5px 4px 5px; मार्जिन: 2px 0px 2px 0px; रंग: #FFFFFF; पृष्ठभूमि: url ("images/fon)। gif") केंद्र बाएँ रिपीट-x; पृष्ठभूमि-रंग: #4f4f4f; फ़ॉन्ट-वजन: बोल्ड; ) .wp-pagenavi स्पैन.करंट (पैडिंग: 4px 7px 4px 7px; मार्जिन: 2px 0px 2px 0px; फ़ॉन्ट-वज़न: बोल्ड ; बॉर्डर-टॉप: 1px सॉलिड #00598F; बॉर्डर-बॉटम: 1px सॉलिड #00598F; .wp-pagenavi स्पैन.एक्सटेंड (पैडिंग: 4px 0px 4px; मार्जिन: 2px 0px 2px 0px; मार्जिन-दाएं: 0px; मार्जिन-बाएँ: 0px; बॉर्डर-टॉप: 1px सॉलिड #00598F; बॉर्डर-बॉटम: 1px सॉलिड #00598F; रंग: #FFFFFF; पृष्ठभूमि: url ("images/fon.gif") केंद्र बाएँ रिपीट-x; फोंट की मोटाई: बोल्ड; ) .wp-pagenavi spa.next-prev ( फ़ॉन्ट-परिवार: एरियल; /* IE फिक्स */ )

अपने परिवर्तनों को pagenavi-css.css फ़ाइल में सहेजें और अपने ब्लॉग पर जाकर देखें कि नेविगेशन बदल गया है या नहीं। यदि यह नहीं बदला है, तो SHIFT बटन दबाकर ब्राउज़र में विंडो की सामग्री को ताज़ा करने का प्रयास करें, और यदि इससे मदद नहीं मिलती है, तो ब्राउज़र कैश साफ़ करें।

आप सौभाग्यशाली हों! जल्द ही ब्लॉग साइट के पन्नों पर मिलते हैं

आपकी रुचि हो सकती है

आसान सोशल शेयर बटन - वर्डप्रेस पर सोशल नेटवर्क बटन जोड़ने के लिए प्लगइन, जिसमें VKontakte और Odnoklassniki शामिल हैं
वर्डप्रेस के लिए टिप्पणियों की सदस्यता लें - वर्डप्रेस में लेखों पर टिप्पणियों की सदस्यता
ब्रेडक्रंब NavXT प्लगइन का उपयोग करके वर्डप्रेस में ब्रेडक्रंब (लिंकिंग को मजबूत करना)
सरल काउंटर और श्रेणी और पेज आइकन - सुंदर आरएसएस और ट्विटर काउंटर, साथ ही वर्डप्रेस में श्रेणियों और पेजों के लिए आइकन
वर्डप्रेस के लिए प्लगइन्स इंस्टॉल और कॉन्फ़िगर करना, संभावित समस्याओं का समाधान करना
ऑल इन वन एसईओ पैक और वर्डप्रेस ब्लॉग का आंतरिक खोज इंजन अनुकूलन (कैनोनिकल, विवरण और शीर्षक मेटा टैग)
नेक्स्टजेन गैलरी प्लगइन पर आधारित वर्डप्रेस के लिए गैलरी - लेखों में फोटो गैलरी और स्लाइड शो बनाना और प्रदर्शित करना
Google XML साइटमैप - वर्डप्रेस के लिए साइटमैप बनाना
वर्डप्रेस के लिए बेहतर फ़ीड - आरएसएस को पोस्ट का पूरा टेक्स्ट कैसे न भेजें और समाचार चैनल के माध्यम से सामग्री की चोरी से खुद को कैसे बचाएं
वर्डप्रेस के लिए upPrev प्लगइन (पुल-आउट पैनल) के उदाहरण का उपयोग करके वेबसाइट पेजों को पुनः लिंक करना

नमस्ते!

मैं वर्डप्रेस इंजन पर वेबसाइट नेविगेशन पर लेख लिखना जारी रखता हूं।

और इस सामग्री में मैं दिखाऊंगा कि प्लगइन्स के बिना और प्रसिद्ध WP-PageNavi का उपयोग करके पेज नेविगेशन कैसे किया जाता है। जैसा कि, मैं कई तरीकों से कार्यान्वयन दिखाऊंगा ताकि आप वह चुन सकें जो आपके लिए सबसे अच्छा काम करता है। और ऐसे भी मामले होते हैं जब कोई तरीका किसी के लिए काम नहीं करता है। इसलिए, किसी प्रकार का सुरक्षा जाल होगा।

सामग्री बहुत बड़ी थी और, शायद, नेटवर्क पर सबसे व्यापक थी।

पृष्ठ नेविगेशन (पेजिनेशन) सूचना को पृष्ठों में विभाजित करना है। यदि आप वर्डप्रेस पर बहुत सारी साइटें लेते हैं, तो यह घटना घोषणाओं के साथ प्रत्येक पृष्ठ के नीचे पृष्ठ संख्याओं की सूची के वीडियो में स्पष्ट रूप से व्यक्त की जाती है। मेरे ब्लॉग पर यह फ़ंक्शन इस प्रकार दिखता है:

डिज़ाइन भिन्न हो सकता है. लेकिन इसका सार एक ही है - जानकारी को पन्नों में तोड़ना। जैसा कि आप जानते हैं, डिफ़ॉल्ट रूप से, पोस्ट की घोषणाएँ साइट के मुख्य पृष्ठ पर प्रदर्शित होती हैं, जिनमें से एक निश्चित संख्या हो सकती है ("लेखन" आइटम में सेटिंग्स के आधार पर)।

यदि हम उनकी संख्या को विभाजित नहीं करते हैं, तो उन्हें एक पृष्ठ पर प्रदर्शित किया जाएगा। और यह अच्छा नहीं है, क्योंकि साइट का उपयोग करना असुविधाजनक होगा और मुख्य पृष्ठ को लोड होने में लंबा समय लगेगा, क्योंकि समय के साथ बड़ी संख्या में घोषणाएं होंगी।

एक नियम के रूप में, अब आधुनिक वोडप्रेस टेम्प्लेट में, पेज नेविगेशन पहले से ही अंतर्निहित है। लेकिन एक विकल्प है जब यह वहां नहीं है। फिर आपको इस पर अमल करना होगा. इसके बजाय, पिछले और अगले पोस्ट के लिंक के रूप में घोषणाओं का एक पृष्ठांकन हो सकता है। यह मानक टेम्पलेट्स में स्पष्ट रूप से व्यक्त किया गया है।

यह विकल्प भी असुविधाजनक है, क्योंकि यदि हम 3 पृष्ठ पीछे जाते हैं, तो हम एक चरण में मूल पृष्ठ पर वापस नहीं लौट पाएंगे। आपको पिछली प्रविष्टियों पर या अगली प्रविष्टियों पर 3 बार क्लिक करना होगा। पृष्ठ नेविगेशन आपको इस क्षण को अधिक लचीले ढंग से प्रबंधित करने की अनुमति देता है।

सामान्य तौर पर, चलिए इसके कार्यान्वयन की ओर बढ़ते हैं और पहला कदम इसे प्लगइन के बिना एक टेम्पलेट में एकीकृत करना है। मैंने एक वीडियो ट्यूटोरियल में इस विधि पर चर्चा की। मेरा सुझाव है कि पहले इसे देखें और फिर निर्देशों के पाठ्य संस्करण का अध्ययन करें।

हम इसे प्लगइन के बिना करते हैं

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

यहाँ कोड का पहला भाग है. इसे डिज़ाइन टेम्पलेट की function.php फ़ाइल में रखा जाना चाहिए।

फ़ंक्शन wp_corenavi() ( वैश्विक $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["कुल"] = $अधिकतम; $a["वर्तमान"] = $वर्तमान; $कुल = 0; //1 - टेक्स्ट "पेज एन ऑफ़ एन", 0 प्रदर्शित करें - $a["mid_size"] = 1 प्रदर्शित न करें; //वर्तमान $a["end_size"] = 1 के बाएँ और दाएँ कितने लिंक दिखाने हैं ; //शुरुआत और अंत में कितने लिंक दिखाने हैं $a["prev_text"] = ""; //लिंक टेक्स्ट "पिछला पृष्ठ" $a["next_text"] = ""; अगला पृष्ठ" यदि ($अधिकतम > 1) प्रतिध्वनि "

"; }

फ़ंक्शन wp_corenavi() (

वैश्विक $wp_query , $wp_rewrite ;

$पेज = "" ;

$max = $wp_query -> max_num_pages;

यदि (! $current = get_query_var ("पृष्ठांकित") ) $current = 1 ;

$a [ "आधार" ] = str_replace (999999999, "%#%", get_pagenum_link (999999999));

$a [ "कुल" ] = $अधिकतम ;

$a [ "वर्तमान" ] = $वर्तमान ;

$कुल = 0 ; //1 - "एन का पेज एन" टेक्स्ट प्रदर्शित करें, 0 - प्रदर्शित न करें

$a ["मध्य आकार" ] = 1 ; // वर्तमान लिंक के बाएँ और दाएँ कितने लिंक दिखाने हैं

$a ["end_size" ] = 1 ; //शुरुआत और अंत में कितने लिंक दिखाने हैं

$a ["prev_text" ] = "" ; //लिंक टेक्स्ट "पिछला पृष्ठ"

$a ["next_text" ] = "" ; //लिंक टेक्स्ट "अगला पेज"

यदि ($अधिकतम > 1 ) प्रतिध्वनि "

" ;

मैंने कोड को ओपनिंग टैग के बाद फ़ाइल की शुरुआत में ही रखा है

इस कोड में हम कुछ पैरामीटर समायोजित कर सकते हैं:

पंक्ति 10 - यदि आप मान 0 से 1 बदलते हैं, तो पृष्ठ संख्या के आगे "45 में से पृष्ठ 3" जैसा एक शिलालेख प्रदर्शित होगा। आप यह विकल्प कर सकते हैं, लेकिन मुझे लगता है कि इस मामले में इसकी आवश्यकता नहीं है, क्योंकि पेज नंबर पहले से ही दिखाते हैं कि साइट पर कितने पेज हैं। और सक्रिय पृष्ठ एक अलग रंग में हाइलाइट किया गया है;
पंक्तियाँ 11 और 12 - पिछली या अगली संख्याओं की एक निश्चित संख्या क्रमशः सक्रिय पृष्ठ संख्या के बाएँ और दाएँ प्रदर्शित की जानी चाहिए। यहां हम उनकी संख्या प्रदर्शित करते हैं। इस कोड में मान 1 है। आप 2 या 3 डाल सकते हैं। यहां आपको थोड़ा प्रयोग करने की आवश्यकता होगी, क्योंकि संख्याओं की संख्या जितनी अधिक होगी, नेविगेशन उतना ही व्यापक होगा। यह सब टेम्पलेट की चौड़ाई पर निर्भर करता है।

wp_corenavi();

चूंकि पेज नेविगेशन को वहां प्रदर्शित किया जाना चाहिए जहां घोषणाओं की सूची प्रदर्शित की जाती है, यह कोड उन सभी फाइलों में रखा जाना चाहिए जहां यह होता है:

होम पेज - Index.php;
श्रेणी और संग्रह पृष्ठ - Category.php और Archive.php;
खोज पृष्ठ - search.php.

वैसे, कुछ टेम्प्लेट में, श्रेणियों और अभिलेखों के पृष्ठों का आउटपुट एक फ़ाइल में किया जा सकता है। इसके लिए मेरी Archive.php फ़ाइल ज़िम्मेदार है।

यदि आपके टेम्पलेट में घोषणाओं को पृष्ठों में विभाजित करने के लिए कोई नेविगेशन नहीं है, तो हम सामग्री प्रदर्शित करने के बाद दूसरा कोड डालते हैं। यदि आपके पास पिछले और अगले लिंक हैं, जिसकी अधिक संभावना है, तो इस विकल्प को लागू करना आसान है, क्योंकि आपको बस उन्हें ऊपर दिए गए कोड से बदलना होगा।

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

←पुराने पोस्ट", "बीस")); ?>

→", "बीस"); ?>

< div class = "nav-previous" > ← पुरानी पोस्ट", "बीस दस" ) ) ; ?>< / div >

< div class = "nav-next" > "नई पोस्ट →" , "बीस दस" ) ) ; ?>< / div >

यह कोड सबके लिए अलग हो सकता है, लेकिन इसकी मुख्य सामग्री एक ही होगी. आपको एक कोड ढूंढना होगा जिसमें अगला_पोस्ट_लिंक और पिछला_पोस्ट_लिंक नामक कोड होगा।

जब आपको यह मिल जाए, तो बेझिझक इस सामग्री को फ़ाइल से हटा दें और इसके स्थान पर आवश्यक कोड कॉपी करें जो पृष्ठ नेविगेशन प्रदर्शित करता है।

इस प्रकार, आपको उन सभी फ़ाइलों में जहां घोषणाएँ प्रदर्शित होती हैं, मानक नेविगेशन को पृष्ठ-दर-पृष्ठ नेविगेशन से बदलने की आवश्यकता है। मैंने ऊपर फ़ाइल नाम दिए हैं।

वैसे, यदि आपको इस प्रक्रिया में कोई समस्या है, तो आप टिप्पणियों में सहायता के लिए मुझसे संपर्क कर सकते हैं। मैं मदद करने की कोशिश करता हूं.

/* नेविगेशन */ .नेविगेशन (फ्लोट: बाएं; चौड़ाई: ऑटो; मार्जिन-बाएं: 216पीएक्स; मार्जिन-टॉप: -2पीएक्स; फ़ॉन्ट-आकार: 16पीएक्स; ) .नेविगेशन > ए (फ्लोट: बाएं; चौड़ाई: 32पीएक्स; फ़ॉन्ट -वजन: 700; पाठ-सजावट: कोई नहीं; पैडिंग-शीर्ष: 7पीएक्स; पाठ-संरेखण: केंद्र; .नेविगेशन > .पिछला; ऊंचाई: 34पीएक्स; पृष्ठभूमि: यूआरएल ("इमेजेज/बो_लेफ्ट.पीएनजी") नो-रिपीट; मार्जिन-लेफ्ट: 0; ) .नेविगेशन > .नेक्स्ट (फ्लोट: लेफ्ट; चौड़ाई: 34पीएक्स; ऊंचाई: 34पीएक्स; बैकग्राउंड: यूआरएल(" इमेज/bow_right.png") नो-रिपीट; मार्जिन-लेफ्ट: 14px; .नेविगेशन > .डॉट्स (फ्लोट: लेफ्ट; फॉन्ट-साइज: 14px; फॉन्ट-वेट: 700; चौड़ाई: 32px; टेक्स्ट-एलाइन: सेंटर; कलर : #c4c8cc; पैडिंग- शीर्ष: 7px)

/* मार्गदर्शन */

मार्गदर्शन (

नाव छोड़ी;

चौड़ाई: ऑटो;

मार्जिन-बाएं: 216px;

मार्जिन-टॉप: -2px;

फ़ॉन्ट-आकार: 16px;

नेविगेशन > ए (

नाव छोड़ी;

चौड़ाई: 32px;

फ़ॉन्ट-भार: 700;

पाठ-संरेखण: केंद्र;

रंग: #637बी93;

पाठ-सजावट: कोई नहीं;

मार्जिन-बाएँ: 1px;

पैडिंग-टॉप: 7px;

नेविगेशन > .वर्तमान (

नाव छोड़ी;

फ़ॉन्ट-भार: 700;

चौड़ाई: 29px;

पाठ-संरेखण: केंद्र;

रंग: #c4c8cc ;

मार्जिन-बाएँ: 5px;

पैडिंग-टॉप: 7px;

नेविगेशन > .पिछला (

नाव छोड़ी;

चौड़ाई: 32px;

ऊंचाई: 34px;

पृष्ठभूमि: यूआरएल ("images/bow_left.png") दोहराना नहीं;

मार्जिन-बाएं : 0 ;

नेविगेशन > .अगला (

नाव छोड़ी;

चौड़ाई: 34px;

ऊंचाई: 34px;

पृष्ठभूमि: यूआरएल ("images/bow_right.png") दोहराना नहीं;

मार्जिन-बाएँ: 14px;

नेविगेशन > .बिंदु (

नाव छोड़ी;

फ़ॉन्ट-आकार: 14px;

फ़ॉन्ट-भार: 700;

चौड़ाई: 32px;

पाठ-संरेखण: केंद्र;

रंग: #c4c8cc ;

पैडिंग-टॉप: 7px;

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

जब हमने कोड को function.php फ़ाइलों में रखा है, उन सभी फ़ाइलों में जो घोषणाओं के साथ पृष्ठ प्रदर्शित करती हैं और शैलियों को लिखा है, तो हम नेविगेशन की कार्यक्षमता की जांच कर सकते हैं। मेरे लिए सब कुछ काम करता है और मानक टेम्पलेट में यह इस तरह दिखता है।

हमने प्लगइन के बिना विधि पर चर्चा की है। मुझे 100% यकीन है कि यदि आपने ऊपर बताए अनुसार सब कुछ किया, तो सब कुछ आपके लिए अच्छे से काम करेगा। प्लगइन के बिना एक दूसरा विकल्प भी था, लेकिन इसे देखने के बाद मुझे एहसास हुआ कि यह मूल रूप से वही विकल्प था, केवल थोड़ा संशोधित था। इसलिए, मैं एक प्लगइन का उपयोग करके पेज नेविगेशन को लागू करने के तरीके पर आगे बढ़ रहा हूं।

WP-PageNavi प्लगइन

सबसे पहले, आधिकारिक पेज से प्लगइन डाउनलोड करें और इसे साइट पर इंस्टॉल करें।

प्लगइन इंस्टॉल करने के बाद, आपको वह कोड भी डालना होगा जो पेज के नीचे नेविगेशन प्रदर्शित करेगा।

अब प्लगइन अपना कार्य करेगा और पेज नंबरों का डिज़ाइन निम्नलिखित होगा।

एक ओर, डिज़ाइन इतना आकर्षक नहीं है, लेकिन दूसरी ओर, यह बिल्कुल भी बुरा नहीं है, क्योंकि यह देखने में ख़राब नहीं है। उपयोगकर्ताओं को सादगी पसंद है!इसलिए, आप सब कुछ वैसे ही छोड़ सकते हैं जैसे वह है। अगर आप कुछ और रंगीन चाहते हैं तो अब हम कुछ विकल्पों पर गौर करेंगे। इस बीच, हम wp पेजनवी की स्थापना जैसी चीज़ पर चर्चा करेंगे। वहाँ सेटिंग्स हैं और उनके बारे में बात करने लायक है।

पहले सेटिंग आइटम "पेज सूची टेम्पलेट्स" के संबंध में, आपको इसमें कुछ भी बदलने की आवश्यकता नहीं है। हम संतुष्ट हैं. हम "पेज सूची सेटिंग्स" आइटम पर जाते हैं।

मैं नोट करता हूं कि आपको अपने लिए इष्टतम मूल्य खोजने के लिए इस बिंदु पर सभी मापदंडों के साथ प्रयोग करने की आवश्यकता है। मैं बस संक्षेप में बताऊंगा कि प्रत्येक पैरामीटर क्या करता है।

शैली का उपयोग करें - यदि हम मान को "नहीं" पर सेट करते हैं, तो प्लगइन शैलियाँ हटा दी जाएंगी और पृष्ठ संख्याएँ स्वरूपित नहीं की जाएंगी;

पृष्ठ सूची शैली - पृष्ठ संख्याओं की सामान्य सूची के अतिरिक्त, हम एक ड्रॉप-डाउन सूची विकल्प चुन सकते हैं;

हमेशा पृष्ठों की एक सूची दिखाएं - हम इस सेटिंग को सक्षम नहीं करते हैं। आप चाहते हैं कि सूची केवल वहीं प्रदर्शित हो जहां इसकी आवश्यकता है;
प्रदर्शित करने के लिए पृष्ठों की संख्या - सूची की शुरुआत में प्रदर्शित पृष्ठ संख्याओं की संख्या के लिए जिम्मेदार है। डिफ़ॉल्ट रूप से, मान 5 है और ऊपर दिए गए स्क्रीनशॉट में आप देख सकते हैं कि बिल्कुल 5 पृष्ठ प्रदर्शित हैं;
प्रदर्शित करने के लिए पृष्ठों की श्रेणी - यदि आपकी साइट पर बहुत सारे पृष्ठ हैं, तो यह फ़ंक्शन अत्यंत उपयोगी होगा। यह मुख्य सूची के बाद 10, 20, 30, 40 इत्यादि के मानों के साथ पृष्ठ संख्याएँ आउटपुट करेगा। इन मानों के बीच का अंतराल निम्नलिखित पैरामीटर द्वारा निर्धारित किया जाता है;
पेज रेंज के लिए गुणांक - यदि आप मान को 5 पर सेट करते हैं, तो पेज रेंज इस तरह दिखेगी - 10, 15, 20, 25, आदि। यदि 10, तो 10, 20, 30, 40 इत्यादि। 10 का मान काफी है.

ये सभी सेटिंग्स हैं जिन्हें आपको अपनी आवश्यकताओं के अनुरूप समायोजित करने की आवश्यकता है। यहां हर कोई अपने लिए नियमन करेगा.

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

इसे इंस्टॉल करने के बाद वर्डप्रेस एडमिन पैनल में एक नया आइटम दिखाई देता है।

इस पर स्विच करने के बाद, हम तुरंत मौजूदा डिज़ाइन रिक्त स्थान का चयन कर सकते हैं।

यदि हम शैलियों को व्यक्तिगत रूप से अनुकूलित करना चाहते हैं, तो "स्टाइलशीट चुनें" सेटिंग्स के पहले आइटम में, "कस्टम" विकल्प का चयन करें और सभी तत्वों (सीमाएं और उनके रंग, फ़ॉन्ट रंग और आकार, लिंक का रंग) के मापदंडों को कॉन्फ़िगर करें। माउस कर्सर घुमाना, इत्यादि)।

मैं आपके लिए सभी मापदंडों का अनुवाद करूंगा।

शीर्षक का रंग - पाठ का रंग "45 में से पृष्ठ 3";
पृष्ठभूमि का रंग - पृष्ठभूमि का रंग;
सक्रिय/वर्तमान पृष्ठभूमि रंग - सक्रिय पृष्ठ संख्या का पृष्ठभूमि रंग;
फ़ॉन्ट आकार - फ़ॉन्ट आकार;
लिंक रंग - लिंक रंग;
लिंक माउस होवर/ सक्रिय होवर - जब आप किसी संख्या पर माउस घुमाते हैं और जब संख्या सक्रिय होती है तो लिंक का रंग;
लिंक बॉर्डर रंग - बॉर्डर रंग;
लिंक बॉर्डर माउस होवर/सक्रिय रंग - माउस कर्सर घुमाते समय और नंबर सक्रिय होने पर बॉर्डर रंग;
नेविगेशन संरेखित करें - नेविगेशन स्थान (बाएं, दाएं, केंद्र)।

वांछित भरण रंग चुनते समय आप इंटरनेट पर या फ़ोटोशॉप में रंग मान खोज सकते हैं।

प्लगइन विकल्प बुरा नहीं है, लेकिन मैं हमेशा कहता हूं कि आपको अनावश्यक प्लगइन्स से छुटकारा पाना होगा, और इस मामले में ऐसा ही है।

दूसरा विकल्प स्टाइल फ़ाइल को संपादित करके किया जाता है, जो होस्टिंग पर Wp-pagenavi प्लगइन वाले फ़ोल्डर में स्थित है - pagenavi-css.css।

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

पृष्ठ नेविगेशन को वांछित डिज़ाइन देते हुए, इस फ़ाइल में शैलियों को अपने अनुसार संपादित करें;
"Pagenavi-css.css शैली का उपयोग करें" सेटिंग अक्षम करें;
इन शैलियों को डिज़ाइन टेम्पलेट style.css की मुख्य शैली फ़ाइल में रखें।

इस तरह ये शैलियाँ प्लगइन की परवाह किए बिना काम करेंगी। और अपडेट करते समय वे भटकेंगे नहीं. इस प्लगइन में नेविगेशन के लिए शायद यह सबसे अच्छा डिज़ाइन विकल्प है जो मैं स्वयं करूँगा। लेकिन, सौभाग्य से, मैं प्लगइन के बिना विकल्प का उपयोग करता हूं, जो कि मैं आपको करने की सलाह देता हूं।

तो दोस्तों। जहां तक मेरी बात है तो सामग्री बहुत अच्छी बनेगी। आपका इसके बारे में क्या सोचना है? आशा है आपका काम हो गया. अगर कुछ काम नहीं करता है, तो मैं टिप्पणियों में मदद करने का प्रयास करूंगा। लिखो, डरो मत! मुझे भी एक बार बहुत कष्ट सहना पड़ा था और मैं उससे उबरने में कामयाब रही।

इस नोट पर, मैं इस पोस्ट को जल्दी से समाप्त करना चाहता हूं, क्योंकि इसमें बहुत अधिक ऊर्जा लगी है। मैं यही करूँगा. मैं अलविदा कहूंगा और आराम करने जाऊंगा, और फिर नई सामग्री लिखने में व्यस्त हो जाऊंगा।

सादर, कॉन्स्टेंटिन खमेलेव!

किसी वर्डप्रेस साइट पर पेज नेविगेशन जोड़ने के लिए, या यूं कहें कि मानक नेविगेशन को सामान्य पेज नेविगेशन बटन में बदलने के लिए, हम WP-पेजनेवी प्लगइन और 4.9.5 पर परीक्षण किए गए 5 अन्य प्लगइन्स का उपयोग करते हैं।

लेखक से

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

मानक वर्डप्रेस पेज नेविगेशन

आरंभ करने के लिए, मैं ध्यान दूंगा कि WP फ़ंक्शंस को कॉल करना जो साइट नेविगेशन प्रदर्शित करने के लिए ज़िम्मेदार हैं, कार्यशील टेम्पलेट फ़ाइलों में शामिल हैं। इसलिए, यदि आपने मानक थीम के अलावा कोई कार्यशील थीम स्थापित की है, तो यह अच्छी तरह से हो सकता है कि थीम लेखक ने पहले से ही थीम फ़ाइलों में पेज नेविगेशन शामिल कर लिया है और यह आपके पास पहले से ही है। यदि नहीं, तो मानक साइट नेविगेशन पृष्ठ के निचले भाग में "पिछला पृष्ठ" और "अगला पृष्ठ" जैसे शिलालेख हैं।

फ़ंक्शन जो मानक नेविगेशन आउटपुट करते हैं: अगला_पोस्ट_लिंक और पिछला_पोस्ट_लिंक। आइए उन्हें याद रखें, वे हमारे काम आएंगे।

WP-pagenavi प्लगइन आपकी वर्डप्रेस साइट पर पेज नेविगेशन जोड़ने में आपकी मदद करेगा।

ब्लॉग पर पेज नेविगेशन बदलने और चयनात्मक पेजिंग के लिए बटन जोड़ने के लिए, हम WP-pagenavi प्लगइन का उपयोग करते हैं। प्लगइन पेज: https://wordpress.org/plugins/wp-pagenavi/installation/

तीन मानक तरीके हैं:

से, नाम से खोज का उपयोग करना;
प्लगइन को इसके WordPress.org पेज से डाउनलोड करें (लेख के नीचे लिंक);
या इसके WordPress.org पेज से प्लगइन डाउनलोड करें, संग्रह को अनपैक करें और wp-pagenavi प्लगइन निर्देशिका को /wp-content/plugins/ फ़ोल्डर में अपलोड करें और ब्लॉग कंसोल से प्लगइन को सक्रिय करें।

WP-pagenavi प्लगइन कैसे चलाएं

लेकिन प्लगइन को सक्रिय करना पर्याप्त नहीं है; आपको कार्यशील थीम कोड के साथ काम करने की आवश्यकता है।

टिप्पणी:जब आप अपनी कार्य थीम फ़ाइलों में परिवर्तन करना शुरू करते हैं, तो अपनी साइट और उसके डेटाबेस का बैकअप लें। यदि कुछ गलत होता है, तो आप बैकअप प्रतिलिपि पर वापस जा सकते हैं।

WP-pagenavi को सक्रिय करने का कार्य इस प्रकार है। आपको कार्यशील थीम फ़ाइलों में अगला_पोस्ट_लिंक और पिछला_पोस्ट_लिंक फ़ंक्शंस ढूंढना होगा और पंक्तियों को उनके साथ बदलना होगा:

नेक्स्ट_पोस्ट्स_लिंक और प्रीवियस_पोस्ट्स_लिंक फ़ंक्शंस को कहां और कैसे देखें

आमतौर पर, नेक्स्ट_पोस्ट्स_लिंक और प्रीवियस_पोस्ट्स_लिंक फ़ंक्शंस थीम फ़ाइलों में पाए जा सकते हैं: इंडेक्स, आर्काइव, फ़ंक्शंस। आप इसे ब्लॉग कंसोल से संपादक में कर सकते हैं।

अपनी वर्डप्रेस साइट पर पेजिनेशन नेविगेशन जोड़ें

यदि कंसोल से खोज करने से त्वरित परिणाम नहीं मिलते हैं, और आपको ये फ़ंक्शन दिखाई नहीं देते हैं, तो निम्न कार्य करें:

एफ़टीपी कनेक्शन के माध्यम से, हम कार्यशील थीम फ़ाइलों को अपने कंप्यूटर पर कॉपी करते हैं।
सभी डाउनलोड की गई फ़ाइलों को टेक्स्ट एडिटर में खोलें, उदाहरण के लिए नोटपैड++।
इसके बाद, हम संपादक की खोज "सभी फाइलों में खोजें" का उपयोग करते हैं और अपने कार्यों के नाम ढूंढते हैं: अगला_पोस्ट_लिंक और पिछला_पोस्ट_लिंक।

उन्हें ढूंढने के बाद, उन्हें इसके साथ बदलें:

प्रतिस्थापन के बाद, संपादित फ़ाइल को वापस साइट निर्देशिका पर अपलोड करें और साइट पर पेज नेविगेशन बटन की उपस्थिति की जाँच करें।

WP-pagenavi बटनों का स्वरूप कैसे बदलें

डिफ़ॉल्ट रूप से, पेज नंबर वाले पलागिन बटन सफेद/ग्रे होते हैं। फ़्रेम चौकोर हैं. आप फ़ाइल में बटनों का स्वरूप बदल सकते हैं: pagenavi-css.css. यह फ़ाइल निर्देशिका में स्थित है: wp-content/plugins/wp-pagenavi.

संपादित करने के लिए, फ़ाइल को अपने कंप्यूटर पर डाउनलोड करें और इसे टेक्स्ट एडिटर में संपादित करें। साथ ही, मूल स्रोत फ़ाइल को बैकअप के रूप में बरकरार रखें।

अधिक पेज नेविगेशन प्लगइन्स

बेस्टवेबसॉफ्ट द्वारा पेजिनेशन। https://ru.wordpress.org/plugins/pagination/
सरलीकृत पृष्ठ नवी। https://ru.wordpress.org/plugins/simplistic-page-navi/
वर्णमाला पृष्ठांकन. https://ru.wordpress.org/plugins/alphabetic-pagination/
एसएक्स नो होमपेज पेजिनेशन। https://ru.wordpress.org/plugins/sx-no-homepage-pagination/
WP-Paginate. https://ru.wordpress.org/plugins/wp-paginate/

इस लेख में हम देखेंगे WP-PageNavi और WP पेज नंबर प्लगइन्स का उपयोग करके वर्डप्रेस साइट के लिए पेज नेविगेशन (पेजिनेशन) कैसे करें.

सभी साइटों में पेजिनेशन नहीं होता है, और सटीक रूप से कहें तो, सभी वर्डप्रेस थीम में बिल्ट-इन पेजिनेशन नहीं होता है। हालाँकि, इसे एक साधारण प्लगइन का उपयोग करके आसानी से व्यवस्थित किया जा सकता है।

पेज नेविगेशन प्लगइन WP-PageNavi

WP-PageNavi डाउनलोड करें। प्लगइन वर्डप्रेस के लिए प्लगइन्स की आधिकारिक निर्देशिका में है और कंसोल से डाउनलोड करने के लिए उपलब्ध है।

सक्रियण के तुरंत बाद, आप प्लगइन को काम करते हुए देख सकते हैं:

उपस्थिति काफी हद तक वर्डप्रेस टेम्पलेट के डिज़ाइन पर निर्भर करेगी, इसलिए ऊपर स्क्रीनशॉट में दिखाए गए पेजिनेशन प्लगइन की आकर्षक उपस्थिति से भयभीत न हों।

पेज नेविगेशन प्लगइन में कई सेटिंग्स हैं जो अनुभाग में पाई जा सकती हैं "सेटिंग्स" - "पेजों की सूची".

पेज टेम्प्लेट की सामान्य सूची आपको प्रारंभिक डिज़ाइन करने की अनुमति देती है:

परिणामस्वरूप हमें निम्नलिखित प्राप्त होता है:

मैं डिज़ाइन तत्वों के बारे में नहीं लिखूंगा, एक नियम के रूप में, कोई भी उन्हें नहीं बदलता है।

आप ड्रॉप-डाउन सूची के रूप में प्रदर्शित होने के लिए पेजिनेशन नेविगेशन को कॉन्फ़िगर कर सकते हैं:

दृश्य निश्चित रूप से पूरी तरह से आकर्षक नहीं है, लेकिन सब कुछ बहुत कॉम्पैक्ट है।

आप पेज नेविगेशन पैनल में प्रदर्शित होने वाले पेजों की संख्या भी कॉन्फ़िगर कर सकते हैं।

प्रदर्शित किए जाने वाले पृष्ठों की श्रेणी और पृष्ठ श्रेणियों के लिए गुणांक उन मामलों में नेविगेशन को सरल बना देगा जहां साइट या ब्लॉग पर बहुत सारे पृष्ठ हैं।

WP पेज नंबर पेजिनेशन प्लगइन

प्लगइन डाउनलोड करें. हम स्थापित करते हैं।

मुझे यह प्लगइन पिछले वाले से थोड़ा अधिक पसंद आया, क्योंकि इसमें कई निर्विवाद फायदे हैं।

इनमें से एक की उन लोगों द्वारा सराहना की जाएगी जो सीएसएस में अच्छे नहीं हैं। अर्थात्, प्लगइन समर्थन करता है 5 वर्डप्रेस पेज नेविगेशन बार डिज़ाइन शैलियाँ. इसलिए साइट स्वामी आवश्यक शैलीगत डिज़ाइन चुनने में सक्षम होगा जो साइट के सामान्य स्वर से मेल खाता हो।

के लिए चलते हैं सेटिंग्स - पृष्ठ क्रमांक.

इष्टतम डिज़ाइन चुनना:

हम मुख्य तत्वों का अनुवाद करते हैं:

हम कॉन्फ़िगर करते हैं कि कौन से पेज नेविगेशन तत्व छिपाए जाने चाहिए और कौन से साइट पर प्रदर्शित किए जाएंगे:

अंतिम चरण प्लगइन के लिए आउटपुट कोड जोड़ना है।

इसे कैसे करना है? सबसे पहले, आपको वह कोड ढूंढना होगा जो मानक नेविगेशन प्रदर्शित करने के लिए ज़िम्मेदार है:

इस कोड में आवश्यक रूप से 2 वर्डप्रेस फ़ंक्शन शामिल हैं: पिछला_पोस्ट() और अगला_पोस्ट().

नेविगेशन बार मुख्य पृष्ठ पर, श्रेणियों में, टैग, अभिलेखागार में प्रदर्शित होता है, इसलिए आपको इस कोड को संबंधित फ़ाइलों में देखना होगा:

wp-content\themes\your_theme\index.php

wp-content\themes\your_theme\category.php

wp-content\themes\your_theme\tag.php

wp-content\themes\your_theme\archives.php

पाए गए कोड को प्लगइन सेटिंग्स में निर्दिष्ट कोड से बदला जाना चाहिए:

यदि ऐसा कोड न हो तो क्या करें?कुछ वर्डप्रेस थीम में, इन फ़ंक्शन को एक अलग फ़ाइल में रखा जा सकता है। उन्हें ढूंढने के लिए, आपको एक टेक्स्ट एडिटर का उपयोग करना होगा जो फ़ाइल खोज का समर्थन करता है, उदाहरण के लिए: नोटपैड ++, या ड्रीमविवर, यह इस फ़ंक्शन के साथ भी अच्छी तरह से मुकाबला करता है।

आपको निम्नलिखित खोज शर्तें निर्धारित करनी होंगी: