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

مثال ساخت کد کوتاه​

برای این که کاملا روشن شود من یک شورت کد می سازم که یک فرم ثبت ایمیل به کاربر نمایش دهد.

اول از همه باید برای تعریف کد کوتاه از اکشن init استفاده کنیم.

بعد داخل تابعی که برای اکشن init تعریف کردیم تابع add_shortcode را استفاده می‌کنیم.

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

<?php
add_action('init', 'register_my_shortcode');
function register_my_shortcode()
{
add_shortcode('my_form', 'user_email_callback');
}
function user_email_callback()
{
$html = '
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email" placeholder="ٌWrite your email">
<input type="submit" value="Send">
</div>
</form>';
return $html;
}

پس اول داخل اکشن init یک تابع تعریف کردیم بعد داخل همان تابع با استفاده از add_shortcode کد کوتاهمان را نوشتیم و در نهایت د اخل یک تابع هم کد html که قرار بود با این کد کوتاه نمایش دهیم را ساختیم.

همانطور که می بینید اسم شورت کد را my_form گذاشتم. یک تابع هم به نام user_email_callback تعریف کرده‌ام.

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

به همین سادگی الان کد کوتاه ما ساخته شد. برای اینکه امتحانش کنید کافی است داخل یک پست یا یک برگه یا هر جایی که خواستید آن را داخل براکت [my_form] بنویسید.

 

[fatima]

درست کردن شورتکدهای پیشرفته تر​

کدی که در بالا مثال زدم خیلی ساده بود یک شورتکد می‌ساختیم و آن هم یک کد html نشان می‌داد.

اگر قرار باشد خودمان فقط از آن استفاده کنیم شاید نیازی به پیشرفته تر کردن این کار نباشد. اما اگر قرار باشد این شورتکد مثلا داخل یک پلاگین استفاده شود که چندین نفر دیگر هم از آن استفاده کنند باید به کاربر پلاگین قابلیت کنترل بیشتری بدهیم.
قرار نیست کاربر ما هر بار خودش وارد سورس کد شود و مثلا عنوان فرم یا متن پیشنمایش(Placeholder ) داخل آن را عوض کند.

اینجا باید از attribute ها استفاده کنیم.

تابعی که با آن شورتکد را نوشتیم که یادتان هست؟(user_email_callback). بیایید یکبار دیگر این تابع را بنویسیم با این تفاوت که این بار قرار است مقدار label و placeholder که برای فرم نوشتیم را به دست کاربر بسپاریم.

تابعی که در آن شورتکد را می‌سازیم یک پارامتر می‌تواند بگیرد. این پارامتر از جنس آرایه است.

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

اما این آرایه مستقیم استفاده نمی‌شود. در مثال پایین خواهم گفت روش کار چطور است.

به این مثال دقت کنید تا ببینید روش کار به چه شکل است.

function user_email_callback($attr)
{
$data = array(
'label' => 'Email',
'placeholder' => 'Write your email',
'button' => 'Send',
);
$attr = shortcode_atts($data, $attr, 'my_form');
$html = '
<form>
<div>
<label for="email">' . $attr["label"] . '</label>
<input type="text" name="email" placeholder="ٌ' . $attr["placeholder"] . '">
<input type="submit" value="' . $attr["button"] . '">
</div>
</form>';
return $html;
}

اول از یک پارامتر به نام attr$ داخل تابع استفاده کرده ام. اگر خواستید اسمش را می‌توانید عوض کنید فقط حواستان باشد داخل خود تابع از همان اسم استفاده کنید.

داخل تاfع یک آرایه تعریف کردم به نام data$ . داخل این آرایه مقادیری که قرار است به عنوان attribute خود کاربر تعیین کند را نوشتم. من در این مثال عنوان فیلد، مقدار placeholder و عنوان دکمه فرم را به عنوان قرار داده ام. در این آرایه برای این سه مقدار باید مقدار پیش فرض تعیین کنید. همینطوری که در این مثال نوشته شده.

حالا باید برویم سراغ تابعی به نام shortcode_atts. این تابع در وردپرس مقادیری که در آرایه وارد کردیم را به شورتکد ما وصل میکند. سه آرگومان باید داخل این تابع بنویسم:

آرگومان اول: آرایه ای که برای مقادیر پیش فرض نوشته بودیم.

آرگومان دوم : پارامتری که برای تابع تعیین کردیم(attr$).

آرگومان سوم: اسم کدکوتاهی که تعریف کردیم.

الان باید داخل خروجی نهایی که قرار است کاربر ببینید آرایه ای که تعریف کردیم را جاگذاری کنیم.

همانطور که در کد بالا دیدید در سه قسمت از attr["label"]$ ،attr["placeholder "]$ وattr["button"]$ استفاده شده.

اگر کدکوتاه را به این شکل بنویسید می‎توانید این سه بخش را به دلخواه بدون دستکاری در کد تغییر بدهید.

[my_form label="Name" placeholder="Enter Your Name" button="Submit"]