آموزش استفاده از کد کوتاه شورت کد در وردپرس 🧩 ( راهنمای جامع از صفر تا کدنویسی اختصاصی )

اگر حتی چند هفته با سیستم مدیریت محتوای وردپرس کار کرده باشید، قطعا با عبارت هایی که داخل دو کروشه قرار می گیرند ( مثل

یا [contact-form-7] ) برخورد کرده اید. به این تکه کدهای کوچک اما فوق العاده قدرتمند، کد کوتاه یا شورت کد ( Shortcode ) می گویند. شورت کدها در واقع میانبرهای جادویی وردپرس هستند که به شما اجازه می دهند بدون نوشتن حتی یک خط کد پیچیده PHP، جاوا اسکریپت یا HTML، امکانات پیشرفته ای مثل فرم های تماس، اسلایدرها، جداول قیمت گذاری و محصولات فروشگاهی را در هر نقطه ای از سایت خود نمایش دهید.

سرور مجازی فرانسه

اما تجربه به ما نشان داده است که بسیاری از وبمسترها در هنگام کار با این کدها با چالش های جدی روبرو می شوند؛ از کار نکردن شورت کد در ابزارک ها گرفته تا نمایش داده شدن خود کد به صورت متن عادی در صفحه سایت یا به هم ریختن چیدمان قالب هنگام کدنویسی اختصاصی! در این مقاله بسیار جامع و تجربی از مگ نگارنوین، قصد داریم آموزش استفاده از کد کوتاه شورت کد در وردپرس را از سطح مقدماتی ( در ویرایشگر کلاسیک و المنتور ) تا سطح پیشرفته ( استفاده در فایل های PHP قالب و ساخت شورت کد اختصاصی با PHP ۸.۴ ) به صورت قدم به قدم بررسی کنیم.

شورت کد ( Shortcode ) در وردپرس دقیقا چیست و چگونه کار می کند؟ 🧠

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

وقتی شما یک کد کوتاه مثل [my_products] را داخل متنی قرار می دهید، موتور پردازشگر وردپرس قبل از اینکه صفحه را به مرورگر کاربر بفرستد، آن کروشه را شناسایی می کند، به سراغ فایل های پشت صحنه ( در قالب یا افزونه ) می رود، تابع PHP مربوط به آن را اجرا می کند و خروجی نهایی HTML را جایگزین آن کروشه می نماید.

انواع کدهای کوتاه در وردپرس

به طور کلی در اکوسیستم وردپرس ( تا آخرین نسخه های آن یعنی وردپرس ۷.۱ )، ما با دو نوع شورت کد سر و کار داریم:

• 📌 شورت کدهای تکی یا خودبسته ( Self-closing Shortcodes ): این کدها نیازی به تگ پایانی ندارند و به تنهایی یک کار مشخص را انجام می دهند. مثلا کد [woocommerce_cart] که به محض قرار گرفتن در برگه، کل سبد خرید فروشگاه را بارگذاری می کند.
• 📌 شورت کدهای دو تایی یا محصور کننده ( Enclosing Shortcodes ): این کدها دقیقا شبیه به تگ های HTML عمل می کنند؛ یعنی یک تگ شروع دارند، محتوایی در وسط قرار می گیرد و در نهایت با یک اسلش بسته می شوند. برای مثال: [vip_content]این متن فقط برای اعضای ویژه قابل مشاهده است[/vip_content].

روش اول: آموزش استفاده از شورت کد در ویرایشگر کلاسیک وردپرس 📝

بسیاری از وبمسترهای حرفه ای و تولیدکنندگان محتوا در ایران همچنان به دلیل سرعت بالا و راحتی بی نظیر، از ویرایشگر کلاسیک ( Classic Editor ) استفاده می کنند. قرار دادن کد کوتاه در این ویرایشگر بسیار ساده است، اما یک قلق فنی بسیار مهم دارد که باید بدانید:

سرور فرانسه

1. ابتدا کد کوتاه مورد نظر خود را از تنظیمات افزونه مربوطه ( مثلا افزونه فرم ساز یا اسلایدر ) به طور کامل به همراه کروشه های باز و بسته [ ] کپی کنید.
2. وارد بخش نوشته ها یا برگه ها در پیشخوان وردپرس شوید و صفحه مورد نظر را باز کنید.
3. نشانگر ماوس را دقیقا در خطی که می خواهید خروجی کد نمایش داده شود قرار دهید و کد را Paste کنید.

