क्या आप वर्डप्रेस विज़ुअल एडिटर में कस्टम शैलियों को जोड़ना चाहते हैं? कस्टम शैलियों को जोड़ना आपको पाठ संपादक पर स्विच किए बिना फ़ॉर्मेटिंग को तेज़ी से लागू करने की अनुमति देता है। इस अनुच्छेद में, हम आपको दिखाएंगे कि वर्डप्रेस विज़ुअल एडिटर में कस्टम स्टाइल कैसे जोड़ें।
ध्यान दें: इस ट्यूटोरियल को सीएसएस के मूल कार्य ज्ञान की आवश्यकता है।
क्यों और जब आप वर्डप्रेस विज़ुअल एडिटर के लिए कस्टम शैलियां चाहिए
डिफ़ॉल्ट रूप से, वर्डप्रेस विज़ुअल एडिटर कुछ बुनियादी स्वरूपण और शैली विकल्पों के साथ आता है। हालांकि, कभी-कभी आपको सीएसएस बटन, सामग्री ब्लॉक, टैगलाइन इत्यादि को जोड़ने के लिए स्वयं की कस्टम शैली की आवश्यकता हो सकती है।
आप हमेशा दृश्य से पाठ संपादक पर स्विच कर सकते हैं और कस्टम HTML और CSS जोड़ सकते हैं। लेकिन अगर आप नियमित रूप से कुछ शैलियों का उपयोग करते हैं, तो उन्हें दृश्य संपादक में जोड़ना सबसे अच्छा होगा ताकि आप उन्हें आसानी से पुन: उपयोग कर सकें।
इससे आपको टेक्स्ट और विज़ुअल एडिटर के बीच आगे और पीछे स्विच करने में बिताया गया समय बचा होगा। यह आपको अपनी वेबसाइट पर लगातार एक ही शैली का उपयोग करने की अनुमति देगा।
सबसे महत्वपूर्ण बात, आप अपनी वेबसाइट पर पदों को संपादित किए बिना शैलियों को आसानी से बदल सकते हैं या अपडेट कर सकते हैं।
ऐसा करने के बाद, आइए देखें कि वर्डप्रेस विज़ुअल एडिटर में कस्टम स्टाइल कैसे जोड़ें।
विधि 1: विज़ुअल संपादक में कस्टम शैलियाँ प्लगइन का प्रयोग करें
आपको सबसे पहले ज़रूरत है TinyMCE कस्टम शैलियाँ प्लगइन को स्थापित और सक्रिय करें। अधिक जानकारी के लिए
सक्रियण पर, आपको यात्रा की आवश्यकता है सेटिंग्स »TinyMCE कस्टम शैलियाँ पृष्ठ प्लगइन सेटिंग को कॉन्फ़िगर करने के लिए
प्लगइन आपको स्टाइलशीट फ़ाइलों का स्थान चुनने की अनुमति देता है। यह आपकी थीम या बाल थीम के स्टाइलशीट का उपयोग कर सकता है, या आप अपना स्वयं का एक कस्टम स्थान चुन सकते हैं।
उसके बाद, आपको अपने परिवर्तनों को संग्रहीत करने के लिए ‘सभी सेटिंग सहेजें’ बटन पर क्लिक करना होगा।
अब आप अपनी कस्टम शैलियों को जोड़ सकते हैं आपको स्टाइल अनुभाग में थोड़ा नीचे स्क्रॉल करने की आवश्यकता है और Add new style बटन पर क्लिक करें।
पहले आपको स्टाइल के लिए एक शीर्षक दर्ज करना होगा। यह शीर्षक ड्रॉप डाउन मेनू में प्रदर्शित किया जाएगा। अगला, आपको यह चुनना होगा कि क्या वह एक इनलाइन, ब्लॉक या चयनकर्ता तत्व है।
इसके बाद एक सीएसएस वर्ग जोड़ें और उसके बाद नीचे दिए गए स्क्रीनशॉट में दिखाए अनुसार अपना सीएसएस नियम जोड़ें।
एक सीएसएस शैली जोड़ लेने के बाद, अपने बदलावों को संग्रहीत करने के लिए बस ‘सभी सेटिंग्स सहेजें’ बटन पर क्लिक करें
अब आप एक मौजूदा पोस्ट संपादित कर सकते हैं या एक नया बना सकते हैं। आप वर्डप्रेस विज़ुअल एडिटर की दूसरी पंक्ति में प्रारूप ड्रॉप डाउन मेनू देखेंगे।
बस संपादक में कुछ पाठ का चयन करें और फिर इसे लागू करने के लिए प्रारूप ड्रॉपडाउन मेनू से अपनी कस्टम शैली का चयन करें
अब आप अपनी पोस्ट का पूर्वावलोकन कर सकते हैं कि आपकी कस्टम शैलियों को सही ढंग से लागू किया गया है
विधि 2: मैन्युअल रूप से वर्डप्रेस विज़ुअल संपादक को कस्टम शैलियाँ जोड़ें
इस पद्धति के लिए आपको मैन्युअल रूप से अपने वर्डप्रेस फाइलों में कोड जोड़ना होगा। यदि यह आपकी पहली बार WordPress को कोड जोड़ रहा है
चरण 1: वर्डप्रेस विज़ुअल एडिटर में कस्टम स्टाइल ड्रॉप डाउन मेनू जोड़ें
सबसे पहले, हम वर्डप्रेस विज़ुअल एडिटर में एक प्रारूप ड्रॉप डाउन मेनू जोड़ेंगे। यह ड्रॉप डाउन मेनू तब हमें हमारे कस्टम शैलियों को चुनने और लागू करने की अनुमति देगा।
आपको अपनी थीम के functions.php फ़ाइल या साइट-विशिष्ट प्लग इन में निम्न कोड जोड़ना होगा।
फ़ंक्शन wpb_mce_buttons_2 ($ बटन) {
array_unshift ($ बटन, 'स्टाइलिसेंट');
$ बटन लौटें;
}
add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
चरण 2: ड्रॉप डाउन मेनू में चयन विकल्प जोड़ें
अब आपको अभी बनाया ड्रॉप डाउन मेनू में विकल्प जोड़ना होगा। फिर आप प्रारूप विकल्प ड्रॉप डाउन मेनू से इन विकल्पों को चुन सकते हैं और लागू कर सकते हैं।
इस ट्यूटोरियल के लिए, हम सामग्री ब्लॉक और बटन बनाने के लिए तीन कस्टम शैली जोड़ रहे हैं।
आपको अपने विषय के functions.php फ़ाइल या साइट-विशिष्ट प्लग इन में निम्न कोड जोड़ना होगा।
/ *
* एमएसई सेटिंग्स को फ़िल्टर करने के लिए कॉलबैक फ़ंक्शन
* /
फ़ंक्शन my_mce_before_init_insert_formats ($ init_array) {
// style_formats सरणी को परिभाषित करें
$ style_formats = सरणी (
/ *
* प्रत्येक सरणी बच्चे अपनी सेटिंग्स के साथ एक प्रारूप है
* ध्यान दें कि प्रत्येक सरणी में शीर्षक, ब्लॉक, वर्ग और आवरण तर्क है
* शीर्षक लेबल है जो प्रारूप मेनू में दिखाई देगा
* ब्लॉक परिभाषित करता है कि यह एक स्पैन, डिव, चयनकर्ता या इनलाइन शैली है
* क्लासेस आपको सीएसएस कक्षाओं को परिभाषित करने की अनुमति देता है
* किसी भी चयनित तत्वों के आस-पास नए ब्लॉक-स्तर तत्व को जोड़ने के लिए या नहीं लपेटें
* /
सरणी (
'शीर्षक' => 'कंटेंट ब्लॉक',
'ब्लॉक' => 'अवधि',
'वर्ग' => 'सामग्री-ब्लॉक',
'आवरण' => सच है,
),
सरणी (
'शीर्षक' => 'ब्लू बटन',
'ब्लॉक' => 'अवधि',
'वर्ग' => 'नीला-बटन',
'आवरण' => सच है,
),
सरणी (
'शीर्षक' => 'लाल बटन',
'ब्लॉक' => 'अवधि',
'वर्ग' => 'लाल बटन',
'आवरण' => सच है,
),
);
// सरणी डालें, JSON एनकोडेड, 'style_formats' में
$ init_array ['style_formats'] = json_encode ($ style_formats);
वापसी $ init_array;
}
// कॉलबैक को 'tiny_mce_before_init' पर संलग्न करें
add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
अब आप वर्डप्रेस में एक नई पोस्ट जोड़ सकते हैं और दृश्य संपादक में प्रारूप ड्रॉप डाउन मेनू पर क्लिक कर सकते हैं। आप देखेंगे कि आपकी कस्टम शैली अब प्रारूपों के तहत दृश्यमान हैं।
हालांकि, उनका चयन करने से अभी पोस्ट एडिटर में कोई फर्क नहीं पड़ता है।
चरण 3: सीएसएस शैलियाँ जोड़ें
अब अंतिम चरण में अपने कस्टम शैलियों के लिए सीएसएस शैली नियम जोड़ना है।
आपको इस सीएसएस को अपनी थीम या बाल थीम की स्टाइल सीएसएस और एडिटर-स्टाइल सीएसएस फाइलों में जोड़ना होगा।
.content-block {
सीमा: 1 पीएक्स ठोस # बीई;
गद्दी: 3px;
पृष्ठभूमि: #ccc;
अधिकतम-चौड़ाई: 250px;
सही नाव;
text-align: केंद्र;
}
.content-block: after {
दोनों को साफ करो;
}
.blue-button {
पृष्ठभूमि का रंग: # 33bdef;
-moz-बॉर्डर-त्रिज्या: 6px;
-webkit-बॉर्डर-त्रिज्या: 6px;
बॉर्डर-त्रिज्या: 6px;
सीमा: 1px ठोस # 057fd0;
display: inline-ब्लॉक;
कर्सर: सूचक;
रंग: #ffffff;
पैडिंग: 6px 24px;
text-decoration: कोई नहीं;
}
।लाल बटन {
पृष्ठभूमि का रंग: # bc3315;
-moz-बॉर्डर-त्रिज्या: 6px;
-webkit-बॉर्डर-त्रिज्या: 6px;
बॉर्डर-त्रिज्या: 6px;
सीमा: 1 पीएक्स ठोस # 942911;
display: inline-ब्लॉक;
कर्सर: सूचक;
रंग: #ffffff;
पैडिंग: 6px 24px;
text-decoration: कोई नहीं;
}
संपादक स्टाइलशीट दृश्य संपादक में आपकी सामग्री के रूप को नियंत्रित करता है। इस फ़ाइल के स्थान को जानने के लिए अपने विषय के दस्तावेज़ देखें।
यदि आपके विषय में कोई संपादक स्टाइलशीट फ़ाइल नहीं है, तो आप हमेशा एक बना सकते हैं। बस एक नई सीएसएस फ़ाइल बनाइए और इसे नाम दें कस्टम संपादक style.css ।
आपको अपने विषय की रूट निर्देशिका में इस फाइल को अपलोड करने की आवश्यकता है और फिर इस कोड को अपने थीम के functions.php फ़ाइल में जोड़ें।
फ़ंक्शन my_theme_add_editor_styles () {
add_editor_style ('कस्टम-संपादक-शैली.css');
}
add_action ('init', 'my_theme_add_editor_styles');
बस इतना ही। आपने अपनी कस्टम शैलियों को सफलतापूर्वक वर्डप्रेस विज़ुअल एडिटर में जोड़ा है। अपने खुद के तत्वों और शैलियों को जोड़कर कोड के चारों ओर खेलने के लिए बेझिझक।