آموزش افزودن دکمه اشتراک‌گذاری بدون افزونه در وردپرس (سریع و سبک)

افزودن دکمه اشتراک‌گذاری بدون افزونه در وردپرس، یکی از موثرترین اقدامات برای افزایش سرعت بارگذاری، کاهش حجم صفحات و کنترل کامل روی طراحی سایت است. اکثر افزونه‌های اشتراک‌گذاری موجود، چندین فایل JS و CSS خارجی، فونت‌های سنگین مانند FontAwesome و اسکریپت‌های ردیابی کدهای شخص ثالث را به سایت شما تحمیل می‌کنند که نمره GTmetrix و PageSpeed Insights شما را افت می‌دهد. با پیاده‌سازی این روش، بدون حتی یک کیلوبایت بار اضافی، دکمه‌هایی زیبا، کاملاً واکنشی (Responsive) و سازگار با پیام‌رسان‌های ایرانی و خارجی خواهید داشت.

چرا حذف افزونه‌های اشتراک‌گذاری سرعت سایت را تا ۳۰٪ افزایش می‌دهد؟

وقتی از افزونه‌هایی مانند AddToAny، Shared Counts یا Jetpack برای دکمه‌های اشتراک‌گذاری استفاده می‌کنید، سیستم وردپرس مجبور است برای هر بازدیدکننده، فایل‌های متعددی را از سرورهای جانبی یا دایرکتوری افزونه بخواند. این پروسه باعث ایجاد پدیده کشنده Layout Shift (CLS) و تاخیر در پاسخگویی سرور (TTFB) می‌شود.

بررسی‌های عملی روی سایت‌های پربازدید نشان می‌دهد که جاگزین کردن کدهای اختصاصی سبک به جای افزونه‌های آماده، حداقل ۴ الی ۶ درخواست HTTP اضافی را از انتهای صفحات حذف می‌کند. همچنین با استفاده از آیکون‌های SVG داخلی (Inline SVG)، دیگر نیازی به بارگیری فایل فونت جانبی نخواهید داشت.

گام اول: کدنویسی توابع وردپرس (PHP) برای تولید لینک‌های اشتراک‌گذاری

برای شروع، باید ساختار لینک‌های مستقیم هر شبکه اجتماعی را استخراج کنیم. این لینک‌ها با دریافت آدرس برگه و عنوان نوشته، صفحه اشتراک‌گذاری را در اپلیکیشن مربوطه باز می‌کنند. برای این کار نیازی به هیچ کتابخانه اضافی ندارید. می‌توانید کدهای تخصصی بیشتری را در بخش تکه‌کدهای وردپرس مشاهده کنید.

کد زیر را به انتهای فایل functions.php قالب فعال خود (یا از طریق افزونه Code Snippets) اضافه کنید. این تابع به‌طور هوشمند بررسی می‌کند که کاربر در صفحه نوشته تکی قرار دارد و سپس کدهای HTML دکمه‌ها را به انتهای محتوای نوشته پیوست می‌کند:

function custom_social_share_buttons($content) {
    if (is_single()) {
        // دریافت آدرس و عنوان نوشته با انکود ایمن
        $post_url   = urlencode(get_permalink());
        $post_title = urlencode(get_the_title());

        // ساخت لینک‌های اختصاصی
        $telegram_url = 'https://t.me/share/url?url=' . $post_url . '&text=' . $post_title;
        $eitaa_url    = 'https://eitaa.com/share/url?url=' . $post_url . '&text=' . $post_title;
        $whatsapp_url = 'https://api.whatsapp.com/send?text=' . $post_title . '%20' . $post_url;
        $twitter_url  = 'https://twitter.com/intent/tweet?text=' . $post_title . '&url=' . $post_url;
        $linkedin_url = 'https://www.linkedin.com/sharing/share-offsite/?url=' . $post_url;

        // خروجی HTML و آیکون‌های Inline SVG
        $html = '<div class="custom-share-box">';
        $html .= '<span class="share-title">اشتراک‌گذاری این مطلب:</span>';
        $html .= '<div class="share-buttons-wrapper">';
        
        // تلگرام
        $html .= '<a href="' . $telegram_url . '" class="share-btn telegram" target="_blank" rel="nofollow noopener" aria-label="اشتراک در تلگرام"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg> تلگرام</a>';
        
        // ایتا
        $html .= '<a href="' . $eitaa_url . '" class="share-btn eitaa" target="_blank" rel="nofollow noopener" aria-label="اشتراک در ایتا">ایتا</a>';

        // واتساپ
        $html .= '<a href="' . $whatsapp_url . '" class="share-btn whatsapp" target="_blank" rel="nofollow noopener" aria-label="اشتراک در واتساپ"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0012.04 2zm5.8 14.39c-.24.67-1.41 1.28-1.95 1.34-.51.06-1.17.08-3.37-.8-2.81-1.13-4.63-4-4.77-4.18-.14-.19-1.14-1.52-1.14-2.9 0-1.38.72-2.06.98-2.34.26-.28.57-.35.76-.35.19 0 .38 0 .55.01.18.01.43-.07.67.51.24.58.82 2.01.89 2.15.07.14.12.31.02.5-.09.19-.15.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.3-.12.59.17.29.75 1.24 1.62 2.01 1.12.99 2.06 1.3 2.35 1.44.29.14.46.12.63-.07.17-.19.73-.85.92-1.14.19-.29.38-.24.64-.14.26.1 1.65.78 1.93.92.28.14.46.21.53.33.07.12.07.7-.17 1.37z"/></svg> واتساپ</a>';

        // توییتر (X)
        $html .= '<a href="' . $twitter_url . '" class="share-btn twitter" target="_blank" rel="nofollow noopener" aria-label="اشتراک در توییتر"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> توییتر</a>';

        // لینکدین
        $html .= '<a href="' . $linkedin_url . '" class="share-btn linkedin" target="_blank" rel="nofollow noopener" aria-label="اشتراک در لینکدین"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 10.9v8.37H9.25V10.9H6.46M7.86 6.75a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9z"/></svg> لینکدین</a>';

        $html .= '</div></div>';

        return $content . $html;
    }
    return $content;
}
add_filter('the_content', 'custom_social_share_buttons');

