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

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

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

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

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

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

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

1. आरंभ करने के लिए, किसी भी अन्य वर्डप्रेस प्लगइन की तरह TinyMCE कस्टम स्टाइल को डाउनलोड, इंस्टॉल और सक्रिय करें। सक्रिय करने के बाद, "सेटिंग्स -> TinyMCE कस्टम शैलियाँ" पर नेविगेट करके प्लगइन सेटिंग पृष्ठ पर जाएँ।

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

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

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

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

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

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

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

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

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

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

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

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

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
 
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
 
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
 
    // Define the style_formats array
    $style_formats=array(
 
        // Each array child is a format with it's own settings
        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,
        ),
 
    );
 
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
 
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

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

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

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

संपादक स्टाइलशीट बनाएं

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

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

//Add custom editor stylesheet
function mte_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
    }
add_action( 'init', 'mte_add_editor_styles' );

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

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

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