गुटेनबर्ग संपादक, संपादकों और टाइपसेटर्स को सुविधाजनक बनाने के लिए कैसे करें

इस पोस्ट ने मुझे एक लेख लिखने के लिए प्रेरित किया। रैपर div.container छुटकारा पाने के लिए लेखक एक मजेदार ट्रिक देता है। पहली नज़र में, यह मैचों पर एक बचत है, लेकिन वर्डप्रेस प्रोग्रामर बहुत कुछ जानते हैं। हमारे लिए, वोर्ड्रेसग्रामिस्ट्स, घोड़ी की दुल्हन।

हमारी समस्याएँ यहाँ क्या हैं:

1. एक एसईओ परिप्रेक्ष्य से, पाठ को अनुभागों में विभाजित नहीं किया जाना चाहिए
2. तिथि को स्वचालित रूप से प्रतिस्थापित किया जाना चाहिए
3. संपादक के लिए, पेज लेआउट रैखिक होना चाहिए
4. बेज पूर्ण पृष्ठ चौड़ाई पृष्ठभूमि
5. एक स्थान रंग (और कभी-कभी आकार) (और कभी-कभी स्थानांतरित) बदल सकता है।

आइटम नंबर 2 के लिए हम एक सरल शोर्ट लिखेंगे जो हम यहां नहीं देंगे। गुटेनबर्ग ने पाठ में लघुकोड डालना आसान बना दिया है।

निश्चित रूप से, बाकी सब कुछ हल करने के लिए, एसीएफ का उपयोग करें। लेकिन अपने लिए सोचें -

• पहली पंक्ति के लिए फ़ील्ड
• तारीख के बाद पैरा बॉक्स
• स्पॉट विवरण फ़ील्ड

एक साधारण लेखक के लिए, यह बिल्कुल भी पारदर्शी नहीं होगा, और टेम्पलेट IFs के एक समूह में बदल जाएगा।

इतना

यहां बताया गया है कि हम इसे कैसे हल करते हैं:

• गुटेनबर्ग के अलावा कुछ नहीं
• पहला पैराग्राफ शीर्ष रेखा है
• अगला, शीर्ष लेख अनुभाग H1
• फिर शोर्टकोड [पोस्ट-डेट]
• पाठ के साथ अनुच्छेद
• जादू - सेपरेटर!
• अच्छा और फिर सादा पाठ

हमारा single.php कुछ इस तरह दिखता है:

 <?php the_post(); get_header(); ?> <article> <?php the_content() ?> </article> <?php get_footer() ?> 

The_content () इसका उत्पादन करेगा:

 <p>  </p> <h1>  </h1> <time>2013-11-11</time> <p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p> <hr class="wp-block-separator"> ...   ... 

खोज ऑप्टिमाइज़र खुश हैं, लेखक सब कुछ समझता है। और हमें इसे पूरा करना होगा।

लेकिन यह, सामान्य रूप से, मुश्किल नहीं है:

 article { display:flex; flex-direction: column; align-items: center; } article { width: 960px; margin: auto; } hr { margin: 80px 0 70px; border: 0; padding: 1px 0 0; position: relative; } /*    */ hr::before { width: calc(100vw - 10px); /* -10px      -    .     . */ left: calc(480px - 50vw); content: ""; position: absolute; transform-origin: 0 100%; transform: scaley(1000); background: #f7f2eb; z-index: -1; height: 1px; margin: 0; border: none; } /*    */ hr::after { width: 130px; height: 120px; content: ""; background: url(blot.svg) 0 0 no-repeat; position: absolute; left: calc(100% + 100px); transform: translatey(-50%); } 

बाकी सब कुछ विशेष ध्यान देने योग्य नहीं है, मुख्य जादू एचआर विभाजक में है और यह तथ्य कि छद्म तत्व इसमें हो सकते हैं। क्रमशः स्थान का रंग और व्यवहार, एक ही विभाजक की कक्षाओं के माध्यम से बदला जा सकता है।

अगर आपको यह वीडियो पसंद आया, तो लाइक करें और हमारे चैनल को सब्सक्राइब करें।
एक सेकंड रुको, क्या आप youtube नहीं हैं? नहीं?
खैर फिर हैप्पी हैकिंग