نحوه ایجاد شورت کد Shortcode اختصاصی در وردپرس

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

چه چیزی شورت‌کد است؟

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

[shortcode_name param1="value1" param2="value2"]

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

چرا باید شورت‌کد اختصاصی بسازیم؟

شرکت‌های دارای وب‌سایت وردپرسی، اغلب نیازمند ساخت شورت‌کد‌های خاص برای:

• نمایش فرم‌های تماس
• افزودن محتوای پویا مثل نمایش آمار یا تاریخ
• نمایش دکمه‌های دانلود یا پرداخت
• افزودن ابزارهای ویدئویی یا موسیقی

در این موارد، ساخت شورت‌کد اختصاصی کاربرد بسیار مهمی دارد.

ساخت شورت‌کد در وردپرس: مراحل کلی

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

1. تعریف شورت‌کد با استفاده از add_shortcode

در وردپرس، از تابع add_shortcode برای تعریف شورت‌کد استفاده می‌شود. این تابع دو پارامتر دریافت می‌کند:

• نام شورت‌کد
• تابعی که محتوای نهایی را برگرداند

مثال ساده:

function my_custom_shortcode($atts) {
    $output = 'این یک شورت‌کد اختصاصی است.';
    return $output;
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

در این کد، تابع my_custom_shortcode با پارامترهای ورودی $atts (که شامل پارامترهای شورت‌کد است) محتوای خروجی را برگردانده و به وردپرس اعلام می‌کند که این شورت‌کد به نام my_shortcode وجود دارد.

2. پردازش پارامترها

در بسیاری از مواقع، شورت‌کد نیازمند پارامترهای ورودی است. برای مدیریت آنها، می‌توانید از تابع shortcode_atts استفاده کنید:

function my_custom_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => 'عنوان پیشفرض',
        'color' => 'blue'
    ), $atts);
    
    $output = '<h3 style="color: ' . esc_attr($atts['color']) . ';">' . esc_html($atts['title']) . '</h3>';
    return $output;
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

در این کد، تابع shortcode_atts پارامترهای ورودی را با مقادیر پیشفرض مقداردهی می‌کند. سپس محتوای خروجی با استفاده از esc_attr و esc_html برای امنیت در برابر XSS تضمین می‌شود.

3. افزودن محتوای پویا

برای نمایش محتوای پویا، می‌توانید از توابع وردپرس استفاده کنید:

function display_current_date_shortcode($atts) {
    $atts = shortcode_atts(array(
        'format' => 'Y-m-d'
    ), $atts);
    
    $date = date($atts['format']);
    return '<p>تاریخ کنونی: ' . esc_html($date) . '</p>';
}
add_shortcode('current_date', 'display_current_date_shortcode');

در این شورت‌کد، تاریخ کنونی با استفاده از تابع date در فرمت مشخص شده نمایش داده می‌شود.

نمونه‌های عملی

در ادامه، چند مثال از شورت‌کد‌های کاربردی در وردپرس آورده شده است:

1. نمایش فرم تماس

function contact_form_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => 'فرم تماس',
        'email' => ''
    ), $atts);
    
    $output = '<div class="contact-form">';
    $output .= '<h3>' . esc_html($atts['title']) . '</h3>';
    $output .= '<form action="#" method="post">';
    $output .= '<input type="email" name="email" placeholder="ایمیل شما"><br>';
    $output .= '<textarea name="message" placeholder="پیام شما"></textarea><br>';
    $output .= '<input type="submit" value="ارسال">';
    $output .= '</form></div>';
    
    return $output;
}
add_shortcode('contact_form', 'contact_form_shortcode');

این شورت‌کد یک فرم تماس ساده را نمایش می‌دهد. در صورتی که پارامتر email داده شود، می‌توان از آن برای پر کردن فیلد ایمیل استفاده کرد.

2. نمایش لینک دانلود

function download_link_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '',
        'text' => 'دانلود فایل'
    ), $atts);
    
    if (empty($atts['url'])) {
        return '<p>خطا: لینک دانلود مشخص نشده است.</p>';
    }
    
    $output = '<a href="' . esc_url($atts['url']) . '" target="_blank">' . esc_html($atts['text']) . '</a>';
    return $output;
}
add_shortcode('download_link', 'download_link_shortcode');

این شورت‌کد لینک دانلود را نمایش می‌دهد. اگر پارامتر url خالی باشد، یک پیام خطا نمایش داده می‌شود.

بهترین روش‌ها و نکات امنیتی

برای ایجاد شورت‌کد‌های امن و کارآمد، باید به نکات زیر توجه کنید:

1. استفاده از esc_html و esc_attr

همیشه از توابع esc_html و esc_attr برای امنیت در برابر XSS استفاده کنید:

• esc_html: برای افزودن محتوای متنی
• esc_attr: برای افزودن محتوای ویژگی‌های HTML

2. اعتبارسنجی پارامترها

قبل از استفاده از پارامترها، باید آنها را اعتبارسنجی کنید:

function validate_shortcode($atts) {
    $atts = shortcode_atts(array(
        'number' => 0,
        'type' => 'text'
    ), $atts);
    
    if (!is_numeric($atts['number'])) {
        return '<p>خطا: عدد وارد شده نامعتبر است.</p>';
    }
    
    if (!in_array($atts['type'], array('text', 'number', 'email'))) {
        return '<p>خطا: نوع وارد شده نامعتبر است.</p>';
    }
    
    return '<p>عدد: ' . esc_html($atts['number']) . ', نوع: ' . esc_html($atts['type']) . '</p>';
}
add_shortcode('validate_shortcode', 'validate_shortcode');

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

3. اضافه کردن CSS و JavaScript

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

function add_custom_css() {
    wp_enqueue_style('custom-shortcode-css', plugins_url('css/style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'add_custom_css');

در این کد، یک فایل CSS برای شورت‌کد‌های خاص بارگذاری می‌شود.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال