Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

एक बेहतर WordPress ऑप्शंस पैनल कैसे बनाएँ

by
Length:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

आज, हम WordPress थीम के लिए एक एडमिन ऑप्शंस पैनल बनाने की पूरी प्रक्रिया के माध्यम से उत्कृष्ट WooFramework का उपयोग उदाहरण के रूप में करेंगे। फिर, हम चीजों को एक कदम आगे ले जाएंगे, क्योंकि हम कुछ फंक्शनलिटी में सुधार करने के लिए jQuery को इम्प्लीमेंट करते हैं।

ट्यूटोरियल डिटेल्स

  • कार्यक्रम: WordPress
  • वर्जन: 2.7, 2.8, 2.9 आगे
  • कठिनाई: इंटरमीडिएट
  • अनुमानित समापन समय: 1.5 घंटे
Final Product

WordPress सबसे लोकप्रिय कंटेंट मैनेजमेंट सॉफ्टवेयर (CMS) सिस्टम में से एक है। चाहे वह क्लाइंट प्रोजेक्ट के लिए हो या ThemeForest पर थीम बेचने के लिए, WordPress कई वेब डेवलपर्स के पसंद के CMS के रूप में तेजी से उभर रहा है। यह उपयोग करने के लिए अपेक्षाकृत आसान है, लेकिन जब आप यूज़र्स के लिए एक एडमिनिस्ट्रेशन पैनल शामिल करते हैं तो भी इससे इसे सरल बनाया जा सकता है। PHP टेम्पलेट फ़ाइलों को खोलने और कोड के साथ झुकाव करने के बजाय, यूजर सीधे आपके WordPress थीम से इंटरैक्ट करने के लिए ऑप्शंस पैनल का उपयोग कर सकते हैं।

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

स्टेप 1

एडमिन पैनल बनाने शुरू करने से पहले, हमारे पास एक थीम होना चाहिए, है ना? तो ट्यूटोरियल के साथ प्रदान की गई सोर्स फ़ाइलों को डाउनलोड करें। मैंने क्लासिक WordPress थीम को थोड़ा संशोधित किया है। अपने wp-content/themes फ़ोल्डर में 'nettuts' फ़ोल्डर रखें (मैंने थीम को 'Nettuts' नाम दिया है)। आपको निम्न फाइलें दिखनी चाहिए:

  • functions.php (खाली)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • दो फाइलों के साथ एक इमेज फ़ोल्डर

हमारे अधिकांश काम functions.php फ़ाइल के भीतर किए जा रहे हैं।

एक थीम वैकल्पिक रूप से फ़ंक्शन फ़ाइल का उपयोग कर सकता है, जो थीम की सबडायरेक्टरी में रहता है और इसे functions.php नाम दिया जाता है। यह फ़ाइल मूल रूप से प्लगइन की तरह कार्य करती है, और यदि यह उस थीम में मौजूद है जिसका आप उपयोग कर रहे हैं, तो यह ऑटोमेटिकली WordPress प्रारम्भ होने (एडमिन पेजेज और बाहरी पेजेज दोनों के लिए) के दौरान लोड हो जाता है।

इस फ़ाइल के लिए सुझाए गए उपयोग:

  • अपनी थीम की कई टेम्पलेट फ़ाइलों में उपयोग किए गए फंक्शन्स को परिभाषित करें
  • रंग, स्टाइल्स और आपके थीम के अन्य पहलुओं के लिए यूज़र्स को ऑप्शन देने के लिए, एक एडमिन स्क्रीन सेट अप करें

(WP Codex से)

स्टेप 2

अब जब हमने अपना WordPress थीम सेट अप कर लिया है, तो Appearance>Themes पर जाएं, और nettuts थीम को एक्टिवेट करें।

एक्टिवेट हो गयी है? ठीक है बहुत बढ़िया। अब हमें अपने एडमिन पैनल पेज के लिए एक लेआउट के बारे में सोचना होगा। यहां जिस स्ट्रक्चर का मैंने निर्णय लिया है:

मुझे आप सबको समझाने दो। ऑप्शंस सेट को "rm_wrap" नामक एक div में और फिर ओप्तिओंस के लिए "rm_opts" में लपेटा (wrap किया) जा रहा है। फिर हम इसके भीतर सभी इनपुट के साथ एक फॉर्म शुरू करते हैं। ओप्तिओंस के प्रत्येक सेक्शन (सामान्य सेटिंग्स, होमपेज सेटिंग्स, ब्लॉग सेटिंग्स इत्यादि) में "rm_section" की क्लास के साथ एक अलग div है। इस div में टाइटल (नाम के लिए) के साथ-साथ इसके भीतर कई इनपुट divs हैं। <div class = "rm_input rm_select"> जैसे कालस्सेस का उपयोग करके, हम अलग-अलग ड्रॉपडाउन, टेक्स्ट इनपुट और textareas स्टाइल बना सकते हैं।

