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

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

آموزش شورت کد

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

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

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

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

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

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

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

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

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

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

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

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

آموزش شورت کد

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

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

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

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

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

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

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

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

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

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

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

ممکن است قالبی که در سایت وردپرسی خود استفاده می کنید، از قبل دارای دسته ای شورت کد درون ساخته باشد. برای پی بردن به این موضوع باید به جایی که قالب تان را خریداری کرده اید مراجعه کرده و مستندات قالب خود را مطالعه کنید. یا اگر قالب شما دارای یک نسخه نمایشی (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');

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

<?php echo do_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 های اختیاری نیز وجود دارند که انتخاب های بیشتری به شما می دهند.

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] هستند پیدا کنید، کافی است به سادگی [shortcodefinder find=’contact-form’] را در یک برگه وردپرس وارد کرده و آن را ذخیره کنید. اگر پیش نمایش برگه را بزنید تمام پستهایی که حاوی شورت کد موردنظر هستند را مشاهده خواهید کرد.

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

امتیاز دادن به این نوشته:
  • میزان رضایت کاربران
  • خوانایی متن
  • تصاویر مرتبط

درباره ی مینا قدسی

مطلب پیشنهادی

بهترین افزونه های CRM وردپرس

بهترین افزونه های CRM وردپرس برای بهبود کسب و کارهای آنلاین سال 2019

در این مقاله بهترین افزونه های CRM وردپرس برای مدیریت بهتر ارتباط با مشتری و …

پاسخی بگذارید

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