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

شورت کدها (Shortcodes) میانبرهایی کاربردی در وردپرس هستند که به شما اجازه می‌دهند المان‌های پیچیده، توابع محاسباتی یا محتوای پویا را بدون نیاز به نوشتن مستقیم کدهای HTML یا PHP در ویرایشگر گوتنبرگ و المنتور درج کنید. با یادگیری برنامه‌نویسی شورت کد، کنترل کاملی روی نحوه نمایش داده‌ها پیدا می‌کنید و کدنویسی سایت خود را به‌شدت تمیز و بهینه نگه‌می‌دارید.

شورت کد وردپرس چیست و چگونه کار می‌کند؟

شورت کد وردپرس یک متد یا تابع PHP است که با یک قلاب (Hook) به هسته وردپرس متصل شده و یک عبارت کروشه‌ای مانند [shortcode] را به خروجی پردازش‌شده HTML تبدیل می‌کند. این مکانیسم امنیت وردپرس را حفظ کرده و مانع اجرای مستقیم کدهای خطرناک در ویرایشگر متنی می‌شود.

وقتی وردپرس محتوای یک برگه یا نوشته را رندر می‌کند، موتور تجزیه‌کننده (Shortcode API) کلمات داخل کروشه را جستجو کرده و در صورت مطابقت با توابع ثبت‌شده، تابع مربوطه را اجرا و خروجی متنی یا کدهای تگ‌های ساختاری HTML را جایگزین همان شورت کد می‌کند.

مراحل ساخت شورت کد ساده در وردپرس

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

1. وارد بخش مدیریت وردپرس شده و از مسیر نمایش > ویرایشگر پرونده پوسته فایل functions.php را باز کنید (یا فایل پلاگین اختصاصی خود را ویرایش کنید).
2. یک تابع PHP تعریف کنید که محتوای مورد نظر شما را باز می‌گرداند.
3. تابع ساخته‌شده را با استفاده از تابع add_shortcode() در سیستم ثبت کنید.
4. شورت کد را در نوشته یا برگه مورد نظر خود تست کنید.

نمونه کد یک شورت کد ساده:

function my_custom_subscribe_notice() {
    $output = '<div class="subscribe-box" style="background:#eef6ff; padding:15px; border-radius:5px;">';
    $output .= '<p style="margin:0;">برای دریافت آخرین اخبار، در خبرنامه ما عضو شوید!</p>';
    $output .= '</div>';
    
    return $output;
}
add_shortcode('subscribe_box', 'my_custom_subscribe_notice');

حالا اگر عبارت [subscribe_box] را در هرجای نوشته قرار دهید، باکس فوق به کاربر نمایش داده می‌شود.

ساخت شورت کد با ویژگی (Attributes) و پارامترهای پویا

ویژگی‌ها یا Attributes به شما امکان می‌دهند پارامترهای متغیری مانند رنگ، عنوان، یا تعداد نمایش پست‌ها را به شورت کد پاس دهید تا رفتار آن به‌صورت پویا تغییر کند. این کار توسط تابع shortcode_atts انجام می‌شود.

فرض کنید می‌خواهید دکمه‌ای بسازید که لینک و متن آن در هر نوشته متفاوت باشد. کد زیر این قابلیت را پیاده‌سازی می‌کند:

function custom_button_shortcode($atts) {
    // تنظیم مقادیر پیش‌فرض و ادغام با مقادیر ورودی کاربر
    $atts = shortcode_atts(
        array(
            'text'  => 'کلیک کنید',
            'url'   => '#',
            'color' => '#2271b1',
        ), 
        $atts, 
        'custom_button'
    );

    // ایمن‌سازی مقادیر ورودی
    $url   = esc_url($atts['url']);
    $text  = esc_html($atts['text']);
    $color = sanitize_hex_color($atts['color']);

    return sprintf(
        '<a href="%s" style="background-color:%s; color:#fff; padding:10px 20px; text-decoration:none; border-radius:4px; display:inline-block;">%s</a>',
        $url,
        $color,
        $text
    );
}
add_shortcode('custom_button', 'custom_button_shortcode');

نحوه استفاده از این شورت کد در ویرایشگر:

[custom_button text="دانلود فایل" url="https://example.com/file.zip" color="#46b450"]

ساخت شورت کد محتوادار (Enclosing Shortcode)

گاهی نیاز است که شورت کد، کادري دور بخشی از محتوای درون ویرایشگر ایجاد کند. به این مدل، شورت کد محتوادار یا دوتایی گفته می‌شود که شامل یک تگ باز و یک تگ بستن است: [my_box]محتوای درون باکس[/my_box].

function content_box_shortcode($atts, $content = null) {
    // پردازش شورت کدهای احتمالی موجود در داخل محتوا
    $content = do_shortcode($content);

    return '<div style="border: 2px dashed #2271b1; padding: 15px; background: #f9f9f9; border-radius: 8px;">' . $content . '</div>';
}
add_shortcode('content_box', 'content_box_shortcode');

نکته کلیدی: استفاده از تابع do_shortcode($content) در داخل تابع باعث می‌شود اگر کاربر داخل شورت کد شما از شورت کد دیگری استفاده کرد، آن شورت کد نیز به درستی پردازش و اجرا شود.

جدول مقایسه انواع شورت کد در وردپرس

۳ نکته تخصصی و اشتباهات متداول در کدنویسی شورت کد

بسیاری از توسعه‌دهندگان تازه‌کار در زمان توسعه قطعه کدهای وردپرس مرتکب اشتباهاتی می‌شوند که باعث برهم خوردن چیدمان یا خطاهای امنیتی می‌شود. در ادامه ۳ نکته پیشرفته را بررسی می‌کنیم:

۱. عدم استفاده مستقیم از echo و بکارگیری Output Buffering

هرگز در تابع شورت کد از echo استفاده نکنید. اگر از دستور چاپ مستقیم استفاده کنید، محتوای شورت کد به‌جای قرار گرفتن در محل دقیق خود، در بالاترین بخش صفحه سایت قرار می‌گیرد! اما اگر قالبی دارید که ناچار به چاپ مستقیم است (مثلاً فراخوانی یک فایل تمپلیت)، از بافر خروجی PHP استفاده کنید:

function complex_template_shortcode() {
    ob_start(); // شروع بافر
    
    // فراخوانی فایل یا توابعی که echo می‌کنند
    include( get_stylesheet_directory() . '/template-parts/my-form.php' );
    
    return ob_get_clean(); // دریافت محتوا و خالی کردن بافر
}
add_shortcode('my_complex_form', 'complex_template_shortcode');

۲. امنیت و فراردهی داده‌ها (Data Escaping)

همواره ویژگی‌های ورودی کاربر را پیش از رندر پاکسازی کنید. اگر شورت کد شما اطلاعاتی را از دیتابیس یا یک سرویس REST API وردپرس دریافت می‌کند، حتماً از توابعی نظیر esc_html()، esc_attr() و esc_url() جهت جلوگیری از حملات XSS استفاده کنید.

۳. تداخل نام‌گذاری (Prefixing)

از نام‌های عمومی مانند [button] یا [box] استفاده نکنید؛ زیرا ممکن است توسط افزونه‌های دیگر ثبت شده باشند و باعث تداخل گردند. همیشه یک پیشوند اختصاصی مثل [mycompany_button] قرار دهید. مثلاً افزونه‌های قدرتمندی مانند افزونه دیجیتس وردپرس برای جلوگیری از تداخل تمام شورت کدهای خود را با پیشوندهای یکتا نام‌گذاری می‌کنند.

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

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