آموزش ساخت شورت کد در وردپرس و استفاده از آن

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

شورت کد ها چه هستند؟

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

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

شورت‌ کدها در وردپرس از نسخه 2.5 معرفی شدند و به توسعه‌دهندگان این امکان را می‌دهند که عملکردهای پیچیده را در پشت پرده به راحتی در اختیار کاربران قرار دهند. برای مثال، به جای وارد کردن یک کد طولانی HTML یا PHP، تنها کافی است یک شورت‌کد مانند [sample-shortcode id="123"] را وارد کنید.

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

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

آشنایی با ساختار شورت کد ها در وردپرس

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

نام شورت کد (Shortcode Name)

اسم شورت‌کد، همانطور که از نام آن پیداست، به شورت‌کد هویت می‌دهد و مشخص می‌کند که کدام عملکرد یا ویژگی باید فعال شود. اسم شورت‌کد معمولاً بین علامت‌های مربعی [] قرار می‌گیرد و ساده است. به عنوان مثال، شورت‌کدی که برای نمایش گالری تصاویر استفاده می‌شود ممکن است به این صورت باشد:

[gallery]

در اینجا، کلمه gallery اسم شورت‌کد است که وردپرس آن را شناسایی کرده و عملکرد مربوط به گالری تصاویر را اجرا می‌کند.

ویژگی ها (Shortcode Attributes)

ویژگی‌ها (Attributes) به شما این امکان را می‌دهند که رفتار شورت‌ کد را بیشتر کنترل کنید. هر شورت‌ کد می‌تواند دارای ویژگی‌هایی باشد که مقدارهای خاصی را به آن اختصاص می‌دهد. این ویژگی‌ها معمولاً در داخل شورت‌ کد و بعد از اسم آن قرار می‌گیرند و با استفاده از علامت مساوی = مشخص می‌شوند.

به عنوان مثال، شورت‌کد گالری تصاویر ممکن است شامل ویژگی ids باشد که شناسه‌های تصاویر را مشخص می‌کند:

[gallery ids="1,2,3,4"]

در اینجا، ویژگی ids به شورت‌کد می‌گوید که تصاویر با شناسه‌های ۱، ۲، ۳ و ۴ باید در گالری نمایش داده شوند.

محتوای بین شورت‌ کد (Shortcode Content)

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

به عنوان مثال، شورت‌کد می‌تواند به این صورت باشد:

[caption]This is a simple description[/caption]

در اینجا، متن “This is a simple description” بین شورت‌کد قرار گرفته و در نهایت به شورت‌کد اضافه می‌شود تا در صفحه یا نوشته نمایش داده شود

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

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

استفاده از شورت‌کد داخل محتوای نوشته‌ها و صفحات

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

برای استفاده از شورت‌ کد در محتوای یک نوشته یا صفحه، کافی است شورت‌ کد مورد نظر را در ویرایشگر متن وارد کنید. به عنوان مثال، فرض کنید شما می‌خواهید یک گالری تصاویر از افزونه خاصی در نوشته‌تان نمایش دهید. شورت‌ کد مربوط به گالری تصاویر ممکن است به شکل زیر باشد:

[gallery ids="1,2,3,4"]

در این مثال، با قرار دادن شورت‌کد در متن نوشته یا صفحه خود، تصاویر با شناسه‌های ۱ تا ۴ در قالب یک گالری نمایش داده می‌شوند. پس از انتشار، این شورت‌کد به صورت خودکار به محتوای گالری تبدیل می‌شود.

برای استفاده از شورت‌کد در ویرایشگر بلوک‌ها (Gutenberg)، تنها کافی است یک بلوک “شورت‌کد” اضافه کرده و شورت‌کد مورد نظر را در آن وارد کنید.

استفاده از شورت‌کد داخل کدهای پوسته

گاهی اوقات ممکن است بخواهید شورت‌کدها را مستقیماً داخل فایل‌های کد پوسته وردپرس (Theme) قرار دهید. این کار زمانی مفید است که بخواهید یک ویژگی خاص را در بخش‌هایی مانند هدر، فوتر یا سایدبار نمایش دهید. برای این کار، از تابع do_shortcode() در PHP استفاده می‌کنید.

