آموزش ساخت شورت کد یا کد کوتاه وردپرس

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

به عنوان مثال اگر قصد دارید به وبسایت یا مطلب خود، یک گالری اضافه کنید، باید کد زیر را وارد کنید:

[gallery IDs="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

با استفاده از shortcode گالری پیشفرض وردپرس، یک گالری با شناسه‌های تصویر (ایدی تصویر) ذکر شده ایجاد خواهد شد. در کد کوتاه گالری ایجاد شده گالری شما دارای ۴ ستون و ۸ تصویر با حداکثر اندازه “medium” خواهد بود.

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

• آموزش ایجاد گالری تصاویر در وردپرس
• بهترین افزونه های فشرده سازی عکس در وردپرس
• حل مشکل آپلود تصاویر در وردپرس – 9 روش کاربردی و تست شده

به طور کلی، کد کوتاه مخفف دو کلمه Shortcut و Code است که به Shortcode تغییر داده شده است، یک شورت کد از کروشه باز و بسته [ ] برای تعریف دستور مورد نیاز خود استفاده می‌کنند. هر کد کوتاه عملکرد خاصی را در یک سایت انجام می‌دهد. برای مثال، می‌توانید از کدهای کوتاه برای ایجاد اسلایدر، فرم‌ها یا جداول استفاده کنید، حتی می‌توانید از این کدها برای ایجاد قالب‌‌بندی‌های آماده جهت استفاده در سایر سایت‌ها نیز استفاده نمایید.

شورتکدها ابتدا در سال 1998 توسط یک سیستم انجمن به نام Ultimate Bulletin Board (UBB) ایجاد شدند که شامل مجموعه ای از کدهای ساده برای استفاده کاربران بود تا بتوانند قالب‌بندی پست‌های خود را به راحتی انجام دهند. BBCode بر اساس اصولی، مشابه HTML کار می‌کند، با این تفاوت که بسیار ساده‌تر می‌باشد.

به دلایل امنیتی، وردپرس از اجرای کد PHP در محتوای سایت جلوگیری می‌کند. برای مقابله با این محدودیت، وردپرس 2.5 عملکرد کدهای کوتاه یا شورت کد را در سال 2008 با انتشار Shortcode API معرفی کرد. استفاده از این ویژگی به توسعه‌دهندگان وردپرس این امکان را می‌دهد که کنترل بیشتری بر کارهایی که کاربرانشان اجازه انجام آنها را دارند داشته باشند. در حقیقت وردپرس به کاربران اجازه می‌داد محتوای خود را از طریق تگ‌های ساده قالب‌بندی کنند.

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

کدهای کوتاه افزودن ویژگی‌های پیچیده در سایت‌های وردپرس را ساده می‌کند. شما می‌توانید تقریباً هر چیزی را با تایپ یک خط کد، اضافه کنید.

• توسعه گردش کار یا workflow را بصورت اتوماتیک بهبود می‌بخشد درواقع نیاز به نوشتن اسکریپت‌های پیچیده را از بین می‌برند.
• نسبت به افزودن کد HTML یا اسکریپت‌های PHP کاربر پسندتر و ساده‌تر هستند.
• کدهای کوتاه را می‌توان در داخل افزونه‌ها قرار داد. حتی اگر وردپرس را به‌روزرسانی کنید یا پوسته خود را تغییر دهید، کدهای کوتاه همچنان قابل استفاده خواهند بود.

• این ویژگی از نظر syntax مبهم است. به عنوان مثال، برخی از آنها از بسته شدن اختیاری پشتیبانی می‌کنند، بنابراین می‌توانید از آن‌ها به‌عنوان self-closing یا enclosing استفاده کنید.
• ممکن است عملکرد HTML را به دلیل تگ‌های متناقض یا مسائل مربوط به قابلیت همکاری (interoperability issues) با اختلال مواجه نمایند.

• Syntax Error چیست ؟ رفع خطای Syntax در وردپرس
• افزونه وردپرس چیست + کاربرد افزونه ها در وردپرس
• Child Theme یا قالب فرزند چیست و چه کاربردی دارد؟ ( وردپرس )

در اصل دو نوع کد کوتاه در وردپرس وجود دارد، در ادامه تصویری را مشاهده می‌کنید که هر دو نوع را نشان می‌دهد.

این نوع شرتکد نیازی به بسته شدن تگ ندارد، به عنوان مثال کد گالری که در ابتدای مقاله مشاهده کردید نیازی به بسته شدن تگ نداشته و اطلاعات مورد نیاز از طریق ویژگی‌ها به شورت کد اضافه می‌شوند.

این کدهای کوتاه یا شورت کد، به یک تگ بسته نیاز دارند. کدهای کوتاه به طور کلی محتوای بین تگ‌های باز و بسته را دربر می‌گیرند. برای مثال می‌توان از این ویژگی برای قرار دادن عنوان در ابتدای هر محتوا استفاده می‌شود. این نوع کدها معمولا برای افزودن عنوان به تصاویر استفاده می‌شود و با HTML سازگار هستند. در حالت کلی نحوه استفاده از آنها، بستگی به نحوه تعریف آنها دارد.

1. audio: با استفاده از این شورتکد می‌توانید فایل‌های صوتی را در وب سایت خود قرار داده و پخش کنید. این کد شامل کنترل‌های پخش ساده مانند play و stop می‌باشد.
2. caption: می‌توانید عنوان محتوای خود را با این کد ایجاد کنید. این کد بیشتر برای اضافه کردن شرح تصاویر استفاده می‌شود، اما شما می‌توانید از آن برای هر بخش دیگری استفاده کنید.
3. embed: این کد کوتاه به شما امکان می‌دهد ویژگی‌های مختلفی را برای embed خود تنظیم کنید، مواردی چون تعیین حداکثر ابعاد تصویر و ابزارهای دیگر.
4. gallery: با این shortcode یک گالری تصاویر پیش فرض را در سایت خود قرار دهید. می‌توانید از قسمت attributes برای تعیین ویژگی تصاویر و سفارشی کردن ظاهر گالری استفاده کنید.
5. playlist: با استفاده از شورت کد playlist می‌توانید مجموعه ای از فایل‌های صوتی یا تصویری را به وبسایت خود اضافه نمایید. می‌توانید از قسمت attributes استایل مورد نظر خود را انتخاب نمایید.
6. video: یک فایل ویدیویی را با استفاده از shortcode ویدیو می‌توانید با استفاده از یک پخش کننده ویدیوی ساده پخش کنید. این کد کوتاه از فیلم‌هایی با فرمت‌های mp4, webm, m4v, webm, ogv, wmv, flv پشتیبانی می‌کند.

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

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

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

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

شما می‌توانید کدهای کوتاه را در ابزارک‌ها یا ویجت‌های نوار کناری یا sidebar اضافه کنید. برای اضافه کردن این کدها، به قسمت نمایش » ابزارک‌ها بروید و یک ویجت Text را به محدوده ابزارکی مورد نیاز خود اضافه کنید.

با ابزارک Text می‌توانید کد کوتاه را به ناحیه ابزارکی سایت خود اضافه کنید، کافیست آن را داخل ویجت Text قرار داده و ذخیره کنید. سپس می‌توانید به قسمت frontend (جایی که ستون کناری نمایش داده می‌شود) بروید و خروجی Shortcode را در نوار کناری خود مشاهده کنید.

توجه: نسخه‌های وردپرس 4.8 و پایین تر از کدهای کوتاه در ابزارک‌های نوار کناری یا sidebar پشتیبانی نمی‌کنند.

به طور کلی شورت کدهای وردپرس برای صفحات، پست‌ها و ابزارک‌ها مناسب هستند اما شما یک راه ساده برای درج کدهای کوتاه در هر قسمتی از سایت که مورد نیاز می‌باشد دارید. فرض کنید می‌خواهید یک دکمه (call-to-action) در فوتر خود یا در همه پست‌های خود، قبل از بخش نظرات اضافه کنید.

برای اینکار لازم است تا فایل‌های PHP موجود در پوسته خود را ویرایش کرده و از تابع do_shortcode() استفاده کنید، با توجه به اینکه به طور معمول اطلاعات داخل این ویژگی return می‌شوند ممکن است لازم باشد قبل از تابع برای چاپ و نمایش کد از echo نیز استفاده کنید.

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

Shortcode API وردپرس تعیین می‌کند که چگونه می‌توانید از کدهای کوتاه برای سفارشی کردن و بهبود عملکرد سایت خود استفاده کنید. این ویژگی به توسعه دهندگان وردپرس این امکان را می‌دهد که ابزارهای منحصر به فردی (مانند فرم‌ها، اسلایدرها و …) ایجاد کنند که کاربران این امکان را داشته باشند که با کپی کردن کد مربوطه، از این ویژگی در سایت‌های خود استفاده کنند.

شما می‌توانید با کمک کدهای کوتاه تقریباً هر امکانات و ویژگی‌ای را که تمایل داشته باشید به وب‌سایت خود اضافه کنید. این API از کدهای کوتاه self-closing و enclosing پشتیبانی می‌کند و شامل توابع کمکی برای تنظیم ویژگی‌های پیش‌فرض است.

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

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

add_shortcode( 'hgw_sc_name', 'hgw_sc_handler_function' );

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

hgw_sc_handler_function نیز تابع برگشتی است که تمامی اطلاعات، دستورات و مقدار return شده درون این تابع قرار می‌گیرند، ساختار تابع به شکل زیر خواهد بود:

function hgw_sc_handler_function( $atts, $content, $tag ){

	// Your Data
}

همانطور که در کد بالا نیز مشخص است تابع hgw_sc_handler_function دارای چندین پارامتر است که هریک را توضیح می‌دهیم:

• $atts: شامل یک آرایه (key=>value) از ویژگی‌های مورد نیاز می‌شود. اگر ویژگی خاصی را برای شرتکد خود تعریف نکنید، به طور پیش فرض یک رشته خالی خواهد بود.
• $content : اگر در حال تعریف یک کد کوتاه EnClosing هستید. این وظیفه تابع handler است که اطمینان حاصل کند که مقدار $content به خروجی بازگردانده می‌شود.
• $tag : اگر دو یا چند کد کوتاه از یک تابع استفاده می‌کنند، برای مثال چند شورت کد مختلف از تابع hgw_sc_handler_function استفاده کنند، $tag به شما کمک می‌کند تا تعیین کنید کدامیک handler را راه‌اندازی کرده است.

شما می‌توانید کد سفارشی خود را به فایل functions.php پوسته اضافه کنید و یا آن را از طریق یک افزونه مانند Code Snippets به سایت خود اضافه کنید، همچنین می‌توانید کد کوتاه را درون یک افزونه سفارشی قرار داده و افزونه را در سایت خود فعال کنید.

• آموزش نصب افزونه در وردپرس از طریق هاست، پیشخوان و یا Github
• چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس
• آموزش ویرایش فایل در هاست – مدیریت فایل های هاست

توجه: اگر shortcode سفارشی را از طریق یک افزونه سفارشی به سایت خود اضافه می‌کنید، پیشنهاد می‌کنیم تابع add_shortcode() در یک تابع دیگر قرار دهید و از قلاب init برای آن تابع استفاده کنید.

function hgw_sc_init(){
	add_shortcode( 'hgw_sc_name', 'hgw_sc_handler_function' );
}
add_action('init', 'hgw_sc_init');

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

بیایید یک کد به نام [current_year] ایجاد کنیم که سال جاری را در وب سایت شما نمایش می‌دهد. اگر محتوایی را به وب سایت خود اضافه می‌کنید که باید هر سال به روز شود، این کد کوتاه می‌تواند برای شما کاربردی باشد. به عنوان مثال می‌توانید این کد را به فوتر سایت خود اضافه کنید. کافیست کدهای زیر را به فایل functions.php قالب خود اضافه کنید:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/
add_shortcode( 'hgw_current_year', 'hgw_sc_year_callback' );
function hgw_sc_year_callback() {
	return getdate()['year'];
}

توضیحات کد بالا:

1. @return: در کامنت PHP نوع خروجی برگشتی که در اینجا رشته یا String است و شرح مختصری از همان دستور را مشخص می‌کند.
2. hgw_current_year: نام shortcode است که از نوع self-closing است و می‌بایست آن را به شکل [hgw_current_year] به سایت خود اضافه کنید.
3. hgw_sc_year_callback: نام تابع callback است که رشته خروجی را برمی‌گرداند. از آنجایی که ما در حال ایجاد یک کد کوتاه self-closing هستیم ، لازم نیست پارامترهای $attributes، $content یا $tag را به آن اضافه کنید.
4. getdate(): یک تابع PHP است که آرایه‌ای از اطلاعات تاریخ timestamp فعلی را برمی‌گرداند. کلید سال ['year']، مقدار سال جاری را (به عنوان یک رشته 4 رقمی) ایجاد می‌نماید. بنابراین خروجی getdate()['year'] عدد سال جاری خواهد بود.

حال که با بخش‌های مختلف کد ذکر شده آشنا شدید باید کد مورد نظر را بررسی کنیم، برای نمایش کد می‌توانید [hgw_current_year] را در هرجایی از سایت (صفحه، پست، ویجت نوار کناری و غیره) خود فراخوانی کنید. فرض کنیم این کد در ستون کناری و در ناحیه ابزارکی فراخوانی شده است در این حالت در سایت خود اطلاعاتی مانند تصویر زیر را مشاهده خواهید کرد.

• رفع خطای « یک خطای غیرمنتظره رخ داد » در وردپرس
• آموزش رفع خطای 502 Bad Gateway
• آموزش رفع خطای 501 – HTTP 501 Not Implemented
• آموزش رفع خطای WordPress cannot insert the attachment into the database

در مثال بعدی قصد داریم یک کد self-closing دیگر را ایجاد کنیم که از طریق ویژگی‌های کد کوتاه بتوان اندازه، رنگ و متن درون دکمه را تغییر داد. از آنجایی که خروجی نهایی یک دکمه می‌باشد، ویژگی‌های HTML مانند href، id، class، target و label را می‌توان برای سفارشی‌سازی بهتر آن استفاده کرد.

/**
 * [hgw_sc_btn] returns the HTML code for a Button.
 * @return string Button HTML Code
*/
add_shortcode( 'hgw_sc_btn', 'hgw_sc_btn_callback' );
function hgw_sc_btn_callback( $atts ) {
	$data = array(
		'link' => '#',
		'id' => 'hgw-btn',
		'color' => 'blue',
		'size' => '',
		'label' => 'Button',
		'target' => '_blank'
	);
	$a = shortcode_atts( $data, $atts );
 
	$output = '<a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a>';
	
	return $output;
}

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

shortcode_atts( $data, $atts ) یک تابع وردپرس است که ویژگی‌های shortcode را با ویژگی‌هایی که کاربر راضافه کرده است ترکیب می‌کند و در صورت نیاز مقادیر پیش‌فرض (در اینجا $data اطلاعات پیش‌فرض کد کوتاه [hgw_sc_btn] است) را تغییر می‌دهد.

در قدم بعدی shortcode_atts( $data, $atts ) را درون متغیر $a ذخیره کرده‌ایم در این حالت $a برابر shortcode_atts( $data, $atts ) است. برای مثال در حال حاضر متن درون دکمه برابر Button است ('label' => 'Button')، اما این مقدار توسط کاربر قابل تغییر است.

برای دسترسی به هریک از مقادیر باید از کد $a['label'] یا $a['color'] و … استفاده کنیم. متغیر $output نیز کد HTML نهایی را در خود ذخیره می‌کند و سپس توسط return مقدار $output که از نوع string است برگشت داده می‌شود.

بیایید سعی کنیم از کد خود را همانطور که هست، بدون هیچ ویژگی تعریف شده‌ای استفاده کنیم و ببینیم چه خروجی خواهیم داشت، مطابق مثال قبلی کد [hgw_sc_btn] را در هرجایی که دوست دارید فراخوانی کنید.

ما قبلاً مقادیر پیش‌فرض را در تابع hgw_sc_btn_callback تنظیم کرده‌ایم، برای تغییر مقدار هرکدام از موارد پیشفرض میتوانید کد را به این شکل تغییر دهید مثال [hgw_sc_btn color="red" label="Send"]. توجه داشته باشید باید کدهای CSS مربوط به دکمه را به فایل استایل قالب خود اضافه کنید.

• رفع خطای پوسته، پروندهٔ استایل style.css را ندارد در وردپرس
• معرفی بهترین افزونه چت وردپرس (2023)
• تغییر قالب از طریق هاست ( دیتابیس وردپرس )
• نکات مهم قبل از تغییر قالب در وردپرس

برای مثال آخر، یک شرتکد enclosing به نام [boxed] را ایجاد می‌کنیم که هر محتوایی را بین برچسب‌های خود در یک کادر با عنوان رنگی نمایش می‌دهد. ابتدا کدهای زیر را به فایل functions.php قالب خود اضافه کنید:

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/
add_shortcode( 'boxed', 'salcodes_boxed' );
function salcodes_boxed( $atts, $content = null ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

در این مثال پاراگراف یا اطلاعات متنی کد enclosing ما در متغیر $content ذخیره می‌شوند. استایل‌ها، برای هر کلاسی که در داخل کد استفاده می‌شوند، ثبت می‌گردد و مانند نمونه کد قبلی نمایش داده می‌شوند. اکنون، بیایید کد کوتاه [boxed] را امتحان کنیم، [boxed] را به همراه ویژگی‌های title، title_color و color اضافه کنید.

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

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