ब्रेकिंग न्यूज सेक्शन वर्डप्रेस वेबसाइट में कैसे बनाएं? बिना plugin के

How to Create a Breaking News Section in WordPress website: वर्डप्रेस वेबसाइट पर ब्रेकिंग न्यूज सेक्शन जोड़ना आपके विज़िटर के अनुभव को बढ़ा सकता है। यह उन्हें ताज़ा और महत्वपूर्ण समाचारों से अवगत कराता है। इस गाइड में, हम आपको दिखाएंगे कि कैसे आप GeneratePress थीम का उपयोग करके एक आकर्षक ब्रेकिंग न्यूज सेक्शन बना सकते हैं, जिसमें लिंक नए टैब में खुलेंगी।

स्टेप 1: वर्डप्रेस में कस्टम शॉर्टकोड बनाना

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

PHP कोड:

function custom_breaking_news_shortcode() {
    ob_start();
    ?>
    <div class="breaking-news-container">
        <div class="breaking-news-prefix">ब्रेकिंग न्यूज: </div>
        <div class="breaking-news">
            <marquee behavior="scroll" direction="left">
                <?php
            // ब्रेकिंग न्यूज़ की सूची
            $breaking_news = [
                ['message' => 'पहली ब्रेकिंग न्यूज़ का संदेश', 'link' => 'https://link1.com'],
                ['message' => 'दूसरी ब्रेकिंग न्यूज़ का संदेश', 'link' => 'https://link2.com'],
                ['message' => 'तीसरी ब्रेकिंग न्यूज़ का संदेश', 'link' => 'https://link3.com'],
                // आप और भी संदेश जोड़ सकते हैं
            ];

                // सभी ब्रेकिंग न्यूज़ को स्क्रॉल करना
                foreach ($breaking_news as $news) {
                    echo '<a href="' . esc_url($news['link']) . '" class="breaking-news-link" target="_blank">' . esc_html($news['message']) . '</a>';
                }
                ?>
            </marquee>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('breaking_news', 'custom_breaking_news_shortcode');

स्टेप 2: CSS के साथ ब्रेकिंग न्यूज सेक्शन को स्टाइल करना

ब्रेकिंग न्यूज सेक्शन को आकर्षक बनाने के लिए हमें कुछ कस्टम CSS जोड़नी होगी। इस CSS को Appearance > Customize > Additional CSS में जोड़ें।

CSS कोड:

.breaking-news-container {
    display: flex;
    align-items: center;
    background-color: #ff0000; /* पृष्ठभूमि रंग */
    padding: 10px;
    border: 1px solid #ff0000; /* पतली बॉर्डर */
}

.breaking-news-prefix {
    color: #ffffff; /* पाठ का रंग */
    font-weight: bold;
    margin-right: 15px;
    white-space: nowrap;
}

.breaking-news {
    flex-grow: 1;
}

.breaking-news marquee {
    color: #000000; /* स्क्रॉलिंग ब्रेकिंग न्यूज का पाठ रंग */
    background-color: #ffffff; /* स्क्रॉलिंग ब्रेकिंग न्यूज का पृष्ठभूमि रंग */
}

.breaking-news a.breaking-news-link {
    color: #000000; /* लिंक का पाठ रंग */
    text-decoration: none; /* लिंक का अंडरलाइन हटाना */
    margin-right: 30px; /* प्रत्येक लिंक के बीच में अंतर */
}

.breaking-news a.breaking-news-link:hover {
    color: #ff0000; /* होवर पर लिंक का रंग */
    text-decoration: underline; /* होवर पर अंडरलाइन दिखाना */
}

स्टेप 3: शॉर्टकोड का उपयोग करना

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

[breaking_news]

स्टेप 4: हुक का उपयोग करना (वैकल्पिक)

यदि आप चाहते हैं कि ब्रेकिंग न्यूज सेक्शन हर पेज के नेविगेशन हेडर के बाद दिखे, तो आप GeneratePress थीम के हुक का उपयोग कर सकते हैं:

1. Appearance > Elements पर जाएं।
2. Add New पर क्लिक करें और Element Type के रूप में Hook चुनें।
3. शीर्षक दें (जैसे “Breaking News Section”).
4. कोड संपादक में

[breaking_news] 

1. शॉर्टकोड पेस्ट करें।
2. Hook फील्ड में after_navigation_header चुनें।
3. Display Rules सेट करें, ताकि यह कोड केवल उन पेजों पर लागू हो जहां आप इसे दिखाना चाहते हैं।

निष्कर्ष

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