آموزش ساخت انواع Shortcode در وردپرس

خب یه سری دوستان هستن که می خوان سمت بکِند (backend) این کدهای کوتاه رو بکار ببرند . چطوری باید این کدها رو اجرا کنن؟ یه تابع وردپرسی داریم تحت عنوان do_shortcode  و می تونین باهاش کاری رو که می خواین انجام بدین مانند مثال زیر

echo do_shortcode('[wl_shortcode]');

با قطعه کد بالا شرت کد شما اجرا میشه ، البته به شرطی که شرت کدشو ایجاد کرده باشین 😀

خب حالا مي خوايم حرفه ای ترشو كار كنيم 🙂 به قسمت حرفه ای خوش اومديد 😀 کد زیر رو ببینید:

[wl_shortcode type="text" placeholder="ایمیل خود را وارد نمایید."]

چنتا چیز میز بهش اضافه شده نه؟ حتما می پرسین اینا چی هستن؟ خب دوستان ما توی شرت کدها می تونیم صفت یا attribute داشته باشیم همونطور که تگ ها در HTML همچین خاصیتی دارن حالا کد بالا دارای دو صفت هستش اولیش “type” که یک مقداری رو داخل خودش میگیره، ما کار نداریم چه مقداری داخلش می گیرهه ما به اون صفت کار داریم، دومیش هم “placeholder” هست که مقدارش “لطفا ایمیل خود را وارد نمایید” هستش درسته؟ خیلخب. میخوام یه مثال بزنم، مثلا فرضض کنین که شما می خواید یک شرت کد در مورد فیلدهای ورودی بسازین که فیلد های ورودی مهم ترین صفتی که دارن type هستش خب من یک شرت کد مثل بالا دارمم حالا وقتی می خوام این شرت کد رو ایجاد کنم این صفت هارو چجوری می تونم دریافت کنم؟ کد زیر رو ببینید

function shortcode_func($atts){

}
add_shortcode( 'wl_shortcode', 'shortcode_func' );

داخل تابع یک ورودی گرفته اون رو با متغیر atts$ مشخص کرده حالا ما شرت کد رو اجرا کردیم درسته؟ بعدشم شرت کد رو هم ساختیم حالا به نظر شما این متغیر چی بر میگردونه؟ کافیه یه var_dump بگیریم ببینیم چه اطلاعاتی به ما برمیگردونه. چیزی که برمیگرده بصورت زیر هستش

'type' => 'text'
'placeholder' => 'ایمیل خود را وارد نمایید.'

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

با یک مثال اون رو خاتمه میدم

echo do_shortcode('[wl_shortcode type="text" placeholder="ایمیل خود را وارد نمایید."]');

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

function shortcode_func($atts){
	return '<input type="'.$atts["type"].'" placeholder="'.$atts["placeholder"].'">';
}
add_shortcode( 'wl_shortcode', 'shortcode_func' );

با این کد چی کار کردم؟ اومدم چی رو برگردوندم؟ خوب دقت کنین! من اومدم یک فیلد ورودی ساختم که type رو چیزی که داره از سمت شرت کد میده رو جا دادم و برای placeholder هم همون متغیری که براش هست رو دادم و در نهایت این شرت کد چی رو برای کاربر نشون میده؟

<input type="text" placeholder="ایمیل خود را وارد نمایید.">

بـــــله اینم در نهایت چیزیه که خروجی میده بهمین راحتی 🙂

و در مرورگر چیزی که به ما نشون میده مطابق تصویر زیر هست

خب فقط یه بحث دیگه می مونه اونم اینه که گاهی وقتا ما توی تابعمون دوتا ورودی دریافت می کنیم اون چیه؟  😮 ببینید ما گاهی به این شکل شرت کد داریم

echo do_shortcode('[wl_video]http://www.welearn.site/video.mp4[/wl_video]');

که شرت کدمون مثل تگ های HTML باز و بسته میشه یک مثال قشنگ براتون زدم اونم اینه که مثلا ما یه شرت کد داریم که کاربردش برای ویدیو هستش حالا این به چه صورت توی تابعمون دریافت میشه؟ خوب به کد زیر دقت کنین

function video_func( $atts, $url = "" ) {
}
add_shortcode( 'wl_video', 'video_func' );

