वर्डप्रेस 3.9+ टिनीएमसीई 4 ट्विक्स: स्टाइल्स, बटन्स, फोंट, ड्रॉप-डाउन और पॉप-अप्स जोड़ना

वर्डप्रेस 3.9 में मेरा एक पसंदीदा अपडेट TinyMCE संस्करण 4.0 कोर बना रहा था। नई TinyMCE एक लुक क्लीनर है (वास्तव में WP डैशबोर्ड से मेल खाती है) और इसमें कुछ बहुत अच्छी जोड़ी गई कार्यक्षमता है। मेरे बहुत से पुराने विषयों और प्लगइन्स को नए टिनीएमसीई के साथ काम करने के लिए अपडेट किया जाना था इसलिए मैंने कुछ समय खुदाई के माध्यम से बिताया एपीआई और कुछ शांत सामान बाहर लगाना। नीचे मैं आपको कुछ उदाहरण देता हूं कि आप TinyMCE की कार्यक्षमता को कैसे बढ़ा सकते हैं। मैं आपको सभी चरणों के माध्यम से चलने नहीं जा रहा हूं या कोड का वास्तव में मतलब क्या है (यह डेवलपर्स के लिए अभिप्रेत है) लेकिन आपको सटीक कोड प्रदान करेगा जिसे आप अपने विषय या प्लगइन में कॉपी / पेस्ट कर सकते हैं और फिर उसके अनुसार ट्वीक कर सकते हैं।.


फ़ॉन्ट आकार और फ़ॉन्ट जोड़ना पारिवारिक चयन

डिफ़ॉल्ट रूप से कस्टम फ़ॉन्ट और फ़ॉन्ट आकार TinyMCE संपादक में नहीं जोड़े जाते हैं। नीचे दी गई फ़ंक्शन इन दोनों ड्रॉपडाउन को दूसरी पंक्ति में संपादक के बाईं ओर जोड़ेगी। यदि आप इसे एक अलग पंक्ति में चाहते हैं तो इसे बदल दें जहां change mce_buttons_2 ‘कहते हैं (उदा: 3rd पंक्ति के लिए ons mce_buttons_3’ का उपयोग करें).

