उन्नत वर्डप्रेस संपादक टेम्पलेट

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



विकास में वर्डप्रेस पर आधारित एक वेब साइट डिजाइनर के रूप में, मैं अक्सर इस तथ्य पर आता हूं कि साइटों का समर्थन और अद्यतन अंततः उन ग्राहकों द्वारा किया जाता है, जिनके पास व्यावहारिक रूप से कोई HTML कौशल नहीं है। हालाँकि TinyMCE एक काफी कार्यात्मक संपादक है जो लेख लिखने और प्रकाशित करने के लिए सभी आवश्यक उपकरणों के साथ किसी भी कौशल स्तर का एक प्रबंधक प्रदान करता है, एक एकल-स्तंभ पाठ से परे कुछ भी बनाने के साथ कई चित्रों के साथ कम से कम एक मूल HTML कौशल की आवश्यकता होती है।

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

एक कस्टम टेम्पलेट बनाना

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

वापस अंत

निम्न पंक्ति को functions.php में जोड़कर, उपयोगकर्ता द्वारा बनाए गए प्रत्येक नए रिकॉर्ड को क्रमशः शैली content-col-main और content-col-side साथ दो div ब्लॉकों से पहले से सुसज्जित किया जाएगा। मुझे ध्यान देना चाहिए कि वर्तमान में, इस कोड का परीक्षण केवल वर्डप्रेस संस्करण 3.0 और उच्चतर में किया गया है:

 <?php add_filter( 'default_content', 'custom_editor_content' ); function custom_editor_content( $content ) { $content = ' <div class="content-col-main"> This is your main page content &nbsp; </div> <div class="content-col-side"> This is your sidebar content &nbsp; </div> &nbsp; &nbsp; '; return $content; } ?> 

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

अब हमें कुछ स्टाइल जोड़ने की जरूरत है। अपने functions.php में निम्न टाइप करें।

 <?php add_editor_style( 'editor-style.css' ); ?> 

