ساخت شورت کد در وردپرس : تعریف shortcode دلخواه با کد

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

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

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

ساخت شورت کد در وردپرس

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

اسم این کد کوتاه را sbzd-link می‌گذاریم تا بتوانیم از آن به صورت [sbzd-link] در افزودن نوشته وردپرس استفاده کنیم.

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

function sbzd_link_shortcode(){
    $html = '<div class="btn-wrapper">';
	$html .= '<a href="/contact/" class="btn btn-green">دریافت مشاوره رایگان!</a>';
	$html .= '</div>';
	return $html;
}

در اینجا یک div و یک تگ لینک ساده با کلاس‌های فرضی ایجاد کرده‌ام. شما می‌توانید هر ساختاری را برای نمایش در خروجی ایجاد کنید. برای الصاق رشته‌ها از عملگر .= کمک گرفته‌ام. (بیشتر بدانید: رشته در php)

حال کافی است ساخت شورت کد را در وردپرس شروع کنیم. برای این کار از تابع add_shortcode() استفاده می‌کنم. این تابع دو ورودی string می‌گیرد؛ ورودی اول نام شورت کد و آرگومان دوم نام تابعی است که ساخته‌ایم.

// Register Shortcode
add_shortcode( 'sbzd-link', 'sbzd_link_shortcode' );

حالا می‌توانیم از شورت کد اختصاصی زیر در ویرایشگر خود استفاده کنیم:

[sbzd-link]

ویژگی‌های شورت کد

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

[sbzd-link link="https://sabzdanesh.com"]

اینطوری یک ویژگی (attribute) برای شورت کد تعریف کرده‌ایم. تمام این ویژگی‌ها به شکل یک آرایه PHP در آرگومان اول به تابع فرستاده می‌شود. اسم این ورودی را $atts می‌گذارم.

function sbzd_link_shortcode( $atts ){
    $html = '<div class="btn-wrapper">';
	$html .= '<a href="'. $atts['link'] .'" class="btn btn-green">دریافت مشاوره رایگان!</a>';
	$html .= '</div>';
	return $html;
}
add_shortcode( 'sbzd-link', 'sbzd_link_shortcode' );

در خط سوم قطعه کد بالا (خط دوم تابع) به این ویژگی دسترسی پیدا کرده‌ام.

در کد زیر، اگر ویژگی لینک تعریف نشده بود، از یک آدرس پیشفرض (مثلاً contact) استفاده می‌کنم:

function sbzd_link_shortcode( $atts ){
    $html = '<div class="btn-wrapper">';
	if array_key_exists("link", $atts){
	    $html .= '<a href="'. $atts['link'] .'" class="btn btn-green">دریافت مشاوره رایگان!</a>';
	}else{
	    $html .= '<a href="/contact/" class="btn btn-green">دریافت مشاوره رایگان!</a>';
	}
	
	$html .= '</div>';
	return $html;
}
add_shortcode( 'sbzd-link', 'sbzd_link_shortcode' );

افزودن shortcode دلخواه به وردپرس

برای تمرین بیشتر، می‌توانید عنوان لینک را نیز از کاربر بگیرید؛ یعنی در نهایت شورت کدی شبیه زیر داشته باشید:

[sbzd-link link="https://sabzdanesh.com" title="ورود به سبز دانش"]

برای کوتاه شدن کد می‌توانید از شرط یک خطی استفاده کنید. این نوع شرط در جلسه شرط در PHP معرفی شده است.

ایجاد شورت کد سفارشی برای محتوا

حالت سوم ساخت شورت کد وردپرس، استفاده از محتوای درون ویرایشگر (با تگ‌های html) است. اینطوری می‌توانیم بخشی از محتوای ویرایشگر را نیز برای تابع ارسال کنیم. البته نحوه فراخوانی شورت کد کمی متفاوت می‌شود.

[sbzd-text]همهٔ آموزش‌های سبز دانش کاملاً پروژه‌محوره![/sbzd-text]

محتوای وسط این شورت کد (که شبیه تگ باز و بسته html است) در آرگومان دوم تابع قرار می‌گیرد؛ بنابراین می‌توانیم تابع را شبیه زیر تعریف کنیم:

function sbzd_text_shortcode( $atts, $content="" ){

    return "<span class='alert'>{$content}<span>";

}
add_shortcode( 'sbzd-text', 'sbzd_text_shortcode' );

به همین راحتی می‌توایند متن‌های طولانی یا حاوی کدهای html را به تابع بدهید. اگر با تعریف توابع و نحوه تعریف آرگومان‌ها زیاد آشنا نیستید، پیشنهاد می‌کنم جلسه کار با تابع در PHP را حتماً ببینید.

در انتها دو نکته درمورد ایجاد شورت کد اختصاصی به وردپرس را همیشه به یاد داشته باشید:

• هیچ وقت مقادیر خروجی در تابع را echo نکنید! این کار باعث می‌شود خروجی شما در ابتدای متن نوشته قرار بگیرید. همیشه یک رشته از خروجی ایجاد کرده و در انتها return کنید.
• یادتان باشد نام تابع با نام شورت کد می‌تواند متفاوت باشد. این دو را خودمان در add_shortcode تعیین می‌کنیم.

مستندات تابع add_shortcode را می‌توانید در مستندات انگلیسی توسعه وردپرس (اینجا) ببینید.

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

اگر در حال یادگیری توسعه وردپرس هستید، پیشنهاد می‌کنم سعی کنید کد نمایش نوشته‌های مرتبط را با شورت کد پیاده‌سازی کنید. می‌توانید تعداد پست‌ها را به عنوان یک ویژگی در هنگام فراخوانی shortcode دریافت کنید.

اگر سؤال یا تجربه‌ای در ساخت کد کوتاه دارید، بخش دیدگاه‌های پایین آموزش برای شماست. 🙂