اموزش ساخت پنل تنظیمات قالب وردپرس (قسمت ۲)
در قسمت اول آموزش ساخت پنل تنظیمات قالب وردپرس ، نحوه ساخت post type تنظیمات و اطلاعات درون آن را گفتیم و حالا در قسمت ۲ این آموزش خواهیم گفت که چطور تنظیمات سایت را در صفحه تنظیمات بسازیم.
قبل از اینکه شروع کنیم، یک توضیحی درباره کدها بهتون میگم. کلاسی که برای div صفحه تنظیمات قالب در نظر گرفته ایم “options_wrap” است، کلاس محتویات صفحه تنظیمات “content_options” و قسمت های تنظیمات سایت هم کلاس ” options_section name” را دارد. هر قسمت از تنظیمات کلاس جداگانه ای خواهد داشت و عنوان قسمت در نام کلاس آن قرار میگیرد. برای مثال: <div class=”options_input options_select”>. با این کلاس می توانید به فیلدها استایل مورد نظر را اعمال کنیم.
خب حالا ساخت پنل تنظیمات قالب وردپرس را شروع می کنیم.
در مرحله قبل ما post type مربوط به بخش تنظیمات را ساختیم و حالا می خواهیم کامل تر کنیم. پس فایل functions.php را باز کرده و کد زیر را قبل از تابع theme_settings_init قرار دهید:
/* ----------------------------------------------------------
کد نمایش دسته های سایت
------------------------------------------------------------- */
$themename = "مدرسه وردپرس"; // نام قالب
$shortname = "shortname";
$categories = get_categories('hide_empty=0&orderby=name');
$all_cats = array();
foreach ($categories as $category_item ) {
$all_cats[$category_item->cat_ID] = $category_item->cat_name;
}
array_unshift($all_cats, "انتخاب دسته بندی");
در کد بالا، با تابع get_categories تمامی دسته بندی ها را فراخوانی کرده و در متغیر $all_cats ذخیره می کنیم.
در مرحله بعدی آرایه های مربوط به تنظیمات را به فایل اضافه می کنیم. کدهای زیر را قبل از تابع theme_settings_page قرار دهید:
/* ---------------------------------------------------------
تعریف آرایه های تنظیمات
----------------------------------------------------------- */
$theme_options = array (
array( "name" =>" تنظیمات" . $themename,
"type" => "title"),
/* ---------------------------------------------------------
بخش تنظیمات عمومی
----------------------------------------------------------- */
array( "name" => "عمومی",
"type" => "section"),
array( "type" => "open"),
array( "name" => "لوگو سایت",
"desc" => "عکس لوگو را وارد کنید",
"id" => $shortname."_logo",
"type" => "text",
"std" => ""),
array( "name" => "آیکن سایت",
"desc" => "آیکن سایت باید در اندازه 16*16 باشد ",
"id" => $shortname."_favicon", "type" => "text",
"std" => get_bloginfo('url') ."/images/favicon.ico"),
array( "type" => "close"),
/* ---------------------------------------------------------
بخش تنظیمات صفحه نخست
----------------------------------------------------------- */
array( "name" => "صفحه نخست",
"type" => "section"),
array( "type" => "open"),
array( "name" => "مطالب ویژه صفحه نخست",
"desc" => "دسته مطالب ویژه را انتخاب کنید",
"id" => $shortname."_feat_cat",
"type" => "select",
"options" => $all_cats,
"std" => "انتخاب دسته"),
array( "type" => "close"),
/* ---------------------------------------------------------
بخش تنظیمات فوتر
----------------------------------------------------------- */
array( "name" => "فوتر",
"type" => "section"),
array( "type" => "open"),
array( "name" => "متن کپی رایت فوتر",
"desc" => "متن کپی رایت را وارد کنید",
"id" => $shortname."_footer_text",
"type" => "textarea",
"std" => ""),
array( "type" => "close")
);
حال با ذخیره فایل میبینید که تغییری در پنل تنظیمات رخ نداده است. خب حالا بخش پنل را کامل می کنیم. پس به سراغ تابع theme_settings_page رفته و کدهای زیر را داخل آن قرار می دهیم:
function theme_settings_page() {
global $themename,$theme_options;
$i=0;
$message='';
if ( 'save' == $_REQUEST['action'] ) {
foreach ($theme_options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($theme_options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
$message='saved';
}
else if( 'reset' == $_REQUEST['action'] ) {
foreach ($theme_options as $value) {
delete_option( $value['id'] ); }
$message='reset';
}
?>
<div class="wrap options_wrap">
<div id="icon-options-general"></div>
<h2><?php _e( ' تنظیمات قالب' ) //your admin panel title ?></h2>
<?php
if ( $message=='saved' ) echo '<div class="updated settings-error" id="setting-error-settings_updated">
<p>تنظیمات قالب '.$themename.' ذخیره شد.</strong></p></div>';
if ( $message=='reset' ) echo '<div class="updated settings-error" id="setting-error-settings_updated">
<p>'.$themename.' settings reset.</strong></p></div>';
?>
<ul>
<li>نسخه قالب : 1.0 </li>
</ul>
<div class="content_options">
<form method="post">
<?php foreach ($theme_options as $value) {
switch ( $value['type'] ) {
case "open": ?>
<?php break;
case "close": ?>
</div>
</div><br />
<?php break;
case "title": ?>
<div class="message">
<p>از این پنل برای تنظیم سایت استفاده کنید</p>
</div>
<?php break;
case 'text': ?>
<div class="option_input option_text">
<label for="<?php echo $value['id']; ?>">
<?php echo $value['name']; ?></label>
<input id="" type="<?php echo $value['type']; ?>" name="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" />
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case 'textarea': ?>
<div class="option_input option_textarea">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<textarea name="<?php echo $value['id']; ?>" rows="" cols=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case 'select': ?>
<div class="option_input option_select">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case "checkbox": ?>
<div class="option_input option_checkbox">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input id="<?php echo $value['id']; ?>" type="checkbox" name="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case "section":
$i++; ?>
<div class="input_section">
<div class="input_title">
<h3><img src="<?php echo get_template_directory_uri();?>/images/options.png" alt=""> <?php echo $value['name']; ?></h3>
<span class="submit"><input name="save<?php echo $i; ?>" type="submit" class="button-primary" value="ذخیره" /></span>
<div class="clearfix"></div>
</div>
<div class="all_options">
<?php break;
}
}?>
<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="بازنشانی تنظیمات" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>
<div class="footer-credit">
<p>این پنل توسط <a title="مدرسه وردپرس" href="http://wpschool.ir" target="_blank" >مدرسه وردپرس</a> ساخته شده است.</p>
</div>
</div>
<?php
}
حالا فایل را ذخیره کنید و پنل را بینید. پنل تنظیمات ساخته شد. باید مطابق شکل زیر باشد:
خب قسمت ۲ آموزش ساخت پنل تنظیمات قالب وردپرس هم به پایان رسید. تا این جا کل کدی که استفاده کرده ایم را در زیر قرار دادم
/* ----------------------------------------------------------
دسته بندی ها
------------------------------------------------------------- */
$themename = "مدرسه وردپرس";
$shortname = "shortname";
$categories = get_categories('hide_empty=0&orderby=name');
$all_cats = array();
foreach ($categories as $category_item ) {
$all_cats[$category_item->cat_ID] = $category_item->cat_name;
}
array_unshift($all_cats, "انتخاب دسته بندی");
/*---------------------------------------------------
ساخت تنظیمات
----------------------------------------------------*/
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}
/*---------------------------------------------------
افزودن تنظیمات به منو پیشخوان
----------------------------------------------------*/
function add_settings_page() {
add_menu_page( __( 'تنظیمات' . 'wpschool' ), __( 'تنظیمات' . 'wpschool' ), 'manage_options', 'settings', 'theme_settings_page');
}
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );
/* ---------------------------------------------------------
تعریف آرایه های تنظیمات
----------------------------------------------------------- */
$theme_options = array (
array( "name" =>" تنظیمات" . $themename,
"type" => "title"),
/* ---------------------------------------------------------
بخش تنظیمات عمومی
----------------------------------------------------------- */
array( "name" => "عمومی",
"type" => "section"),
array( "type" => "open"),
array( "name" => "لوگو سایت",
"desc" => "عکس لوگو را وارد کنید",
"id" => $shortname."_logo",
"type" => "text",
"std" => ""),
array( "name" => "آیکن سایت",
"desc" => "آیکن سایت باید در اندازه 16*16 باشد ",
"id" => $shortname."_favicon", "type" => "text",
"std" => get_bloginfo('url') ."/images/favicon.ico"),
array( "type" => "close"),
/* ---------------------------------------------------------
بخش تنظیمات صفحه نخست
----------------------------------------------------------- */
array( "name" => "صفحه نخست",
"type" => "section"),
array( "type" => "open"),
array( "name" => "مطالب ویژه صفحه نخست",
"desc" => "دسته مطالب ویژه را انتخاب کنید",
"id" => $shortname."_feat_cat",
"type" => "select",
"options" => $all_cats,
"std" => "انتخاب دسته"),
array( "type" => "close"),
/* ---------------------------------------------------------
بخش تنظیمات فوتر
----------------------------------------------------------- */
array( "name" => "فوتر",
"type" => "section"),
array( "type" => "open"),
array( "name" => "متن کپی رایت فوتر",
"desc" => "متن کپی رایت را وارد کنید",
"id" => $shortname."_footer_text",
"type" => "textarea",
"std" => ""),
array( "type" => "close")
);
/*---------------------------------------------------
تعریف بخش های پنل
----------------------------------------------------*/
function theme_settings_page() {
global $themename,$theme_options;
$i=0;
$message='';
if ( 'save' == $_REQUEST['action'] ) {
foreach ($theme_options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($theme_options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
$message='saved';
}
else if( 'reset' == $_REQUEST['action'] ) {
foreach ($theme_options as $value) {
delete_option( $value['id'] ); }
$message='reset';
}
?>
<div class="wrap options_wrap">
<div id="icon-options-general"></div>
<h2><?php _e( ' تنظیمات قالب' ) //your admin panel title ?></h2>
<?php
if ( $message=='saved' ) echo '<div class="updated settings-error" id="setting-error-settings_updated">
<p>تنظیمات قالب '.$themename.' ذخیره شد.</strong></p></div>';
if ( $message=='reset' ) echo '<div class="updated settings-error" id="setting-error-settings_updated">
<p>'.$themename.' settings reset.</strong></p></div>';
?>
<ul>
<li>نسخه قالب : 1.0 </li>
</ul>
<div class="content_options">
<form method="post">
<?php foreach ($theme_options as $value) {
switch ( $value['type'] ) {
case "open": ?>
<?php break;
case "close": ?>
</div>
</div><br />
<?php break;
case "title": ?>
<div class="message">
<p>از این پنل برای تنظیم سایت استفاده کنید</p>
</div>
<?php break;
case 'text': ?>
<div class="option_input option_text">
<label for="<?php echo $value['id']; ?>">
<?php echo $value['name']; ?></label>
<input id="" type="<?php echo $value['type']; ?>" name="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" />
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case 'textarea': ?>
<div class="option_input option_textarea">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<textarea name="<?php echo $value['id']; ?>" rows="" cols=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case 'select': ?>
<div class="option_input option_select">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case "checkbox": ?>
<div class="option_input option_checkbox">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input id="<?php echo $value['id']; ?>" type="checkbox" name="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<small><?php echo $value['desc']; ?></small>
<div class="clearfix"></div>
</div>
<?php break;
case "section":
$i++; ?>
<div class="input_section">
<div class="input_title">
<h3><img src="<?php echo get_template_directory_uri();?>/images/options.png" alt=""> <?php echo $value['name']; ?></h3>
<span class="submit"><input name="save<?php echo $i; ?>" type="submit" class="button-primary" value="ذخیره" /></span>
<div class="clearfix"></div>
</div>
<div class="all_options">
<?php break;
}
}?>
<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="بازنشانی تنظیمات" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>
<div class="footer-credit">
<p>این پنل توسط <a title="مدرسه وردپرس" href="http://wpschool.ir" target="_blank" >مدرسه وردپرس</a> ساخته شده است.</p>
</div>
</div>
<?php
}
تا قسمت بعدی آموزش خدانگهدار
