متاباکس وردپرس؛ ایجاد فیلد اختصاصی با Meta Box

یکی از قابلیت های جذاب وردپرس، ایجاد فیلد اختصاصی در صفحه انتشار پست، تحت عنوان متاباکس وردپرس (Meta Box) است.

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

برای پیاده سازی این قابلیت در وردپرس افزونه هایی وجود دارد. اما طبق روال همیشگی توسی، قصد کد نویسی متاباکس وردپرس از پایه را داریم. پس در ادامه با ما همراه باشید.

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

برای نوشتن کد های متاباکس باید از فایل functions قالب و یا «افزونه اختصاصی» خود استفاده کنیم. اما برای جلوگیری از شلوغی، فایل جداگانه ای می سازیم. برای این کار یک فایل با نام tc-metabox.php در پوشه قالب خود ایجاد می کنیم. سپس با کد زیر، آن را در فایل functions.php اضافه می کنیم:

require_once('tc-metabox.php');

به صورت کلی برای نوشتن این قابلیت سه قسمت کلی تعریف متاباکس وردپرس، فرم نمایشی، ذخیره در دیتابیس نیاز داریم.

تعریف Meta Box

در این مثال یک فیلد برای درج لینک منبع خبر ایجاد می کنیم. پس ابتدا یک متاباکس ساده با توجه به مستندات رسمی وردپرس در فایل tc-metabox.php به شکل زیر تعریف می کنیم:

function tc_add_source_box()
{
    add_meta_box(
        'tc_source_id',
        'لینک منبع',
        'tc_source_box_html',
        'post'
    );
}
add_action('add_meta_boxes', 'tc_add_source_box');

در این از تابع add_meta_box استفاده کرده ایم. این تابع در وردپرس یک متاباکس ایجاد می کند. به صورت کلی ۷ فیلد برای اجرای آن نیاز داریم:

• آی دی (id): یک شناسه برای تشخیص متاباکس ها (اجباری)
• عنوان (title): عنوان نمایش داده شده در بالای باکس (اجباری)
• فراخوان (callback): تابع ایجاد فرم نمایش داده شده در باکس (اجباری)
• نمایش (screen): نوع برگه های انتخابی برای نمایش (مانند پست، برگه و …)
• زمینه (context): محل نمایش باکس که به صورت normal، side و advance قابل انتخاب است.
• اولویت (priority): اولویت نمایش نسبت به هم که به صورت high، default و low قابل انتخاب است.
• آرگومان (callback_args): موارد مورد نیاز برای ارسال به متاباکس

فرم نمایش متا باکس

حال باید با تعریف تابع tc_source_box_html، فرم نمایش آن را ایجاد کنیم. برای این کار به سادگی با بستن تگ های PHP، از عناصر فرم در HTML استفاده می کنیم:

function tc_source_box_html($post)
{
?>
    <label for="tc_source">لینک منبع مطلب</label>
    <input type="text" name="tc_source" id="tc_source" placeholder="لینک منبع">
<?php
}

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

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

برای این کار نیز از تابع update_post_meta برای بررسی و ذخیره اطلاعات در دیتابیس استفاده می کنیم:

function tc_save_postdata($post_id)
{
    if (array_key_exists('tc_source', $_POST)) {
        update_post_meta($post_id, 'tc_source', $_POST['tc_source']);
    }
}
add_action('save_post', 'tc_save_postdata');

در این کد، پس از بررسی وجود اطلاعات متاباکس، آن را با استفاده از تابع update_post_meta در دیتابیس ذخیره می کنیم. این فیلد با توجه به آی دی پست ما ذخیره می شود.

نمایش متاباکس در برگه

تا اینجا یک متاباکس در وردپرس ایجاد کرده ایم. حال برای نمایش آن در قسمت های مورد نظر باید از کد زیر استفاده کنیم. در این کد ابتدا وجود اطلاعات این فیلد در مطلب مورد نظر را بررسی می کنیم. سپس آن را با دستور echo چاپ می کنیم:

if (get_post_meta(get_the_ID(), 'tc_source', true)) {
    echo get_post_meta(get_the_ID(), 'tc_source', true);
}

از همین کد نیز می توان در فرم نمایشی متاباکس وردپرس در ویرایشگر استفاده کنیم. در این صورت مقدار وارد شده در این فیلد، در ویرایشگر نیز نمایش داده می شود. به عنوان مثال:

<input type="text" name="tc_source" id="tc_source" placeholder="لینک منبع" value="<?php echo get_post_meta($post->ID, 'tc_source', true); ?>">

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