वर्डप्रेस के साथ क्लाइंट पोर्टल बनाएं

लेखक: John Stephens
निर्माण की तारीख: 22 जनवरी 2021
डेट अपडेट करें: 19 मई 2024
Anonim
How to Create a Private WordPress Client Portal
वीडियो: How to Create a Private WordPress Client Portal

विषय

एक ऐसा क्षेत्र होने से जो उपयोगकर्ताओं को फोन अनुबंधों से उपयोगिताओं तक लॉगिन करने और दस्तावेज़ों को डाउनलोड करने या देखने की अनुमति देता है, उपभोक्ताओं द्वारा अपेक्षित हो गया है।

जब डिजाइनर अपने ग्राहकों के साथ काम करते हैं, हालांकि, सब कुछ जल्दी से ईमेल, मॉकअप और अटैचमेंट के लिंक में टूट सकता है।

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

कस्टम पोस्ट प्रकार और फ़ील्ड का उपयोग डेटा को स्टोर करने के लिए किया जाएगा, और इन्हें प्लग इन के माध्यम से जोड़ा जाएगा, ताकि थीम बदलने पर डेटा हानि से बचा जा सके। विषय को थोड़ा संशोधित किया जाएगा।

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


फ़ाइलें डाउनलोड करें इस ट्यूटोरियल के लिए।

  • वर्डप्रेस को विजुअल बिल्डर में कैसे बदलें

01. वर्डप्रेस की एक नई प्रति स्थापित करें

विकास सर्वर पर वर्डप्रेस की एक नई प्रति स्थापित की गई है, और जल्दी से काम शुरू करने के लिए बॉयलरप्लेट नींव देने के लिए "अंडरस्ट्रैप" थीम को चुना गया है। कस्टम पोस्ट प्रकार UI प्लगइन का उपयोग किया जाएगा ताकि हमारे कस्टम पोस्ट प्रकार थीम से स्वतंत्र हों।

02. डिफ़ॉल्ट प्लगइन्स निकालें

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

03. एक कस्टम पोस्ट प्रकार जोड़ें

कस्टम पोस्ट प्रकार UI इंटरफ़ेस का उपयोग करके, "ग्राहक" नामक एक नया पोस्ट प्रकार जोड़ें। "पोस्ट टाइप स्लग" में प्रवेश करते समय, रिक्त स्थान के बजाय अंडरस्कोर का उपयोग करें और एकवचन रूप में लिखें, क्योंकि इससे बाद में टेम्प्लेट बनाना आसान हो जाएगा। उपसर्ग tu_ को संघर्ष की संभावना को कम करने के लिए जोड़ा गया है।


04. कस्टम पोस्ट प्रकार इंटरफ़ेस जोड़ें / संपादित करें

एक बहुवचन लेबल "ग्राहक" और एकवचन "ग्राहक" जोड़ें, क्योंकि यह वर्डप्रेस व्यवस्थापक मेनू में दिखाई देगा। इन क्षेत्रों में पूंजीकरण स्वीकार किया जाता है, जो वर्डप्रेस मेनू को आसान बना देगा।

05. एक कस्टम रीराइट स्लग बनाएं

पोस्ट प्रकार के स्लग के लिए उपसर्ग का उपयोग करने का अर्थ यह होगा कि पोर्टल में जोड़े गए ग्राहक "/tu_customer/example-company" जैसा दिखने वाले लिंक के साथ बनाए जाएंगे। यह साफ नहीं दिखता है, और इसे सुधारने के लिए कस्टम रीराइट स्लग का उपयोग किया जाता है। पुनर्लेखन स्लग को "ग्राहकों" पर सेट करने से कस्टम पोस्ट प्रकार /customers/example-company के रूप में प्रकट होता है।

06. कस्टम फ़ील्ड के लिए समर्थन जोड़ें


कस्टम पोस्ट प्रकार के लिए सक्षम किया गया अंतिम विकल्प "समर्थन> कस्टम फ़ील्ड" है जो पृष्ठ के निचले भाग के पास पाया जाता है। इसे टिक करें, और फिर पृष्ठ के निचले भाग में "पोस्ट प्रकार जोड़ें"। यह परिवर्तन सबमिट करता है और पोस्ट प्रकार को पंजीकृत करता है।

07. कस्टम फ़ील्ड जोड़ें

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

08. फ़ील्ड सेट करें

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

09. वर्डप्रेस टेम्पलेट फ़ाइल बनाएं

वर्डप्रेस को यह जानने की जरूरत है कि ग्राहक डैशबोर्ड कैसे प्रदर्शित किया जाए। इसके लिए, इस विशिष्ट पोस्ट प्रकार के लिए टेम्पलेट फ़ाइल बनाने के लिए वर्डप्रेस टेम्पलेट पदानुक्रम का पालन किया जाता है। रूट थीम डायरेक्टरी में सिंगल-tu_customer.php नाम की फाइल बनाएं।

10. एक पूर्ण-चौड़ाई वाला सिंगल पोस्ट लेआउट बनाएं

सिंगल-tu_customer.php फ़ाइल खोलें और get_header और get_footer वर्डप्रेस फ़ंक्शंस जोड़ें। उन कार्यों के बीच, अपनी थीम के साथ काम करने वाली सामग्री को रखने के लिए एक पूर्ण-चौड़ाई वाला लेआउट बनाएं।

?php get_header();?> div id="single-wrapper"> div id="content" tabindex="-1"> div > div id="primary"> main id="main">--! सामग्री -->/मुख्य> /div> /div>!-- .row --> /div>!-- #content --> /div>!-- #single-wrapper --> ?php get_footer() ;?>