⚠️ نکته طلایی در ویرایشگر کلاسیک ( جلوگیری از تداخل تگ ها )

وقتی شما یک شورت کد را از سایت های دیگر یا حتی از داخل پیشخوان کپی می کنید و در تب “دیداری” ( Visual ) ویرایشگر کلاسیک پیست می کنید، گاهی اوقات استایل های مخفی ( مثل تگ های <span>، <code> یا فونت های اضافی ) همراه با کد کپی می شوند. این موضوع باعث می شود خروجی شورت کد در سایت به هم بریزد و داخل یک کادر خاکستری رنگ زشت قرار بگیرد!

راه حل تجربی: همیشه هنگام قرار دادن شورت کدهای مهم، ویرایشگر کلاسیک را از گوشه بالا سمت چپ روی تب “متن” ( Text ) قرار دهید و کد را آنجا پیست کنید تا مطمئن شوید هیچ تگ HTML مزاحمی دور کروشه های شما قرار نگرفته است.

روش دوم: آموزش قرار دادن کد کوتاه در صفحه ساز المنتور ( Elementor ) 🎨

اگر برای طراحی صفحات فرود ( Landing Pages ) یا برگه های اصلی سایت خود از صفحه ساز قدرتمند المنتور استفاده می کنید، بهترین راه برای اجرای شورت کدها استفاده از المان اختصاصی خود المنتور است:

1. برگه مورد نظر خود را با کلیک روی دکمه “ویرایش با المنتور” باز کنید.
2. در پنل ابزارهای سمت راست، در کادر جستجو عبارت کد کوتاه یا به انگلیسی Shortcode را تایپ کنید.
3. ابزارک کد کوتاه ( که آیکونی شبیه به دو کروشه [/] دارد ) را بگیرید و به داخل بخش ( کانتینر یا سکشن ) مورد نظر خود در صفحه بکشید و رها کنید ( Drag & Drop ).
4. در کادر باز شده در سمت راست، شورت کد خود را وارد کنید.
5. به محض وارد کردن کد، المنتور در همان لحظه پیش نمایش زنده ( Live Preview ) خروجی را در صفحه به شما نشان می دهد. در نهایت روی دکمه بروزرسانی ( Update ) کلیک کنید.

💡 توصیه فنی: هرگز در المنتور، شورت کدها را داخل ابزارک “ویرایشگر متن” قرار ندهید؛ زیرا ویرایشگر متن به صورت خودکار تگ های پاراگراف <p> به دور کد اضافه می کند که می تواند فاصله های عمودی ناخواسته در طراحی شما ایجاد کند. همیشه از همان ویجت اختصاصی کد کوتاه استفاده کنید.

روش سوم: استفاده از شورت کد در ویرایشگر گوتنبرگ ( بلوک ها ) 🧱

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

1. در صفحه ویرایش برگه، روی علامت مثبت (+) کلیک کنید تا لیست بلوک ها باز شود.
2. عبارت کد کوتاه یا Shortcode را جستجو کرده و روی آن کلیک کنید.
3. کد خود را در کادر مخصوص وارد کرده و صفحه را ذخیره کنید.

روش چهارم: اجرای شورت کد در ابزارک ها ( سایدبار و فوتر ) و منوها 📌

گاهی اوقات شما نیاز دارید یک فرم عضویت در خبرنامه، یک بنر تبلیغاتی پویا یا سبد خرید کوچک را در نوار کناری سایت ( Sidebar ) یا در بخش پابرگ ( Footer ) قرار دهید.

1. از پیشخوان وردپرس به مسیر نمایش > ابزارک ها ( Widgets ) بروید.
2. یک ابزارک از نوع “متن” ( Text ) یا “HTML سفارشی” را به ناحیه سایدبار یا فوتر خود اضافه کنید.
3. شورت کد خود را داخل آن قرار داده و ذخیره کنید.

حل مشکل کار نکردن شورت کد در ابزارک ها و منوهای قالب