عه؟؟؟ چرا دوتا ورودی دریافت کرده؟ یکیش atts$ هست که بهتون کامل توضیح دادم به چه صورت هستش دومش url$ هست. این چیه؟ 😮 این هرچی رو توی دل شرت کد هست رو به ما بر میگردونه درسته؟ یعنی چی رو برمیگردونه؟ “http://www.welearn.site/video.mp4”

متوجه شدین؟ بسیار خب حالا می خواین با این چیزهایی که داریم یک شرت کد ویدیو بسازیم مثل زیر

function video_func( $atts, $url = "" ) {
	return "<video width='400' controls>
  <source src='$url' type='video/mp4'>
  Your browser does not support HTML5 video.
	</video>";
}
add_shortcode( 'wl_video', 'video_func' );

در نهایت چی رو به منه کاربر عزیز (چه اعتماد به نفسی دارم 😀 ) نشون میده؟ بله می تونین این پایین خودتون مشاهده کنین عزیزان

<video width='400' controls>
  <source src='http://www.welearn.site/video.mp4' type='video/mp4'>
  Your browser does not support HTML5 video.
</video>

و تصویر زیرهم چیزیه که در مرورگر نمایش میده

خب دوستان میتونین تمام این حرف هایی که از قسمت 3 تا 5 زدیم رو به صورت ویدیو تماشا کنید.

خب! خب! خـــب اصل ماجرا تموم شد و فهمدیم چطوری شرت کد بسازیم حالا توی وردپرس برای شرت کد یه سری توابع داره که می خوام اون هارو معرفی کنم و بررسی کنیم که چه بدرد ما میخوره اصن مگه بیکاریم می خوایم ازونا استفاده کنیم؟ 😀 نه دوستان وردپرس بیکار نیست که توابع میسازه 🙂 پس بیایم با اون ها آشنا بشیم. تابع بعدی که می خوایم معرفی کنیم کسی نیست جز جناب آقای shortcode_atts 😀

خب این تابع میاد چی کار می کنه؟ خوب دقت کنین که ما یک سری صفت یا attribute از کد کوتاهمون برمیگردونیم خب؟ شبیه مثال های بالا که شرت کدی به نام wl_shortcode داشتیم که صفت های پایین رو برمیگردوند

'type' => 'text'
'placeholder' => 'ایمیل خود را وارد نمایید.'

حالا ما با تابع shortcode_atts می خوایم چک کنیم اگر یه سری attribute از شرت کد داده نشده بود خودت بیا بجاش یه چیزی بذار، چطوری این گفته مونو عملی کنیم خوب به مثال زیر دقت کنین.

echo do_shortcode('[atts src="https://welearn.site/media/video.mp4"]');

تابع ما یک attribute داره به نام “src” حالا مثال زیر رو دقت کنین

function shortcode_atts_func( $atts ) {
	$atts = shortcode_atts(
		array(
			'width' => '500',
			'src' => ''
		), $atts, 'atts' );
	
	return "<video width='".$atts['width']."' controls>
  <source src='".$atts['src']."' type='video/mp4'>
  Your browser does not support HTML5 video.
	</video>";
}
add_shortcode( 'atts', 'shortcode_atts_func' );

اینو اضافه کنم که shortcode_atts سه تا پارامتر داره که اولین اون به عنوان آرایه هست باید attribute هایی که می خوایم در صورت نبودن توی شرت کد در نهایت اضافه بشن، دومین پارامتر باید متغیری رو که از ورودی تابع گرفتیم رو بدیم اسم متغیر ما اینجا چیه؟ درسته atts$ هستش پس اون رو در دومین پارامتر تابعع shortcode_atts میذاریم خب و حالا آخرین پارامترش نام شرت کد رو باید بهش بدیم و در نهایت چیزی که به کاربر نمایش میده چی هستش؟

<video width='500' controls>
  <source src='https://welearn.site/media/video.mp4' type='video/mp4'>
  Your browser does not support HTML5 video.
</video>

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

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

دریافت فایل ها

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

// حذف یک شرت کد
remove_shortcode('atts');
// حذف تمامی شرت کدها
remove_all_shortcodes();

اولین تابع که اسمش remove_shortcode هستش میاد یک شرت کد مدنظر مارو حذف میکنه که به عنوان پارامتر باید نام اون شرت کدی رو می خوایم حذف کنیم رو بهش بدیم و دومین تابع که با اسم remove_all_shortcodes هست، تمامی شرت کدهارو حذف میکنه و چیزی هم به عنوان ورودی یا پارامتر نمی گیره 🙂

گاهی وقتا می خوایم چک کنیم که آیا شرت کد فلان موجود هست یا نه؟ این رو می تونیم با کمک تابع shortcode_exists انجام بدیم بازم براتون مثال دارم خب پس بدون وقت کشی ببینید

if ( shortcode_exists( 'video' ) ) echo 'It\'s shortcode'; else echo 'This is not shortcode';
if ( shortcode_exists( 'welearn' ) ) echo 'It\'s shortcode'; else echo 'This is not shortcode';

به فرض مثال اینکه شما شرت کدی بنام welearn ندارین و بجاش شرت کدی به نام video دارین حالا با کد بالا چی خروجی داریم؟ یه لطف بکنید پایین رو نگاه بندازین

It's shortcode //video
This is not shortcode //welearn

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

در انتها چیزی که در مرورگر میبینم:

یه وقتایی هم می خواین چک کنین ببینین توی محتواتون یا مثلا سمت بکِند (backend) که دارین کوئری می گیرین توی the_content شرت کدی فراخوانی شده یا نه؟

از تابع has_shortcode استفاده می کنیم

has_shortcode( $content, $shortcode );

دوتا پارامتر داره اولیش خب مشخصه که باید اون متنی که می خواد بره دنبالش بگرده که آیا شرت کد هست یا نه رو بدیم بهش و دومیش هم نام اون شرت کد مدنظرمونو بدیم، مثال کامل رو ببینید

$content = 'http://welearn.ir [welearn class="video_class"]';
if( has_shortcode( $content, 'welearn' ) ) echo 'Shortcode available'; else echo 'No shortcode';

اگه گفتین خروجی چیه؟ بلـــه خروجیش “Shortcode available” هستش، چون ما بهش گفتیم برو دنبال شرت کد welearn بگرد و اونو گذاشتیم داخل شرط اگه همه چی درست بود “Shortcode available” رو برمیگردونه وگرنه “No shortcode” رو به ما خروجی میده.

حالا که انقد شما به این دوره علاقه مند هستید بهتون پیشنهاد می کنم ویدیو زیر رو هم ببینید، توی این ویدیو ما قسمت های 7,8,9 رو توضیح و بررسی می کنیم.پس به هیچ عنوان از دستش ندید 😉

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

دریافت فایل ها

این تابع همونطور که از اسمش می تونیم بفهمیم برای صوت کاربرد داره ، حتما توی HTML تگ audio رو دیدین درسته؟ اینم دقیقا همین رو به ما میده ، فقط باید بفهمیم چطوری ازش استفاده کنیم. حالا من یک shortcode مثل shortcode زیر دارم

echo do_shortcode('[wl_audio src="www.welearn.site/media/audio.mp3"  preload="none"]');

این shortcode دوتا پارامتر به من درسته؟ حالا می خوام با این شرت کدی که دارم با تابع wp_audio_shortcode مخلوط کنم و تگ audio بدم بیرون . چطوری؟ من بهتون میگم

function shortcode_audio_func( $atts ) {

return wp_audio_shortcode( $atts );

}
add_shortcode( 'wl_audio', 'shortcode_audio_func' );

به تابع wp_audio_shortcode توجه کنید . داره همون attribute که از تابع اصلیمون میخونه داخلش دادیم و بعدش return کردیم . حالا توی خروجی به ما چی میده؟ درسته تگ audio رو بر میگردونه ، ولی خوب توجه کنین تابع wp_audio_shordcode یک متغیر از نوع آرایه می گیره که باید این آرایه چندتا کلید و مقدار داشته باشه که به این صورت هستند

array(
	'src'      => '', // (string) آدرس فایل صوت
	'loop'     => '', // (string) تکرار صوت - در صورت اینکه نمی خواهید تکرار شود خالی بگذارید
	'autoplay' => '', // (string) اجرای خودکار - در صورت اینکه نمی خواهید پس از باگذاری صفحه صوت اجرا نشود خالی بگذارید
	'preload'  => '' // (string) پیش بارگذاری - در صورت اینکه نمی خواهید پس از بارگذاری صفحه صوت بارگذاری نشود خالی بگذارید
);

src => خب مشخه که باید آدرس فایل صوتی رو بدین

loop => این هم برای تکرار دوباره صوت هست ، یعنی وقتی صوت اجرا شد و تموم شد دوباره تکرار بشه یا نه ، اگر نمی خواین تکرار بشه خالی بذارید یا توی شرت کدتون این صفت رو نذارید

