Gutenberg के लिए निर्माण: कैसे प्लगइन और थीम लेखक Gutenberg के लिए संक्रमण को संबोधित कर रहे हैं

Gutenberg के लिए बनाएँ: कैसे प्लगइन और थीम लेखक संक्रमण को संबोधित कर रहे हैं


वर्डकैम्प यूरोप 2018 में, मैट मुलेनवेग ने अगले कई महीनों में गुटेनबर्ग के लिए एक मोटा रोडमैप तैयार किया। जुलाई में, गुटेनबर्ग गोद लेने को बढ़ाने के लिए एक बड़ा धक्का होने वाला है, अगस्त में खेलने के लिए 5.0 बीटा के साथ (या परे; वास्तव में, शायद परे)। आसन्न एकीकरण आप सोच रहे होंगे कि कैसे वर्डप्रेस डेवलपर्स गुटेनबर्ग के लिए निर्माण करने की योजना बना रहे हैं.

यही है, डेवलपर्स द्वारा गुटेनबर्ग के लिए अपने प्रसाद को तैयार करने के विभिन्न तरीके क्या हैं? और लोग गुटेनबर्ग के लिए कुछ नया और दिलचस्प कर रहे हैं?

इस पोस्ट में, हम आपको कुछ वास्तविक, ठोस उदाहरण देने जा रहे हैं कि प्लगइन और थीम डेवलपर्स कैसे गुटेनबर्ग के लिए निर्माण कर सकते हैं जो आपको दिखाते हैं कि वहां पहले से ही क्या है।.

डेवलपर्स कैसे एक अधिक एकीकृत संपादन अनुभव बनाने के लिए ब्लॉक और शैलियों का उपयोग कर रहे हैं, इसके कुछ वास्तविक जीवन के उदाहरणों को देखकर, हमें उम्मीद है कि आप:

  • समझें कि गुटेनबर्ग आपको अंतिम उपयोगकर्ता के रूप में कैसे लाभान्वित कर सकते हैं.
  • अपनी खुद की वर्डप्रेस परियोजनाओं के लिए गुटेनबर्ग के निर्माण के लिए कुछ विचार प्राप्त करें.

यदि आप अभी भी सुनिश्चित नहीं हैं कि गुटेनबर्ग संपादक क्या है, तो आप पहले हमारे पूर्ण गुटेनबर्ग संपादक ट्यूटोरियल की जांच कर सकते हैं.

Contents

मौजूदा प्लगइन्स गुटेनबर्ग को स्विच कैसे संबोधित कर रहे हैं, इसके छह उदाहरण

जिस तरह से प्लगइन लेखक गुटेनबर्ग के लिए निर्माण करते हैं, वह मुख्य रूप से प्लगइन के कार्य पर निर्भर करता है.

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

एक अच्छा उदाहरण एक फार्म प्लगइन है। बहुत अधिक हर रूप प्लगइन आपको अपने रूपों को बनाने के लिए एक अलग इंटरफ़ेस देता है और फिर सामने के छोर पर उन रूपों को वास्तव में एम्बेड करने के लिए एक शोर्ट.

इस प्रकार के प्लगइन्स आमतौर पर एक के साथ गुटेनबर्ग को संबोधित करने वाले हैं कस्टम ब्लॉक सामग्री डालना आसान बनाने के लिए। आप इस अनुभाग में कई उदाहरण देखेंगे:

  • निंजा प्रपत्र
  • देना
  • WooCommerce

फिर, आपके पास अन्य प्लगइन्स हैं जो आपको पीछे के दृश्यों के विवरण को नियंत्रित करने में मदद करते हैं। आमतौर पर, ये प्लगइन्स मेटा बॉक्स का उपयोग करते हैं.

सबसे प्रसिद्ध उदाहरण Yoast SEO जैसा कुछ होगा। आप सामग्री नहीं जोड़ रहे हैं, लेकिन मेटा बॉक्स की सभी जानकारी आवश्यक है.

