آموزش ایجاد متاباکس (metabox) در وردپرس : کد + افزونه

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

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

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

متا باکس در وردپرس

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

این کار را می‌توانیم برای همهٔ انواع پست (نظیر نوشته‌ها، برگه‌ها، محصولات) انجام دهیم.

ازنظر فنی، به این داده‌ها متادیتا (MetaData) می‌گوییم که در جدول _postmeta در دیتابیس وردپرس ذخیره می‌شوند. هر رکورد از متا دیتاها چهار ستون (قلم داده‌ای) دارند:

• meta_id که شناسه یکتای ردیف اطلاعات است.
• post_id مشخص می‌کند این داده مربوط به کدام پست است.
• meta_key کلید (نام) داده‌ی موردنظر ماست.
• meta_value مقداری است که برای آن داده ذخیره شده است.

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

فرض کنید می‌خواهیم یک metabox برای «نام مدرس دوره» به نام «sbzd_course_tutor» در نظر بگیریم؛ بنابراین چیزی شبیه زیر را در دیتابیس خواهیم داشت:

ساخت متاباکس وردپرس

در ابتدا باید متا باکس سفارشی خودمان را تعریف کنیم. برای این کار از اکشن‌های وردپرس استفاده می‌کنیم. یک قلاب (hook) به نام add_meta_boxes داریم که در هنگام بارگذاری صفحه ویرایش پست‌ها صدا زده می‌شود.

همچنین از تابع add_meta_box() برای تعریف متا باکس استفاده می‌کنیم:

<?php
function sabzdanesh_add_course_tutor_metabox() {
    
  add_meta_box(
    'sbzd_course_tutor',
    'مدرس دوره',
    'sabzdanesh_course_tutor_metabox',
    'course'
  );
}
add_action('add_meta_boxes', 'sabzdanesh_add_course_tutor_metabox');

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

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

add_meta_box( $id, $title, $callback, $scre, $context = 'advanced', $priority = 'default', $callback_args = null );

این آرگومان‌ها عبارت‌اند از:

1. id همان شناسه یا اسم metabox است که بالاتر گفتم برای شناسایی استفاده می‌شود. این مقدار باید یکتا و بدون space باشد.
2. title نام جعبه متا باکس در صفحه ویرایش پست است.
3. سومین آرگومان نام تابعی را مشخص می‌کند که محتویات باکس را شامل می‌شود. این تابع را در بخش بعدی تعریف می‌کنیم.
4. screen پست تایپ یا پست تایپ‌هایی را مشخص می‌کند که این متاباکس باید در آن‌ها نمایش داده شود.
5. context محل قرارگیری باکس در صفحه ویرایش را تعیین می‌کند. می‌توانیم سه مقدار normal (پس از ویرایشگر و برخی باکس‌های پایینی)، advanced (تا حد امکان بالا) و side (در ستون کناری) را برایش در نظر بگیریم.
6. priority اولویت محل نمایش باکس را مشخص می‌کند. اگر چند باکس در context یکسان باشند، باکس‌هایی با اولویت بیشتر در بالا قرار می‌گیرند. (مقادیر: default، core، high و low)
7. callback_args آرایه‌ای از آرگومان‌ها هستند که می‌توانیم به تابع callback (سازنده محتوای متاباکس) بدهیم.

افزودن فرم metabox

حالا نوبت به تعریف تابع برای ایجاد فرم یا فرم‌های متا باکس در وردپرس می‌رسد. در این تابع باید کدهای html موردنظرمان را خروجی دهیم.

<?php
function sabzdanesh_course_tutor_metabox( $post ){ ?>

  <?php wp_nonce_field( basename( __FILE__ ), 'sabzdanesh_course_tutor_nonce' ); ?>

  <p>
    <label for="sbzd-course-tutor">مدرس دوره: </label>
    <br />
    <input class="widefat" type="text" name="sbzd-course-tutor" id="sbzd-course-tutor" 
      value="<?php echo esc_attr( get_post_meta( $post->ID, 'sbzd_course_tutor', true ) ); ?>" size="36" />
  </p>
<?php }

پیش از فیلد اصلی، یک مقدار nonce نیز قرار داده‌ام. در مورد wp nonce می‌توانید در مستندات وردپرس مطالعه کنید. به‌زودی آموزشی برایش منتشر می‌کنم.

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

حالا اگر صفحه افزودن پست مربوط به پست تایپ course را باز کنم، باکسی شبیه به تصویر زیر می‌بینم:

ذخیره متا باکس وردپرس

با این که متاباکس ما ایجاد شده، اما هیچ کاری انجام نمی‌دهد! چون کاری برای ذخیره‌سازی داده‌هایش انجام نداده‌ایم! در این مرحله باید تابعی برای ذخیره کردن داده‌های متاباکس وردپرس ایجاد کنیم.

ابتدا یک اکشن روی هوک save_post تعریف می‌کنیم تا در هنگام ذخیره‌سازی پست، تابع موردنظرمان صدا زده شود:

add_action('save_post', 'sabzdanesh_save_course_tutor_metabox', 10, 2);

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

