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

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

शुरुआती डेवलपर्स के लिए एक गुटेनबर्ग ट्यूटोरियल: अपना पहला ब्लॉक प्लगइन बनाएं
СОДЕРЖАНИЕ
02 июня 2020

शुरुआती के लिए गुटेनबर्ग ट्यूटोरियल


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

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

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

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

हम मुख्य रूप से गुटेनबर्ग के लिए एक प्लगइन बनाने के विभिन्न पहलुओं पर ध्यान केंद्रित करते हैं – विकास पर्यावरण की स्थापना, एक बुनियादी प्लगइन और ब्लॉकों के साथ काम करने की कुछ बारीकियों को बनाना।.

1. अपने गुटेनबर्ग विकास पर्यावरण की स्थापना करें

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

आप विंडोज या मैकओएस पर इंस्टॉलरों का उपयोग करके NodeJS के नवीनतम स्थिर संस्करण को स्थापित कर सकते हैं आधिकारिक साइट पर. यदि आपके पास लिनक्स सर्वर है, तो आप स्रोत कोड को संकलित कर सकते हैं या संबंधित पैकेज मैनेजर (जैसे एप और यम) का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप उबंटू का उपयोग कर रहे हैं, तो टर्मिनल पर निम्न कमांड चलाएं.

sudo apt अपडेट
sudo apt स्थापित नोडज npm

स्थापना सफल होने के बाद, आप NodeJS के संस्करण को सत्यापित करने के लिए निम्न कमांड चला सकते हैं.

नोडज – विसर्जन

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

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

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

�� अंत में, यदि आप अपने मौजूदा प्लगइन्स को गुटेनबर्ग के अनुकूल बनाना चाहते हैं, तो यहां एक विस्तृत ट्यूटोरियल दिया गया है कि इसे कैसे प्राप्त किया जाए: भाग 1 और भाग 2.

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

2. प्रारंभिक विन्यास

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

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

निम्नलिखित अनुभाग शुरू से अंत तक की प्रक्रिया का वर्णन करते हैं.

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

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

  • index.php – इस फ़ाइल में नए Gutenberg ब्लॉक के बारे में मेटाडेटा है.
  • block.js – यह जावास्क्रिप्ट फ़ाइल कस्टम गुटेनबर्ग ब्लॉक को पंजीकृत करती है.
  • Editor.css – इस फ़ाइल में संपादक के लिए शैलियाँ हैं.
  • style.css – इस फ़ाइल में ब्लॉक के सामने के छोर के लिए शैलियाँ हैं.

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

3. ब्लॉक को पंजीकृत करना

गुटेनबर्ग के लिए एक ब्लॉक को पंजीकृत करने के इस चरण में, हम मोटे तौर पर दो चीजों को कवर करेंगे:

  • WordPress के PHP इंजन के साथ प्लगइन का मेटाडेटा पंजीकृत करना,
  • गुटेनबर्ग द्वारा चलाए जाने वाले रिएक्ट ढांचे के साथ ब्लॉक को पंजीकृत करना.

Index.php फ़ाइल में ब्लॉक और संपादक की एन्क्यू संपत्ति होती है.

  • पहले, add_action के माध्यम से कस्टम फ़ंक्शन पंजीकृत करें.
  • फिर, wp_enqueue_style और wp_enqueue_script फ़ंक्शंस का उपयोग करके ब्लॉक और एडिटर के लिए जावास्क्रिप्ट और सीएसएस फ़ाइलों के मार्ग को सूचीबद्ध करने वाले कार्यों को परिभाषित करें।.

आइए हम इसे नीचे दिए गए PHP कोड के माध्यम से संक्षेप में प्रस्तुत करते हैं:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

समारोह gb_block_01_basic_editor_assets () {
// लिपियों.
wp_enqueue_script (
‘GB-ब्लॉक-01-मूल’,
plugins_url (‘block.js’, __FILE__),
सरणी (‘wp-block’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__)। ‘block.js’)
);

