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

آموزش ساده نوشتن کد کوتاه یا shortcode وردپرس
میانگین 5 از 4 رای

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

کد کوتاه (shortcode) یک ویژگی محبوب در پلاگین ها و قالب های وردپرس می باشد. با این حال اگر قبلا از این ویژگی استفاده نکرده اید شاید ایده ای برای استفاده از آن در سایت وردپرس خود نداشته باشید.

خوشبختانه سیستم API کد کوتاه باعث می شود بتوانیم shortcode مخصوص خودمان را بسادگی ایجاد کنیم. و در هر قسمتی از وب سایت ویژگی های جذاب افزونه و قالب خود را به کاربران نمایش دهیم. در ادامه کمی راجع به shortcode API توضیح خواهم داد و سراغ اصل مطلب می رویم. (نگران نباشید زیاد اهل توضیحات اضافی نیستم!)

معرفی shortcode و shortcode API :

shortcode api وردپرس

کد کوتاه در واقع یک متن با دو کروشه [ ] در دو طرف آن می باشد. مثلا: [example]

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

برای مثال وقتی یک تصویر به همراه کپشن(متن زیر تصویر) اضافه می کنید، وردپرس کدکوتاه مشخصی را تولید میکند:

نمونه کد کوتاه وردپرس

کدکوتاه بالا تصویری به همراه caption در وبسایت مشاهده می دهد:

کدکوتاه caption وردپرس

خوشبختانه API مخصوص shortcode، نوشتن کدهای کوتاه برای وردپرس را بسیار ساده کرده است. این کار بسیار هوشمندانه است؛ زیرا زندگی برای کاربران زیباتر میشود وقتی به این سادگی توابع پیچیده ای تولید میکنند 🙂

چگونه کد کوتاه ویژه خودمان را بنویسیم؟ (در 3 گام ساده)

حال که متوجه ساختار کدکوتاه وردپرس شدیم، بهتر است ساخت یکی از آنها را برای افزونه یا قالب خود آغاز کنیم. البته اینکه کدکوتاه شما چه خواهد کرد بستگی به خودتان دارد. در مثال زیر ما از تابع hello world برای آشنایی شما با این کدها استفاده کردیم:

 

1- نوشتن تابع کد کوتاه (Function):

ابتدا یک فایل php در ویرایشگر متن (مثلا Notepad و یا هر ویرایشگری که راحتید) باز کنید. نامی منحصربفرد برای تابع انتخاب کنید. این نام بعدا برای اجرای کدکوتاه بکار می رود.

function vimoo_hello_world_shortcode() {
   return 'Hello world!';
}

اگر ما بطور معمول از این تابع در php استفاده کنیم متن “Hello world” را به عنوان یک رشته متنی به html خروجی می دهد. این تابع می تواند پارامترهای دلخواه را نیز به خود بگیرد. مثلا اگر بخواهید hello vimoo اجرا شود، ابتدا باید یک پارامتر نام برای vimoo تعریف کنید. این پارامتر در واقع خاصیت (یا همان attribute) نامیده می شود. خاصیت توسط یک آرایه با عنوان atts$ در وردپرس شناخته می شود.

مثال:

در اینجا یک مثال از نحوه عملکرد atts$ در تابع کدکوتاه خواهیم داشت. در صورت کنجکاوی می توانید با ساختار shortcode_atts در بخش توسعه دهندگان  وردپرس بیشتر آشنا شوید: the WordPress codex

function vimoo_hello_world_shortcode( $atts ) {

$a = shortcode_atts( array(

'name' => 'world'

), $atts );

return 'Hello ' . $a['name'] . !';

}

اگر نام دیگری تعیین نشده باشد تابع بالا بصورت پیش فرض نام “world” را انتخاب میکند. اگر نامی مشخص گردد خروجی همان نام می شود. نحوه استفاده از shortcode برای این مثال در زیر روشن می شود:

[helloworld]
// خروجی: "Hello world!"
 
[helloworld name="vimoo"]
// خروجی: "Hello vimoo!"

به محض اینکه کدکوتاه را تولید کنیم، در هر بخش متنی وردپرس قابل استفاده می باشد. مثلا در یک نوشته، برگه و یا هرجای دیگر می توانید کد کوتاه [helloworld name=”vimoo”] را قرار دهید!

 

2- ذخیره فایل php و اضافه کردن به پروژه:

زمانیکه کدکوتاه دلخواه خود را آماده کردید باید فایل php را در مسیر دایرکتوری قالب ویا افزونه سایتتان قرار دهید. سعی کنید نام فایل به کدکوتاه مربوط باشد تا بعدا آن را براحتی بیابید. ( مثال:  shortcode-function-hello-world.php )

اکنون باید این فایل را به پروژه خود معرفی نمایید.

  • اگر قصد دارید کدکوتاه را برای قالب استفاده کنید باید فایل را در function.php فراخوانی کنید.
  • اگر کدکوتاه را برای افزونه ای در نظر دارید، فایل را در یکی از پرونده های php افزونه فراخوانی کنید.
نحوه فراخوانی در قالب:

در اینجا نحوه بارگذاری پرونده در قالب با استفاده از get_stylesheet_directory نشان داده می شود.

نکته: path/to/ را با مسیر فایل در قالب خود تعویض نمایید.

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );
نحوه فراخوانی در افزونه:

برای بارگذاری پرونده در افزونه(پلاگین) وردپرس از تابع plugin_dir_url به صورت زیر استفاده میشود:

نکته: path/to/ را با مسیر فایل در دایرکتوری پلاگین خود تعویض نمایید.

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

تابع برای استفاده حاضر است! تنها باید کد کوتاه را در وردپرس ثبت نمایید.

 

3- ثبت کد کوتاه در وردپرس:

آخرین گام ثبت کد کوتاه در API مخصوص shortcode می باشد. و با اضافه کردن تابع add_shortcode براحتی انجام می شود.

این تابع به دو مقدار نیاز دارد:

  • “برچسب کد کوتاه” : برای استفاده در بلاک های متنی وردپرس (همان نام shortcode)
  • “نام تابع کد کوتاه” : همان تابعی که کد کوتاه را اجرا می کند و در بالا مثالی از آن را ساختیم (vimoo_hello_world_shortcode)

تابع add_shortcode را دقیقا بعد از تابع کد کوتاه خود در فایل php قرار دهید. به شکل زیر:

function vimoo_hello_world_shortcode() {
 return 'Hello world!'; 
}
add_shortcode( 'helloworld', 'vimoo_hello_world_shortcode' );

مقدار اول (همان helloworld) را به شکل زیر در ویرایشگر متن وردپرس استفاده خواهید کرد:

[helloworld]

مقدار دوم نام همان تابعیست که در 2 مرحله اول نوشتید.

نکته: دقت کنید که هر دو مقدار منحصربفرد باشند تا با کدهای کوتاه پیش فرض در قالب و افزونه ها دچار اختلال نشوند.

تنها کاری که باقیمانده آزمایش shortcode است. وارد پنل مدیریت وردپرس شوید و کدکوتاه خود را در یک نوشته وارد کنید. نتیجه جذابی خواهد داشت!

shortcode وردپرس

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

نکته: برای ایجاد یک کد کوتاه جدید حتما از کلاس php منحصربفرد دیگری استفاده نمایید.

سخن پایانی:

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

در این مقاله آموختید: تنها 3 راه ساده برای ایجاد کدهای کوتاه وجود دارند

  1. نوشتن یک تابع منطقی برای اجرای کد کوتاه سفارشی
  2. ذخیره کد کوتاه در قالب یا افزونه وردپرس
  3. ثبت کد کوتاه در وردپرس

اگر در مورد shortcode ها سوالی داشتید در بخش دیدگاه ها پاسخگوی شما هستیم.