استفاده از urlencode در این بخش از اهمیت فوق‌العاده‌ای برخوردار است. بدون آن، در صورت وجود کاراکترهای فارسی یا فاصله در تیتر نوشته، لینک اشتراک‌گذاری در پیام‌رسان‌ها به مشکل می‌خورد. برای درک بهتر ساختار کدهای فرانت‌اند می‌توانید از مجموعه تکه‌کدهای HTML نیز استفاده کنید.

گام دوم: استایل‌دهی و زیباسازی دکمه‌ها با CSS (بدون نیاز به فونت‌آیکون)

برای حفظ سرعت، تمام آیکون‌های کدهای بالا به‌صورت SVG برداری گنجانده شده‌اند. حالا با استفاده از کدهای مدرن CSS و Flexbox، یک چیدمان زیبا و کاملاً پاسخگو برای حالت موبایل و تبلت ایجاد می‌کنیم. گزینه‌های مشابه را در بخش تکه‌کدهای CSS نیز می‌توانید بیابید.

.custom-share-box {
    margin-top: 35px;
    padding: 20px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    direction: rtl;
}

.share-title {
    display: block;
    font-weight: bold;
    color: #334155;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.share-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

.share-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.share-btn svg {
    fill: currentColor;
}

/* رنگ‌های اختصاصی برندها */
.share-btn.telegram { background-color: #229ED9; }
.share-btn.eitaa { background-color: #e67e22; }
.share-btn.whatsapp { background-color: #25D366; }
.share-btn.twitter { background-color: #000000; }
.share-btn.linkedin { background-color: #0A66C2; }

@media (max-width: 600px) {
    .share-buttons-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .share-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

گام سوم: فعال‌سازی اشتراک‌گذاری نیتیو موبایل با Web Share API

دستگاه‌های هوشمند مدرن سیستم اشتراک‌گذاری داخلی اختصاصی خود را دارند. با اضافه کردن چند سطر کد جاوااسکریپت سبک، کاربر با کلیک روی یک دکمه واحد، منوی استاندارد سیستم‌عامل خود (اندروید یا iOS) را مشاهده خواهد کرد. بررسی مثال‌های متعددی در صفحه تکه‌کدهای جاوااسکریپت در دسترس شماست.

برای اضافه کردن دکمه نیتیو اشتراک‌گذاری هوشمند، قطعه کد جاوااسکریپت زیر را در انتهای قالب یا فایل JS اصلی قالب بگذارید:

document.addEventListener('DOMContentLoaded', function () {
    const nativeBtn = document.getElementById('native-web-share');
    
    if (navigator.share && nativeBtn) {
        nativeBtn.style.display = 'inline-flex';
        nativeBtn.addEventListener('click', function (e) {
            e.preventDefault();
            navigator.share({
                title: document.title,
                url: window.location.href
            }).catch(console.error);
        });
    }
});

۳ نکته تخصصی برای بهینه‌سازی دکمه‌های اشتراک‌گذاری

برای اینکه بالاترین بازدهی را از پیاده‌سازی دستی بدون افزونه بگیرید، رعایت این سه نکته تجربه کاربری و آنالیز سایت را بهبود می‌بخشد:

• پارامترهای UTM بدون کوکی: برای پیگیری میزان ورودی از شبکه‌های اجتماعی در گوگل آنالیتیکس (GA4)، پارامترهای UTM را مستقیماً به انتهای متغیر $post_url در کد PHP پیوست کنید (به عنوان مثال: ?utm_source=telegram&utm_medium=share_btn).
• تگ‌های rel=”nofollow noopener”: تمام لینک‌های اشتراک‌گذاری بیرون سایت باز می‌شوند. طبق استانداردهای سئو، همیشه ویژگی‌های rel="nofollow noopener" را قرار دهید تا اعتبار دامنه شما حفظ شده و امنیت مرورگر تامین شود.
• عدم استفاده از آیکون‌های سنگین FontAwesome: فراخوانی کل کتابخانه FontAwesome برای فقط ۵ آیکون ساده، حدود ۱۰۰ کیلوبایت حجم اضافه وارد صفحه می‌کند. همیشه SVG اختصاصی همان آیکون را مستقیم درون کد قرار دهید. نمونه‌های کاربردی را می‌توانید در صفحه اصلی آرشیو تکه‌کدهای کاربردی بیابید.

عیب‌یابی سریع و رفع مشکلات رایج

پرسش‌های متداول