سه روش استفاده از MetaBox ها (قسمت دوم)

دانلود نمونه کد

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

مثال 1. اضافه کردن یک نشان نقل قول به بالای هر پست

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

1. اضافه کردن متا باکس

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

PHP

2. خروجی گرفتن از متا باکس

یک تابع با نام مشابه $callback مشخص شده در add_meta_box ، ایجاد کنید. این همان بخشی است که در واقع محتویات متا باکس را نمایش می دهد.

PHP

3. ذخیره سازی داده ها

یک تابع را به save_post قلاب کنید که در ابتدا به تایید مجوزها و مقصودها می پردازد و سپس اطلاعلت را ذخیره و پاک می کند.

PHP

meta-box-og-1

حالا به بخش سرگرم کننده می پردازیم: استفاده از اطلاعات

ما می توانستیم اطلاعات ذخیره شده در متا باکس ها را با ویرایش کردن فایل های قالب تم مان استفاده کنیم. اما این کار خیلی آسان است. برای اینکه نقل قول هایمان را مطابق اندازه و مقیاس نگه داریم (یک فایل افزونه)، از قلابهای فیلتر ، بخشی از API افزونه استفاده می کنیم. قلابهای فیلتر با اقدامات کمی متفاوت هستند. هنگامی که شما به یک فیلتر قلاب میزنید، بیشتر وقتها هدف تعیین چگونگی ظاهر شدن یک قطعه از محتوا در یک صفحه است. ما در اینجا قصد داریم به the_content قلاب بزنیم، و اگر در یک صفحه ی پست تکی هستیم که یک نقل قول دارد، آن را به بالا اضافه می کنیم.
راه دیگر قرار دادن اقدامات در مقابل قلاب فیلتر این است که شما همه چیز را در اقدامات echo کنید (به عنوان مثال: به wp_head، در بخش 2 مراجعه کنید)، اما با فیلتر شما یک یا چند متغیر را وراد می کنید، آنها را تغییر می دهید، سپس آنها را return می کنید.
برای نمایش نقل قولهایمان، به the_content قلاب خواهیم زد، که به طور پیش فرض یک متغیر را منتقل می کند: محتوای پست داده شده. در داخل تابع قلاب شده ی ما، مطمئن خواهیم شد که ما بر روی یک پست تکی کار می کنیم و اگراین طور نیست، سریعا محتوا را بر می گردانیم (بدون تغییرات).

PHP

در قدم بعد، متغیر $post را دریافت می کنیم. از آنجا که در حلقه هستیم، فقط global $post را فرا خوانی می کنیم. سپس نقل قول هایمان را دریافت می کنیم، اگر هیچ مقداری برنگشت، ما می دانیم که هیچ نقل قولی وارد نشده است و یکبار دیگر محتوا را بدون تغییر بر می گردانیم.

PHP

حالا که مطمئن هستیم که بر روی یک پست تکی هستیم و در واقع یک نقل قول داریم، هم چیز را با هم قرار می دهیم. ابتدا نویسنده و تاریخ خود را از طریقget_post_meta () فرا می خوانیم، سپس می توانیم شروع به ساختن یک رشته در متغیر $out بکنیم. ابتدا ما یک

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

را اضافه می کنیم.

PHP

حالا به مهم ترین مرحله می پردازیم: بازگرداندن ترکیبی از رشته ی تازه ساخته شده ی $out ما که شامل نقل قول و محتوای اصلی موجود در $content است.

PHP

حالا می توانید نتایج را ببینید.

meta-box-quote-2

مثال 2: اضافه کردن تگ نمودارهای باز(Open Graph)

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

PHP

meta-box-og-1

اضافه کردن چند جاوا اسکریپت

برای اینکه دکمه ی ” Upload Image” کار کند، مجبوریم که چند جاوا اسکریپت اضافه کنیم که سازه را در بارگذارنده ی وردپرس می دزدد. این به این معنی است که ما در عین حال قصد استفاده از یک قلاب عملکردی دیگر را نیز داریم. این دفعه این قلاب admin_print_script-{$page} است.
هنگام اضافه کردن اسکریپت ها و یا سبک ها به بخش مدیریت وردپرس، یک قانون طلایی وجود دارد: فقط زمانی که اسکریپت ها و یا سبک ها را لازم دارید، آنها را اضافه کنید. این کار افزونه ی شما را از شکستن چیز دیگری به طور تصادفی ممانعت می کند، و admin_print_scripts-{$page} به شما اجازه می دهد که فقط اسکریپت وارد کنید (از طریق تابع wp_enqueue_script ) مشخصا فقط در specified . در این صورت، ما باید اسکریپت مان را در صفحه ی post.php and post-new.php وارد کنیم. این امر مستلزم قلاب کردن یک تابع به هر دوی آنها است.

PHP

و حالا خود جاوا اسکریپت:

PHP

ابتدا مطمئن می شویم که بارگذارنده یthickbox در هنگام کلیک کردن بر روی دکمه بالا میآید، و یک متغیر راه اندازی می کنیم که به وردپرس بگوید که این دکمه ی ما بود که کلیک شده بود. سپس تابعwindow.send_to_editor را با یک نام جدید ذخیره می کنیم. این تابعی است که در واقع تصویر HTML را در بخش ویرایش پست وارد می کند. قصد داریم این تابع را برباییم که آن را بر روی صفت Src در بخش فرم خودمان ارسال کنیم، اما همه ی این کارها در صورتی عملی می شود کهthickbox توسط دکمه بالا بیاید.

آموزش سفارشی کردن اسکرول در وردپرس

اضافه کردن تگ نمودار های باز

قصد داریم که به عملکردwp_head قلاب بزنیم تا بتوانیم تگ های متای خودمان را در قسمتاضافه کنیم. اول مطمئن خواهیم شد که شوید که در صفحه ی پست تکی هستیم، و سپس متغیر $post را راه اندازی می کنیم. متغییر $post نباید در این مرحله خالی باشد زیرا که وردپرس قبلا تصمیم گرفته است که این از چه نوع چیزهایی باید خروجی بگیرد و چه نوع فایل های قالب نیاز است که مورد استفاده قرار گیرد. اما اگر این طور شد، پست را به وسیله ی get_queried_object() بازیابی می کنیم.

PHP

در مرحله ی بعد می توانیم به سراغ هر یک از متغیرهای نمودارهای باز برویم و همه چیز را با get_post_custom() می گیریم، اگر آنجا وجود داشته باشند، و آن را در بخش سربرگ صفحه منعکس می کنیم.

PHP

meta-box-og-2

مثال 3. تغییر دادن پوسته دوهزار و یازده در یک چشم به هم زدن

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

PHP

اضافه کردن متا باکس

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

PHP

برای اینکه کمی متا باکس های خود را زیباتر کنیم، نیاز داریم که شیوه نامه های خودمان را هم اضافه کنیم. admin_print_scripts-{$page} را از سناریوی دوم در بالا به یاد دارید؟ admin_print_styles-{$page} یک تابع مشابه به آن است که همانطور که از نامش پیداست، به شما اجازه می دهد تا مدیریت وردپرس در صفحات خاص شیوه نامه اضافه کنید. ما باید برای post.php and post-new.php به این تابع قلاب بزنیم. ما همچنین از wp_enqueue_style(); استفاده خواهیم کرد، که کار آن مانند wp_enqueue_script() خواهد بود که در مثال دوم در بالا از آن استفاده کردیم.

PHP

و حالا CSS ها.

PHP

meta-box-sidebar

کنکاش در دوهزار و یازده

دوهزار و یازده موفعیت دهی به نوار کناری خود را به وسیله قلاب کردن به فیلتری به نام body_class به انجام می رساند. این بخشی از تابعی به نام است، که اگر قبلا یک تم طراحی کرده باشید، احتمالا از آن استفاده کرده اید. اگر طرح پیش فرض دو ستون است، دوهزار و یازده یکی از دو مورد اضافی را به body_class اضافه می کند: نوار کناری سمت راست یا نوار کناری سمت چپ. شما می توانید در پوشه ی inc تم و در پوشه ی theme-options.php کد را برای این ببینید.
قرار است که کد خود ما نیز به body_class قلاب شود. اول، مطمئن خواهیم شد که در یک صفحه هستیم، و صفحه نیز از Sidebar Template استفاده می کند. سپس متغیر $post را بدست خواهیم آورد و یا آن را در صورت خالی بودن تنظیم خواهیم کرد. به دو آرگومان اضافی برای add_filter توجه داشته باشید. 99 در اولویت است. می خواهیم که این یکی در نهایت اجرا شود، بنابراین از یک عدد بالاتر استفاده می کنیم. 1، شماره ی آرگومان برای ارسال به تابع ما است.