// शैलियाँ.
wp_enqueue_style (
‘GB-ब्लॉक-01-बुनियादी संपादक’,
plugins_url (‘editor.css’, __FILE__),
सरणी (‘wp-edit-block’),
filemtime (plugin_dir_path (__FILE__)। ‘editor.css’)
);
}

यह मूल संपादक के लिए संसाधनों को परिभाषित करता है। ब्लॉक के लिए, केवल CSS फ़ाइल की आवश्यकता है, जिसे wp_enqueue_style फ़ंक्शन के माध्यम से परिभाषित किया गया है.

ब्लॉक.जेएस फ़ाइल गुटेनबर्ग संपादक में ब्लॉक के गुणों का वर्णन करती है। हम निम्नलिखित विशेषताओं और गुणों को परिभाषित करते हैं:

  • शीर्षक – ब्लॉक का शीर्षक
  • आइकन – ब्लॉक के लिए प्रदर्शित करने के लिए एक आइकन; आप किसी भी आइकन से चयन कर सकते हैं डैशियन का यह संग्रह
  • श्रेणी – वह समूह जो ब्लॉक से संबंधित होगा। ब्लॉकों के समूहों के उदाहरण हैं "सामान्य," "स्वरूपण," "एम्बेड."
  • संपादित करें – एक जावास्क्रिप्ट फ़ंक्शन जो एक DOM तत्व देता है। हम कस्टम पैराग्राफ DOM एलिमेंट, p बनाने के लिए wp.element.createElement फंक्शन का उपयोग करते हैं, जिसमें कस्टम टेक्स्ट लिखा होता है। जब उपयोगकर्ता किसी संपादक से ब्लॉक को क्लिक करता है तो गुटेनबर्ग इस संपत्ति को आमंत्रित करता है.

( समारोह() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘जीबी / बेसिक -01’, {
शीर्षक: __ (‘जीबी बेसिक’, ‘जीबी’),
आइकन: ‘शील्ड-ऑल’,
श्रेणी: ‘आम’,

संपादित करें: फ़ंक्शन (प्रॉप्स) {
वापसी wp.element.createElement (
‘पी’,
{className: props.className},
‘नमस्ते दुनिया! – संपादक (01 बेसिक ब्लॉक) से। ‘
);
},

};
}) ();

इसी तरह, आप एक सेव प्रॉपर्टी बना सकते हैं जिसे ब्लॉक करने पर सामने के छोर से चुना जाता है.

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

4. ब्लॉक को अनुकूलित करना

जैसा कि पिछले अनुभाग में चर्चा की गई है, इस ट्यूटोरियल में अगला चरण ब्लॉक तत्वों के गुणों को परिभाषित करना है। आइए हम एक पृष्ठभूमि रंग, एक पाठ रंग और एक सीमा को परिभाषित करते हैं.

.wp-block-gb-basic-01 {
रंग: # 000;
पृष्ठभूमि: धुंध;
सीमा: 0.2rem ठोस लाल;
}

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

आपके पहले गुटेनबर्ग ट्यूटोरियल के परिणाम

हम अंततः उस ब्लॉक का परीक्षण करने के लिए तैयार हैं जो हमने बनाया है। यदि Gutenberg प्लगइन सक्रिय है, तो सिर पर + आइकन और जांचें कि क्या नया ब्लॉक वहां दिखाई देता है.

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

इसके बाद, यदि आप ब्लॉक पर क्लिक करते हैं, तो आप देखेंगे कि ऊपर का संदेश सीएसएस फ़ाइल से पृष्ठभूमि रंग और सीमा के साथ देखा गया है:

कार्रवाई में ब्लॉक

निष्कर्ष

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

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

मुझे उम्मीद है कि इस गुटेनबर्ग ट्यूटोरियल ने आपको अपना पहला गुटेनबर्ग प्लगइन बनाने में मदद की है!

यदि आपके कोई प्रश्न हैं, तो नीचे टिप्पणी में आग लगा दें.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector