آموزش شورت کد (shortcode) | افزونه های کد کوتاه وردپرس

آموزش شورت کد (shortcode) در وردپرس

در این مقاله به آموزش شورت کد وردپرس می پردازیم. اگر کمی با وردپرس کار کرده باشید، مطمئناً با عبارت شورت کد (shortcode) یا کد کوتاه مواجه شده اید. اما اینکه شورت کد چیست و در سایت وردپرسی شما چه کاری انجام می دهد چیزی است که باید در مورد آن بیشتر توضیح داده شود.

داشتن یک ظاهر یکتا، هدف بسیاری از مالکان و مدیران وب سایت ها است. اگرچه افزونه ها می توانند تا حدی این کار را انجام دهند اما سفارشی سازی وردپرس با استفاده از شورت کدها می تواند فراتر از انتظار باشد.

شورت کد های وردپرس (wordpress shortcodes) برچسب های کوچکی هستند که به عنوان میانبر برای اجرای ویژگی های خاصی در صفحه ها، نوشته ها، برگه ها و ابزارک های وردپرس به کار برده می شوند. در این صورت ویژگی مورد نظر بدون نوشتن یک خط کد به سایت شما اضافه می شود.

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

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

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

چرا از کد کوتاه در وردپرس استفاده می شود؟

از آنجا که وردپرس یک پلتفرم منبع باز (open source) است، شما می توانید آن را  به هر نحوی که دوست دارید، سفارشی کنید. یعنی می توانید یک کد کاملاً جدید به سایت وردپرسی خود اضافه کنید.

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

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

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

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

شورت کد به وردپرس می گوید یک بخش طولانی تر کد را داخل یکی از فایل های سایت شما اجرا کند. این فرآیند به هیچ ورودی دیگری از طرف شما نیاز ندارد.

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

توجه داشته باشید که تمام شورت کدها به این سادگی نیستند. حتی بعضی از آنها می توانند به نحوی سفارشی سازی شوند که شیوه کارشان تغییر کند. به عنوان مثال افزونه WP Product Review اجازه ساخت شورت کدی را می دهد که بررسی های شما را دقیقاً همانطوری که می خواهید نمایش می دهد. اکثر توسعه دهندگانی که با افزونه های خود چنین شورت کد هایی ارائه می دهند مستنداتی دارند که به شما کمک می کند بتوانید از این قابلیت استفاده کنید.

همین اطلاعات برای فهمیدن این موضوع که شورت کد چیست کافی به نظر می رسد. اما چیزی که لازم است بدانید این است که چگونه شورت کد مناسب ویژگی مورد نظر خود را پیدا کنید. در ادامه آموزش شورت کد به بررسی این موضوع می پردازیم.

چگونه می توانید کد کوتاه مورد نظر خود را پیدا کنید؟

راههای مختلفی برای پیدا کردن شورت کد ی که ویژگی موردنظر شما را ارائه می دهد، وجود دارد. در ادامه آموزش به بررسی این راه ها می پردازیم.

کد های کوتاه پیش فرض وردپرس

وردپرس به صورت پیش فرض دسته ای از شورت کدها را عرضه کرده است که شامل موارد زیر است:

• audio: فایل های صوتی را جاسازی کرده و امکان بازپخش را فراهم می کند.
• caption: به شما اجازه می دهد برای یک محتوا کپشن ایجاد کنید.
• gallery: یک گالری تصاویر قابل سفارشی سازی به سایت شما اضافه می کند.
• playlist: یک لیست پخش صوتی یا ویدیویی ایجاد می کند.
• video: یک فایل ویدیویی با قابلیت بازپخش جاسازی می کند.
• embed: این کد کوتاه به شما امکان می دهد اتریبیوت های مختلفی را در جاسازی های خود تنظیم کنید. مانند تنظیم حداکثر ابعاد و …

آموزش استفاده از شورت کدهای قالب

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

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

/wp-content/themes/your-theme-name/

توابع مربوط به شورت کدها معمولاً در فایل function.php یا اگر قالب شما حاوی فولدر includes است در آنجا وجود دارند. فایل را باز کرده و به دنبال عبارت add_shortcode بگردید.

نمونه ای از یک اسنیپت کد به صورت زیر است.

function my_shortcode_function() {

$i = '<p>Hello World!</p>';

return $i;

}

add_shortcode('my-shortcode', 'my_shortcode_function');

این کد، یک شورت کد ‘my-shortcode’ ایجاد می کند که یک متن ساده Hello World را برگشت می دهد. با وارد کردن کد [my-shortcode] در هر برگه یا نوشته ای در سایت خود، می توانید این جمله را در فرانت اند سایت خود نمایش دهید.

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

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

بیشتر افزونه هایی که نوعی از محتوا را ارائه می دهند (مانند فرم ها، اسلایدر ها، المان های تقابلی)، شورت کدی در اختیار کاربر قرار می دهند که یا به صورت مورد به مورد پیکربندی شده است (گزینه ها را داخل شورت کد روی صفحه موردنظر اضافه می کنند) یا به صورت کلی پیکربندی می شود (به عنوان مثال داخل منوی قالب افزونه).

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

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

