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

वर्डप्रेस में पोस्ट एडिटर, जैसा कि इसके नाम से पता चलता है, आपको पोस्ट और सामग्री संपादित करने देने के लिए है। डिफ़ॉल्ट रूप से, यह आपको कस्टम CSS क्लास जोड़ने की अनुमति नहीं देता है। यदि आप कस्टम CSS स्टाइल या क्लास जोड़ना चाहते हैं, तो एकमात्र तरीका "टेक्स्ट" मोड पर स्विच करना और इसे HTML कोड में जोड़ना है।

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

वर्डप्रेस पोस्ट एडिटर में कस्टम स्टाइल विकल्प जोड़ने के कुछ तरीके हैं। पहला मुफ्त प्लगइन का उपयोग करना है, और दूसरा कोड स्निपेट जोड़ना है। दोनों विधियां बहुत समान रूप से काम करती हैं, इसलिए जिस तरीके से आप सहज हों उसका पालन करें।

नोट: आगे बढ़ने से पहले, मैं मान लेता हूं कि आप बुनियादी HTML और CSS जानते हैं और CSS क्लास, ब्लॉक-लेवल एलिमेंट, HTML एलिमेंट, एट्रिब्यूट आदि जैसी चीजों को समझ सकते हैं।

1. प्लगइन का उपयोग करना

वर्डप्रेस पोस्ट एडिटर में कस्टम स्टाइल विकल्प जोड़ने का सबसे आसान तरीका TinyMCE Custom Styles नामक प्लगइन का उपयोग करना है।

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

1. शुरू करने के लिए, किसी अन्य वर्डप्रेस प्लगइन की तरह TinyMCE Custom Styles को डाउनलोड, इंस्टॉल और सक्रिय करें। सक्रिय करने के बाद, "सेटिंग्स -> TinyMCE Custom Styles" पर नेविगेट करके प्लगइन सेटिंग्स पेज पर जाएं।

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

3. नीचे स्क्रॉल करें और "नई स्टाइल जोड़ें" बटन पर क्लिक करें। अब, स्टाइल का नाम दर्ज करें, एक प्रकार चुनें (यानी, इंलाइन, ब्लॉक, या सेलेक्टर), प्रकार मान दर्ज करें, और फिर CSS क्लास।

4. दाईं ओर सबसे दूर यह चयन करना न भूलें कि एलिमेंट "रैपर" है या नहीं। यदि आप इस विकल्प का चयन करते हैं, तो स्टाइल पोस्ट एडिटर में चयनित ब्लॉक-लेवल एलिमेंट के चारों ओर एक नया ब्लॉक-लेवल एलिमेंट बनाएगा।

5. यदि आप चाहें तो आप "CSS स्टाइल" श्रेणी के तहत दिखाई देने वाले "नई स्टाइल जोड़ें" पर क्लिक करके सीधे कस्टम CSS स्टाइल भी जोड़ सकते हैं। हालांकि, मैं आपको "editor-style.css" फ़ाइल में उन स्टाइल को जोड़ने की सलाह देता हूं जो आपकी थीम डायरेक्टरी में स्थित है (यदि आपने चरण दो में मेरी तरह दूसरा विकल्प चुना है)। यह प्रबंधन करना आसान बनाता है।

6. एक बार जब आप पूरा कर लें, तो पेज के अंत में दिखाई देने वाले "सभी सेटिंग्स सहेजें" बटन पर क्लिक करें।

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

8. यदि आपने editor-style.css फ़ाइल में आवश्यक स्टाइल जोड़े हैं, तो जब आप ड्रॉपडाउन मेनू से स्टाइल विकल्प का उपयोग करते हैं तो वे स्टाइल पोस्ट एडिटर में परिलक्षित होंगे।

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

2. मैन्युअल विधि

यदि आप प्लगइन का उपयोग करना पसंद नहीं करते हैं, तो आप अपने "functions.php" फ़ाइल में एक साधारण कोड स्निपेट जोड़कर वही चीज प्राप्त कर सकते हैं। इसके दो भाग हैं: एक टूलबार में CSS कोड डालने के लिए बटन जोड़ने के लिए है, और दूसरा पोस्ट एडिटर में CSS स्टाइल को लाइव बनाने के लिए है।

टूलबार में कस्टम CSS स्टाइल बटन जोड़ें

अपने "functions.php" फ़ाइल के अंत में निम्नलिखित जोड़ें। यह कोड वास्तव में वर्डप्रेस द्वारा ही प्रदान किया जाता है।

// 'styleselect' को $buttons सरणी में डालने के लिए कॉलबैक फ़ंक्शन function my_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } // हमारे कॉलबैक को उपयुक्त फ़िल्टर में पंजीकृत करें add_filter( 'mce_buttons_2', 'my_mce_buttons_2' ); // MCE सेटिंग्स फ़िल्टर करने के लिए कॉलबैक फ़ंक्शन function my_mce_before_init_insert_formats( $init_array ) { // style_formats सरणी परिभाषित करें $style_formats=array( // प्रत्येक सरणी चाइल्ड अपनी सेटिंग्स के साथ एक फॉर्मेट है array( 'title' => '.translation', 'block' => 'blockquote', 'classes' => 'translation', 'wrapper' => true, ), array( 'title' => '⇠.rtl', 'block' => 'blockquote', 'classes' => 'rtl', 'wrapper' => true, ), array( 'title' => '.ltr⇢', 'block' => 'blockquote', 'classes' => 'ltr', 'wrapper' => true, ), ); // सरणी को 'style_formats' में डालें, JSON ENCODED $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } // कॉलबैक को 'tiny_mce_before_init' से संलग्न करें add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

आपको अपने स्टाइल विकल्पों को प्रतिबिंबित करने के लिए कोड को अनुकूलित करने की आवश्यकता है। उपरोक्त कोड में प्रत्येक सरणी एक अलग स्टाइल विकल्प है। "title" के आगे अपना स्टाइल शीर्षक दर्ज करें, "block" के आगे ब्लॉक प्रकार, "classes" के आगे CSS क्लास, और यदि एलिमेंट एक रैपर है, तो "wrapper" के आगे "true" टाइप करें। यदि नहीं, तो "false" टाइप करें।

जब भी आप एक नया स्टाइल विकल्प जोड़ना चाहते हैं, तो बस सरणी को डुप्लिकेट करें और फ़ील्ड संशोधित करें। मेरे मामले में मैंने पहली सरणी को अपने "ब्लू बटन" विकल्प को प्रतिबिंबित करने के लिए भरा।

एक बार जब आप अनुकूलन के साथ हो जाते हैं, तो संशोधित "functions.php" फ़ाइल को सेव करें और अपने सर्वर पर अपलोड करें।

एडिटर स्टाइलशीट बनाएं

"editor-style.css" नाम से एक फ़ाइल बनाएं। अब, प्रासंगिक CSS स्टाइल जोड़ें जिन्हें आप पोस्ट एडिटर में देखना चाहेंगे। यह न भूलें कि "editor-style.css" फ़ाइल में आपके द्वारा बनाए जा रहे CSS क्लास उपरोक्त स्टाइल विकल्प कोड में CSS क्लास से मेल खाने चाहिए।

अब, अपनी थीम की "functions.php" फ़ाइल खोलें और निम्नलिखित कोड जोड़ें।

// कस्टम एडिटर स्टाइलशीट जोड़ें function mte_add_editor_styles() { add_editor_style( 'editor-style.css' ); } add_action( 'init', 'mte_add_editor_styles' );

"editor-style.css" और "functions.php" दोनों फ़ाइलों को अपने सर्वर पर अपलोड करें। बस इतना ही करना है। अब से आप वर्डप्रेस पोस्ट एडिटर से कस्टम स्टाइल विकल्पों का उपयोग कर सकते हैं।

आप स्टाइल को रीयल-टाइम में लागू होते देख सकते हैं।

उपरोक्त विधियों का उपयोग करके वर्डप्रेस पोस्ट एडिटर में कस्टम स्टाइल विकल्प जोड़ने के संबंध में अपने विचार और अनुभव नीचे कमेंट में साझा करें।