چطور یک shortcode ساده در وردپرس ایجاد کنیم؟

این بار میخوام بهتون یاد بدم که چطور یک shortcode خیلی ساده در پوسته وردپرس ایجاد کنین.

این کد، یک تصویر، عنوان و توضیحات رو نشون میده. همچنین میتونیم گزینه‌ای برای تغییر موقعیت تصویر اضافه کنیم.

ساختار shortcodeها خیلی ساده است:

اضافه کردن shortcode declaration (ما برای اسم shortcode از pe_simple استفاده میکنیم)
فانکشن shortcode رو declare کنین و چک کنین که آیا این فانکشن وجود داره یا نه
ویژگی‌های shortcode رو اضافه کنین – یعنی پارامترهایی که کاربر میتونه کنترل کنه
نمایش کد shortcode با استفاده از پارامترهای کاربر

نگاهی به کدهای shortcode بندازین:

add_shortcode('pe_simple', 'pe_simple');

if ( !function_exists('pe_simple') ) {
	function pe_simple( $atts, $content = null ) {
		$a = shortcode_atts(
			array(
				'image' => '', // parameter for image - image ID
				'image_pos' => '', // position of image, by defult image is placed at the top, other option is "left"
				'title'      => '', // title
				'desc'   => '', // description
			), $atts);

		$image = $a['image'];
		$image_pos = ( !empty($a['image_pos']) && $a['image_pos'] == 'left') ? ' style="float:left; margin:0 10px 5px 0;"' : '';
		
		$output = '<div class="pe-simple">';
			if( !empty($a['image']) ) {
				$output .= '<div class="pe-image" '.$image_pos.'>'.wp_get_attachment_image( $image ).'</div>'; // display our image if parameter "image" is not empty and image's ID exist
			}
	
			if( !empty($a['title']) ) {
				$output .= '<p><strong>' . esc_attr( $a['title'] ) . '</strong></p>'; // display title "title" is not empty
			}
			if( !empty($a['desc']) ) {
				$output .= '<p>' . esc_attr( $a['desc'] ) . '</p>'; // display description "desc" is not empty
			}
		$output .= '</div>';

		return $output;
	}
}

add_shortcode('pe_simple', 'pe_simple');

if ( !function_exists('pe_simple') ) {

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

$a = shortcode_atts(

array(

'image' => '', // parameter for image - image ID

'image_pos' => '', // position of image, by defult image is placed at the top, other option is "left"

'title' => '', // title

'desc' => '', // description

), $atts);

$image = $a['image'];

$image_pos = ( !empty($a['image_pos']) && $a['image_pos'] == 'left') ? ' style="float:left; margin:0 10px 5px 0;"' : '';

$output = '<div class="pe-simple">';

if( !empty($a['image']) ) {

$output .= '<div class="pe-image" '.$image_pos.'>'.wp_get_attachment_image( $image ).'</div>'; // display our image if parameter "image" is not empty and image's ID exist

}

if( !empty($a['title']) ) {

$output .= '<p><strong>' . esc_attr( $a['title'] ) . '</strong></p>'; // display title "title" is not empty

}

if( !empty($a['desc']) ) {

$output .= '<p>' . esc_attr( $a['desc'] ) . '</p>'; // display description "desc" is not empty

}

$output .= '</div>';

return $output;

}

پست پیشنهادی : چطور Google AdSense رو به سایت وردپرسمون اضافه کنیم؟

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

پارامتر image – آی‌دی تصویر از کتابخانه رسانه
پارامتر image_pos – موقعیت تصویر، به‌صورت پیش‌فرض تصویر در بالای عنوان و توضیحات قرار داره، پارامتر left تصویر رو در سمت چپ قرار میده
پارامتر title – عنوان
پارامتر desc – توضیحات

حالا ما میتونیم با قرار دادن این کد در پستمون، از shortcode استفاده کنیم.

[pe_simple image="37" image_pos="left" title="Example Title" desc="Lorem ipsum dolor sit amet."]

1	[pe_simple image="37" image_pos="left" title="Example Title" desc="Lorem ipsum dolor sit amet."]

امیدوارم که این shortcode خیلی کاربردی باشه و برای ساختن shortcode های پیچیده‌تر بتونین ازش استفاده کنین.

چطور یک shortcode ساده در وردپرس ایجاد کنیم؟

شبنم داوودی زاده 525