از کد کوتاه در چه جاهایی می توان استفاده کرد؟

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

در نوشته ها و برگه های وردپرس

برای اضافه کردن کد کوتاه در نوشته ها و برگه های وردپرس ابتدا نوشته یا برگه موردنظر خود را به حالت ویرایش باز کنید.

در ویرایشگر گوتنبرگ وردپرس روی آیکون + که مربوط به اضافه کردن بلوک است، کلیک کنید. سپس بلوک کد کوتاه را پیدا کرده و روی آن کلیک نمایید.

حال در باکس باز شده می توانید کد کوتاه مورد نظر خود را وارد کنید.

در ویرایشگر کلاسیک وردپرس باید وارد قسمت متن ویرایشگر شوید و شورت کد مورد نظر خود را در آنجا وارد نمایید.

در ابزارک سایدبار

برای جاسازی شورت کدها در یک ابزارک متنی، ابتدا در پیشخوان وردپرس به مسیر نمایش » ابزارک ها رفته و یک ابزارک متنی مانند ابزارک “متن” را به روش کشیدن و رها کردن در سایدبار قرار دهید.

در قسمت نام یک عنوان دلخواه وارد کرده و در قسمت متن، شورت کد مورد نظر خود را وارد کنید.

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

add_filter('widget_text', 'do_shortcode');

در هدر و فوتر سایت

کد کوتاه وردپرس به طور کلی برای نوشته ها ، برگه ها و ابزارک ها در نظر گرفته شده است. اما یک روش آسان برای وارد کردن کد کوتاه در هر جای سایت وجود دارد.

شما باید کد زیر را بسته به مکانی که می خواهید نمایش دهید، در فایل header.php یا footer.php یا هر یک از فایل های قالب خود، اضافه کنید:

<?php echo do_shortcode("[example_shortcode]"); ?>

با این کار کد کوتاه در محلی که کد را وارد کرده اید، نمایش داده می شود.

به جای example_shortcode باید کد کوتاه مورد نظر خود را قرار دهید.

آیا می توانید کد کوتاه بیشتری به سایت خود اضافه کنید؟

پاسخ این سوال “بله” است. شما می توانید خودتان به راحتی شورت کد ایجاد کرده و از آن در سایت وردپرسی خود استفاده کنید. کافی است اندکی اطلاعات کدنویسی با php داشته باشید. در ادامه مقاله نحوه ساخت شورت کد را در سه گام ساده آموزش می دهیم.

1- تابع شورت کد را بنویسید

ابتدا در یک ویرایشگر متنی یک فایل جدید باز کنید. سپس یک تابع با یک نام یکتا بسازید. این تابع کدی را اجرا می کند که می خواهید شورت کد عمل مربوط به آن را انجام دهد. نمونه ای از تابع به شکل زیر است:

function torque_hello_world_shortcode() {

    return 'Hello world!';

 }

این تابع عبارت “Hello World” را به صورت یک رشته که می تواند خروجی به HTML باشد را return می کند. همچنین این تابع می تواند پارامترهای سفارشی نیز داشته باشد. به عنوان مثال اگر می خواهید به جای World یک اسم قرار دهید باید یک پارامتر نام اضافه کنید. این پارامترها attribute نامیده می شوند و تمام آنها با استفاده از یک آرایه ساده atts$ توسط وردپرس از قبل تعریف می شوند.

مثالی از چگونگی استفاده از تابع atts$ شورت کد برای مدیریت مناسب attribute های شورت کد در وردپرس در زیر آورده شده است.

function torque_hello_world_shortcode( $atts ) {

   $a = shortcode_atts( array(

      'name' => 'world'

   ), $atts );

   return 'Hello ' . $a['name'] . !';

}

در این مثال اگر نامی وجود نداشته باشد name attribute به صورت پیش فرض به world اختصاص داده می شود. اگر نام وجود داشته باشد، تابع آن نام را return می کند. این تابع با شورت کد زیر اجرا می شود.

[helloworld]

// Outputs "Hello world!"

[helloworld name="Bob"]

// Outputs "Hello Bob!"

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

2- فایل را ذخیره کرده وبه پروژه خود اضافه کنید.

دومین گام ایجاد یک فایل جدید حاوی تابع ساخته شده و اضافه کردن آن به پروژه است که در ادامه نحوه انجام این کار را آموزش خواهیم داد. هنگامی که شورت کد آماده شد، می توانید یک فایل جدید در قالب یا افزونه سفارشی خود ساخته و تابع را در آن ذخیره کنید. یک نام توصیفی می تواند بعداً در پیدا کردن این فایل به شما کمک کند. به عنوان مثال نام shortcode-function-hello-world.php مناسب به نظر می رسد.

حال باید به بقیه پروژه در مورد این فایل جدید اطلاع دهید. اگر با یک قالب کار می کنید باید آن را در فایل function.php قرار دهید. اگر یک افزونه ساخته اید می توانید آن را در هر فایلی که قبلاً در پروژه لود کرده اید، قرار دهید.

مثالی از نحوه لود کردن فایل به یک قالب با استفاده از ()get_stylesheet_directory در زیر نشان داده شده است.

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

به جای path مسیری را قرار دهید که با ساختار فولدر داخل قالب تطابق داشته باشد.

مثالی از نحوه لود کردن فایل در یک افزونه با استفاده از ()plugin_dir_url نشان داده شده است.

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

به جای path مسیری که با ساختار فولدر افزونه تطابق دارد را قرار دهید.

حال تابع شما آماده استفاده است. در آخرین مرحله باید شورت کد را در وردپرس رجیستر کنید. در ادامه نحوه انجام این کار را آموزش می دهیم.

3- شورت کد را رجیستر کنید.

آخرین مرحله رجیستر کردن شورت کد جدید در Shortcode API است. این کار با استفاده از تابع add_shortcode امکان پذیر است و تنها به دو آرگومان نیاز دارد.

تگ شورت کد برای استفاده در ویرایشگر متنی

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

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

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

اگر با زبان برنامه نویسی PHP آشنایی داشته باشید به همین راحتی می توانید یک شورت کد ایجاد کنید. اما اگر مایل نیستید که خود را درگیر کدنویسی کنید می توانید به راحتی از افزونه هایی که برای این کار در نظر گرفته شده است، استفاده کنید.

بهترین افزونه های اضافه کردن شورت کد به وردپرس

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

Shortcodes Ultimate

افزونه Shortcodes Ultimate یک افزونه رایگان و عالی است که بیش از ۵۰ شورت کد به سایت وردپرسی شما اضافه می کند.بعضی از شورت کد ها ویژگی های ساده ای مانند عنوان ها، لیست ها یا نقل قول ها و بعضی دیگر قابلیت های پیچیده تری مانند اسلایدرها، انیمیشن ها یا گردونه ها را ارائه می دهند. اضافه کردن شورت کد به سایت با استفاده از این افزونه نیز بسیار ساده است. افزونه Shortcodes Ultimate یک دکمه جدید به ویرایشگر متنی وردپرس اضافه می کند که این فرآیند را بسیار راحت می نماید. حتی add-on های اختیاری نیز وجود دارند که انتخاب های بیشتری به شما می دهند.

در مقاله آموزش افزونه Shortcodes Ultimate می توانید اطلاعات بیشتری درباره این افزونه و نحوه استفاده از آن به دست آورید.

Vision

افزونه Vision نیز یک افزونه پرمیوم وردپرس است که دسترسی به بیش از ۱۰۰ شورت کد را برای شما فراهم می کند که بسیاری از آنها قابل سفارشی سازی است. شما با این افزونه می توانید دکمه ها، باکس های قیمت گذاری، آیکون شبکه های اجتماعی و بسیاری موارد دیگر را بسازید. همچنین به پشتیبانی حرفه ای دسترسی دارید.

اینکه از افزونه های رایگان یا پرمیوم استفاده می کنید، خیلی مساله مهمی نیست. مساله مهم این است که با استفاده از افزونه های شورت کد فرآیند تولید محتوا و پیکربندی سایت بسیار آسان می شود.

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

آیا استفاده از شورت کد مشکل آفرین است؟

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

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

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

البته می توانید با وارد کردن قطعه کد زیر در فایل function.php قالب خود، شورت کدهای شکسته شده را پنهان کنید.

add_shortcode( 'shortcodetag', '__return_false' );

روش دیگر این است که شورت کدهای شکسته شده را به صورت دستی پیدا کنید که بسیار سخت و وقت گیر است. می توانید از کد زیر برای ساده کردن این روش استفاده کنید. کد زیر را در فایل function.php قالب خود وارد کنید.

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

ob_start();

extract( shortcode_atts( array(

        'find' => '',

    ), $atts ) );

$string = $atts['find'];

$args = array(

    's' => $string,

    );

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {

        echo '<ul>';

    while ( $the_query->have_posts() ) {

    $the_query->the_post(); ?>

    <li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>

    <?php

    }

        echo '</ul>';

} else {

        echo "Sorry no posts found";

}

wp_reset_postdata();

return ob_get_clean();

}

add_shortcode('shortcodefinder', 'wpb_find_shortcode');

این کد، یک شورت کد به نام shortcodefinder ایجاد می کند. اگر بخواهید تمام پستهایی را که حاوی شورت کد [contact-form-7 404 "Not Found"] هستند پیدا کنید، کافی است عبارت [shortcodefinder find=’contact-form’] را در یک برگه وردپرس وارد کرده و آن را ذخیره کنید. اگر پیش نمایش برگه را بزنید تمام پستهایی که حاوی شورت کد موردنظر هستند را مشاهده خواهید کرد.

امیدواریم آموزش شورت کد برای شما مفید بوده باشد. شما چه اطلاعات دیگری از شورت کدها و افزونه های شورت کد دارید. دیدگاههای خود را با ما در میان بگذارید.