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

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

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

با سلام با قسمت دوم از سری طراحی پنل مدیریت همراه شمائیم. در قسمت قبل یاد گرفتیم که:

  • چگونه افزونه پنل مدیریت خودمون را به وردپرس اضافه کنیم
  • چگونه صفحه تنظیمات را ایجاد کنیم
  • چگونه صفحه را به سایدبار پیشخوان وردپرس اضافه کنیم

در صورتی که قسمت قبل را نخوانده اید پیشنهاد میشود که حتما آنرا مطالعه کنید: آموزش طراحی پنل مدیریت وردپرس ( قسمت 1 )

خب بریم سراغ آموزش. در این قسمت سعی داریم که عناصر صفحه ( ماننده: فیلد متنی، دکمه های چک باکس، دکمه های رادیویی و… ) را طراحی کنیم.

طراحی عناصر صفحه پنل مدیریت وردپرس

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

فایل پلاگین خود را باز کنید و قبل از تابع skinche_admin_panel_cb() آرایه ای با عنوان options اضافه میکنیم 👇

$options = array()

حال نیاز داریم که به ازای هر آیتم از آرایه یک فیلد تنظیمات اضافه شود اما برای اینکار باید صفحه‌ای که برای تنظیمات ایجاد کردیم را طراحی کنیم.

درون آرایه options آرایه‌ای دیگر بدین شکل ایجاد میکنیم 👇

$options = array(
	array(
		'name'        => 'فیلد متنی',
		'description' => 'توضیحات فیلد متنی',
		'type'        => 'text',
		'id'          => 'opt-text-1'
	)
);

و درون تابع skinche_admin_panel_cb() بدین شکل فیلد خود را پیدا میکنیم اما قبل از آنکه فیلد را بسازیم نیاز داریم تا ببینیم که آیا متغیر options درست کار میکند یا خیر پس به این شکل عمل میکنیم 👇

function skinche_admin_panel_cb() {
	global $options; ?>
    
    <form class="wrap skinche-panel-wrap" method="post">
        
		<?php foreach ( $options as $option ) { ?>
            <p>نام: <?php echo $option['name']; ?></p>
            <p>توضیحات: <?php echo $option['description']; ?></p>
            <p>نوع: <?php echo $option['type']; ?></p>
            <p>ID: <?php echo $option['id']; ?></p>
		<?php } ?>
        
    </form>
    
<?php }

پس از ذخیره فایل باید در صفحه پنل تنظیمات با همچین متنی مواجه می‌شوید 👇

skinche admin panel 1
محتوای ایجاد شده به وسیله آرایه

در این قسمت میبینیم که آرایه به درستی کار میکند. اما اگر بخواهیم چندین فیلد مختلف اضافه کنیم به چه صورت است ؟ بسیار سادست، تنها کافیست که از switch() برای بررسی مقدار type در هر خانه‌ی آرایه استفاده کنیم.

اطلاعات بیشتر:
https://www.w3schools.com/php/php_switch.asp
https://www.php.net/manual/en/control-structures.switch.php

function skinche_admin_panel_cb() {
	global $options; ?>

    <form class="wrap skinche-panel-wrap" method="post">

		<?php foreach ( $options as $option ) {

			switch ( $option['type'] ) {
				case 'text':
					?>
                
                    <p>نام: <?php echo $option['name']; ?></p>
                    <p>توضیحات: <?php echo $option['description']; ?></p>
                    <p>نوع: <?php echo $option['type']; ?></p>
                    <p>ID: <?php echo $option['id']; ?></p>
                
					<?php break;
			}
		} ?>

    </form>

<?php }

با استفاده از این کد تنها زمانی فیلد نشان داده میشود که شما مقدار type را برابر text گذاشته باشید.

حال بریم به سراغ طراحی فیلد ها

  1. فیلد متنی
  2. ناحیه متنی
  3. دکمه چک باکس و رادیوئی

فیلد متنی