मेटा बॉक्स अब गुटेनबर्ग के साथ काम करते हैं, लेकिन अभी भी उन प्लगइन्स के पास मौका है कि वे गुटेनबर्ग का लाभ लेने के लिए अपनी कार्यक्षमता को बदल सकें। मैं आपको कुछ ऐसे तरीके दिखाऊंगा जिसमें Yoast SEO समस्या का समाधान कर सकता है, साथ ही हमने अपने कुछ प्लगइन्स के साथ चीजों को करने के लिए कैसे चुना है.

1. निंजा फॉर्म एक नया गुटेनबर्ग ब्लॉक जोड़ता है

निंजा प्रपत्र WordPress.org रेपो में सबसे लोकप्रिय फॉर्म प्लग इन में से एक है। अब तक, यह एक सरल जोड़कर गुटेनबर्ग को संबोधित कर रहा है निंजा प्रपत्र खंड मैथा.

आप किसी अन्य गुटेनबर्ग ब्लॉक की तरह ब्लॉक डालें:

कैसे निंजा रूपों Gutenberg के लिए निर्माण करते हैं

फिर, आप ड्रॉप-डाउन से अपना फ़ॉर्म चुन सकते हैं:

निंजा रूपों ब्लॉक

एक बार जब आप एक फॉर्म का चयन करते हैं, तो आपको संपादक में एक लाइव पूर्वावलोकन दिखाई देगा:

फॉर्म का लाइव पूर्वावलोकन

अभी, वह सब वहाँ है लेकिन यह एक ठोस आधारभूत दृष्टिकोण है क्योंकि:

  • यह शॉर्टकोड के साथ सीधे काम करने की आवश्यकता को समाप्त करता है
  • जब आप अभी भी अपना पृष्ठ संपादित कर रहे हों, तब आप अपने डिज़ाइन का लाइव पूर्वावलोकन देख सकते हैं

अगले दो प्लगइन्स इस पर कुछ गहरी स्टाइलिंग / नियंत्रण विकल्पों के साथ बनाएंगे.

2. दो लेआउट विकल्पों के साथ दो गुटेनबर्ग ब्लॉक जोड़ता है

देना एक विकास टीम के साथ एक लोकप्रिय दान प्लगइन है जो गुटेनबर्ग संपादक के साथ देने के बारे में बहुत सक्रिय है (यदि आपको इस पोस्ट का विषय पसंद है, तो आप #PlayingWithBlocks श्रृंखला का आनंद लेंगे। ब्लॉग दें, जहां गेट टीम ने गुटेनबर्ग के लिए अपनी योजनाओं का विवरण दिया है).

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

दे दो ब्लॉक आप एम्बेड:

  • एक ही दान रूप
  • दान के रूपों की एक ग्रिड

ग्वेपबर्ग ब्लॉक

निंजा फॉर्म की तरह, आपको अपने फॉर्म का लाइव पूर्वावलोकन मिलता है। लेकिन तुम भी पा लो खंड मैथा संपादन विकल्प जो आपको देते हैं:

  • प्रारूप चुनें
  • दान लक्ष्य को सक्षम / अक्षम करें
  • चुनें कि सामग्री कहां है

ब्लॉक लेआउट विकल्प

और यदि आप अपने फॉर्म पर होवर करते हैं, तो आपको उस फॉर्म को संपादित करने के लिए एक सीधा लिंक मिलेगा:

ब्लॉक संपादन

तो इस बात पर एक नज़र है कि ब्लॉक निंजा फ़ॉर्म के वर्तमान कार्यान्वयन की तुलना में थोड़ा गहरा कैसे हो सकते हैं। लेकिन WooCommerce एक कदम आगे चला जाता है …

3. WooCommerce स्तंभ नियंत्रण के साथ एक उत्पाद ब्लॉक जोड़ता है

जबकि WooCommerce शायद अधिक गुटेनबर्ग एकीकरण जोड़ देगा क्योंकि वर्डप्रेस 5.0 निकट (कुछ) चलता है यहाँ उत्पादों को जोड़ने के लिए विचार), टीम ने पहले ही आधिकारिक के साथ गुटेनबर्ग में अपने पैर की उंगलियों को डुबो दिया है WooCommerce गुटेनबर्ग उत्पाद ब्लॉक प्लगइन.

हाँ – अभी यह एक अलग प्लगइन है। लेकिन एक बार जब आप इसे स्थापित कर लेते हैं, तो आप अपने Gutenberg सामग्री में ब्लॉक के रूप में मौजूदा WooCommerce उत्पादों को सम्मिलित कर सकते हैं.

जब आप जोड़ते हैं उत्पाद ब्लॉक करें, आप चुन सकते हैं कि कौन से उत्पाद प्रदर्शित करने हैं:

Gutenberg woocommerce ब्लॉक

फिर, आप लेआउट को बदलने के लिए ब्लॉक संपादन विकल्पों का उपयोग कर सकते हैं:

Gutenberg में woocommerce लेआउट बदल रहा है

यह मुझे बहुत उत्साहित करता है क्योंकि यह एक बेहतरीन उदाहरण है कि कैसे गुटेनबर्ग इसे गैर-मानक सामग्री को स्टाइल / कॉन्फ़िगर करने के लिए अधिक सुलभ बनाता है.

4. बीवर बिल्डर एक जोड़ता है "बीवर बिल्डर में कनवर्ट करें" विकल्प

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

बीवर बिल्डर गुटेनबर्ग

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

5. मेटा बॉक्स अभी भी काम करना चाहिए – Yoast SEO एक अच्छा उदाहरण है

मुझे नहीं लगता कि योस्ट एसईओ ने गुटेनबर्ग को संबोधित करने के लिए कोई बदलाव जारी किया है, इसलिए अभी यह एक और उदाहरण है कि कैसे मौजूदा मेटा बॉक्स गुटेनबर्ग के साथ काम करते हैं (यदि आप गुटेनबर्ग का अनुसरण नहीं कर रहे हैं – यह अब मेटा बॉक्स समर्थन है, हालाँकि यह है दीर्घकालिक समाधान की तुलना में पीछे की संगतता के लिए अधिक).

जैसा कि आप देख सकते हैं, मुख्य Yoast SEO मेटा बॉक्स Gutenberg के साथ अनसैचड के माध्यम से आता है:

गुटेनबर्ग योस्ट एसईओ मेटा बॉक्स

लेकिन आप एसईओ और सामग्री विश्लेषण स्कोर को याद नहीं कर रहे हैं जो साइडबार में चलते थे.

तो योत गुटेनबर्ग को संबोधित करने के लिए कैसे निर्माण कर सकते हैं? यहाँ कुछ मॉकअप हैं योस्ट अपने विश्लेषण को वास्तविक गुटेनबर्ग इंटरफेस में एकीकृत कर सकते हैं।

मॉकअप बीyoast seo चेतावनी
मॉकअप सीyoast seo इन-कंटेंट विश्लेषण

6. हम WP उत्पाद समीक्षा में मेटा बॉक्स को कैसे संबोधित कर रहे हैं

हमारी WP उत्पाद समीक्षा प्लगइन उन प्लगइन्स में से एक है जो फ्रंट-एंड पर आउटपुट को नियंत्रित करने के लिए एक मेटा बॉक्स का उपयोग करता है (इस मामले में एक समीक्षा बॉक्स).

यहां हम Gutenberg के संपादक में WP उत्पाद समीक्षा को एकीकृत करने पर काम कर रहे हैं:

wp उत्पाद समीक्षा

जब उपयोगकर्ता इंगित करते हैं कि पोस्ट एक साइडबार टॉगल के साथ एक समीक्षा है, तो वे उपरोक्त विकल्पों में से अपनी समीक्षा बॉक्स के बारे में सब कुछ कॉन्फ़िगर करने में सक्षम होंगे:

wp समीक्षा प्रो गुटेनबर्ग टॉगल

डेवलपर्स – यहां एक शानदार संसाधन है जो आपके प्लगइन को गुटेनबर्ग के लिए तैयार करता है

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

डेवलपर्स नए प्लगइन्स के साथ गुटेनबर्ग के लिए भी निर्माण कर सकते हैं

डेवलपर्स केवल मौजूदा प्लगइन्स गुटेनबर्ग के साथ संगत बनाने पर ध्यान केंद्रित नहीं कर रहे हैं, वे नए प्लग इन के साथ गुटेनबर्ग के लिए निर्माण करने की योजना भी बना रहे हैं.

