کاربرد URL صفحات وردپرس در ساخت دکمه سفارشی

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

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

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

سپس باید یک دکمه سفارشی در ویرایشگر بلوک وردپرس طراحی کنیم. برای اینکه این دکمه لینک به صفحات داخلی وردپرس داشته باشد، باید بتوانیم URL صفحات را به دکمه‌ها اضافه کنیم. برای این کار از روش‌های مختلفی می‌توان بهره برد که در اینجا روی استفاده از جاوااسکریپت و React در ویرایشگر بلوک تمرکز خواهیم کرد.

در مرحله بعد، کد مورد نظر را اضافه می‌کنیم و در نهایت هر خط کد را به صورت مختصر و مفید توضیح می‌دهیم.

کد دکمه سفارشی با URL صفحات

<!-- Add to functions.php -->
wp.blocks.registerBlockType('my-custom/button', {
    title: 'Button',
    icon: 'button',
    category: 'common',
    edit: function(props) {
        return (
            <button 
                onClick={() => {
                    let link = prompt('Enter the page URL:');
                    if(link) {
                        window.location.href = link;
                    }
                }}
            >Click Me!</button>
        );
    },
    save: function(props) {
        return (
            <button>Click Me!</button>
        );
    }
});

توضیح خط به خط کد: