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

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

ابتدا از قلاب اکشن add_meta_boxes قبل از اجرای تابع سفارشی ایجاد متاباکس استفاده می کنید .

سپس با استفاده از تابع add_meta_box() تنظیمات متاباکس سفارشی تعریف می شوند .

در این مثال نام متاباکس Set Image است و تابع سفارشی rwpp_mbe_image_function()  نیز فراخوانی شده است .

متاباکس ایجاد شد . اکنون یک تابع برای نمایش متاباکس را ایجاد کنید .

گام اول بارگذاری مقدار متاداده در صورت وجود و قرار دادن آن در متغیر $rwpp_mbe_image است .

اگر مقدار متاداده ذخیره نشده باشد ، متاداده خالی خواهد بود .

سپس فیلد متنی برای ورود و نمایش آدرس URL تصویر نشان داده می شود .

همچنین یک دکمه برای انتخاب تصویر توسط کاربر ، از کتابخانه کانی تمز ایجاد شده است .

سپس قلاب اکشن save_post را برای اجرای تابع سفارشی rwpp_mbe_image_save_meta() فراخوانی می کنیم تا داده های متاباکس را ذخیره کند .

بازهم تاکید می شود که قبل از ذخیره فیلدهای فرم آنها را ارزیابی کنید و از صحت و درستی آنها اطمینان حاصل کنید .

چنانچه یک فیلد مورد تایید باشد و صحت و درستی آن انجام شده باشد ، توسط تابع update_post_meta() متاداده آن روی نوشته مرتبط ذخیره خواهند شد .

دقت داشته باشید که آدرس URL توسط تابع esc_url_raw() پاکسازی شده تا از کاراکترهای نامعتبر یا خطرناک پاکسازی شود و پروتوکل (protocol) آن نیز چک شود (پروتوکل های رایج http ، https ، ftp و …) .

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

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

ابتدا یک فایل جدید بنام rwpp-meta-image.js را ایجاد کنید .

این فایل شامل کدهای جاوااسکریپتی خواهد بود که آدرس URL تصویر انتخاب شده از کتابخانه رسانه را در فیلد متنی متاباکس قرار می دهد . به کد زیر دقت کنید .

 

به خاطر داشته باشید که کدهای جاوااسکریپت نیازی به تگ های باز و بسته <?php ?> ندارند .

این کدها ابتدا با کلیک روی دکمه upload_image_button که دکمه ارسال یا submit متاباکس می باشد ، کتابخانه کانی تمز را باز می کند .

قسمت دوم کد ، آدرس URL تصویر را دریافت کرده و آن را در فیلد متنی مربوطه بنام rwpp_mbe_image قرار می دهد .

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

با استفاده از قلاب اکشن admin_print_scripts تابع سفارشی را اجرا کرده تا فایل جاوا اسکریپت را وارد کنید . به بخش انتهایی نام قلاب دقت کنید ، جایی که متن های –post.php و –post-new.php به آن اضافه شده اند .

این بخش page detection یا تعیین کننده صفحه نامیده می شود . بنابراین قلاب تنها در زمانی تابع سفارشی  rwpp_mbe_image_admin_ scripts()  را فراخوانی می کند که کاربر در یکی از آدرس های post.php یا post-new.php مدیریت وردپرس قرار داشته باشد .

برای درج فایل جاوا اسکریپت در بخش بالاصفحه یا هدر صفحه از تابع wp_enqueue_script() استفاده می شود . این یک روش مناسب برای وارد کردن فایل های جاوا اسکریپت در بخش هدر وردپرس است که در فصل 12 ” اجکس و جاوا اسکریپت ” بیشتر در مورد آن توضیح داده شده است .

 

مرحله نهایی اضافه کردن thickbox به وسیله تابع wp_enqueue_style() است .

کد بالا باعث می شود که استایل thickbox در بخش هدر صفحه وارد شود .

برای تنظیم یک تصویر در متاباکس تنها کافیست روی دکمه ” تصویر کتابخانه رسانه ” کلیک کنید .

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

با اینکار آدرس URL تصویر در فیلد مرتبط در متاباکس قرار خواهد گرفت .

کد کامل این متاباکس را در بخش زیر مشاهده می کنید .

RWPP-META-BOX-IMAGE.PHP

 

RWPP-META-IMAGE.JS

 

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