WordPress Visual Editor में कस्टम शैलियाँ कैसे जोड़ें

WordPress Visual Editor में कस्टम शैलियाँ कैसे जोड़ें

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


वर्डप्रेस संपादक

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

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

आइए एक नज़र डालते हैं कि वर्डप्रेस विज़ुअल एडिटर में कस्टम शैलियों को कैसे जोड़ा जाए.

वर्ड विजुअल एडिटर में कस्टम स्टाइल जोड़कर कोड जोड़ें

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

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

फंक्शन myprefix_mce_buttons_1 ($ बटन) {
array_unshift ($ बटन, 'स्टाइलसेलेक्ट');
$ बटन वापस करें;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

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

इसलिए, अब जब आपने मेनू आइटम को सक्षम कर लिया है, तो अपनी कस्टम शैलियों को अपनी पोस्ट में उपयोग करने के लिए जोड़ने का समय आ गया है। नीचे सूचीबद्ध कोड लें और इसे अपने पेस्ट करें functions.php फ़ाइल जो प्रारूप प्रारूप में 2 नई शैलियों को जोड़ेगी – “थीम बटन” और “हाइलाइट”.

/ **
* एम सी प्रारूप ड्रॉपडाउन में कस्टम शैली जोड़ें
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
फ़ंक्शन myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// प्रत्येक सरणी बच्चा एक प्रारूप है जिसकी स्वयं की सेटिंग्स है - आप जितना चाहें उतना जोड़ सकते हैं
सरणी (
'शीर्षक' => __ ('थीम बटन', 'टेक्स्ट-डोमेन'), // ड्रॉपडाउन के लिए शीर्षक
'चयनकर्ता' => 'ए', // संपादक में लक्षित करने के लिए तत्व
सीएसएस के लिए प्रयुक्त 'कक्षाएं' => 'थीम-बटन' // क्लास नाम
),
सरणी (
'शीर्षक' => __ ('हाइलाइट', 'टेक्स्ट-डोमेन'), // ड्रॉपडाउन के लिए शीर्षक
'इनलाइन' => 'स्पैन', // चयनित सामग्री के चारों ओर एक आवरण लपेटें
सीएसएस के लिए प्रयुक्त 'कक्षाएं' => 'टेक्स्ट-हाइलाइट' // क्लास नाम
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
$ init_array लौटाएं;
}
add_filter ('small_mce_before_init', 'myprefix_add_format_styles');

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

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

चेक-सूची

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

.विषय-बटन {
प्रदर्शन: इनलाइन-ब्लॉक;
गद्दी: 10 15px;
रंग: #fff;
पृष्ठभूमि: # 1796c6;
पाठ-सजावट: कोई नहीं;
}
.विषय-बटन: होवर {
पाठ-सजावट: कोई नहीं;
अपारदर्शिता: 0.8;
}
.पाठ-हाइलाइट {
पृष्ठभूमि: # FFFF00;
}

अब, यह फ्रंट-एंड के लिए आपके नए स्वरूपों में स्टाइल जोड़ने जा रहा है, ताकि जब आप उन्हें लाइव देख सकें। वाह! लेकिन क्या यह अच्छा नहीं होगा कि आपकी शैलियों को वास्तविक संपादक में देखा जाए जब उन्हें लागू किया जा रहा हो? ऐसा करने के लिए आपको वर्डप्रेस में “संपादक स्टाइलशीट” फ़ंक्शन का उपयोग करना होगा। यदि आप अपनी स्वयं की थीम का निर्माण कर रहे हैं, तो आप अपने विषय में एक नई css फाइल बनाना चाहेंगे, जिसे “editor-style.css” कहा जाता है (आप इसे नाम दे सकते हैं, जो आप चाहते हैं कि आपके अनुसार नीचे दिए गए स्निपेट को संपादित करना सुनिश्चित करें) अपने स्वरूपों के लिए जोड़ा और फिर बैकएंड में लोड करने के लिए नीचे दिए गए फ़ंक्शन को जोड़ें.

समारोह myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

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

एक अच्छा प्लगइन के साथ वर्डप्रेस विज़ुअल एडिटर में कस्टम शैलियाँ जोड़ें

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

TinyMCE कस्टम शैलियाँ प्लगइन

बस के लिए खोज, स्थापित करें और सक्रिय करें TinyMCE कस्टम शैलियाँ प्लगइन और इसे अपनी वर्डप्रेस साइट पर सक्रिय करें.

TinyMCE कस्टम शैलियाँ सेटिंग्स

के लिए जाओ सेटिंग्स> TinyMCE prof.styles आपके वर्डप्रेस डैशबोर्ड के बायीं ओर। यह वह जगह है जहां आप प्लगइन के लिए अपनी सेटिंग्स को संशोधित करते हैं.

TinyMCE कस्टम शैलियाँ सेटिंग्स

प्लगइन आपको यह चुनने देता है कि आपकी शैलियाँ कहाँ हैं या आप उन्हें कहाँ रखना चाहते हैं। यह अनुशंसा की गई है कि आप एक नई कस्टम निर्देशिका बनाएं। तीसरे विकल्प का चयन करें और अपनी निर्देशिका को एक नाम दें, फिर पृष्ठ पर जाकर अपना क्लिक करें समायोजन बचाओ अगले चरण पर आगे बढ़ने से पहले विकल्प.

TinyMCE कस्टम शैलियाँ नई जोड़ें

सेटिंग सहेजने के बाद, नई शैली जोड़ें बटन का चयन करने के लिए नीचे स्क्रॉल करें.

TinyMCE कस्टम शैलियाँ विकल्प

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

TinyMCE कस्टम शैलियाँ प्रारूप

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

उपयोग में TinyMCE कस्टम शैलियाँ प्रारूप

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

निष्कर्ष

अभी के लिए इतना ही! आप हमेशा इस बारे में अधिक जान सकते हैं कि कैसे बाहर की जाँच करके नई स्टाइलिंग का उपयोग करें वर्डप्रेस कोडेक्स पेज इस विषय के लिए समर्पित है.

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

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