न्यू गुटेनबर्ग ने ग्वालियर को ब्लॉक किया

एक तरफ, आपके पास सामान्य प्लगइन्स का ढेर है जो नए प्रकार के कंटेंट ब्लॉक जोड़ते हैं। ये गुटेनबर्ग को एक पेज बिल्डर का अधिक अनुभव देते हैं। आप इसके लिए ब्लॉक पा सकते हैं:

  • मूल्य निर्धारण तालिकाएँ
  • प्रशंसापत्र
  • टीम का सदस्या
  • आदि.

उदाहरण के लिए, यहाँ से एक मूल्य निर्धारण तालिका ब्लॉक है स्टैकेबल – अल्टीमेट गुटेनबर्ग ब्लॉक्स प्लगइन. देखो कि ब्लॉक संपादन विकल्प कितने विस्तृत हैं:

न्यू गुटेनबर्ग ब्लॉक

WordPress.org पर इन प्लगइन्स का एक गुच्छा पहले से ही है। लेकिन उपरोक्त स्टैकेबल प्लगइन से परे, अन्य लोकप्रिय प्रसाद प्रतीत होते हैं:

वहाँ भी एक पेशकश कहा जाता है CoBlocks जो खुद के रूप में बाजार "सामग्री बाजार के लिए गुटेनबर्ग ब्लॉक".

मुझे लगता है कि यह आला दृष्टिकोण विशेष रूप से दिलचस्प है। हो सकता है कि भविष्य में हम इसके लिए विशेष गुटेनबर्ग ब्लॉक सेट देखें:

पुस्तक समीक्षा ब्लॉक प्लगइन एक और मिनी उदाहरण है कि कैसे आला गुटेनबर्ग ब्लॉक एक चीज बन सकते हैं.

कस्टम फ़ील्ड गुटेनबर्ग के साथ कैसे काम कर सकती हैं, इसका एक उदाहरण

गुटेनबर्ग कस्टम फील्ड्स एक और दिलचस्प प्लगइन है कि कुछ कर्षण हो रहा है.

यह कस्टम फ़ील्ड या फ़ील्ड समूह सेट करना आसान बनाता है जो किसी विशेष कस्टम पोस्ट प्रकार से जुड़े होते हैं:

गुटेनबर्ग संपादक कस्टम फ़ील्ड

फिर, जब आप गुटेनबर्ग संपादक के पास जाते हैं, तो वे कस्टम फ़ील्ड ब्लॉक के रूप में पहले से भरे होते हैं:

गुटेनबर्ग कस्टम फील्ड उदाहरण

बहुत से लोग सोच रहे हैं कि कस्टम फ़ील्ड गुटेनबर्ग के साथ कैसे काम करेगी – यह एक आशाजनक उदाहरण है जो पहले से ही जंगली में है। आप ऐसा कर सकते हैं यहाँ इसके बारे में और अधिक जानें.

कैसे विषय डेवलपर्स डेवलपर्स गुटेनबर्ग के लिए संक्रमण को संबोधित कर रहे हैं के तीन उदाहरण

आपने अभी कुछ उदाहरण देखे कि कैसे प्लगइन डेवलपर्स गुतनबर्ग के लिए निर्माण कर सकते हैं, लेकिन विषयों के बारे में क्या?

थीम डेवलपर्स संक्रमण को संबोधित करने के लिए दो मुख्य मार्गों का अनुसरण करते हैं:

  • ब्लॉक के लिए स्टाइल को जोड़कर और गुटेनबर्ग लेआउट विकल्पों का समर्थन करके थीम गुटेनबर्ग-तैयार करना
  • विषय सामग्री के निर्माण के लिए गुटेनबर्ग ब्लॉकों का उपयोग करना

यहाँ चित्र को चित्रित करने के कुछ उदाहरण दिए गए हैं …

1. गुटेनबर्ग संपादक में कस्टम शैलियों को जोड़ना