अब, सबसे महत्वपूर्ण बात यह है कि इसका कोडिंग मैन्युअल रूप से नहीं की जानी चाहिए - हमें जितना संभव हो सके PHP की फ्लेक्सिबिलिटी का उपयोग करना चाहिए। इसका मतलब है दक्षता: जब आपके पास लूप हों तो मैन्युअल रूप से कोड न करें!

स्टेप 3

अपने पसंदीदा कोड एडिटर में function.php खोलकर शुरू करें (मैं Notepad++ का उपयोग करता हूं)। निम्नलिखित कोड एंटर करें:

दो PHP वेरिएबल्स आपके थीम के नाम (हमारे मामले में Nettuts), और एक शार्ट नाम जिसे आपने परिभाषित किया है (हमारे मामले में nt)। शार्ट नाम का उपयोग हमारे सभी थीम ऑप्शंस नामों को प्रीफिक्स करने के लिए किया जाता है, और आमतौर पर उस विशेष थीम के लिए यूनिक होता है। आगे बढ़ते हुए, हम कुछ कोड्स लिखेंगे ताकि यह WordPress की केटेगरी लिस्ट को ऑटोमेटिकली जेनेरेट कर सके, ID नंबर में यूज़र्स टाइप देने से बचें। पहले से टाइप किए गए कोड के नीचे दिए गए कोड को एंटर करें:

यह स्निपेट WordPress 'बिल्ट-इन get_categories फ़ंक्शन का उपयोग सभी कैटेगरीज को लाने के लिए करता है, और उसके बाद वेरिएबल $wp_cats में स्टोर करने के लिए foreach लूप का उपयोग करता है। ऑप्शंस "Choose a category" को फिर array के टॉप पर जोड़ा जाता है

स्टेप 4

अब हम थीम के लिए ऑप्शंस की एक लिस्ट एंटर करना शुरू करते हैं। नीचे देखें, और इसे अपने functions.php फ़ाइल में पेस्ट करें:

यह कोड का एक बड़ा हिस्सा था, जो निश्चित रूप से कुछ एक्सप्लनेशन मांगता है। तो अब हम शुरू करें:

  • PHP वेरिएबल $options थीम के लिए ऑप्शंस की पूरी लिस्ट स्टोर करता है।
  • यह कई array से बना है, प्रत्येक को "type" key के साथ यह इंगित करने के लिए कि यह कैसे प्रदर्शित किया जाएगा, और यह क्या करता है।
  • हम एक "type" => "title" array से शुरू करते हैं - इसका उपयोग पेज के शीर्ष पर themename और title दिखाने के लिए किया जाएगा
  • प्रत्येक सेक्शन (सामान्य, होमपेज और फुटर) ऑप्शंस की एक अलग लिस्ट है।
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer "type" => "section") का उपयोग करके एक नया सेक्शन डिक्लेअर करते हैं, और एक नया सेक्शन खोलते।
  • प्रत्येक ऑप्शन में नीचे स्पेसिफाइड ऑप्शन हो सकते हैं:
    name: इनपुट फ़ील्ड का नाम।
    desc: यूजर के लिए क्या है यह समझाते हुए एक संक्षिप्त विवरण।
    id: फ़ील्ड की id, शार्ट नाम से प्रीफिक्स। इसका उपयोग स्टोर के साथ-साथ ऑप्शंस तक पहुंचने के लिए किया जाएगा।
    type: इनपुट टाइप - select, text या textarea
    options: एक select टाइप इनपुट के लिए ऑप्शंस का एक array घोषित करने के लिए प्रयोग किया जाता है।
    std: डिफ़ॉल्ट इनपुट वैल्यू, अगर कोई अन्य इनपुट दिया जाता है।

स्टेप 5

WordPress पर नेविगेट करने का प्रयास करें। आप देखेंगे कि वास्तव में एडमिन पैनल पेज को देखने के लिए कहीं भी कोई ऑप्शन नहीं है; तो हम इसे कैसे देख सकते हैं? functions.php फ़ाइल में निम्न कोड को जोड़ें:

यह फ़ंक्शन ऑप्शन अपडेट करने के साथ-साथ मेनू पेज जोड़ता है। यदि ऑप्शन सेव किये जा रहे हैं (एक हिडन वेरिएबल सेव द्वारा इंडिकेटेड), तो सभी ऑप्शंस को उनके नयी वैल्यूज के साथ अपडेट किया जाता है। यदि ऑप्शन रीसेट किए जा रहे हैं (किसी अन्य हिडन वैरिएबल द्वारा वैल्यू रीसेट के साथ इंडीकेट किया गया है), तो सभी ऑप्शंस को डिलीट कर दिया जाता हैं। अंतिम लाइन मेनू का पेज जोड़ती है - पैरामीटर क्रमशः, नाम और टाइटल होते हैं, यूजर को ऑथॉरिजातिओं लेवल को पेज को देखने, सेव करने और डिस्प्ले/सेव करने के लिए उपयोग किए जाने वाले फ़ंक्शन को देखने के लिए आवश्यक होता है (जिसे हमारे मामले में mytheme_admin कहा जाता है)। mytheme_add_init, एक blanbk फ़ंक्शन देखें? ऐसा होने दो, हम बाद में इसमें वापस आ जाएंगे।

स्टेप 6

अभी भी कोई थीम ऑप्शन पेज नहीं है, है ना? खैर, mytheme_admim फ़ंक्शन याद रखें जिसे हमने कुछ लाइन्स के बारे में बात की थी? हमने अभी भी उस फंक्शन को नहीं लिखा है। तो उस फ़ंक्शन को लिखने के लिए स्टेप 6,7 और 8 से कोड का उपयोग करें। शुरू करते हैं:

बहुत आसान, है ना? यदि ऑप्शन सेव किये गए हैं, तो ऐसा इंगित करने वाला एक मैसेज लिखें। इसी प्रकार रीसेट के लिए भी। आप एक class = "updated fade" देखेंगे - WordPress ऑटोमेटिकली कुछ सेक्शंस में इसे fade कर देगा। निफ्टी, है ना? आगे बढ़ते हुए, हम फिर "rm_wrap" div शुरू करते हैं।

स्टेप 7

ऊपर वाले से आगे बढ़ना, निम्न कोड पेस्ट करें:

यह कोड का एक बड़ा टुकड़ा है! स्पष्टीकरण - एक php foreach लूप का उपयोग करके, प्रत्येक ऑप्शन टाइप का मूल्यांकन केस-दर-केस आधार पर किया जाता है। हम इसके लिए एक switch-case तकनीक का उपयोग करते हैं। switch वैरिएबल ऑप्शन है - केसेस का मिलान और मूल्यांकन किया जाता है। प्रत्येक मामले के बाद 'break' स्टेटमेंट पर ध्यान दें? यह 'फॉल-थ्रू' प्रॉपर्टी के रूप में जाना जाने वाला कुछ रोकने के लिए है। जब कोई केस मेल खाता है, तो सभी लगातार केसेस को भी एक्सेक्यूट किया जाता है। इसका मतलब है कि अगर हम केस 3 से मेल खाता हैं, तो केस 4,5 आदि भी एक्सेक्यूट किए जाते हैं। हम यह नहीं चाहते हैं, है ना? तो switch-case को रोकने के लिए break का उपयोग करें।

यदि कोई "open" टाइप ऑप्शन है - कुछ भी नहीं किया जाता। यदि कोई "close" टाइप ऑप्शन है, तो दो divs बंद करते हैं। "title" ऑप्शन केवल एक बार उपयोग किया जाता है - यह थीम ऑप्शंस का परिचय है। प्रत्येक प्रकार के "text" (input type = "text"), "select" (dropdowns), "checkbox" और "textarea" (इसका स्पष्ट अर्थ यही है), संबंधित इनपुट प्रदर्शित होता है। <div class = "clearfix"> पर ध्यान दें - इसका उपयोग फ्लोट को क्लियर करने के लिए किया जाता है, जिसे हम बाद में करेंगे।

स्टेप 8

हम उस बड़े पैमाने पर काम के अंत में आ रहे हैं। नीचे दिए गए कोड पेस्ट करें:

"section" टाइप के ऑप्शन के लिए, मैंने काउंटर वैरिएबल $i का उपयोग किया है। यह सेक्शन नंबर पर नजर रखता है और इसे सबमिट बटन के नाम के साथ कॉनकॉनेट (concatenate) करता है, ताकि हमारे पास यूनिक सबमिट बटन हो। सभी ऑप्शंस को रीसेट करने के अंत में एक अंतिम फॉर्म भी है। इस्तेमाल की गई इमेज हमारे jQuery-fication में उपयोग की जाने वाली एक ट्रांसपेरेंट इमेज होगी। हमारे फंक्शन को खेल में लाने के लिए कोड के इस अंतिम भाग का उपयोग करें:

यह एडमिन मेनू जोड़ने के लिए WordPress को बताता है।

स्टेप 9

और ये रहा! हमारे पास अपने स्वयं का बहुत बढ़िया एडमिन पैनल पेज के लिए एक अलग मेनू पोजीशन है। तो आइए इसे देखें - लिंक पर क्लिक करें। और यक अब तक का सबसे बदसूरत एडमिन पैनल पेज होना चाहिए। तो चलिए अपने अच्छे दोस्त, CSS कॉल करें! nettuts/ डायरेक्टरी में एक नया फ़ोल्डर बनाएँ और इसे "functions" नाम दें। वहां एक नई CSS फ़ाइल बनाएं - functions.css। निम्नलिखित कोड को पेस्ट करें:

मैं यहां कुछ भी नहीं समझाऊंगा; यह स्पष्ट है कि प्रत्येक CSS डिक्लेरेशन क्या करता है, और आप अपनी थीम के लिए लेआउट को कस्टमाइज करने के लिए स्वतंत्र हैं।

स्टेप 10

तो अब हमारे पास एक अच्छी CSS फ़ाइल है। लेकिन हम इसे पेज पर कैसे जोड़ सकते हैं? आखिरकार, हमारे पास डॉक्यूमेंट के <head> तक सीधे पहुंच नहीं है। याद रखें कि स्टेप 4 में हमने एक खाली mytheme_add_init() फ़ंक्शन लिखा है? वह काम में आ जाएगा। इसे इस पर बदलें:

यह functions.css फ़ाइल को हेड में जोड़ता है। फ़ाइल का स्थान टेम्पलेट डायरेक्टरी द्वारा निर्धारित किया जाता है।

स्टेप 11

अब पेज पर देखें। बहुत अच्छा लग रहा है, है ना? लेकिन फिर, आप पूछते हैं, '+' आइकन के लिए क्या? खैर, वह जहां jQuery आता है! nettuts/functions/ फ़ोल्डर में एक नई फ़ाइल rm_script.js बनाएँ। निम्नलिखित कोड को पेस्ट करें:

यह क्या करता है - एक बार जब डोम लोड हो जाता है, तो सभी rm_options स्लाइड हो जाते हैं। जब '+' आइकन क्लिक किया जाता है, तो inactive क्लास को इमेज से हटा दिया जाता है और active क्लास को जोड़ा जाता है - इसे '-' आइकन बनाते हैं। रिवर्स तब किया जाता है जब '-' आइकन क्लिक किया जाता है। rm_options तब स्लाइड टॉगल फ़ंक्शन का उपयोग करके ऊपर या नीचे (वर्तमान CSS पोजीशन द्वारा निर्धारित) - बहुत सरल है। इस स्क्रिप्ट को जोड़ने के लिए, वही mytheme_add_init() फ़ंक्शन का उपयोग किया जाता है। इसे यहां बदलें:

JQuery स्क्रिप्ट अब एक्टिव हो जाएगी। Gp इसे जांचें। व्यक्तिगत रूप से, मुझे लगता है कि यह सुंदर है!

स्टेप 12

अब जब हमारे पास हमारे थीम का ऑप्शन पेज सेटअप हैं, तो मैं आपको ऑप्शंस का उपयोग करके चलाऊंगा। ऑप्शंस का उपयोग करने के लिए कोड निम्नानुसार है:

वह nt_color_scheme ऑप्शंस को लाएगा। नीचे दिए गए उदाहरण देखें:

उपयोग की वैरायटी केवल आपकी कल्पना से ही सीमित है।

निष्कर्ष

मुझे उम्मीद है कि आपने इस ट्यूटोरियल में कुछ सीखा है। यह आपका स्टैण्डर्ड ऑप्शन पैनल नहीं है। यह टेबल का उपयोग नहीं करता है, यह jQuery एन्हैंस किया गया है, बेहतरीन CSS का उपयोग करता है, और उपयोग करने में बेहद आसान है। इस ट्यूटोरियल का पॉइंट सीखना है - आप हमेशा टैब के साथ कलप्सीबल पैनलों को रीप्लेस कर सकते हैं, उदाहरण के लिए, या यहां तक कि कुछ और भी एडवांस। अपनी क्रिएटिविटी का प्रयोग करें! कमैंट्स में चर्चा करने या प्रश्न पूछने के लिए स्वतंत्र महसूस करें!

WooThemes ने बाद में उनके फ्रेमवर्क के वर्जन 2 जारी किया है। आप यहां डिटेल्स की समीक्षा कर सकते हैं।

  • ट्विटर पर हमें फ़ॉलो करें, या वेब पर सर्वोत्तम वेब डेवलपमेंट ट्यूटोरियल के लिए Nettuts+ RSS फ़ीड की सदस्यता लें।
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.