امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

آموزش ایجاد MetaBox با زمینه‌های دل‌خواه برای نوشته‌ها در وردپرس

wp-custom-metaboxes

در این آموزش شما را با نحوه ایجاد MetaBoxهایی با زمینه‌های دل‌خواه آشنا خواهیم کرد. برای این کار از یک اسکریپتی استفاده خواهیم کرد که سادگی کار با آن شما را شگقت‌زده خواهد کرد! این اسکریپت که متن‌باز می‌باشد و در سایت GitHub با این لینک در دست‌رس است، به شما این امکان را می‌دهد که برای نوشته‌ها، برگه‌ها و یا پست‌های سفارشی خود، metaboxهایی دل‌خواه ایجاد کنید و داخل این متاباکس‌ها از انواع زمینه‌های دل‌خواه استفاده نمایید.

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

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

اول فایل‌های اسکریپت را از این لینک بصورت یک فایل zip دریافت می‌کنیم و محتویات آن را در مسیری دل‌خواه داخل پوشه پوسته extract می‌کنیم. پس از اکسترکت یک پوشه خواهید داشت که حاوی یک سری فایل هست. ترجیحاً نام این پوشه را به یک نام دیگر تغییر دهید و سپس آن را در یک مسیر داخل پوشه پوسته‌تان قرار دهید.

سپاس فایل example-functions.php را با ویرایشگر متنی خود باز کنید (بهتر است نام ایم فایل را نیز به نام دیگر تغییر دهید). تنظیمات متاباکس‌ها و زمینه‌های دل‌خواه در این فایل قرار دارند و شما برای اضافه یا حذف آنها باید از این فایل اقدام کنید.

توضیحاتی مختصر در مورد این تابع :

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

function cmb_sample_metaboxes( array $meta_boxes ) {

	// Start with an underscore to hide fields from custom fields list
	$prefix = '_cmb_';

	$meta_boxes[] = array(
		'id'         => 'test_metabox',
		'title'      => 'Test Metabox',
		'pages'      => array( 'page', ), // Post type
		'context'    => 'normal',
		'priority'   => 'high',
		'show_names' => true, // Show field names on the left
		'fields'     => array(
			array(
				'name' => 'Test Text',
				'desc' => 'field description (optional)',
				'id'   => $prefix . 'test_text',
				'type' => 'text',
			),

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

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

'pages'      => array( 'page', 'post', 'custom_post_type', ), // Post type

دوسطر بعدی به ترتیب مربوط به محل و اولویت نمایش این متاباکس می‌باشد که پارامتر context یکی از سه مقدار normal، advanced و side را می‌تواند بگیرد و پارامتر priority یکی از مقادیر  high، core، default و یا low را می‌تواند شامل شود. مقدار پیش‌فرض اولی advanced است و مقدار پیش‌فرض دومی default می‌باشد. توضیح اینکه این مقادیر چه کاری انجام می‌دهند را دیگر نمی‌دهم و آن را به عهده خودتان می‌گذارم که با تغییر مقادیر آنها، با نحوه نمایش آنها آشنا شوید.

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

این اسکریپت به شما امکان اضافه کردن 22 نوع زمینه دل‌خواه به شرح زیر را می‌دهد که برای هر کدام یک مثالی آورده شده و شما می‌توانید هر کدام را که می‌خواهید با تغییر مقادری آنها به مقادری دل‌خواه خود در سایت‌تان استفاده کنید.

  • text
  • text small
  • text medium
  • text money
  • date picker
  • date picker (unix timestamp)
  • date time picker combo (unix timestamp)
  • time picker
  • color picker
  • textarea
  • textarea small
  • textarea code
  • select
  • radio
  • radio inline
  • taxonomy radio
  • taxonomy select
  • checkbox
  • multicheck
  • WYSIWYG/TinyMCE
  • Image/file upload
  • oEmbed

برای هر فیلد چند پارامتر درنظر گرفته شده است که به قرار زیر هستند :

  • name : نام زمینه دل‌خواه مورد نظرتان
  • desc : توضیحی برای زمینه دل‌خواه (اختیاری)
  • id : آی‌دی زمینه  با اضافه شدن مقدار پیش‌وند که کمی پیش‌تر در مورد آن توضیح داده شد.
  • type : نوع زمینه که در این اسکریپت 22 نوع از آنها تعریف شده و برای هر کدام یک مثالی آورد شده است.

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

در آخر باید این اسکریپت را در فایل functions.php پوسته‌تان فراخوانی کنید. به عنوان مثال اگر نام پوشه این اسکریپت را custom-metabox و خود این پوشه را در پوشه‌ای با نام include داخل پوشه پوسته قرار داده باشید، از کد زیر می‌توانید استفاده نمایید :

require_once ( get_stylesheet_directory() . '/include/custom-metabox/example-functions.php' );

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

global $post;
$text = get_post_meta( $post->ID, '_cmb_test_text', true );
echo $text;

توجه داشته باشید که پیش‌وند _cmb_ را قبل از نام آی‌دی زمینه مورد نظر وارد نمایید.

برای دریافت اطلاعات بیشتر می‌توانید به صفحه آنها در GitHub مراجعه نمایید.

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

یا حق

درباره امین بهشتی

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

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

    • سلام،

      برای آن کار ابتدا باید مطالب سایت‌تان را با استفاده از دسته‌بندی وردپرس و یا با استفاده از custom post types وردپرس از هم جدا کنید. سپس برای هر بخش(بلاگ) یک صفحه در نظر بگیرید و در بخش کدهای آن صفحه تعیین کنید که چه دسته یا custom post type ی در آن نمایش پیدا کند.

      سپاس

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

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.