add_editor_style() फ़ंक्शन TinyMCE संपादक विंडो की सामग्री के लिए सजावट के लिए उपयोग add_editor_style() निर्दिष्ट शैली add_editor_style() । यदि आप फ़ंक्शन के मापदंडों को निर्दिष्ट नहीं करते हैं, तो यह डिफ़ॉल्ट editor-style.css को संलग्न करेगा, लेकिन इस लेख के प्रयोजनों के लिए मैंने अपनी शैली लिखी। एक editor-style.css शैली फ़ाइल बनाएं और इसे थीम फ़ोल्डर में रखें। फ़ाइल की सामग्री इस प्रकार होगी:

 body { background: #f5f5f5; } .content-col-main { float:left; width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; } .content-col-side { float:right; width:29%; padding:1%; border: 1px dotted #ccc; background: #fff; } img { /* ,      */ max-width: 100%; width: auto; height: auto; } 

अब, साइट पर एक प्रविष्टि बनाते समय, आपको संपादन और उनमें पाठ डालने के लिए दो कॉलम दिखाई देंगे:


यह मल्टी-कॉलम पैटर्न हर बार दिखाई देगा
नई पोस्ट या पेज बनाते समय।

और यहाँ यह है - आपके संपादक के लिए प्रतिष्ठित टेम्पलेट। आप वापस जा सकते हैं और अपने उद्देश्यों के लिए default_content कोड और editor-styles.css संपादित कर सकते हैं:


अपने स्वयं के टेम्प्लेट बनाने के लिए इस तकनीक का उपयोग करें
आपके कार्य।

सामने का छोर

अब, जब आपकी पोस्ट साइट पर प्रदर्शित की जाएगी, तो उसकी सामग्री अभी भी एक कॉलम में पहले की तरह प्रदर्शित है? हम उन शैलियों को जोड़ना नहीं भूलते हैं जो हमने पहले custom_editor_content() फ़ंक्शन से custom_editor_content() । ओपन style.css (या आपके विषय में इस्तेमाल की गई कोई अन्य स्टाइलशीट) और अपनी इच्छानुसार डिव ब्लॉक को स्टाइल करें।


यह तकनीक न केवल रिकॉर्डिंग डिज़ाइन पर लागू होती है। जावास्क्रिप्ट का उपयोग करना
आप "हिंडोला" में भी विलय कर सकते हैं या अन्य गतिशील जोड़ सकते हैं
मक्खी पर प्रभाव।

अपने टेम्पलेट से कुछ और निचोड़ें

नई डिजाइन सुविधाओं के अलावा, इस पद्धति का उपयोग उन वस्तुओं को बनाने के लिए भी किया जा सकता है जिन्हें आपका जावास्क्रिप्ट कोड बाद में एक्सेस करेगा।


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

टेम्पलेट्स के लिए टेम्पलेट्स।

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

 <?php add_filter( 'default_content', 'custom_editor_content' ); function custom_editor_content( $content ) { global $current_screen; if ( $current_screen->post_type == 'page') { $content = ' //    (PAGES) '; } elseif ( $current_screen->post_type == 'POSTTYPE') { $content = ' //      (CUSTOM POST TYPE) '; } else { $content = ' //     (EVERYTHING ELSE) '; } return $content; } ?> 

आप editor-style.css में एक व्यक्तिगत डिफ़ॉल्ट शैली भी सेट कर सकते हैं, लेकिन यदि आपको प्रत्येक प्रकार के रिकॉर्ड के लिए अपनी स्वयं की शैली लागू करने की आवश्यकता है, तो आप WPStorm से निम्न स्निपेट का उपयोग करके ऐसा कर सकते हैं:

 <?php function custom_editor_style() { global $current_screen; switch ($current_screen->post_type) { case 'post': add_editor_style('editor-style-post.css'); break; case 'page': add_editor_style('editor-style-page.css'); break; case '[POSTTYPE]': add_editor_style('editor-style-[POSTTYPE].css'); break; } } add_action( 'admin_head', 'custom_editor_style' ); ?> 

इस कोड को अपने विषय के functions.php जोड़ें, और उसके बाद editor-style-[POSTTYPE].css फ़ाइल / s विशेष रूप से प्रत्येक अवसर के लिए डिज़ाइन की गई शैलियों का उपयोग करने के लिए। बस कस्टम पोस्ट प्रकार के नाम के साथ [POSTTYPE] बदलें। प्रत्येक अतिरिक्त रिकॉर्ड प्रकार के लिए अन्य प्रकार जोड़ने के लिए उपरोक्त कोड बढ़ाएँ।

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

 <?php function custom_editor_style() { global $current_screen; add_editor_style( array( 'editor-style.css', 'editor-style-'.$current_screen->post_type.'.css' ) ); } add_action( 'admin_head', 'custom_editor_style' ); ?> 

(उपरोक्त कोड में, इस प्रकार के editor-style-[POSTTYPE].css / पृष्ठ और नाम editor-style-[POSTTYPE].css लिए परिभाषित अतिरिक्त शैलियों के अलावा, सभी प्रकार की संपादन सामग्री में editor-style-[POSTTYPE].css editor-style.css को भी शामिल किया जाएगा।)

अंतभाषण

यद्यपि इस तकनीक में इसकी कमियां हैं (आपको पहले से डिज़ाइन प्रकार के डिज़ाइन को जानना होगा), और ग्राहक अपने दम पर संरचना को फिर से परिभाषित करने में सक्षम नहीं होगा (यह अभी भी पर्याप्त नहीं था।), यह आपको अपने ग्राहकों के लिए और भी दिलचस्प सैंडल बनाने की अनुमति देता है, जहां। एक मानकीकृत सामग्री प्रारूप को बनाए रखते हुए फ्रॉलिक।

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

मुझे उम्मीद है कि आप इस तकनीक को उपयोगी पाएंगे, इसे उत्साह के साथ देख सकते हैं कि इसके उपयोग के लिए कितने और नए विकल्प हैं, जो आपको अधिक से अधिक गतिशील टेम्पलेट बनाने के लिए इसे संशोधित, सुधारना और सुधारना है।

PS यह पद लंबे समय तक ड्राफ्ट में पड़ा रहा, लेकिन इसने प्रासंगिकता नहीं खोई। मुझे व्यक्तिगत रूप से त्रुटियों के बारे में सुनकर खुशी होगी (आंतरिक मेल के माध्यम से)। आपका धन्यवाद