एक बहुत ही साफ-सुथरी चीज जो हम देख रहे हैं कि डेवलपर्स वास्तविक बैक-एंड गुटेनबर्ग इंटरफ़ेस में थीम शैलियों को जोड़ रहे हैं। यह वास्तव में WYSIWYG अनुभव बनाने के लिए दरवाजे खोलता है, हालांकि BigBox WooCommerce से स्पेंसर तृतीय-पक्ष ब्लॉक स्टाइल के साथ कुछ समस्याओं का विवरण.

उदाहरण के लिए, देखें कि थीमशैपर की ओहना थीम पूरी तरह से पोस्ट शीर्षक सहित सभी गुटेनबर्ग सामग्री को कैसे बहाल करती है:

गुटेनबर्ग इन-डैशबोर्ड स्टाइल

अगर आप इसे एक्शन में देखना चाहते हैं, GitHub से Ohana विषय डाउनलोड करें. और थीमशापर यह भी बताते हैं कि उन्होंने यह प्रभाव कैसे हासिल किया इस ब्लॉग पोस्ट में.

2. नए पूर्ण-चौड़ाई संरेखण विकल्पों को जोड़ना

एक और बढ़िया थीम कम्पैटिबिलिटी ट्विक जो आप देख रहे हैं वह है विस्तृत संरेखण सहयोग. अनिवार्य रूप से, यह आपको कुछ ब्लॉकों को पूर्ण-चौड़ाई बनाने देता है। सबसे आम उदाहरण पूर्ण-चौड़ाई वाली छवि सम्मिलित करना होगा.

फिर से, आप इसे ओहाना थीम के साथ देख सकते हैं:

गुटेनबर्ग विस्तृत लेआउट

काम के लिए इस संरेखण के लिए, विषय लेखकों को स्पष्ट रूप से समर्थन की घोषणा करने की आवश्यकता है.

3. बिल्डिंग थीम डेमो सामग्री ब्लॉकों के साथ – जैसे। ब्लॉक थीम

अंत में, कार्बनिक विषय-वस्तु का यह दृष्टिकोण बहुत अच्छा है:

ब्लॉक थीम डेमो कंटेंट पूरी तरह से गुटेनबर्ग ब्लॉक्स के साथ बनाया गया है.

यह कुछ ऐसा है जिसे हम निस्संदेह बढ़ते देखना चाहते हैं, क्योंकि मैट ने गुटेनबर्ग रोडमैप में स्पष्ट रूप से कहा है कि जुलाई में खोज करना शामिल होगा "साइट अनुकूलन में पोस्ट से परे गुटेनबर्ग का विस्तार."

ब्लॉक थीम से परे, ऐरे थीम्स में भी ए परमाणु ब्लॉक थीम यह विशेष रूप से ऊपर उल्लिखित परमाणु ब्लॉक प्लगइन के साथ एकीकृत करने के लिए डिज़ाइन किया गया है.

डेवलपर्स – यहाँ अपनी थीम गुटेनबर्ग के लिए तैयार करने का तरीका बताया गया है

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

वहाँ निश्चित रूप से आने के लिए और अधिक शांत सामान होने जा रहा है

ऊपर दिए गए नमूने से, मुझे आशा है कि आपको इस बात की बेहतर समझ होगी कि प्लगइन और थीम डेवलपर्स कैसे गुटेनबर्ग के निर्माण की योजना बना रहे हैं.

एक व्यक्तिगत टिप्पणी पर, मुझे पता है कि इस पोस्ट को लिखने से मुझे गुटेनबर्ग के साथ संभावनाओं के बारे में विशेष रूप से उत्साहित किया गया है.

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

और जिस तरह से थीम डेवलपर्स अपनी खुद की शैलियों में ला सकते हैं और ब्लॉकों को शामिल कर सकते हैं वह भी रोमांचक है – विशेष रूप से गुटेनबर्ग ने साइट अनुकूलन में अधिक विस्तार किया.

अब आपके ऊपर – क्या आपने प्लगइन या थीम लेखकों के किसी भी महान उदाहरण को ठोकर खाया है, गुटेनबर्ग के निर्माण के लिए दिलचस्प तरीके ढूंढ रहे हैं? हमें टिप्पणियों में बताएं!

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

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