خانهآموزش وردپرسساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه
https://rayawp.ir/?p=19956

ساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه

ساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه – تو دنیای آنلاین امروز، لینک‌ها همه‌چیزن. از اینستاگرام تا ایمیل، هرجا که بری، به لینک نیاز داریم. ولی چرا همیشه باید از لینک‌های طولانی

ساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه – تو دنیای آنلاین امروز، لینک‌ها همه‌چیزن. از اینستاگرام تا ایمیل، هرجا که بری، به لینک نیاز داریم. ولی چرا همیشه باید از لینک‌های طولانی و پیچیده استفاده کنیم؟ اینجاست که لینک‌های کوتاه میان و کمک‌مون می‌کنن! این لینک‌ها نه‌تنها خیلی خوشگل‌ترن، بلکه خیلی راحت‌تر میشه اونا رو به اشتراک گذاشت و از نظر سئو و تجربه کاربری هم خیلی مفیدن. تو این مقاله می‌خوام بهت نشون بدم چطور بدون هیچ افزونه‌ای یه دکمه بسازی که کاربر بتونه لینک کوتاه مطلب یا صفحه رو با یه کلیک کپی کنه و راحتی به اشتراک بذاره. پس اگه مشتاق یادگیری یه آموزش جذاب دیگه از رایا وردپرس هستی بزن که بریممم 😊❤️🚀

لینک کوتاه چیست؟ 🤔

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

چرا باید دکمه کپی لینک کوتاه بسازی؟ ✨

حالا که می‌دونی لینک کوتاه چیه، شاید این سوال پیش بیاد که چرا باید یه دکمه برای کپی کردن لینک کوتاه مطلب یا صفحه بسازی. خب، دلیلش اینه که:

  • تجربه کاربری بهتر: وقتی یه دکمه برای کپی لینک داشته باشی، کاربر به راحتی می‌تونه لینک رو کپی کنه و دیگه نیازی نیست که خودش لینک URL رو پیدا کرده و کپی کنه. اونم وقتی لینک ممکنه خیلی طولانی و شلوغ باشه!
  • سرعت بیشتر: با یه کلیک، لینک کوتاه کپی میشه و کاربر سریع‌تر می‌تونه اون رو هرجایی که می‌خواد بذاره، بدون هیچ دردسری.
  • سئو بهتر: گوگل به لینک‌های کوتاه توجه می‌کنه چون این لینک‌ها هم ساده‌ترن و هم برای کاربرها تجربه بهتری دارن.
  • افزایش اشتراک‌گذاری: لینک‌های کوتاه معمولاً جذاب‌ترن و راحت‌تر به اشتراک گذاشته می‌شن، پس احتمال اشتراک‌گذاری اون مطلب و صفحه توسط کاربر بیشتر میشه.
  • شکل ظاهری بهتر: اگه URL صفحه‌ات فارسی باشه و بخوای اون رو تو شبکه‌های اجتماعی یا جاهای دیگه پیست کنی، خیلی طولانی و شلوغ میشه، با کاراکترهای عجیبی مثل % و … که اصلاً خوشایند نیست (مثل تصویر زیر). این نوع لینک‌ها نه تنها به‌هم ریخته به نظر میان، بلکه کاربر هیچ ایده‌ای از محتوای صفحه نداره و اصلاً نمی‌دونه لینک مربوط به چی هست. این موضوع باعث میشه احتمال کلیک کردن روی لینک به شدت پایین بیاد.

یه ترفند ساده برات دارم! اگه URL صفحه‌ات فارسیه و نمی‌خوای به شکل شلوغ و به‌هم ریخته نمایش داده بشه، کافیه فقط بعد از “https://” رو کپی کنی و پیست کنی. اینجوری اون کاراکترهای اضافی و بهم ریخته دیگه نمایش داده نمی‌شن و لینک خیلی تمیزتر و مرتب‌تر به نظر میاد.

🪶ساخت دکمه کپی لینک کوتاه مطلب در وردپرس بدون افزونه

حالا که با لینک کوتاه و فوایدش آشنا شدی، وقتشه که بریم سراغ ساخت دکمه کپی لینک کوتاه بدون نصب و استفاده از افزونه. به راحتی می‌تونی با استفاده از کد زیر این کار رو تو سایت وردپرسی‌ات انجام بدی:

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

🤖تعریف شورت‌ کد برای دکمه کپی لینک

کد PHP زیر رو داخل فایل functions.php قالب وردپرس خودت قرار بدی. این کار باعث می‌شه یه شورت‌کد سفارشی برای لینک کوتاه صفحه ایجاد بشه و بتونی ازش توی هر برگه و صفحه‌ای که می‌خوای، استفاده کنی. 😎 به این ترتیب، هر جا که این شورت‌کد [RayaWp_copy_link] رو قرار بدی (مثلا تو برگه نوشته های سایتت)، دکمه کپی لینک کوتاه نمایش داده می‌شه. 📌