در برخی از قالب های قدیمی یا اختصاصی، ممکن است ببینید که شورت کد در ابزارک ها اجرا نمی شود و دقیقا خود متن [shortcode] در فوتر سایت نمایش داده می شود! برای فعال سازی اجباری پردازش شورت کدها در ابزارک های متنی و حتی در عنوان منوهای سایت، کافی است این دو خط کد طلایی را به انتهای فایل functions.php قالب خود ( ترجیحا در چایلد تم ) اضافه کنید:

// فعال سازی شورت کد در ابزارک های متنی وردپرس
add_filter( 'widget_text', 'do_shortcode' );

// فعال سازی شورت کد در فهرست ها ( منوهای سایت )
add_filter( 'wp_nav_menu_items', 'do_shortcode' );

روش پنجم: اجرای کد کوتاه در فایل های PHP قالب ( تابع do_shortcode ) 💻

این بخش مخصوص طراحان سایت و کسانی است که می خواهند دست به کد شوند! فرض کنید می خواهید یک اسلایدر یا یک جدول اطلاع رسانی را دقیقا در زیر هدر سایت ( در فایل header.php ) یا در انتهای تمام مقالات ( در فایل single.php ) قرار دهید؛ جایی که به ویرایشگر وردپرس یا المنتور دسترسی ندارید.

اگر شورت کد را مستقیما در فایل PHP بنویسید، سایت شما با خطای Syntax Error مواجه شده و بالا نمی آید. برای این کار، وردپرس تابعی فوق العاده به نام do_shortcode() در اختیار ما قرار داده است. شما باید کد کوتاه خود را به صورت زیر فراخوانی کنید:

<?php echo do_shortcode( '[your_shortcode_here]' ); ?>

و اگر شورت کد شما از نوع دو تایی ( محصور کننده ) است، به این شکل در فایل PHP نوشته می شود:

<?php echo do_shortcode( '[box_style]' . $my_text . '[/box_style]' ); ?>

آموزش ساخت شورت کد اختصاصی در وردپرس ( بدون نیاز به افزونه! ) 🛠️

چرا برای هر کار کوچکی یک افزونه نصب کنیم و منابع سرور را درگیر نماییم؟ بیایید به عنوان یک برنامه نویس حرفه ای، خودمان کد کوتاه بسازیم! کدهای زیر کاملا با آخرین نسخه زبان برنامه نویسی یعنی PHP 8.4 سازگار و بهینه شده اند. تمام این کدها باید در فایل functions.php قالب شما قرار بگیرند.

مثال ۱: ساخت شورت کد ساده ( نمایش سال جاری یا باکس تبلیغاتی ثابت )

فرض کنید در ده ها مقاله مختلف، یک متن تبلیغاتی یا شماره تلفن پشتیبانی دارید که هر چند ماه یک بار تغییر می کند. به جای اینکه هر بار صدها مقاله را دانه به دانه ویرایش کنید، یک شورت کد به نام [negar_promo] می سازیم:

function negarnovin_custom_promo_shortcode() {
    $output = '<div class="custom-promo-box" style="background:#f0f8ff; padding:15px; border-right:4px solid #0073aa; border-radius:5px;">';
    $output .= '<strong>پیشنهاد ویژه نگارنوین:</strong> برای خرید هاست پرسرعت لایت اسپید با ۲۰ درصد تخفیف از کد NEGAR20 استفاده کنید!';
    $output .= '</div>';
    
    return $output;
}
add_shortcode( 'negar_promo', 'negarnovin_custom_promo_shortcode' );

حالا هر جا در نوشته های خود عبارت [negar_promo] را قرار دهید، این باکس زیبا نمایش داده می شود و هر زمان که بخواهید متن را عوض کنید، فقط همین چند خط کد را در فایل فانکشن ویرایش می کنید و در کل سایت به صورت آنی تغییر می کند!

مثال ۲: ساخت شورت کد پیشرفته با قابلیت دریافت پارامتر ( Attributes )