PHP

body_class، آرایه های تمام آیتم هایی را که به تابع خروجی body_class() میروند، ارسال می کند. از اینجا، ما فقط نیاز به دریافت مقادیر متا های خود داریم. اگر مقدار ما ‘right’ است، در آرایه های body class به دنبال “left-sidebar” می گردیم. اگر آن در آنجا وجود دارد، آن را unset خواهیم کرد و با “right-sidebar” جایگزین می کنیم. اگر مقدار ما left است، بر عکس عمل می کنیم.

PHP

این کد بالایی کار خواهد کرد، اما ما نیز کمی جزئیات ارائه خواهیم داد. اگر گزینه های تم دوهزار و یازده یک کاربر اتفاقا بر روی نمایش یک ستون تنظیم شده باشد، هیچ یک از گزینه های موجود در متا باکس ما کار نخواهد کرد. پس اجازه دهید کمی add_meta_box call را تغییر دهیم. اول گزینه های دوهزار و یازده را خواهیم گرفت، سپس مطمئن خواهیم شد که گزینه های طرح تم بر روی یک ستون تنظیم نشده است. اگر تم بر روی یک ستون تنظیم شده باشد، متا باکس را اضافه نخواهیم کرد.

PHP

دانلود نمونه کد

 

نتیجه گیری

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

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام چطوری می شه یه متا باکس رو بدون این که کد اش رو تو قالب وارد کنیم بشه توسط فانکشن به صورت خودکار به اخر مطالب اضافه بشه

  2. عالی بود

  3. آیا امکان query نویسی برای این اتصال چک باکس به زمینه دلخواه و نمایش پیش فرض قالب وجود دارد؟
    وب سایتی که بتونم ازش استفاده کنم وجود دارد ؟
    امکان گذاشتن آموزش کوئری نویسی و اتصال آن در این زمینه وجود دارد؟
    با تشکر از شما

  4. منظورم این هست که میخوام یک صفحه داشته باشم .چند تا چک باکس متصل به زمینه دلخواهم باشه و پایین همان صفحه با زدن چک باکس ها شکل خروجی مطالب نمایش محصولات پیش فرض بخش portfolio قالب rt theme 18 باشه.
    یه چیزی مثل سایت زیر
    http://www.farshonline.com/index.php?option=com_virtuemart&page=shop.browse&category_id=6&Itemid=113
    میدونم این وب سایت جوملا هست و افزونه k2 استفاده کرده .

    • 12 سال عضو همیار وردپرس

      سلام
      بله! اطلاعی در این زمینه ندارم ، بررسی خواهم کرد

  5. با سلام
    من میخوام یه چک باکس داشته باشم که قسمت port flio قالب rt 18 صدا بزنه شکلشم بشه مثل پیش فرض قالب چکار باید کنم .لطفا راهنمایی کنید

    با تشکر

  6. سلام. من دارم یه قالب طراحی میکنم و دو نوع پست توی این قالب طراحی کردم و نمیخاستم از خاصیت Post Format استفاده کنم . حالا سوالم اینه که میشه توی متاباکس یه منوی کرکره ای ایجاد کرد و توسط اون نوع پست رو بشه انتخاب کرد ؟ اگر میشه منو راهنمایی کنید . مرسی اقا علی .

    • شما به جای اینکه این دو نوع پست رو با منوی کرکره ای از هم جدا کنید، یک صفحه دیگه برای اضافه کردن اون پست ها طراحی کن … post type رو گوگل کن، یه چیزایی دستت میاد

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

  8. سلام
    میشه بجای Custom Field ها از Meta Box استفاده کرد؟ مثل جعبه دانلود سایت ها!

  9. خوب

  10. سلام
    چطور میشه این قالب را 3 ستونه کرد؟