شورت کد وردپرس چیست؟ آموزش کامل ساخت و استفاده از Shortcode (با مثال) SMS.ir


طبق گزارش W3Techs در سال ۲۰۲۵، وردپرس میزبان بیش از ۴۳٪ از کل وب‌سایت‌های جهان است. با‌وجوداین گستردگی، افزودن قابلیت‌های پویا مانند گالری‌های حرفه‌ای یا فرم‌های تماس، همچنان برای بسیاری از مدیران سایت یک چالش فنی به حساب می‌آید. راه‌حل وردپرس برای این موضوع، ابزاری به نام شورت‌کد (Shortcode) است؛ کدهای کوتاهی که به‌عنوان میانبرهایی قدرتمند برای اجرای توابع پیچیده عمل می‌کنند. راهنمای پیش رو، به‌طور جامع به بررسی شورت‌کدها، از مفهوم اولیه تا ساخت نمونه‌های سفارشی، می‌پردازد. مطالعه ادامه مطلب، روشی را آشکار می‌سازد که افزودن امکانات پیشرفته به سایت را به سادگیِ نوشتن یک کلمه کوتاه می‌کند. 

شورت‌کد وردپرس چیست؟ (تعریف ساده و کاربردی)

شورت‌کد وردپرس یک کد میانبر یا برچسبی خاص است که امکان درج توابع پیچیده یا محتوای از پیش تعریف‌شده را در نوشته‌ها، برگه‌ها، ابزارک‌ها و دیگر بخش‌های سایت فراهم می‌آورد. برای مثال: به‌جای کپی کردن کد طولانی HTML برای نمایش یک ویدیو، کافی است عبارت ساده‌ای مانند {video} تایپ شود. وردپرس به‌طور خودکار برچسب را شناسایی کرده و خروجی کامل و صحیح را به کاربر نمایش می‌دهد.

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

شورت کد؛ یک میانبر برای درج توابع پیشرفته در سایتشورت کد؛ یک میانبر برای درج توابع پیشرفته در سایت

چرا شورت‌کدها به وجود آمدند؟ (نگاهی به Shortcode API)

شورت‌کدها اولین بار در نسخه ۲.۵ وردپرس برای حل یک مشکل اساسی معرفی شدند: امنیت و سادگی!

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

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

جعبه ابزار شورت‌کدهای وردپرس؛ آشنایی با انواع پیش‌فرض و سفارشی

شورت‌کدها در وردپرس به‌طور کلی به سه دسته اصلی تقسیم می‌شوند که هر کدام منبع و کاربرد متفاوتی دارند:

  • شورت‌کدهای داخلی وردپرس (Built-in): این دسته به‌صورت پیش‌فرض در هسته وردپرس وجود دارند. برای مثال، شورت‌کد گالری وردپرس با استفاده از {gallery} امکان ساخت یک گالری تصاویر زیبا را به‌سادگی فراهم می‌کند. شورت‌کدهایی مانند {audio}، {video} و {caption} نیز در همین گروه قرار می‌گیرند.
  • شورت‌کدهای افزونه‌ها: بسیاری از افزونه‌های محبوب مانند فرم‌سازها یا افزونه دیجیتس (Digits) برای نمایش فرم ورود با شماره موبایل، از شورت‌کدهای اختصاصی برای نمایش خروجی خود در بخش‌های مختلف سایت استفاده می‌کنند.
  • شورت‌کدهای سفارشی (Custom): این شورت‌کدها توسط مدیر سایت یا توسعه‌دهنده برای پاسخ به نیازهای کاملا اختصاصی یک وب‌سایت ساخته می‌شوند.

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

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

آموزش قدم‌به‌قدم استفاده از شورت‌کد (در گوتنبرگ، کلاسیک و ابزارک‌ها)

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

در ویرایشگر کلاسیک، شورت‌کد مستقیما مانند یک متن عادی در محتوا تایپ یا کپی می‌شود. برای استفاده در ابزارک‌ها، ابزارک «متن» یا «HTML سفارشی» کاربرد دارد و شورت‌کد در آن قرار می‌گیرد. برای توسعه‌دهندگان نیز امکان استفاده از تابع در فایل‌های قالب (Template Files) وجود دارد تا خروجی یک شورت‌کد مستقیماً در ساختار سایت نمایش داده شود.

آموزش ساخت شورت‌کد سفارشی؛ از متن ساده تا عناصر پویا

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

مثال ۱: ساخت شورت‌کد با پارامتر (Attribute)

برای ساخت شورت‌کدهای پیچیده‌تر، پارامترها (attributes یا atts$) به‌کار می‌روند. فرض کنید می‌خواهیم یک دکمه فراخوان به عمل (CTA) بسازیم. با استفاده از تابع shortcode_atts() می‌توانیم مقادیر پیش‌فرض را تعریف کنیم.

}function cta_button_shortcode($atts)

تعریف مقادیر پیش‌فرض برای پارامترها    //

  a = shortcode_atts(array)$

        ‘link’ => ‘#’,

