Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

آموزش طراحی پنل مدیریت وردپرس ( قسمت 3 )

آموزش طراحی پنل مدیریت وردپرس ( قسمت 3 )

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

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

خب بریم سراغ آموزش.

در این قسمت یاد میگیرید که چگونه:

با اسکینچه همراه باشید.

برای ثبت مقادیر فیلد ما نیاز داریم که بررسی کنیم آیا فیلد های ما پر شده‌اند یا خیر اما بدین منظور نمیتوانیم که تک تک فیلد های خود را دستی چک کنیم پس از متغیر $options که قبلاً ایجاد کرده‌ایم استفاده میکنیم.

در داخل فایل های افزونه به دنبال تابع skinche_admin_panel_cb() میگردیم و پس از فراخوانی $options کد های بررسی خود را مینویسم.

نکته: در قسمت قبل بنده فراموش کردم که دکمه ثبت را در فرم ایجاد کنم کد زیر را قبل از تگ بسته </form> قرار دهید. 👇

<button type="submit" name="submit" value="submit" class="button button-primary">ثبت تغییرات</button>

ثبت مقادیر در دیتابیس

ابتدا نیاز داریم که بررسی کنیم آیا دکمه submit زده شده یا خیر پس کد زیر را بعد از global $options قرار میدهیم 👇

if ( isset( $_POST['submit'] ) ) {
// Enter your code here
}

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

foreach ( $options as $option ) {
	if ( ! empty( $_POST[ $option['id'] ] ) ) {
		echo "<p>{$option['name']}: {$_POST[$option['id']]}</p>";
	}
}

کد بالا نشان میدهد که کدام فیلد ها چه مقداری را نشان میدهند.

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

توابع:
برای مشاهده توضیحات هر کدام بر روی آن ها کلیک کنید

  1. delete_option()
  2. update_option()

کد حلقه خود را بدین شکل ویرایش میکنیم 👇

foreach ( $options as $option ) {		
	if ( ! empty( $_POST[ $option['id'] ] ) ) {
		update_option( $option['id'], $_POST[ $option['id'] ] );
	} else {
		delete_option( $option['id'] );
	}
}

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

اما! یک اتفاقی که می افتاد مقادیر checkbox و radio ها تغییر نمیکند.
دوشواری نداریم که باید با ایجاد کمی تغییرات درون کد های فرم آنها را نیز قابل اجرا کنیم. درون کد ها به دنبال بخشی به نام case “checkbox” میگردیم و تغییرات زیر را بر روی فیلد های آن اعمال میکنیم.

<label>
	<?php $checked = checked( get_option( $option['id'] )[ $key ], 1, false );?>
	<input type="<?php esc_attr_e( $option['type'] ); ?>" 
	       name="<?php esc_attr_e( $option['id'] ); ?>[<?php esc_attr_e( $key ); ?>]" 
	       value="1"
		<?php echo $checked;?>>
	<?php esc_html_e( $name ); ?>
</label>

و برای دکمه های رادیویی بدین شکل

<label>		
	<?php $checked = checked( get_option( $option['id'] ), $key, false ); ?>
	<input type="<?php esc_attr_e( $option['type'] ); ?>"
	       name="<?php esc_attr_e( $option['id'] ); ?>"
	       value="<?php esc_attr_e( $key ); ?>"
		<?php echo $checked; ?>>
	<?php esc_html_e( $name ); ?>
</label>

پس از ثبت میبینید که فیلد های شما بعد از رفرش صفحه تیک خورده‌اند و تنظیمات در دیتابیس ثبت شده.

تابع فراخواهی اطلاعات از دیتابیس

بصورت پیشفرض شما میتوانید از تابع get_option() برای دریافت اطلاعات خود استفاده کنید اما اگر نیاز دارید که تابع اختصاصی خود را بنویسید میتوانید از کد زیر استفاده کنید.

function skinche_option( $id, $default = '' ) {
	return get_option( $id, $default );
}

کد بالا را در آخر فایل خود اضافه کنید.

  1. مقدار $id باید برابر مقداری باشد که شما در هنگام ثبت فیلد گذاشتید.
  2. مقدار $default زمانی نشان داده میشوند که در داخل دیتابیس مقدار خالی باشد.

استایل دهی به پنل مدیریت وردپرس

حال میرسیم به بخش استایل دهی به پنل وردپرس.

ابتدا باید فایل های خود را به وردپرس بشناسانیم بدین منظور از کد زیر قبل متغیر $options استفاده میکنیم.

add_action( 'admin_enqueue_scripts', function () {
	wp_enqueue_style( 'skinche-panel-style', plugin_dir_url( __FILE__ ) . 'style.css', [], '1.0.0' );
} );

در داخل پوشه افزونه فایل تحت عنوان style.css ایجاد میکنیم و کد های زیر را در داخلش قرار میدهیم.

.skinche-panel-wrap .box {
  background: #ffffff;
  margin-bottom: 20px;
}
.skinche-panel-wrap .box .title {
  background: #007cba;
  color: #FFF;
  padding: 15px 20px;
}
.skinche-panel-wrap .box .title h3 {
  color: #ffffff;
  margin: 0;
}
.skinche-panel-wrap .box .content {
  padding: 15px 20px;
}
.skinche-panel-wrap .box .content em {
  background: #CCC;
  padding: 10px;
  display: inline-block;
  position: relative;
  margin-top: 20px;
  border-radius: 10px;
}
.skinche-panel-wrap .box .content em:before {
  content: "";
  border-bottom: 10px solid #CCCCCC;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  top: -7px;
}
.skinche-panel-wrap .box .content input[type=text], .skinche-panel-wrap .box .content textarea {
  width: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 10px;
}

خروجی نهایی کار شما باید به این صورت باشد.

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

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

همچنین شما میتوانید فایل نهایی افزونه را دانلود کنید. در صورت بروز هر گونه مشکل از طریق فرم نظرات همین صفحه با من در ارتباط باشید.


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

تا درودی دیگر بدرود ❤️❤️

تصویر پروفایل احمدرضا ابراهیمی
احمدرضا ابراهیمی

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

دیدگاه ها
مشترک شدن
اطلاع از
guest
0 دیدگاه‌ها
بازخورد درون خطی
مشاهده تمامی دیدگاه ها