// Define the shortcode [RayaWp_copy_link] by RayaWp.ir
function RayaWp_copy_link_button_shortcode() {
    $short_link = wp_get_shortlink();
    $short_link = str_replace('www.', '', $short_link);

    $button_html = '<div style="text-align: center; margin-top: 20px;">
        <button class="copy-article-link" style="display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; font-size: 16px; background-color: #ffa500; color: #000; border: none; border-radius: 6px; cursor: pointer;">
            <span style="margin-left: 8px;">کپی لینک: ' . $short_link . '</span>
            <svg width="24px" height="24px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.94605 4.99995L13.2541 4.99995C14.173 5.00498 15.0524 5.37487 15.6986 6.02825C16.3449 6.68163 16.7051 7.56497 16.7001 8.48395V12.716C16.7051 13.6349 16.3449 14.5183 15.6986 15.1717C15.0524 15.825 14.173 16.1949 13.2541 16.2H8.94605C8.02707 16.1949 7.14773 15.825 6.50148 15.1717C5.85522 14.5183 5.495 13.6349 5.50005 12.716L5.50005 8.48495C5.49473 7.5658 5.85484 6.6822 6.50112 6.0286C7.1474 5.375 8.0269 5.00498 8.94605 4.99995Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10.1671 19H14.9371C17.4857 18.9709 19.5284 16.8816 19.5001 14.333V9.666" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </button>
    </div>';

    $script = '<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const copyButton = document.querySelector(".copy-article-link");
            if (copyButton) {
                copyButton.addEventListener("click", function (event) {
                    event.preventDefault();

                    const shortLink = "' . $short_link . '";
                    navigator.clipboard.writeText(shortLink)
                        .then(() => {
                            Swal.fire({
                                icon: "success",
                                title: "لینک کوتاه با موفقیت کپی شد!",
                                text: "اکنون می‌توانید لینک را در هر جایی که می‌خواهید Paste کنید.",
                                showConfirmButton: false,
                                timer: 2000
                            });
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: "error",
                                title: "خطا در کپی کردن لینک!",
                                text: err.toString()
                            });
                        });
                });
            }
        });
    </script>';

    return $button_html . $script;
}
add_shortcode('RayaWp_copy_link', 'RayaWp_copy_link_button_shortcode');

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

دکمه‌ای که ایجاد می‌شه هم خیلی جذاب و کاربرپسنده! طراحی ساده و جذابی داره. علاوه بر این، یک پیام پاپ‌آپ برای موفق بودن عملیات کپی لینک نمایش داده میشه. یعنی وقتی لینک با موفقیت کپی می‌شه، یه پیام به کاربر نشون داده می‌شه که مطمئن بشه لینک کپی شده. 😎

در مجموع این کار باعث می‌شه تجربه کاربری خیلی بهتر بشه و به اشتراک‌گذاری لینک‌ها هم ساده‌تر و سریع‌تر بشه. 🙌

توجه! اگه میخای متن دکمه فقط (کپی لینک) باشه و لینک کوتاه رو نشون ندی تا دکمه مینیمال تر و جمع و جورتر باشه کافیه در کد بالا در خط 8 قسمت ‘ . $short_link . ‘ رو حذف کنی یعنی کد به این شکل بشه :

<span style="margin-left: 8px;">کپی لینک</span>

مرسی که تا آخر این پست منو با نگاه قشنگت همراهی کردی! 😊 اگر پیشنهاد یا سوالی داشتی، حتما توی دیدگاه‌ها بنویس و من با کمال میل جواب میدم! 📝 خوشحال میشم کمکت کنم. فعلن تا یه آموزش جذاب و خاص دیگه، خدانگهدارررررررر! ✌️😄

4.4/5 - (7 امتیاز)

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

ارسال نظر ( 2 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود
  1. فرهاد کاربر مهمان
    4 هفته پیش

    مرسی از آموزش های عالی تون😊👌دمتون گرم یه دونه اید

    1. سعید مدیر سایت
      4 هفته پیش
      @ در پاسخ به فرهاد

      لطف داری فرهاد جان 🙂
      مرسی از فیدبک مثبتت

📖 آنچه خواهید خواند

Toggle
    🔥
    42 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

    عاشق یادگیری وردپرس و کلن طراحی سایت هستم. سعی میکنم دانش و تجربیات خودمو در رایا وردپرس باهاتون به اشتراک بزارم :)

    مقالات بیشتر
    بستن