حالا بیایید حرفه ای تر شویم! می خواهیم شورت کدی برای ساخت دکمه دانلود یا خرید بسازیم که در هر مقاله بتوانیم لینک، متن و رنگ متفاوتی به آن بدهیم ( مثلا: [custom_btn url="https://negarnovin.com" text="خرید هاست" color="green"] ). برای این کار از تابع shortcode_atts استفاده می کنیم:

function negarnovin_dynamic_button_shortcode( $atts ) {
    // تعریف مقادیر پیش فرض در صورتی که کاربر آن ها را وارد نکند
    $attributes = shortcode_atts( array(
        'url'   => 'https://negarnovin.com',
        'text'  => 'کلیک کنید',
        'color' => '#0056b3'
    ), $atts );

    // ایمن سازی خروجی ها برای جلوگیری از حملات XSS
    $url   = esc_url( $attributes['url'] );
    $text  = esc_html( $attributes['text'] );
    $color = esc_attr( $attributes['color'] );

    return '<a href="' . $url . '" style="background-color:' . $color . '; color:#fff; padding:10px 20px; text-decoration:none; border-radius:4px; display:inline-block;" target="_blank">' . $text . '</a>';
}
add_shortcode( 'custom_btn', 'negarnovin_dynamic_button_shortcode' );

🛑 قانون طلایی برنامه نویسان: هرگز در شورت کد از echo استفاده نکنید!

یک اشتباه بسیار رایج که حتی برنامه نویسان با تجربه هم گاهی مرتکب می شوند این است که در داخل تابع شورت کد، به جای دستور return از دستور echo استفاده می کنند. اگر در تابع خود از echo استفاده کنید، خروجی شورت کد دقیقا در بالاترین نقطه صفحه ( قبل از کل متن مقاله ) چاپ می شود، حتی اگر شما شورت کد را در خط آخر مقاله گذاشته باشید! پس همیشه خروجی را داخل یک متغیر بریزید ( یا از ob_start() و ob_get_clean() استفاده کنید ) و در انتها آن را return نمایید.

جدول کاربردی ترین شورت کدهای آماده در ووکامرس 🛒

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

عیب یابی تخصصی: چرا شورت کد کار نمی کند و به صورت متن نمایش داده می شود؟ 🔧

اگر شورت کدی را در برگه قرار داده اید اما به جای دیدن فرم یا اسلایدر، دقیقا خود عبارت [shortcode] را در صفحه سایت می بینید، مشکل از یکی از ۴ مورد زیر است:

1. غیرفعال بودن افزونه مربوطه: شورت کدها به خودی خود معنی ندارند. اگر افزونه Contact Form ۷ را غیرفعال یا پاک کرده باشید، وردپرس دیگر نمی داند کد [contact-form-7] چیست و آن را مثل یک متن عادی چاپ می کند.
2. مشکل علامت های کوتیشن کج ( Curly Quotes ): این مورد یکی از مخفی ترین باگ هاست! وقتی شورت کدی که دارای پارامتر است را از یک سایت دیگر کپی می کنید، گاهی علامت های دابل کوتیشن به صورت کج یا فارسی ” “ کپی می شوند. پردازشگر وردپرس فقط کوتیشن های صاف استاندارد " " را می فهمد. حتما در تب Text ویرایشگر، کوتیشن ها را پاک کرده و با کیبورد انگلیسی خودتان دوباره تایپ کنید.
3. اشتباه تایپی در نام شورت کد: کوچک ترین فاصله اضافی بعد از کروشه باز ( مثلا [ gallery] به جای

   

   ) باعث از کار افتادن کامل کد می شود.

4. کش شدن صفحه در مرورگر یا سرور: گاهی افزونه را تازه فعال کرده اید اما صفحه از کش خوانده می شود. یک بار کش سایت را از طریق افزونه LiteSpeed Cache پاک ( Purge ) کنید.

تاثیر شورت کدها بر سرعت سایت و نقش سرورهای قدرتمند نگارنوین 🚀

یک واقعیت فنی وجود دارد که کمتر کسی به شما می گوید: هر شورت کدی که در صفحه قرار می دهید، در واقع یک یا چند درخواست ( Query ) جدید به دیتابیس MySQL و پردازشگر PHP ارسال می کند. اگر در صفحه اصلی سایت خود از ۱۰ شورت کد سنگین ووکامرس برای نمایش دسته بندی های مختلف محصولات استفاده کنید، روی یک هاست معمولی و ضعیف، زمان بارگذاری سایت ( TTFB ) به شدت افزایش می یابد.

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