اکنون تابع ذخیره سازی متاباکس سفارشی‌مان را به‌صورت زیر می‌نویسیم:

<?php
function sabzdanesh_save_course_tutor_metabox($post_id, $post){

  // Verify the Nonce
  if( !isset( $_POST['sabzdanesh_course_tutor_nonce'] )
      || !wp_verify_nonce( $_POST['sabzdanesh_course_tutor_nonce'], basename( __FILE__ ) ) ){
        return $post_id;
  }

  $meta_value = isset($_POST['sbzd-course-tutor']) ? sanitize_html_class($_POST['sbzd-course-tutor']) : '' ;

  update_post_meta($post_id, 'sbzd_course_tutor', $meta_value);
}

در ابتدای بدنه تابع PHP اعتبارسنجی nonce را انجام داده‌ام. سپس با متغیر سراسری $_POST به مقدار فیلد موردنظر دسترسی پیدا کرده و آن را با تابع update_post_meta() ذخیره می‌کنم.

اگر آشنایی کافی با فرم‌ها ندارید، جلسه آموزشی کار با فرم در PHP را ببینید.

خواندن مقادیر metabox

برای استفاده از متاباکس وردپرس باید بتوانیم مقداری که ذخیره کردیم را از دیتابیس فراخوانی کنیم. برای این کار از تابع get_post_meta() استفاده خواهیم کرد. ساختار کلی این تابع به شکل زیر است:

get_post_meta( $post_id, $key, $single = false );

ورودی اول id پستی است که می‌خواهیم متادیتای آن را فراخوانی کنیم. معمولاً در فایل‌های پوسته از get_the_ID() برای آن استفاده می‌کنیم.

ورودی دوم نام متادیتایی است که به دنبال آن می‌گردیم. (به‌صورت رشته متنی php)

ورودی سوم (اختیاری) به‌صورت یک boolean مشخص می‌کند که آیا این متادیتا تک مقداری است یا باید به‌صورت آرایه PHP برگردانده شود. چون در این مثال صرفاً یک مقدار در meta_value داریم، آن را true قرار می‌دهم.

بنابراین برای فراخوانی مقدار متاباکس در وردپرس مشابه زیر عمل می‌کنیم:

<?php
echo get_post_meta( get_the_ID(), 'sbzd_course_tutor', true ) );

نکات افزودن متاباکس جدید به وردپرس

در این مثال، هنگام ذخیره‌سازی متا باکس صرفاً از nonce استفاده کردم. اما یادتان باشد برای افزایش امنیت باید اعتبارسنجی‌های لازم را خودتان انجام دهید. برای مثال:

• مقدار فیلد را اعتبارسنجی کنید. مثلاً با ریجکس PHP ساختار ایمیل، شماره همراه یا صرفاً عددی بودن فیلد را بررسی کنید.
• سطح دسترسی کاربر را بسنجید. (ببینید آیا کاربر مجاز به تغییر این مقادیر هست یا نه؟)

برای کار با متادیتای ذخیره شده چهار تابع داریم که متناسب با نیازتان می‌توانید از آن‌ها استفاده کنید:

تابع	عملیات
add_post_meta()	افزودن متادیتای جدید
update_post_meta()	به‌روزرسانی متادیتا (اگر نداشتیم یک مورد جدید ایجاد می‌کند)
delete_post_meta()	حذف metadata
get_post_meta()	بازیابی مقدار

در این مثال یک متا باکس را برای صرفاً یک پست تایپ ایجاد کردم. شما می‌توانید با فراخوانیِ چندبارهٔ تابع add_meta_box() یک metabox را برای چندین نوع پست استفاده کنید.

افزونه ایجاد متاباکس وردپرس

اگر می‌خواهید فیلدهای سفارشی meta box را بدون کدنویسی وردپرس ایجاد و مدیریت کنید، دو افزونه بسیار کاربردی را به شما معرفی می‌کنم.

افزونه‌های دیگری نیز وجود دارند، اما دو موردی که محبوب‌تر بوده و شخصاً در چند پروژه از آن‌ها کمک گرفته‌ام عبارت‌اند از:

• افزونه Meta box از MetaBox.io
• افزونه Advanced Custom Fields یا ACF از Delicious Brains

ساخت metabox پیشرفته

در صفحه مستندات این بحث می‌توانید دو مثال پیشرفته‌تر را برای دخیل کردن ارسال AJAX در PHP و تعریف شیء گرای متاباکس جدید (با کلاس PHP) بررسی کنید.

من در این مثال یک فیلد متنی ساده برای فرمم ایجاد کردم. پیشنهاد می‌کنم به‌عنوان تمرین، سعی کنید یک فیلد بازشو (select) ایجاد کنید تا روند کار بهتر در ذهنتان بماند.

امیدوارم از این آموزش لذت برده باشید. بحث ایجاد متاباکس در وردپرس برای توسعه وردپرس بسیار کاربردی است؛ پس اگر سؤال یا نکتهٔ تکمیلی‌ای دارید، در بخش دیدگاه‌ها مطرح کنید. 🙂