به عنوان مثال، فرض کنید می‌خواهید شورت‌کدی را برای نمایش یک فرم تماس در فوتر سایت قرار دهید. شورت‌ کد فرم تماس ممکن است به این شکل باشد:

[sample-shortcode id="123"]

برای قرار دادن این شورت‌کد در فایل‌های پوسته، مانند footer.php، باید از تابع do_shortcode() به صورت زیر استفاده کنید:

<?php echo do_shortcode('[sample-shortcode id="123"]'); ?>

در اینجا، با استفاده از تابع do_shortcode(), شورت‌کد [sample-shortcode id="123"] در فایل footer.php قرار داده شده و در نتیجه، فرم تماس در فوتر سایت شما نمایش داده می‌شود.

همچنین می‌توانید شورت‌کدها را در سایر فایل‌های پوسته مانند single.php, page.php, و header.php با همین روش وارد کنید تا ویژگی‌های خاصی را در مکان‌های مختلف سایت به نمایش بگذارید.

این روش برای توسعه‌دهندگانی که می‌خواهند قابلیت‌های شورت‌کد را در قالب‌ها یا درون کدهای PHP سایت خود ادغام کنند بسیار مفید است.

آموزش ساخت شورت‌کد اختصاصی در وردپرس

وردپرس به شما این امکان را می‌دهد که شورت کدهای اختصاصی خود را ایجاد کنید و عملکردهای خاصی را به سایت اضافه کنید. با استفاده از توابع PHP و هوک‌های وردپرس، می‌توانید شورت کدهایی بسازید که ویژگی‌ها (Attributes) و محتوا (Content) را دریافت کرده و خروجی دلخواهی تولید کنند. در این بخش، نحوه ساخت شورت کد اختصاصی به طور کامل توضیح داده می‌شود.

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

مثال عملی ساخت Shortcode در وردپرس

در این مثال، شورت‌کدی به نام [alert] تعریف می‌کنیم که:

• یک ویژگی به نام type دریافت می‌کند که مقادیر آن می‌تواند error, success, یا warning باشد.
• محتوای داخل شورت‌کد به عنوان متن هشدار نمایش داده می‌شود.

کد PHP برای ساخت شورت‌کد Alert

کد زیر را در فایل functions.php قالب وردپرس خود قرار دهید:

function custom_alert_shortcode($atts, $content = null) {

    // Attributes default values
    $attributes = shortcode_atts(
        array(
            'type' => 'success', type attribute default value
        ),
        $atts
    );

    // Define class name based on type attribute
    $type = $attributes['type'];
    $class = '';

    switch ($type) {
        case 'error':
            $class = 'alert-error';
            break;
        case 'success':
            $class = 'alert-success';
            break;
        case 'warning':
            $class = 'alert-warning';
            break;
        default:
            $class = 'alert-success';
            break;
    }

    // Create shortcode output markup
    $output = '<div class="custom-alert ' . esc_attr($class) . '">';
    $output .= esc_html($content);
    $output .= '</div>';

    return $output;
}

// Regsiter shortcode
add_shortcode('alert', 'custom_alert_shortcode');

توضیحات کد

ویژگی‌ها (Attributes)

• با استفاده از تابع shortcode_atts، ویژگی type دریافت می‌شود. اگر مقداری برای این ویژگی مشخص نشده باشد، مقدار پیش‌فرض success در نظر گرفته می‌شود.
• کلاس CSS مربوط به نوع هشدار (alert-error, alert-success, alert-warning) بر اساس مقدار type تنظیم می‌شود.

محتوای شورت‌کد (Content)

• محتوای قرارگرفته بین شورت‌کد به متغیر $content اختصاص داده شده و داخل خروجی نمایش داده می‌شود.

ایمن‌سازی داده‌ها

• از توابع esc_attr و esc_html برای ایمن‌سازی کلاس‌ها و محتوای خروجی استفاده شده است.

استفاده از شورت‌کد Alert

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

برای نمایش هشدار موفقیت (Success):

[alert type="success"]Your Registration completed successfully[/alert]

برای نمایش هشدار خطا (Error):

[alert type="error"]This Email currently used by another user[/alert]

برای نمایش هشدار (Warning):

[alert type="warning"]Your password not strong enough[/alert]

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