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

Meta Box های سفارشی چه هستند ؟

یک meta (write)box سفارشی در تئوری بسیار آسان است و به شما امکان می دهد اطلاعات سفارشی را به یک پست یا صفحه در وردپرس اضافه کنید .

فرض کنید درحال کارکردن برروی یک تم برای مشتری هستید که می خواهد مجموعه گسترده پوسترهای کنسرتش را به صورت یک کاتالوگ درآورد . بلافاصله به سراغ کارایی هسته ای وردپرس می روید تا ببینید چگونه می توانید این تم را سازماندهی کنید :

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

categories  و tags در خود سیستم وردپرس برای سازماندهی پوسترها استفاده کنید . اما اگر بخواهید یک نوع متادیتا جدید برای بخش ” آرتیست ” هر پست استفاده کنید چه ؟ وردپرس امکانات لازم برای این کار که بلافاصله بتوانند بدون نیاز به هیچ تنظیماتی این کار را برایتان انجام دهد ، ندارد ، که این امر شما را به استفاده از meta box های سفارشی می کشاند .

یک meta (write)box سفارشی در تئوری بسیار آسان است و به شما امکان می دهد اطلاعات سفارشی را به یک پست یا صفحه در وردپرس اضافه کنید – یکی از مزیت های آن این است که به طور مستقیم می تواند در اکثر صفحه های پیش فرض در وردپرس متناسب شود ، بنابراین به آسانی می توانید بدون نیاز به استفاده از روش های تکنیکی آن را برای ویرایش آسان در Post-Editor قرار دهید . همان طور که در مقدمه مطالبم گفتم ، می توانید این نوع مشابه ” متادیتا ” را با استفاده از فیلدهای سفارشی از پیش ساخته شده مربوط به یک پست یا صفحه در پست خود قرار دهید . در این مطالب نکات اشتباهی وجود ندارند ، اما چندان مطبوع یا کاربرپسند نیستند .

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

  • افزودن meta box
  • پردازش meta box
  • ذخیره داده ها ( به روش صحیح – بله روش نادرست هم وجود دارد )

توجه به این نکته که بسیاری از این اطلاعات را نیز می توان در پست های سفارشی از نوع API ( به زودی به این نکنه خواهیم پرداخت !) استفاده کرد ، مهم است ، اما چون می خواهیم اطلاعاتی که امروز بررویشان تمرکز کردیم باقی بمانند ، می خواهیم این را به طور مستقیم به ویرایش گر پیش فرض متن اضافه کنیم .

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

همه مطالب گفته شده در این آموزش در فایل functions.php یک تم کار خواهند کرد . به هرحال ، این محل مناسبی برای آن نیست . اگر در حال افزودن اطلاعات به یک پست هستید ، احتمال دارد بخواهید آن را بدون توجه به طراحی front end خود در آنجا قرار دهید . به معنای دقیق کلمه باید این کد را در جایی قرار دهید که به طراحی تان وابسته نباشد ، یعنی : یک فایل افزونه .

مرحله اول : افزودن Meta Box

اولین Meta Box من

وردپرس برای افزودن meta box به یک صفحه مدیریت معین یک تابع دارد : add_meta_box.

ورود مستندات ( codex entry ) برای این تابع به خوبی انجام شده است ، اما در اینجا شرح مختصری از آن را آورده ایم . نمونه اولیه آن :


 

 id$ خاصیت html ID کادر است . این در صورتی مفید است که در حال بارگذاری CSS یا JavaScript سفارشی در صفحه ویرایش برای کنترل گزینه ها باشید . درغیر این صورت ، فایده چندانی ندارد .

title$ در بالای meta box نمایش داده می شود .

callback$ تابعی است که عملا meta box راپردازش می کند . در مرحله دوم این تابع را به طور مختصر توضیح می دهیم .

page$ همان جایی است که می خواهید meta box نمایش داده شود . ‘normal’ آن را در پایین ویرایش گر پست قرار می دهد . ‘side’، متاباکس  را به نوارجانبی سمت راست صفحه ویرایش ( باتوجه به categories ، tags و غیره ) انتقال می دهد . ‘advanced’ نیز کادر را با ویرایشگر پست در یک ستون قرار می دهد ، اما کمی پایین تر از آن .