11. लूप शुरू करें और सामग्री बनाएं

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

main id="main"> ?php जबकि ( have_posts() ): the_post(); ?> var13 -> div> div> div> सामग्री/div> div> सामग्री/div> div> सामग्री/div> /div> /div> ?php अंत में; // लूप का अंत। ?> var13 --> /main>!-- #main -->

12. गतिशील मूल्यों में कॉल करने के लिए PHP का प्रयोग करें

फ़ंक्शन "the_field" का उपयोग करके, एक फ़ंक्शन जो उन्नत कस्टम फ़ील्ड प्लगइन के साथ आता है, कस्टम फ़ील्ड से गतिशील सामग्री को ग्राहक टेम्पलेट में दर्ज किया जाता है। 'फ़ील्ड_नाम' वह मान है जो चरण 3 में दर्ज किया गया था।

div > div > h5 >संक्षिप्त/h5> p >यह आपका मूल संक्षिप्त दस्तावेज़/p> a href="?php the_field('brief'); ?> var13 ->" target="none" >Open/a है > /div> /div>

13. कुछ डमी डेटा के साथ एक परीक्षण ग्राहक बनाएं

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

14. किसी भी लापता डेटा के लिए त्रुटियों को संभालना

यदि कोई दस्तावेज़ भूल जाता है, या उस दस्तावेज़ के उपलब्ध होने की प्रक्रिया में बहुत जल्दी है, तो बटन के काम न करने पर ग्राहक के लिए यह भ्रमित करने वाला हो सकता है। यह दिखाने से पहले कि कोई मान मौजूद है, चेक जोड़ने से कार्ड की "लापता फ़ील्ड" भिन्नता दिखाने का मौका मिलता है। मान के न होने पर कार्ड में "अक्षम" श्रेणी जोड़ने से हम अनुपलब्ध कार्डों को स्टाइल कर सकेंगे।

?php if (get_field('field_name' ) ): ?> var13 --> तब प्रदर्शित होता है जब field_name का मान होता है? ; // अगर फ़ील्ड_नाम तर्क का अंत?> var13 ->

15. इंटरफ़ेस को व्यवस्थित करें

अब जबकि इंटरफ़ेस की संरचना को अंतिम रूप दे दिया गया है, इसे ठीक से स्टाइल किया जा सकता है। CSS का उपयोग करके, पृष्ठ पर कार्ड और रंगों के रूप को बेहतर बनाया जा सकता है। नेविगेशन का रंग हल्का नीला कर दिया गया है, और परिचय टेक्स्ट जोड़कर उपयोगकर्ता की दिशा में सुधार किया गया है।

16. इसे साइटमैप से बाहर करें

कस्टम पोस्ट प्रकार खोज इंजन परिणामों में नहीं मिलने चाहिए। पोस्ट प्रकार को वेबसाइट के साइटमैप से बाहर करना होगा, या तो SEO प्लगइन के माध्यम से, या मैन्युअल रूप से मेटा टैग और robots.txt का उपयोग करके।

मेटा नाम = "रोबोट्स" सामग्री = "नोइंडेक्स, नोफ़ॉलो" /> उपयोगकर्ता-एजेंट: * अस्वीकृत: / ग्राहक /

एक नई वेबसाइट डिजाइन करना चाहते हैं? प्रक्रिया को सुपर-सरल बनाने के लिए एक शानदार वेबसाइट बिल्डर का उपयोग करें।

पिछला लेख

फोटोशॉप और आफ्टर इफेक्ट्स के साथ काइनेटिक टाइपोग्राफी तकनीक
अगला लेख

2015 कैलेंडर एक दिन में एक फ़ॉन्ट पेश करता है
पाठकों की पसंद
एक विशाल ग्राहक का प्रबंधन कैसे करें
पढ़ना

एक विशाल ग्राहक का प्रबंधन कैसे करें

मई 2024
यूके के डिजाइन स्टूडियो कोटो ने 2015 में लॉन्च होने के बाद से प्रभावशाली रूप से तेजी से सफलता हासिल की है। इसने वैश्विक डिजाइन परिदृश्य पर तेजी से अपनी प्रतिष्ठा बनाई है, और इस साल कंप्यूटर आर्ट्स स्ट...
मई के लिए 10 शानदार नए वेब डिज़ाइन टूल
पढ़ना

मई के लिए 10 शानदार नए वेब डिज़ाइन टूल

मई 2024
अंत में गर्मी अपने रास्ते पर है, और इसके साथ महान नए वेब डिज़ाइन टूल का पूरा भार आता है। जिनमें से सबसे रोमांचक है लोब, एक प्रणाली जो आपको शक्तिशाली सुविधाओं को बनाने के लिए अपने ऐप्स में मशीन लर्निंग...
500 वेब डिज़ाइन पुस्तकें प्राप्त करें - वे पूरी तरह से निःशुल्क हैं और अभी उपलब्ध हैं
पढ़ना

500 वेब डिज़ाइन पुस्तकें प्राप्त करें - वे पूरी तरह से निःशुल्क हैं और अभी उपलब्ध हैं

मई 2024
डोलना शुरू करने का समय आ गया है। चाहे आप एक कोडिंग नौसिखिया हों या एक नई प्रोग्रामिंग भाषा सीखने के इच्छुक एक अनुभवी, अब आपके कौशल को एक ही स्थान पर ब्रश करने में सहायता के लिए ऑनलाइन फॉर्म में 500 से...