autoplay => وقتی صفحه وب بارگذاری شد با این خاصیت میتونه بصورت خودکار اجرا بشه و اگه می خواین اجرا نشه خالی یا توی شرت کدتون نذارید

preload => این یکی هم وقتی وب بارگذاری میشه میتونه همونجا صوت رو لود کنه . در صورتی که نمیخواین صوت لود بشه خالی بذارید ، یا این attribute رو توی شرت کدتون نزارید

تابع wp_video_shortcode هم دقیقا مثل تابع wp_audio_shortcode هستش فقط به عنوان پارامتر کمی بیشتر از تابع audio هستش که اونم این موارد هستند

array(
 'src' => '', // (string) آدرس فایل صوت
 'height' => '', // (int) ارتفاع ویدیو
 'width' => '', // (int) عرض ویدیو
 'poster' => '', // (string) تصویر ویدیو - پیش از اینکه ویدیو اجرا شود می توان برای آن تصویر گذاشت
 'loop' => '', // (string) تکرار صوت - در صورت اینکه نمی خواهید تکرار شود خالی بگذارید
 'autoplay' => '', // (string) اجرای خودکار - در صورت اینکه نمی خواهید پس از باگذاری صفحه صوت اجرا نشود خالی بگذارید
 'preload' => '', // (string) پیش بارگذاری - در صورت اینکه نمی خواهید پس از بارگذاری صفحه صوت بارگذاری نشود خالی بگذارید
 'class' => '' // (string) کلاس برای ویدیو
);

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

پیشنهاد می کنم حتما ویدیو زیر که مربوط به قسمت 10 و 11 هستش رو ببینید.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

دریافت فایل ها

یه تابع داریم خیلی دوستش داریم 😀 اونم strip_shortcodes هست، خب حالا کارش چیه؟ مثلا ما یه متن داریم که توش شرت کد داره و میاد از دم هرچی شرت کد داره رو کن فیکون می کنه :DD یعنی حذفشون میکنه مثلا یه شرت کد مثل پایینی داریم

$content = 'hello world [wl_video] [wl_audio] wordpress for fun';

خب توی این کد دو تا شرت کد داریم نه؟ حالا میخوایم یه تابع بزنیم که بیاد هر چی شرت کد داریم رو حذف کنه

function remove_shortcode_func( $content ) {
	$strip = strip_shortcodes( $content );
	return $strip;
}

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

$content = 'hello world [wl_video] [wl_audio] wordpress for fun';
echo remove_shortcode_func($content);

خب خروجی این کد بالایی چیه؟ درسته “hello world wordpress for fun” هست.

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

detect_shortcode_func('wl_audio');

توضیحش رو دادم فقط باید خود این تابع رو هم ایجاد کنیم تا کاری رو که میخوایم رو انجام بده.

function detect_shortcode_func($val)
{

    global $wp_query;	
    $posts = $wp_query->posts;
    $pattern = get_shortcode_regex();
    
    
    foreach ($posts as $post){
		if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
			&& array_key_exists( 2, $matches )
			&& in_array( $val, $matches[2] ) )
		{
			wp_register_script('shortcode-script','/js/shortcode-script.js', array('jquery'), '1.0.0', true);
			wp_enqueue_script( 'shortcode-script' );
			break;	
		}    
    }
}

در این کد اومده چیزی رو که ما خواستیم رو جستجو کرده ببینه هست یا نه . من می خوام یه تیکشو توضیح بدم ، اونم اونجایی هست که داخل شرط میشه

if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
			&& array_key_exists( 2, $matches )
			&& in_array( $val, $matches[2] ) )
		{
			wp_register_script('shortcode-script','/js/shortcode-script.js', array('jquery'), '1.0.0', true);
			wp_enqueue_script( 'shortcode-script' );
			break;	
		}

به عنوان مثال من می خواستم چک کنم اگر همچین شرت کدی بود بیاد یک اسکریپت رو به سایت من اضافه کنه درسته؟ و همین کار رو هم داخل شرط انجام دادم.

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

خـــــــب بحث شرت کدها به اتمام رسید برای اینکه بیشتر اطلاعات داشته باشین تمام اینها توی سایت وردپرس هست میتونین روی لینک روبرو کلیک کنید تا ببینید چه خبره! codex.wordpress.org/Shortcode_API

و همینطور می تونید آموزش ویدیویی بخش 12 و 13 رو مشاهده کنید.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

دریافت فایل ها

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

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

فایل نهایی پروژه