priority$ به وردپرس می گوید که meta box را در کجای متن قرار دهد .  ‘high’ ، ‘default’ یا  ‘low’ به ترتیب کادر را در جایی نزدیکتر به بالا ، در جای طبیعی خود ، یا در جهت انتها قرار می دهند . از آنجتیی که تمامی meta box  ها قابل کشیدن هستند ، priority$ چیز چندان بزرگی نیست .

در پایان ، callback_args$ به شما این امکان را می دهد که داده های خود را به شکل یک آرایه در تابع callback$ خود عبور دهید . ما قصد نداریم از این مورد در  اینجا استفاده کنیم، اما می تواند برای عبوردادن مقداری داده ها از meta box مفید باشد . فرض کنیم افزونه تان چندین گزینه دارد که برآنچه در meta box نمایش داده می شود ، تاثیر می گذارند . می توانید آن گزینه ها را از طریق آرایه callback_args$ عبور دهید .

بنابراین ، فراخوانی  add_meta_box ما به چیزی مانندان شبیه خواهد بود :

 

 

ما نمی توانیم این را به تنهایی در افزونه مان استفاده کنیم . انجام این کار باعث نمایش صفحه سفید مرگ و خطای مهلک PHP خواهد شد : فراخوانی تابع تعریف نشده . چرا ؟ چون ما تابع add_meta_box را قبل از بارگذاری وردپرس فراخوانی کرده ایم . بنابراین باید از یک هوک وردپرس استفاده کنیم ، که بخشیاز  plugin api است . اصولا تابع ها در یک دستور وردپرس یا هوک فیلتر داده شده گیر می کنند ، سپس آن تابع ها در زمانی که هوک ها بارگذاری می شوند ، اخراج می شوند . ما با قراردادن فراخوانی add_meta_box درلفافه در یک تابع ، و سپس هوک کردن آن تابع به هوک دستور add_meta_boxes از خطای مهلک جلوگیری می کنیم .

کد ما برای افزودن meta box به صفحه ارسال پست به چیزی مانند کد زیر شبیه خواهد بود :

 

 

مرحله دوم : پردازش Meta Box

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

رشته ای که به عنوان callback$ در add_meta_box عبور دادیم به یاد دارید ؟ حال می خواهیم تابعی با همین نام ایجاد کنیم . این تابع از تمام آنچه در meta box نمایش داده می شود  ، مراقبت می کند .

meta-box-content-1

می خواهیم چند فیلد به meta box خود اضافه کنیم : یک ورودی متن ، یک منوی پایین افتادنی ، و یک کادر بازبینی . حال با ورودی متن کارمان را شروع می کنیم .

 

افزودن ورودی متن

 

meta-box-content-2

اما نمایش داده ها را چکار کنیم ؟ خب ، همان طور که در مرحله سوم می بینید این داده ها را با استفاده از تابع update_post_meta در جدول wp_postmeta ذخیره می کنیم  . این تابع دو تابع خواهری (sister function ) به نام

get_post_meta و get_post_custom دارد که داده ها را از wp_postmeta می گیرند . get_post_meta داده ها را فقط از یک کلید می گیرد ، در حالیکه get_post_custom تمام آن را می گیرد . از آنجایی که در این مرحله تنها از یک فیلد استفاده می کنیم ، پس بیایید از get_post_meta استفاده کنیم .

علاوه بر این ، توجه داشته باشید که تابع add_meta_box یک متغیر را در بازخورد ما عبور می دهد : post$ ، که یک شیء پست است .

 

 

 

افزودن منوی پایین افتادنی

 

 

 

با افزودن یک فیلد دوم ، فراخوانی get_post_meta خود را به get_post_custom تغییر دادیم که یک آرایه متناظر از تمامی کلیدها و مقدارهای سفارشی پست را بازگردانی می کند . سپس ما به فیلدهایمان تنها از طریق نام آن ها دسترس پیدا می کنیم . دستورهای سه گانه نمی گذارند کد ما هشدارهای PHP ( شاخص های تعریف نشده و مواردی از این قبیل ) ارسال کنند . در مرحله دوم تابع  esc_attr را توضیح می دهیم .

ما در منوی پایین افتادنی می خواهیم یکی از سودمند ترین تابع های وردپرس را به کار ببریم : selected . این تابع ، اولین مقدار ، یعنی داده هایی که ما ذخیره کردیم را با دومین تابع یعنی ویژگی مقدار <option> مقایسه می کند . اگر آن ها با هم یکسان باشند ، تابع ، “selected=”selected را منعکس می کند که آن مقدار را وامی دارد در منوی پایین افتادنی نمایش داده شود . کار شیرینی است ، که ما را از نوشتن یک دسته از آن یا دستورهای سه گانه خلاص می کند ! می توانید از تابع

() selected با دکمه های رادیویی نیز استفاده کنید.

افزودن کادر بازبینی

 

این بار هم وردپرس تابع سودمند  ()checked را فراهم می کند . این تابع درست مانند تابع ()selected کار می کند ، یعنی اولین مقدار ( داده هایی که ذخیره کرده ایم ) را با دومین مقدار مقایسه می کند و در صورتی که با هم مشابه باشند ، “checked=”checked را منعکس می کند .

wp_nonce_field دو فیلد مخفی را به meta box ما اضافه می کند . یکی از آنها یک  nonce است . رشته هایی از اعداد وجود دارند که  برای هر کاربر در هر مبنای بلاگ به مدت ۲۴ ساعت معتبرند . Nonce ها روشی برای بررسی هدف هستند ، و این اطمینان را می دهند که وردپرس تنها در صورتی که درخواست از سوی یک محل خیلی خاص ارسال شده باشد به آن پاسخ می دهد . به عبارت دیگر ، ما نمی خواهیم داده هایمان را با اجرای تابع save ( مرحله سوم را ببینید ) در محلی به غیر از هوک save_post به طور تصادفی به روزرسانی کنیم ، بنابراین ، قبل از انجام هر کاری بررسی می کنیم تا مطمئن شویم nonce معتبر است .

meta-box-content-3

مرحله سوم : ذخیره داده ها

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

برای ذخیره داده ها ، ما می خواهیم به یک هوک وردپرس دیگر اطمینان کنیم : save_post . این هوک درست مانند هوک action ما که در بالا توضیح دادیم کار می کند :

 

تابع cd_meta_box_save یک آرگومان را دریافت می کند ، یعنی post id ، و از پاکسازی و ذخیره تمام داده های ما مراقبت می کند . هوک save_post پس از اینکه دکمه پیش نویس  (draft button ) روی save یا update کلیک می خورد ، راه اندازی می شود . بنابراین ، ما به تمامی داده های POST_ $ و هر چیز دیگر دسترس داریم ؛ به هر حال ، ما سه کار انجام داده ایم : بررسی auto saving بودن پست ، بررسی مقدار  nonce که در قبل ایجاد کرده ایم ، و بررسی و اطمینان از اینکه کاربر فعلی می تواند پست را عملا ویرایش کند .

 

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

تاکنون ()esc_attr را در بالا ( مرحله دوم ) دیده اید . این تابع  ‘ ” و < > را در هویت های HTML  رمزگذاری می کند . چرا از این استفاده می کنیم ؟ بنابراین ، کاربران نمی توانند یک  <script> را در meta box شما تایپ کنند . اگر تمایل داشته باشید که اجازه ورود برچسب های معین HTML را بدهید اما سایر آن ها را ممنوع کنید ،

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

یک post ID ، the meta key و value .

 

 

 

meta-box-final

نتیجه گیری

همین است ! حال باید یک meta box داشته باشید که به طور کامل کار می کند . ممکن است نمونه های دیگری را در حلقه وب از طریق دسته ای از فیلدها و بدون پاکسازی واقعی داده ها بیابید . این رویکرد نادرست است . همواره از تابع های تایید از پیش ساخته شده استفاده کنید ؛ مقادیر / فیلدهای متفاوت ممکن است به تایید داده های متفاوتی نیاز داشته باشند .

برای استفاده از این فیلدهای سفارشی در بخش front end سایت خود ، از تابع های get_post_meta یا get_post_custom استفاده کنید ( مرحله دوم را ببینید ) .

حسن موحد

عاشق طراحی وب سایت هستم و 8 سال هست در این زمینه فعالیت می کنم و تمرکزم بر روی خرسند نگه داشتن مشتری است .

ارسال نظر