WordPress वेबसाइट में WhatsApp Button कैसे लगाएं?

आज के डिजिटल दौर में हर वेबसाइट पर WhatsApp Chat Support होना ज़रूरी हो गया है। इससे विज़िटर सीधे आपसे जुड़ सकते हैं और सवाल पूछ सकते हैं। अगर आपकी वेबसाइट WordPress पर बनी है, तो आप आसानी से एक Floating WhatsApp Button जोड़ सकते हैं — वो भी बिना किसी plugin के।

इस लेख में हम आपको बताएंगे कि कैसे आप PHP और CSS कोड का इस्तेमाल करके WordPress वेबसाइट में एक सुंदर और काम करने वाला WhatsApp Button जोड़ सकते हैं।

📌 इस बटन की खासियत क्या होगी?

• यह वेबसाइट के नीचे दाहिने कोने (bottom right corner) पर हमेशा दिखेगा।
• क्लिक करने पर सीधा WhatsApp चैट खुलेगा।
• Mobile और Desktop दोनों पर काम करेगा।
• कोई plugin ज़रूरत नहीं, वेबसाइट तेज़ बनी रहेगी।

🔧 Step 1: Shortcode Function को Add करें (functions.php में)

सबसे पहले, अपने WordPress थीम या चाइल्ड थीम के functions.php फाइल में नीचे दिया गया कोड जोड़ें:

// WhatsApp button shortcode
function wp_whatsapp_button_shortcode() {
    ob_start();
    ?>
    <div class="whatsapp-float">
        <a href="https://wa.me/919999999999" target="_blank" title="Chat on WhatsApp">
            <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp" />
        </a>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('whatsapp_button', 'wp_whatsapp_button_shortcode');
Code language: JavaScript (javascript)

👉 ध्यान दें:

• 919999999999 की जगह अपना WhatsApp नंबर डालें।
• Country code (जैसे India के लिए 91) ज़रूर लगाएं।
• आप चाहें तो अपनी पसंद का WhatsApp आइकन भी लगा सकते हैं।

🎨 Step 2: CSS को Add करें (Styling के लिए)

अब इस WhatsApp Button को सही जगह पर दिखाने और उसे स्टाइल देने के लिए नीचे दिया गया CSS जोड़ें।

इसे आप WordPress Dashboard में जाएं:
Appearance → Customize → Additional CSS और वहां नीचे वाला कोड चिपका दें:

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.whatsapp-float a img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.whatsapp-float a img:hover {
  transform: scale(1.1);
}Code language: CSS (css)

✅ Step 3: Shortcode का इस्तेमाल करें

अब जब कोड तैयार हो गया है, तो आप WordPress के किसी भी Page, Post या Text Widget में ये Shortcode डालें:

[whatsapp_button]Code language: JSON / JSON with Comments (json)

बस! अब आपकी वेबसाइट में WhatsApp Button दिखेगा।

🔄 Bonus Tip: हर Page/Post पर बटन ऑटोमैटिक दिखाना

अगर आप चाहते हैं कि ये WhatsApp Button हर पेज और पोस्ट के नीचे अपने आप जुड़ जाए, तो functions.php में नीचे वाला कोड जोड़ें:

add_filter('the_content', 'add_whatsapp_button_to_content');
function add_whatsapp_button_to_content($content) {
    if (is_singular('post') || is_page()) {
        $content .= do_shortcode('[whatsapp_button]');
    }
    return $content;
}
Code language: PHP (php)

अब आपकी वेबसाइट में WhatsApp Button सभी पेज और पोस्ट पर दिखेंगे।

अगर आपको यह जानकारी उपयोगी लगी हो तो अपने दोस्तों और fellow bloggers के साथ ज़रूर शेयर करें। कोई सवाल हो तो नीचे कमेंट करें — मैं मदद के लिए तैयार हूं।

💬 Bonus: Pre-filled Message के साथ WhatsApp लिंक

अगर आप चाहते हैं कि जब यूज़र बटन पर क्लिक करे तो एक मैसेज पहले से टाइप हो, तो ऐसा लिंक बनाएं:

<a href="https://wa.me/919999999999?text=Hello%2C%20I%20want%20more%20info" target="_blank">Code language: HTML, XML (xml)

🟢 इस लिंक में यूज़र को WhatsApp खोलते ही “Hello, I want more info” वाला मैसेज दिखेगा।

🟢 आप मैसेज को अपने हिसाब से कस्टमाइज़ कर सकते हैं।

✍️ निष्कर्ष (Conclusion)

अब आपने सीखा कि कैसे बिना किसी Plugin के WordPress वेबसाइट में WhatsApp Button जोड़ा जा सकता है। यह तरीका न केवल तेज़ और हल्का है, बल्कि SEO और वेबसाइट परफॉर्मेंस के लिहाज से भी बेहतर है।