यदि आप वर्डप्रेस डेवलपर हैं, तो कुछ बिंदु पर आप वर्डप्रेस विज़ुअल संपादक को अनुकूलित या विस्तारित कर सकते हैं। उदाहरण के लिए, आप Visual Editor के टूलबार में एक बटन जोड़ना चाह सकते हैं ताकि आपके क्लाइंट को किसी भी HTML कोड को बिना लिखे एक पाठ बॉक्स या कॉल टू एक्शन बटन को आसानी से सम्मिलित कर सकें। इस आलेख में, हम आपको दिखाएंगे कि वर्डप्रेस में टिन्मीएमईईई प्लगइन कैसे तैयार किया जाए।
आवश्यकताएँ
यह ट्यूटोरियल उन्नत उपयोगकर्ताओं के लिए है यदि आप शुरुआती स्तर के उपयोगकर्ता हैं जो अभी दृश्य संपादक का विस्तार करना चाहते हैं, तो कृपया टिइनएमईईई उन्नत प्लग-इन देखें या वर्डप्रेस विज़ुअल एडिटर का उपयोग करने पर इन टिप्स पर नज़र डालें।
इस ट्यूटोरियल के लिए, आपको मूल कोडिंग कौशल की आवश्यकता होगी, एक वर्डप्रेस इंस्टाल करने के लिए उपयोग करें, जहां आप इसका परीक्षण कर सकते हैं।
यह एक लाइव वेबसाइट पर प्लगइन्स विकसित करने के लिए एक खराब अभ्यास है। कोड में एक छोटी सी गलती आपकी साइट दुर्गम हो सकती है। लेकिन अगर आपको इसे किसी लाइव साइट पर करना होगा, तो कम से कम बैकअप वर्डप्रेस पहले।
अपना पहला TinyMCE प्लगइन बनाना
हमारे कस्टम TinyMCE उपकरण पट्टी बटन को पंजीकृत करने के लिए हम एक वर्डप्रेस प्लगइन बनाकर शुरू करेंगे। क्लिक करने पर, यह बटन उपयोगकर्ता को कस्टम सीएसएस वर्ग के साथ एक लिंक जोड़ने की अनुमति देगा।
इस लेख के अंत में स्रोत कोड पूर्ण रूप से उपलब्ध कराया जाएगा, लेकिन तब तक, प्लग-इन चरण-दर-चरण बनाएं।
सबसे पहले, आपको इसमें एक निर्देशिका बनाना होगा WP-सामग्री / plugins अपने WordPress के फ़ोल्डर स्थापित करें इस फ़ोल्डर को नाम दें TinyMCE-कस्टम लिंक श्रेणी ।
यहां से, हम अपना प्लगइन कोड जोड़ना शुरू करेंगे I
प्लगइन हैडर
हमने बनाई गई प्लगइन निर्देशिका में एक नई फ़ाइल बना ली है और इस फ़ाइल को नाम दें TinyMCE-कस्टम लिंक-class.php । इस कोड को फ़ाइल में जोड़ें और इसे सहेजें।
/ ** * प्लगइन का नाम: TinyMCE कस्टम लिंक क्लास * प्लगइन यूआरआई: http://site.com * संस्करण: 1.0 * लेखक: साइट * लेखक यूआरआई: http://www.site.com * वर्णन: दृश्य संपादक में एक कस्टम लिंक वर्ग जोड़ने के लिए एक साधारण TinyMCE प्लगइन * लाइसेंस: जीपीएल 2 * /
यह सिर्फ एक PHP टिप्पणी है, जो वर्डप्रेस को प्लगइन का नाम बताता है, साथ ही लेखक और विवरण भी।
वर्डप्रेस व्यवस्थापक क्षेत्र में, प्लगइन्स> इंस्टॉल किए गए प्लगइन्स पर जाकर, और फिर TinyMCE कस्टम लिंक क्लास प्लगइन के बगल में सक्रिय करें क्लिक करके अपने नए प्लग इन को सक्रिय करें:
हमारी प्लगइन क्लास सेट करना
यदि दो वर्डप्रेस प्लगइन्स में एक ही नाम के साथ कार्य किया जाता है, तो यह एक त्रुटि का कारण होगा हम एक कक्षा में लिपटे हमारे कार्य होने के कारण इस समस्या से बचेंगे।
वर्ग TinyMCE_Custom_Link_Class {
/ **
* निर्माता जब प्लगइन आरंभीकृत होता है तो कॉल किया जाता है
* /
फ़ंक्शन __construct () {
}
}
$ tinymce_custom_link_class = नया TinyMCE_Custom_Link_Class;
यह हमारे PHP वर्ग बनाता है, एक निर्माण के साथ, जिसे कहा जाता है जब हम लाइन तक पहुंचते हैं $ tinymce_custom_link_class = नया TinyMCE_Custom_Link_Class; ।
हम इस वर्ग के अंदर जोड़ते हैं, किसी भी कार्य को अन्य वर्डप्रेस प्लगइन्स के साथ संघर्ष नहीं करना चाहिए
हमारे TinyMCE प्लगइन की स्थापना शुरू करो
इसके बाद, हमें टिनीएमसीई को बताने की जरूरत है कि हम दृश्य संपादक के टूलबार में हमारे कस्टम बटन को जोड़ना चाहें। ऐसा करने के लिए, हम वर्डप्रेस के कार्यों का उपयोग कर सकते हैं – विशेष रूप से, इस में कार्रवाई।
अपने प्लगइन के अंदर निम्न कोड जोड़ें __construct () समारोह:
अगर (is_admin ()) {
add_action ('init', सरणी ($ this, 'setup_tinymce_plugin'));
}
यह जांचता है कि हम वर्डप्रेस एडमिनिस्ट्रेशन अंतरफलक में हैं। यदि हम हैं, तो यह वर्डप्रेस को चलाने के लिए कहता है setup_tinymce_plugin वर्डप्रेस ने अपनी शुरुआती लोडिंग की रूटीन समाप्त कर ली है तो हमारे वर्ग के अंदर फ़ंक्शन।
अगला, जोड़ें setup_tinymce_plugin समारोह:
/ **
* जांचें कि क्या वर्तमान उपयोगकर्ता पोस्ट या पेज संपादित कर सकता है, और विज़ुअल एडिटर का उपयोग कर रहा है
* यदि हां, तो कुछ फ़िल्टर जोड़ें ताकि हम अपने प्लगइन को पंजीकृत कर सकें
* /
फ़ंक्शन सेटअप_टाइमसी_प्लगिन () {
// लॉग इन WordPress उपयोगकर्ता पदों या पृष्ठों को संपादित कर सकते हैं तो जाँच करें
// यदि नहीं, तो हमारे TinyMCE प्लगइन को पंजीकृत न करें
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
वापसी;
}
// लॉग इन WordPress उपयोगकर्ता दृश्य संपादक सक्षम है, तो जाँच करें
// यदि नहीं, तो हमारे TinyMCE प्लगइन को पंजीकृत न करें
अगर (get_user_option ('rich_editing')! == 'सच') {
वापसी;
}
// कुछ फिल्टर सेटअप करें
add_filter ('mce_external_plugins', सरणी (& $ this, 'add_tinymce_plugin'));
add_filter ('mce_buttons', सरणी (& $ this, 'add_tinymce_toolbar_button'));
}
यह जाँच करता है कि मौजूदा लॉग इन उपयोगकर्ता या पोस्ट्स को संपादित कर सकते हैं। अगर वे ऐसा नहीं कर सकते, तो उस उपयोगकर्ता के लिए हमारे TinyMCE प्लगइन को दर्ज करने का कोई मतलब नहीं है, क्योंकि वे विज़ुअल संपादक को कभी नहीं देखेंगे।
हम तो जांचते हैं कि उपयोगकर्ता विज़ुअल एडिटर का उपयोग कर रहा है, क्योंकि कुछ वर्डप्रेस उपयोगकर्ता इसे यूज़र> आपका प्रोफाइल के जरिये बंद कर देते हैं। फिर, यदि उपयोगकर्ता विज़ुअल एडिटर का उपयोग नहीं कर रहा है, तो हम फ़ंक्शन वापस आते हैं, क्योंकि हमें कुछ और करने की ज़रूरत नहीं है।
अंत में, हम दो वर्डप्रेस फिल्टर जोड़ते हैं – mce_external_plugins तथा mce_buttons , हमारे कार्यों को कॉल करने के लिए जो TinyMCE के लिए जरूरी जावास्क्रिप्ट फ़ाइल लोड करेगा, और TinyMCE टूलबार को एक बटन जोड़ देगा।
जावास्क्रिप्ट फाइल और बटन को विजुअल एडिटर में पंजीकृत करना
चलो आगे बढ़ो और जोड़ें add_tinymce_plugin समारोह:
/ **
* TinyMCE / दृश्य संपादक उदाहरण के लिए एक TinyMCE प्लगइन संगत जेएस फ़ाइल जोड़ता है
*
* @ परम सरणी $ plugin_array पंजीकृत TinyMCE प्लगइन्स के सरणी
* @ रिटर्न सरणी पंजीकृत TinyMCE प्लगइन्स की संशोधित सरणी
* /
फ़ंक्शन add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['custom_link_class'] = प्लगइन_डीर_अर्नल (__FILE__)। 'TinyMCE-कस्टम लिंक-class.js';
वापसी $ plugin_array;
}
यह फ़ंक्शन TinyMCE को बताता है कि उसे में संग्रहीत Javascript फ़ाइलों को लोड करने की आवश्यकता है $ plugin_array सरणी। ये जावास्क्रिप्ट फाइलें टिंइएमईएमई को बताएगी कि क्या करना है।
हमें इसमें कुछ कोड जोड़ने की भी आवश्यकता है add_tinymce_toolbar_button फ़ंक्शन, टिनी एमईईई को बटन के बारे में बताने के लिए हम टूलबार में जोड़ना चाहते हैं:
/ **
* TinyMCE / विज़ुअल संपादक को एक बटन जोड़ता है जो उपयोगकर्ता क्लिक कर सकता है
* कस्टम सीएसएस वर्ग के साथ एक लिंक डालने के लिए।
*
* @परम सरणी $ बटन पंजीकृत TinyMCE बटन के आरे
* @ रिटर्न सरणी पंजीकृत TinyMCE बटन की संशोधित सरणी
* /
फ़ंक्शन add_tinymce_toolbar_button ($ बटन) {
array_push ($ बटन, '|', 'custom_link_class');
$ बटन लौटें;
}
यह TinyMCE बटनों की सरणी पर दो आइटम को धक्का देता है: एक विभाजक (|), और हमारे बटन का प्रोग्राममैटिक नाम ( custom_link_class )।
अपने प्लगइन को सहेजें, और फिर दृश्य संपादक को देखने के लिए एक पृष्ठ या पोस्ट संपादित करें। संभावना है, टूलबार अभी प्रदर्शित नहीं हो रहा है:
चिंता न करें – अगर हम अपने वेब ब्राउज़र के इंस्पेक्टर कंसोल का उपयोग करते हैं, तो हम देखेंगे कि 404 त्रुटि और सूचना टिनएमएमईई द्वारा उत्पन्न हुई है, यह हमें बता रही है कि यह हमारी जावास्क्रिप्ट फ़ाइल नहीं पा सकता है।
यह अच्छा है – इसका मतलब है कि हमने सफलतापूर्वक अपने TinyMCE कस्टम प्लगइन को पंजीकृत कर लिया है, और अब TinyMCE को बताए जाने के लिए जावास्क्रिप्ट फ़ाइल बनाने की आवश्यकता है।
जावास्क्रिप्ट प्लगइन बनाना
अपने में एक नई फाइल बनाएँ WP-सामग्री / plugins / TinyMCE-कस्टम लिंक श्रेणी फ़ोल्डर, और इसे नाम दें TinyMCE-कस्टम लिंक-class.js । अपनी जेएस फाइल में इस कोड को जोड़ें:
(समारोह() {
tinymce.PluginManager.add ('custom_link_class', फ़ंक्शन (संपादक, यूआरएल) {
});
}) ();
यह TinyMCE प्लगइन प्रबंधक वर्ग को कॉल करता है, जिसे हम कई TinyMCE प्लगइन संबंधित कार्यों को करने के लिए उपयोग कर सकते हैं। विशेष रूप से, हम अपने प्लगइन को TinyMCE का उपयोग कर जोड़ रहे हैं जोड़ना समारोह।
यह दो वस्तुओं को स्वीकार करता है; प्लगइन का नाम ( custom_link_class ) और एक अनाम समारोह।
यदि आप कोडिंग में फ़ंक्शन की अवधारणा से परिचित हैं, तो एक अनाम फ़ंक्शन केवल एक नाम के साथ एक फ़ंक्शन है। उदाहरण के लिए, फ़ंक्शन फ़ॉउबर () {...} यह एक ऐसा फ़ंक्शन है जिसका उपयोग करके हम अपने कोड में कहीं और कॉल कर सकते हैं foobar () ।
एक गुमनाम समारोह के साथ, हम उस समारोह को हमारे कोड में कहीं और नहीं बुला सकते – यह केवल उस बिंदु पर बुलाया जा रहा है (जोड़ें) फ़ंक्शन का उपयोग किया जाता है
अपनी जावास्क्रिप्ट फ़ाइल को सहेजें, और फिर दृश्य संपादक को देखने के लिए पेज या पोस्ट संपादित करें। अगर सब कुछ काम करता है, तो आपको टूलबार दिखाई देगा:
अभी, हमारे बटन को उस टूलबार में जोड़ा नहीं गया है। ऐसा इसलिए है क्योंकि हमने केवल TinyMCE को बताया है कि हम एक कस्टम प्लगइन हैं अब हमें टिंइएमईईई को यह बताने की ज़रूरत है कि क्या करना है – वह है, टूलबार में एक बटन जोड़ें
अपनी जावास्क्रिप्ट फ़ाइल को अपडेट करें, अपने मौजूदा कोड को निम्न के साथ बदलें:
(समारोह() {
tinymce.PluginManager.add ('custom_link_class', फ़ंक्शन (संपादक, यूआरएल) {
// दृश्य संपादक टूलबार में जोड़ें बटन
editor.addButton ('custom_link_class', {
शीर्षक: 'डालें बटन लिंक',
सीएमडी: 'custom_link_class',
});
});
}) ();
ध्यान दें कि हमारे अनाम फ़ंक्शन के दो तर्क हैं। पहला है संपादक उदाहरण – यह TinyMCE दृश्य संपादक है। उसी तरह हम पर विभिन्न कार्यों को कॉल कर सकते हैं PluginManager , हम इस पर विभिन्न कार्यों को भी कॉल कर सकते हैं संपादक । इस मामले में, हम इसे बुला रहे हैं addButton फ़ंक्शन, टूलबार में एक बटन जोड़ने के लिए
अपनी जावास्क्रिप्ट फ़ाइल को सहेजें, और अपने विज़ुअल संपादक पर वापस जाएं। पहले देखो, कुछ भी नहीं बदल गया लगता है। हालांकि, यदि आप अपने माउस कर्सर को शीर्ष पंक्ति के सबसे ऊपरी आइकन के दाईं ओर होवर करते हैं, तो आपको टूलटिप दिखाई देनी चाहिए:
हमने टूलबार पर सफलतापूर्वक एक बटन जोड़ा है, लेकिन उसे एक छवि की आवश्यकता है निम्नलिखित पैरामीटर को इसमें जोड़ें addButton फ़ंक्शन, नीचे शीर्षक: रेखा:
छवि: url + '/icon.png',
यूआरएल हमारे प्लगइन का URL है यह आसान है यदि हम एक छवि फ़ाइल को हमारे प्लगइन फ़ोल्डर में संदर्भित करना चाहते हैं, क्योंकि हम URL पर छवि फ़ाइल नाम जोड़ सकते हैं। इस मामले में, हमें एक छवि की आवश्यकता होगी जिसे कहा जाता है icon.png हमारे प्लगइन फ़ोल्डर में नीचे दिए गए आइकन का प्रयोग करें: 
हमारे विज़ुअल संपादक को पुनः लोड करें, और अब आपको आइकन के साथ अपना बटन दिखाई देगा: 
चलाने के लिए एक कमांड को परिभाषित करना
अभी, यदि आप बटन क्लिक करते हैं, तो कुछ भी नहीं होगा। चलो TinyMCE को यह कहते हुए कहते हैं कि जब बटन दबाए जाए तो क्या करना चाहिए।
हमारी जावास्क्रिप्ट फ़ाइल में, निम्न कोड को अंत के नीचे जोड़ें editor.addButton अनुभाग:
// क्लिक करें जब बटन पर क्लिक करें आदेश जोड़ें
editor.addCommand ('custom_link_class', फ़ंक्शन () {
चेतावनी ('बटन क्लिक किया!');
});
हमारे विजुअल एडिटर को पुनः लोड करें, बटन पर क्लिक करें और एक चेतावनी की पुष्टि हो जाएगी जो हमने बटन को क्लिक किया है:
आइए एक संकेत के साथ चेतावनी को बदल दें, उपयोगकर्ता को उस लिंक के लिए पूछें, जिसे वे विजुअल एडिटर में चुने गए पाठ के आसपास लपेट करना चाहते हैं:
// क्लिक करें जब बटन पर क्लिक करें आदेश जोड़ें
editor.addCommand ('custom_link_class', फ़ंक्शन () {
// जाँचें हमने कुछ पाठ का चयन किया है जिसे हम लिंक करना चाहते हैं
var text = editor.selection.getContent ({
'प्रारूप': 'html'
});
अगर (text.length === 0) {
चेतावनी ('कृपया लिंक करने के लिए कुछ पाठ चुनें।');
वापसी;
}
// एक यूआरएल दर्ज करने के लिए उपयोगकर्ता से पूछें
var परिणाम = शीघ्र ('लिंक दर्ज करें');
अगर (! परिणाम) {
// उपयोगकर्ता रद्द - बाहर निकलें
वापसी;
}
अगर (result.length === 0) {
// उपयोगकर्ता ने एक यूआरएल दर्ज नहीं किया - बाहर निकलें
वापसी;
}
// संपादक में चयनित पाठ वापस डालें, इसे एंकर टैग में लपेटकर
editor.exec कॉमांड ('mceReplaceContent', गलत, '' + + पाठ + '');
});
कोड का यह ब्लॉक कुछ क्रियाएं निष्पादित करता है
सबसे पहले, हम जांच करते हैं कि उपयोगकर्ता ने कुछ पाठ को विजुअल एडिटर में लिंक किया है। यदि नहीं, तो उन्हें एक चेतावनी दिखाई देगी जो उन्हें लिंक करने के लिए कुछ पाठ चुनने के लिए कह रही है।
इसके बाद, हम उन्हें एक कड़ी दर्ज करने के लिए कहते हैं, फिर जांचते हैं कि उन्होंने क्या किया। अगर उन्होंने रद्द कर दिया, या कुछ भी नहीं दर्ज किया, तो हम कुछ और नहीं करते
अंत में, हम इसे चलाते हैं execCommand TinyMCE संपादक पर फ़ंक्शन, विशेष रूप से चल रहा है mceReplaceContent कार्रवाई। यह हमारे एचटीएमएल कोड के साथ चयनित पाठ को बदल देता है, जिसमें क्लास = “बटन” के साथ एक एंकर लिंक होता है, जो कि उपयोगकर्ता द्वारा चयनित पाठ का उपयोग करता है।
अगर सब कुछ काम करता है, तो आप देखेंगे कि आपका चयनित पाठ अब विज़ुअल एडिटर और टेक्स्ट दृश्य में जुड़ा हुआ है, जिस पर क्लास सेट किया गया है बटन :
सारांश
हमने सफलतापूर्वक वर्डप्रेस में TinyMCE दृश्य संपादक को एक बटन जोड़ते हुए एक वर्डप्रेस प्लगइन बनाया है। इस ट्यूटोरियल में TinyMCE एपीआई और TinyMCE integrations के लिए उपलब्ध वर्डप्रेस फिल्टर के कुछ मूलभूत तत्व भी शामिल हैं।
हमने कोड जोड़ा ताकि जब कोई उपयोगकर्ता हमारे कस्टम बटन पर क्लिक करेगा, तो उन्हें दृश्य संपादक में कुछ पाठ चुनने के लिए कहा जाएगा, जिससे वे अपनी पसंद के URL से लिंक कर सकते हैं। अंत में, हमारा प्लगइन तब चयनित पाठ को लिंक किए हुए संस्करण के साथ बदलता है जिसमें कस्टम सीएसएस वर्ग शामिल होता है बटन ।
हम आशा करते हैं कि इस ट्यूटोरियल ने आपको वर्डप्रेस टिनीएमसीई प्लगइन बनाने का तरीका जानने में मदद की। साइट-विशिष्ट वर्डप्रेस प्लग-इन बनाने के बारे में आप हमारी मार्गदर्शिका देखना भी चाह सकते हैं।