ترکیب نسخه جدید و پرسرعت PHP 8.4 با افزونه کش لایت اسپید در هاست های نگارنوین، به شما این امکان را می دهد که حتی خروجی شورت کدهای سنگین را با تکنولوژی ESI کش کنید تا صفحات سایت شما در کسری از ثانیه باز شوند. علاوه بر این، فایروال هوشمند Imunify360 به طور ۲۴ ساعته کدهای PHP و شورت کدهای سایت شما را رصد می کند تا هیچ گونه آسیب پذیری امنیتی ( مثل SQL Injection یا XSS ) تهدیدتان نکند.

سوالات متداول درباره کدهای کوتاه وردپرس ( FAQ ) 💡

۱. اگر قالب سایتم را عوض کنم، شورت کدهایی که در مقالات گذاشته ام خراب می شوند؟

بله، اگر آن شورت کدها جزو امکانات داخلی قالب قبلی شما بوده باشند ( یا آن ها را در فایل functions.php قالب قبلی نوشته باشید )، با تغییر قالب از کار می افتند و به صورت متن زشت در مقالات نمایش داده می شوند. برای جلوگیری از این مشکل، همیشه کدهای اختصاصی خود را در یک افزونه جانبی کوچک یا افزونه هایی مثل Code Snippets قرار دهید تا مستقل از قالب باشند.

۲. چگونه شورت کدهای به جا مانده از افزونه های قدیمی را از کل مقالات سایت پاک کنیم؟

اگر افزونه ای را حذف کرده اید و کد آن در صدها مقاله باقی مانده است، نیازی نیست مقالات را یکی یکی ویرایش کنید. کافی است کد add_shortcode( 'old_shortcode_name', '__return_false' ); را در فایل فانکشن قالب قرار دهید تا وردپرس خروجی آن شورت کد را در کل سایت نامرئی و خالی کند!

۳. آیا می توانیم یک شورت کد را داخل یک شورت کد دیگر قرار دهیم ( Nested Shortcodes )؟

به صورت پیش فرض، وردپرس شورت کدهای تو در تو را پردازش نمی کند؛ مگر اینکه برنامه نویس آن شورت کد، در داخل تابع اصلی خود، متغیر محتوا ( $content ) را دوباره از تابع do_shortcode($content) عبور داده باشد.

۴. آیا استفاده از شورت کد برای سئو ( SEO ) سایت ضرر دارد؟

خیر، به هیچ وجه! ربات های خزنده گوگل و موتورهای هوش مصنوعی، کدهای کروشه ای [ ] شما را نمی بینند؛ آن ها دقیقا خروجی نهایی HTML ( یعنی متن ها، تصاویر و محصولات تولید شده توسط شورت کد ) را می بینند و ایندکس می کنند.

جمع بندی و منبع

کدهای کوتاه یا شورت کدها، یکی از ستون های اصلی انعطاف پذیری در وردپرس هستند. چه بخواهید یک فرم ساده را در ویرایشگر کلاسیک و المنتور جایگذاری کنید و چه بخواهید به عنوان یک توسعه دهنده، ماژول های داینامیک با PHP بنویسید، تسلط بر شورت کدها سرعت کار شما را چندین برابر می کند. همیشه به یاد داشته باشید که در هنگام کدنویسی اختصاصی از دستور return به جای echo استفاده کنید و برای حفظ سرعت لود شورت کدهای فروشگاهی، سایت خود را روی سرورهای بهینه سازی شده با وب سرور لایت اسپید میزبانی نمایید.

شما بیشتر از چه شورت کدهایی در سایت وردپرسی خود استفاده می کنید؟ اگر در اجرای یک کد کوتاه خاص یا نوشتن تابع PHP آن با خطایی روبرو شده اید، کد خود را در بخش نظرات همین مقاله ارسال کنید تا برنامه نویسان ارشد ما در سریع ترین زمان ممکن آن را برای شما عیب یابی کنند.

منبع آموزشی: نگارنوین ( negarnovin.com )