// फ़ॉन्ट आकार और फ़ॉन्ट परिवार को सक्षम करें संपादक में चयन करता है
अगर (फंक्शन_एक्सिस्ट्स ('wpex_mce_buttons')) {
फ़ंक्शन wpex_mce_buttons ($ बटन) {
array_unshift ($ बटन, 'fontselect'); // जोड़ें फ़ॉन्ट का चयन करें
array_unshift ($ बटन, 'fontizeselect'); // फ़ॉन्ट आकार चुनें का चयन करें
$ बटन वापस करें;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

कस्टम फ़ॉन्ट जोड़ना आकार

डिफ़ॉल्ट रूप से फ़ॉन्ट आकार pt मानों के लिए सेट किए जाते हैं जो हमेशा आदर्श नहीं होते हैं। मैं पिक्सेल मान (12px, 13px, 14px, 16px..etc) का उपयोग करना और ग्रेटर लचीलेपन के लिए अधिक विकल्प प्रदान करना पसंद करता हूँ। नीचे का फ़ंक्शन ड्रॉपडाउन चयनकर्ता में डिफ़ॉल्ट फ़ॉन्ट आकार विकल्पों को बदल देगा.

// mce संपादक फ़ॉन्ट आकार अनुकूलित करें
अगर (? function_exists ('wpex_mce_text_sizes')) {
फ़ंक्शन wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 21xpx 28px 32px 36px";
वापसी $ initArray;
}
}
add_filter ('small_mce_before_init', 'wpex_mce_text_sizes');

कस्टम फ़ॉन्ट्स जोड़ना

फ़ॉन्ट परिवार चयनकर्ता में डिफ़ॉल्ट फ़ॉन्ट विकल्प डिफ़ॉल्ट रूप से सभी “वेब-सुरक्षित” फ़ॉन्ट हैं, लेकिन क्या होगा यदि आप चयनकर्ता को अधिक फ़ॉन्ट जोड़ना चाहते हैं? शायद कुछ Google फ़ॉन्ट्स? हम नीचे दिए गए उदाहरण पर एक नज़र रखना बहुत आसान है.

// कस्टम फ़ॉन्ट्स को फ़ॉन्ट्स सूची में जोड़ें
अगर (? function_exists ('wpex_mce_google_fonts_array')) {
फ़ंक्शन wpex_mce_google_fonts_array ($ initArray) {
INR MS = comic sans ms, sans-serif; कूरियर न्यू = कूरियर न्यू, कूरियर; जॉर्जिया = जॉर्जिया, पैलेटिनो; हेल्वेटिका = हेल्वेटिका; इम्पैक्ट = इफेक्ट, चिकागो; सिंबल = सिंबल; टाहोमा / तहोमा, एरियल, हेल्वेटिका, सैंस-सेरिफ। टर्मिनल = टर्मिनल, मोनाको; टाइम्स न्यू रोमन = टाइम्स न्यू रोमन, बार; ट्रेब्यूचेट एमएस = ट्रेबुचेट एमएस, जेनेवा; वर्दाना = वर्दाना, जीनवा; वेबडिंग्स = वेबडिंग; विंग्डिंग = विंगडिंग्स, जैपफ डिंगबैट्स '।
वापसी $ initArray;
}
}
add_filter ('small_mce_before_init', 'wpex_mce_google_fonts_array');

ध्यान दें कि मैंने उपरोक्त कोड में “लाटो” को सूची में कैसे जोड़ा? यह इत्ना आसान है! मेरे कुल वर्डप्रेस थीम में मैं वास्तव में किसी भी कस्टम फ़ॉन्ट के माध्यम से साइट पर उपयोग किया जाता है जैसे कि थीम पैनल में परिभाषित किया गया है और उन्हें चयन बॉक्स में जोड़ें, ताकि वे आपके पोस्ट / पृष्ठ (मिठाई) को संपादित करते समय भी उपलब्ध हों। लेकिन कोड केवल फ़ॉन्ट-परिवार को ड्रॉप-डाउन करने के लिए विज्ञापन करता है, यह जादुई रूप से स्क्रिप्ट को लोड नहीं करता है ताकि जब आप संपादक में अपना पाठ बदलते हैं तो आप वास्तव में उस कस्टम फ़ॉन्ट को देख सकते हैं जो उस पर लागू होता है … कि नीचे दिया गया कोड क्या है!

// संपादक के साथ उपयोग के लिए Google स्क्रिप्ट जोड़ें
अगर (फंक्शन_एक्सिस्ट्स ('wpex_mce_google_fonts_styles')) {
फ़ंक्शन wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

प्रारूप (शैलियाँ) ड्रॉपडाउन मेनू सक्षम करें और नई शैलियाँ जोड़ें

WP 3.8 में “स्टाइल्स” ड्रॉपडाउन याद है? यह बहुत अच्छा था! आप पोस्ट संपादक के भीतर इस्तेमाल होने वाली कुछ शांत कक्षाओं को जोड़ने के लिए इसका इस्तेमाल कर सकते हैं (मैं इसे WPExplorer पर वास्तव में बटन, रंगीन स्पैन, बक्से के लिए उपयोग करता हूं)। WP 3.9 में हम अभी भी शैलियाँ जोड़ सकते हैं, हालाँकि, इसे नया TinyMCE 4.0 में “प्रारूप” में बदल दिया गया है, इसलिए यह थोड़ा अलग काम करता है। नीचे प्रारूप ड्रॉपडाउन को सक्षम करने का एक उदाहरण है और इसमें कुछ नई वस्तुओं को भी जोड़ा गया है.

वर्डप्रेस TInyMCE प्रारूप ड्रॉपडाउन मेनू

स्वरूप ड्रॉपडाउन मेनू सक्षम करें

यह वास्तव में WP 3.9 से पहले उसी तरीके से किया गया है, लेकिन मैं आपको साझा नहीं कर रहा हूं कि आपको यह कैसे करना है.

// MCE में प्रारूप ड्रॉपडाउन मेनू जोड़ें
अगर (फंक्शन_एक्सिस्ट्स ('wpex_style_select')) {
फ़ंक्शन wpex_style_select ($ बटन) {
array_push ($ बटन, 'स्टाइलसेलेक्ट');
$ बटन वापस करें;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

फॉर्मेट्स में नई आइटम जोड़ें

नए आइटम जोड़ना सुपर आसान है। कृपया ध्यान दें कि मैंने “$ सेटिंग [form style_formats_merge ‘] = true पर कैसे जोड़ी है?” नीचे दिए गए कोड से, यह सुनिश्चित करता है कि आपके संपादन प्रारूप ड्रॉपडाउन मेनू में किसी अन्य के साथ जोड़े गए हैं – पूरी बात को लिखना नहीं है (हो सकता है कि अन्य प्लगइन्स भी इसका उपयोग करना चाहते हों).

// TinyMCE "प्रारूप" मेनू ड्रॉपडाउन में नई शैली जोड़ें
अगर (? function_exists ('wpex_styles_dropdown')) {
फ़ंक्शन wpex_styles_dropdown ($ सेटिंग्स) {

// नई शैलियों की सरणी बनाएं
$ new_styles = array (
सरणी (
'शीर्षक' => __ ('कस्टम शैलियाँ', 'wpex'),
'आइटम' => सरणी (
सरणी (
'शीर्षक' => __ ('थीम बटन', 'wpex'),
'चयनकर्ता' => 'ए',
'कक्षाएं' => 'थीम-बटन'
),
सरणी (
'शीर्षक' => __ ('हाइलाइट', 'wpex'),
'इनलाइन' => 'स्पैन',
'कक्षाएं' => 'टेक्स्ट-हाइलाइट',
),
),
),
);

// पुराने और नए स्टाइल मर्ज करें
$ सेटिंग ['style_formats_merge'] = true;

// नई शैली जोड़ें
$ सेटिंग्स ['style_formats'] = json_encode ($ new_styles);

// नई सेटिंग्स लौटें
$ सेटिंग्स लौटाएं;

}
}
add_filter ('small_mce_before_init', 'wpex_styles_dropdown');

एक साधारण MCE बटन जोड़ना

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

वर्डप्रेस MCE नया बटन

PHP कोड – WP में नए MCE प्लगइन की घोषणा करें

यह कोड घोषित करेगा आपका नया MCE प्लगइन जावास्क्रिप्ट फ़ाइल के स्थान को बदलने के लिए सुनिश्चित करें “mce-button.js” आपकी फ़ाइल के स्थान से मेल खाने के लिए (जो कि मैं आपको अगले उपधारा में भी कोड दूंगा) स्पष्ट रूप से उपसर्ग “मेरे” का नाम बदलकर कुछ और अद्वितीय करने के लिए!

// अपने फ़ंक्शंस को सही फ़िल्टर्स में शामिल करता है
फ़ंक्शन my_add_mce_button () {
// उपयोगकर्ता अनुमतियों की जाँच करें
अगर (current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
वापसी;
}
// जांचें कि WYSIWYG सक्षम है या नहीं
अगर ('सत्य' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// नए बटन के लिए स्क्रिप्ट की घोषणा करें
फ़ंक्शन my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri ()। '/ js / mce-button.js';
$ plugin_array लौटाएं;
}

// संपादक में नया बटन पंजीकृत करें
फ़ंक्शन my_register_mce_button ($ बटन) {
array_push ($ बटन, 'my_mce_button');
$ बटन वापस करें;
}

जेएस कोड – MCE में बटन जोड़ें

यह js कोड “symple_shortcodes_add_tinymce_plugin” फ़ंक्शन में ऊपर स्निपेट में पंजीकृत js फ़ाइल में जाता है। इसमें एक नया टेक्स्ट बटन जोड़ा जाना चाहिए जो आपके संपादक में “नया बटन” कहता है और जब यह क्लिक किया जाता है तो यह पाठ को सम्मिलित करेगा “WPExplorer.com कमाल है!” (बेशक).

(समारोह() {
tinymce.PluginManager.add ('my_mce_button', function (editor, urp) {
Editor.addButton ('my_mce_button', {
पाठ: 'नया बटन',
आइकन: झूठा,
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
});
});
}) ();

अपने नए MCE बटन में एक कस्टम आइकन जोड़ें

ऊपर मैंने आपको दिखाया कि संपादक में “न्यू बटन” के रूप में एक नया बटन कैसे जोड़ा जाएगा, यह थोड़ा लंगड़ा है … इसलिए परिवर्तित कोड आपको दिखाएगा कि आप अपने स्वयं के कस्टम आइकन कैसे जोड़ सकते हैं.

अपने CSS के साथ एक स्टाइलशीट लोड करें

अपने व्यवस्थापक पैनल में उपयोग के लिए एक नई स्टाइलशीट को लोड करने के लिए इस फ़ंक्शन का उपयोग करें – कुछ प्लगइन्स / थीम पहले से ही एक स्टाइलशीट जोड़ सकते हैं, यदि आपका थीम / प्लगइन ऐसा कर रहा है, तो इसे छोड़ दें और बस अपना कस्टम CSS जोड़ें और js (नीचे दिखाया गया) ट्वीक करें.

फ़ंक्शन my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

आपका कस्टम सीएसएस

यह पहले लोड की गई स्टाइलशीट को जोड़ने के लिए CSS है.

i.my-mce- आइकन {
पृष्ठभूमि-छवि: url ('आपका ICON URL');
}

अपनी जावास्क्रिप्ट घुमाएँ

अब सरल पाठ जावास्क्रिप्ट को हटा दें जो आपने पहले पाठ पैरामीटर को हटाने के लिए जोड़ा था और इसके बजाय आइकन को गलत पर सेट करने के बजाय इसे कस्टम क्लासनाम दे.

(समारोह() {
tinymce.PluginManager.add ('my_mce_button', function (editor, urp) {
Editor.addButton ('my_mce_button', {
आइकन: 'my-mce-icon',
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
});
});
}) ();

सबमेनू के साथ एक बटन जोड़ना

MCE बटन सबमेनू

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

(समारोह() {
tinymce.PluginManager.add ('my_mce_button', function (editor, urp) {
Editor.addButton ('my_mce_button', {
पाठ: 'नमूना ड्रॉपडाउन',
आइकन: झूठा,
प्रकार: 'मेनुबुटन',
मेन्यू: [
{
पाठ: 'आइटम 1',
मेन्यू: [
{
पाठ: 'सब आइटम 1',
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
},
{
पाठ: 'सब आइटम 2',
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
}
]
},
{
पाठ: 'आइटम 2',
मेन्यू: [
{
पाठ: 'सब आइटम 1',
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
},
{
पाठ: 'सब आइटम 2',
onclick: फ़ंक्शन () {
editor.insertContent ('WPExplorer.com कमाल है!');
}
}
]
}
]
});
});
}) ();

क्लिक करने पर आपके बटन पर एक पॉप-अप विंडो जोड़ना

ऊपर दिए गए उदाहरण में आप देख सकते हैं कि प्रत्येक बटन केवल “WPExplorer.com भयानक है!” जो शांत है, लेकिन एक पॉप-अप विंडो बनाने के बारे में क्या है जहां एक उपयोगकर्ता पाठ में सम्मिलित होने पर बदल सकता है? अब यह मीठा होगा! और यह कुछ है जो मैंने अपने Symple शॉर्टकोड के संस्करण 1.6 में जोड़ा है, जिससे प्लगइन बहुत अधिक उपयोगकर्ता के अनुकूल है.

वर्डप्रेस MCE पॉप-अप विंडो

(समारोह() {
tinymce.PluginManager.add ('my_mce_button', function (editor, urp) {
Editor.addButton ('my_mce_button', {
पाठ: 'नमूना ड्रॉपडाउन',
आइकन: झूठा,
प्रकार: 'मेनुबुटन',
मेन्यू: [
{
पाठ: 'आइटम 1',
मेन्यू: [
{
पाठ: 'पॉप-अप',
onclick: फ़ंक्शन () {
editor.windowManager.open ({
शीर्षक: 'रैंडम शॉर्टकोड डालें',
तन: [
{
प्रकार: 'टेक्स्टबॉक्स',
नाम: 'टेक्स्टबॉक्सनाम',
लेबल: 'टेक्स्ट बॉक्स',
मूल्य: '30'
},
{
प्रकार: 'टेक्स्टबॉक्स',
नाम: 'मल्टीलाइननाम',
लेबल: 'मल्टीलाइन टेक्स्ट बॉक्स',
मूल्य: 'आप यहां बहुत सारी चीजें कह सकते हैं',
बहुिल: सच,
minWidth: 300,
न्यूनतम: 100
},
{
प्रकार: 'सूची बॉक्स',
नाम: 'सूची बॉक्स',
लेबल: 'सूची बॉक्स',
'मान': [
{पाठ: 'विकल्प 1', मूल्य: '1'},
{पाठ: 'विकल्प 2', मूल्य: '2'},
{पाठ: 'विकल्प 3', मूल्य: '3'}
]
}
],
ऑनसाइट: फ़ंक्शन (ई) {
editor.insertContent ('[random_shortcode textbox = "+ e.data.textboxName +'" multiline = "'+ e.data.multilineName +'" listbox = "+ e.data.listboxName + '" "");
}
});
}
}
]
}
]
});
});
}) ();

यह अच्छा है … अब क्या है?

अच्छा प्रश्न! अब आपके लिए ये भयानक मोड़ लेने और कुछ महाकाव्य बनाने या वर्डप्रेस 3.9 में नए TinyMCE के साथ संगत होने के लिए अपने प्लगइन्स / थीम को अपडेट करने का समय है। मुझे पता है कि आप नीचे टिप्पणी के साथ क्या आते हैं!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me