<div class="box">
    <div class="title"><h3>
            <label for="<?php esc_attr_e( $option['id'] ); ?>"><?php esc_html_e( $option['name'] ); ?></label>
        </h3>
    </div>
    <div class="content">
        <input type="<?php esc_attr_e( $option['type'] ); ?>" 
               name="<?php esc_attr_e( $option['id'] ); ?>" 
               id="<?php esc_attr_e( $option['id'] ); ?>" 
               value="<?php esc_attr_e( get_option( $option['id'] ) ); ?>">
        <?php if ( isset( $option['description'] ) &amp;&amp; ! empty( $option['description'] ) ) { ?>
            <em><?php esc_html_e( $option['description'] ); ?></em>
        <?php } ?>
    </div>
</div>

ناحیه متنی

<div class="box">     
    <div class="title">         
        <h3>             
            <label for="<?php esc_attr_e( $option['id'] ); ?>"><?php esc_html_e( $option['name'] ); ?></label>         
        </h3>     
    </div>     
    <div class="content">         
        <textarea name="<?php esc_attr_e( $option['id'] ); ?>"
                  id="<?php esc_attr_e( $option['id'] ); ?>"
                  cols="30"
                  rows="10"><?php esc_html_e( get_option( $option['id'] ) ); ?></textarea>	        
        <?php if ( isset( $option['description'] ) &amp;&amp; ! empty( $option['description'] ) ) { ?>             
            <em><?php esc_html_e( $option['description'] ); ?></em>	        
        <?php } ?>     
    </div> 
</div>

دکمه چک باکس و رادیوئی

<div class="box">
    <div class="title">
        <h3>
            <label for="<?php esc_attr_e( $option['id'] ); ?>"><?php esc_html_e( $option['name'] ); ?></label>
        </h3>
    </div>
    <div class="content">
        <?php foreach ( $option['options'] as $key => $name ) { ?>
            <label>
                <input type="<?php esc_attr_e( $option['type'] );?>" name="<?php esc_attr_e( $option['id'] ); ?>" value="<?php esc_attr_e( $key ); ?>">
                <?php esc_html_e( $name ); ?>
            </label>
            <br>
        <?php }if ( isset( $option['description'] ) &amp;&amp; ! empty( $option['description'] ) ) { ?>
            <em><?php esc_html_e( $option['description'] ); ?></em>
        <?php } ?>
    </div>
</div>

فراموش نکنید که در متغیر options فیلد های خود را تعریف کنید

$options = array(
	array(
		'name'        => 'فیلد متنی',
		'description' => 'توضیحات فیلد متنی',
		'type'        => 'text',
		'id'          => 'opt-text-1'
	),
	array(
		'name'        => 'ناحیه متنی',
		'description' => 'توضیحات ناحیه متنی',
		'type'        => 'textarea',
		'id'          => 'opt-textarea-1'
	),
	array(
		'name'        => 'دکمه چک باکس',
		'description' => 'توضیحات دکمه چک باکس',
		'type'        => 'checkbox',
		'id'          => 'opt-checkbox-1',
		'options'     => array(
			'opt-1' => 'مقدار یک',
			'opt-2' => 'مقدار دو',
			'opt-3' => 'مقدار سه'
		)
	),
	array(
		'name'        => 'دکمه رادیوئی',
		'description' => 'توضیحات دکمه رادیوئی',
		'type'        => 'radio',
		'id'          => 'opt-radio-1',
		'options'     => array(
			'opt-1' => 'مقدار یک',
			'opt-2' => 'مقدار دو',
			'opt-3' => 'مقدار سه'
		)
	),
);

در نهایت باید با همچین صفحه ای روبرو شوید 👈

پنل مدیریت وردپرس ما بعد از ایجاد تغییرات
پنل مدیریت وردپرس ما بعد از ایجاد تغییرات

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

همچنین شما میتوانید فایل های این بخش از آموزش را از طریق لینک زیر دانلود کنید. 👇


تا قسمت بعدی آموزش، خدا یار و نگهدارتان 🙌❤️

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

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

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