‘کلیک کنید'<=’text’

    ;($atts,(

    // ساخت خروجی HTML دکمه

    return ‘’ . esc_html($a[‘text’]) . ‘’;

}

add_shortcode(‘cta_button’, ‘cta_button_shortcode’);

حالا می‌توان از این شورت‌کد به صورت [cta_button] یا با پارامترهای سفارشی مانند [cta_button link=”/contact” text=”تماس با ما”] استفاده کرد.

مثال ۲: ساخت شورت‌کد دربرگیرنده (Enclosing)

این نوع شورت‌کدها محتوایی را در میان تگ باز و بسته خود می‌پذیرند. برای مثال: برای ساخت یک کادر هشدار ([alert]محتوای هشدار[/alert])، از پارامتر $content در تابع استفاده می‌کنیم.

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

    // اجرای هر شورت‌کد دیگری که ممکن است در محتوا باشد

    $processed_content = do_shortcode($content);

    // ساخت خروجی HTML کادر هشدار

    return ‘

’ . $processed_content . ‘

’;

}

add_shortcode(‘alert’, ‘alert_box_shortcode’);

این کد یک کادر با کلاس alert-box ایجاد کرده و هر محتوایی که بین [alert] و [/alert] قرار گیرد را درون آن نمایش می‌دهد. استفاده از do_shortcode($content) اجازه می‌دهد شورت‌کدهای تو در تو نیز به درستی کار کنند. این قابلیت برای مثال در ساخت یک شورت‌کد جهت فرآیند ارسال پیامک otp بسیار کاربردی است.

افزودن قابلیت شورت کد به سایت با استفاده از انواع صفحه سازهاافزودن قابلیت شورت کد به سایت با استفاده از انواع صفحه سازها

کاربرد واقعی شورت‌کدها؛ چند مثال که کار شما را راحت می‌کند

قدرت واقعی شورت‌کدها زمانی مشخص می‌شود که به کاربرد شورت‌کد در سناریوهای واقعی نگاه کنیم. فرض کنید لازم است در انتهای هر مقاله مرتبط با بازاریابی، یک دکمه CTA برای دانلود کتاب الکترونیکی قرار گیرد. به‌جای کپی کردن کد HTML دکمه در ده‌ها مقاله، یک شورت‌کد [ebook_cta] ساخته می‌شود. حال اگر نیاز به تغییر طراحی یا لینک دکمه باشد، کافی است فقط تابع شورت‌کد ویرایش شده تا تغییرات در همه مقالات اعمال شود. 

مثال‌های دیگر شامل نمایش پست‌های اخیر از یک دسته‌بندی خاص با [recent_posts category=”news”]، درج یک نقشه گوگل با آدرس پویا، یا ایجاد جداول قیمت‌گذاری سفارشی می‌شود. حتی افزونه‌هایی مانند افزونه پنل کاربری اروند نیز ممکن است از شورت‌کد برای نمایش بخش‌های مختلف داشبورد کاربری استفاده کنند. شورت‌کدها مدیریت محتوای پویا و تکرارشونده را هوشمندانه می‌سازند.

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

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

افزونه مذکور ده‌ها شورت‌کد حرفه‌ای برای ایجاد دکمه، تب، آکاردئون، اسلایدر و بسیاری عناصر دیگر در اختیار می‌گذارد. علاوه‌بر این، صفحه‌سازهای مدرن مانند المنتور نیز به‌خوبی با شورت‌کدها سازگار هستند. به‌راحتی می‌توان از ویجت «شورت‌کد» برای قرار دادن خروجی افزونه‌های دیگر (مثلا یک فرم تماس یا خروجی یک افزونه پیامک) در طراحی‌ها استفاده کرد. یعنی شورت‌کد در المنتور به‌عنوان پلی بین قابلیت‌های صفحه‌ساز و هزاران افزونه دیگر عمل می‌کند.

بررسی افزونه های آماده برای درج شورت کدهابررسی افزونه های آماده برای درج شورت کدها

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

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

ولی معایب آن نیز قابل توجه است. مهم‌ترین عیب، وابستگی به منبع شورت‌کد است. اگر شورت‌کد متعلق به یک افزونه باشد و آن افزونه غیرفعال یا حذف شود، به‌جای خروجی زیبا، یک کد خام و ناخوانا مانند [some_shortcode] در محتوا باقی می‌ماند. پدیده مذکور که «قفل شدن در شورت‌کد» (Shortcode lock-in) نامیده می‌شود، ظاهر سایت را به‌هم می‌ریزد. 

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

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

برای استفاده بهینه و ایمن از شورت‌کدها، رعایت چند نکته کلیدی ضروری است:

  •  اول از همه، اگر قصد افزودن کدهای سفارشی وجود دارد، به‌جای قرار دادن آن‌ها در فایل functions.php قالب، بهتر است یک افزونه اختصاصی برای سایت ساخته شود. کار مذکور باعث می‌شود با تغییر قالب، شورت‌کدها از کار نیفتند. 
  • دوم، هنگام ساخت شورت‌کد، همیشه ورودی‌ها و پارامترها باید اعتبارسنجی (sanitize) شوند تا از مشکلات امنیتی جلوگیری شود، به‌خصوص اگر شورت‌کد با یک سرویس خارجی مانند وب سرویس پیامکی در ارتباط باشد. 
  • سوم، قبل از استفاده گسترده از یک شورت‌کد، لازم است آن در یک صفحه آزمایشی تست شود تا از سازگاری آن با قالب و افزونه‌های دیگر اطمینان حاصل کنید. 
  • چهارم، همیشه خروجی تابع شورت‌کد خود را با دستور return بازگردانید و هرگز از echo استفاده نکنید. استفاده از echo باعث می‌شود خروجی در بالای صفحه چاپ شود و ساختار سایت را به هم بریزد. 

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

قدرت شورت کد وردپرس در عمل

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



منبع:https://sms.ir/blog/guides/programming/what-is-a-wordpress-shortcode/

,
Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین دیدگاه‌ها

    بایگانی‌ها