برای قالب های وردپرس , کنترل پنل طراحی کنید

برای قالب های وردپرستان کنترل پنل طراحی کنید

امروز، ما به تمامی مراحل ایجاد یک پنل گزینه های انتخابی (options panel) ادمین برای یک تم وردپرس، با استفاده ازWooFramework  می پردازیم. سپس، همانطور که jQuery را برای بهبود برخی از قابلیت ها اجرا می کنیم، همه چیز را یک گام به جلو خواهیم برد.

برای شروع آموزش لطفا فایل را دانلود کنید [ دانلود فایل ]

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

به عنوان مثال – اگر تم شما رنگی های قرمز، آبی و سبز دارد، و هر کدام دارای یک فایلCSS مرتبط است، برای کاربر به مراتب ساده تر است که رنگ مورد نظر خود را از یک لیست کرکره ای (dropdown) انتخاب کند. بنابراین، به من اجازه دهید که امروز شما را با تمامی مراحل ایجاد و افزایش صفحه ی پانل ادمین وردپرس که الهام گرفته از Woo است، آشنا کنم.

مرحله ی 1

قبل از اینکه ما شروع به ایجاد یک پنل ادمین کنیم، باید یک تم داشته باشیم، درست است؟ بنابراین فایل های منابع ارائه شده در همین آموزش را دانلود کنید. من تم Classic وردپرس را کمی تغییر داده ام. پوشه ی ‘nettuts’ (من نام تم را ‘nettuts’ گذاشته ام) را در پوشه ی wp-content/Themes خود قرار دهید. حالا باید فایل های زیر را ببینید:

• functions.php (blank)
• index.php
• comments.php
• footer.php
• header.php
• rtl.php
• sidebar.php
• style.css
• screenshot.png
• یک پوشه ی تصویر با دو فایل

بخش عمده ی کار ما در درون فایل functions.php انجام می شود.
“یک تم می تواند به صورت اختیاری از یک فایل تابع استفاده کند، که به صورت زیر شاخه ای در تم ساکن می شود و فایل functions.php نامیده می شود. این فایل در واقع مانند یک پلاگین عمل می کند، و اگر در تمی که شما استفاده می کنید حضور داشته باشد، در طول مقدار دهی اولیه در وردپرس به طور خودکار بارگذاری می شود (هم برای صفحات ادمین و هم برای صفحات خارجی).

استفاده های پیشنهادی از این فایل ها:

• توابع استفاده شده در چندین فایل قالب تم شما را تعریف می کند
• یک صفحه ی نمایش ADMIN راه اندازی می کند، که به کاربران گزینه هایی برای رنگ، سبک، و دیگر جنبه های تم شما ارائه می دهد

مرحله ی 2

حالا که تم وردپرس خود را راه اندازی کرده ایم، به قسمت Appearance>Themes رفته و تم nettuts را فعال کنید.

فعال شد؟ بسیار عالی. حالا باید در فکر یک طرح برای صفحه ی پنل ادمین خود باشیم. در اینجا ساختاری را که من در نظر دارم، می بینید:

<div class="wrap rm_wrap">
	<div class="rm_opts">
		<form method="post">
			<div class="rm_section">
				<div class="rm_title>
					<h3>Title</h3>
					<submit button>
				</div>
				<div class="rm_input rm_<select/textarea/text etc>">
					<input area>
					<description>
				</div>
			</div>

			/*Repeat the inputs for as many options as required. */
			/* use <div class="rm_section"> for each new section of inputs eg General, Home Page etc */
		</form>
	</div>
</div>

اجازه دهید همه ی آنچه را که می بینید به شما توضیح دهم. تنظیمات گزینه ها در یک div به نام “rm_wrap” و سپس “rm_opts” برای گزینه ها پیچیده خواهد شد. سپس یک فرم را با تمام ورودی های درون آن شروع می کنیم. هر بخش از گزینه ها (تنظیمات عمومی، تنظیمات صفحه ی اصلی، تنظیمات وبلاگ و غیره) یک div جداگانه با یک کلاس”rm_section” دارند. این div یک عنوان دارد (نام آن محسوب می شود) به همراه چندینdiv در درون آن. با استفاده از کلاس هایی مثل

مرحله ی 3

<?php

$themename = "Nettuts";
$shortname = "nt";

$categories = get_categories('hide_empty=0&orderby=name');
$wp_cats = array();
foreach ($categories as $category_list ) {
 $wp_cats[$category_list->cat_ID] = $category_list->cat_name;
}
array_unshift($wp_cats, "Choose a category");

مرحله ی 4

در حال حاضر شروع به وارد کردن یک لیست از گزینه ها برای تم می کنیم. به آنچه در زیر آمده نگاه کنید، و آن را در فایلfunctions.php خود وارد کنید:

$options = array (

array( "name" => $themename." Options",
 "type" => "title"),

array( "name" => "General",
 "type" => "section"),
array( "type" => "open"),

array( "name" => "Colour Scheme",
 "desc" => "Select the colour scheme for the theme",
 "id" => $shortname."_color_scheme",
 "type" => "select",
 "options" => array("blue", "red", "green"),
 "std" => "blue"),

array( "name" => "Logo URL",
 "desc" => "Enter the link to your logo image",
 "id" => $shortname."_logo",
 "type" => "text",
 "std" => ""),


array( "name" => "Custom CSS",
 "desc" => "Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}",
 "id" => $shortname."_custom_css",
 "type" => "textarea",
 "std" => ""),

array( "type" => "close"),
array( "name" => "Homepage",
 "type" => "section"),
array( "type" => "open"),

array( "name" => "Homepage header image",
 "desc" => "Enter the link to an image used for the homepage header.",
 "id" => $shortname."_header_img",
 "type" => "text",
 "std" => ""),

array( "name" => "Homepage featured category",
 "desc" => "Choose a category from which featured posts are drawn",
 "id" => $shortname."_feat_cat",
 "type" => "select",
 "options" => $wp_cats,
 "std" => "Choose a category"),

array( "type" => "close"),
array( "name" => "Footer",
 "type" => "section"),
array( "type" => "open"),

array( "name" => "Footer copyright text",
 "desc" => "Enter text used in the right side of the footer. It can be HTML",
 "id" => $shortname."_footer_text",
 "type" => "text",
 "std" => ""),

array( "name" => "Google Analytics Code",
 "desc" => "You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer.",
 "id" => $shortname."_ga_code",
 "type" => "textarea",
 "std" => ""),

array( "name" => "Custom Favicon",
 "desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image",
 "id" => $shortname."_favicon",
 "type" => "text",
 "std" => get_bloginfo('url') ."/favicon.ico"),

array( "name" => "Feedburner URL",
 "desc" => "Feedburner is a Google service that takes care of your RSS feed. Paste your Feedburner URL here to let readers see it in your website",
 "id" => $shortname."_feedburner",
 "type" => "text",
 "std" => get_bloginfo('rss2_url')),


array( "type" => "close")

);

این تکه ی بزرگی از کد بود، که قطعا برخی توضیحات را ضمانت می کند. بنابراین اینها را خواهیم داشت:
• PHP متغیر $options لیست کامل گزینه ها را برای تم ذخیره می کند.
• این از تعدادی از آرایه های ترکیب شده است، هر کدام با یک کلید “type” برای تعیین اینکه آن چگونه نمایش داده خواهد شد و چه کاری انجام خواهد داد.
• ما با یک آرایه ی “type” => “title” شروع کردیم – این برای نشان دادن نام تم و عنوان در بالای صفحه مورد استفاده قرار خواهد گرفت.
• هر بخش (عمومی، صفحه ی اصلی و پاورقی) یک لیست جداگانه از گزینه ها دارد.
• ما با بستن همه ی بخش های قبلی یک بخش جدید را شروع کردیم: معرفی کردن یک بخش جدید با استفاده از array( “name” => “Footer”,
“type” => “section”) و باز کردن یک بخش جدید.
• هر گزینه می توانید گزینه های مشخص شده در زیر را داشته باشد:
name: نام ضمینه ی ورودی.
desc: یک شرح کوتاه که به کابر توضیح می دهد که این چیست.
id: شناسه ی ضمینه، پیشوند دار شده توسط نام کوتاه. از آن به عنوان ذخیره کننده و همچنین برای دسترسی به گزینه ها استفاده خواهد شد.
type: نوع ورودی – انتخاب متن و یا جایگاه متن
options: به منظور معرفی آرایه های گزینه ها برای نوع انتخابی ورودی ها مورد استفاده قرار می گیرد
STD: مقدار اولیه ی ورودی پیش فرض، در صورتی که هیچ گونه ورودی دیگری داده نشده باشد، استفاده می شود.

مرحله ی 5

سعی کنید به وردپرس وارد شوید. خواهید دید که در هیچ کجا هیچ گزینه ای برای دیدن صفحه ی پنل ادمین وجود ندارد، پس چگونه می توانیم آن را ببینیم؟ کد زیر را به فایل functions.php اضافه کنید:

function mytheme_add_admin() {

global $themename, $shortname, $options;

if ( $_GET['page'] == basename(__FILE__) ) {

 if ( 'save' == $_REQUEST['action'] ) {

 foreach ($options as $value) {
 update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {
 if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }

 header("Location: admin.php?page=functions.php&saved=true");
die;

}
else if( 'reset' == $_REQUEST['action'] ) {

 foreach ($options as $value) {
 delete_option( $value['id'] ); }

 header("Location: admin.php?page=functions.php&reset=true");
die;

}
}

add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'mytheme_admin');
}

function mytheme_add_init() {

}

این تابع برای گزینه های به روز رسانی و همچنین اضافه کردن یک صفحه ی منو بنا شده است. اگر گزینه ها ذخیره می شوند (نشان داده شده با متغیرهای پنهان ذخیره سازی) پس تمام گزینه ها با مقدارهای اولیه ی جدیدشان به روز رسانی شده اند. اگر گزینه ها تنظیم مجدد می شوند (نشان داده شده به وسیله ی یکی دیگر از متغیر های مخفی با مقدار اولیه ی تنظیم مجدد) پس همه ی گزینه ها حذف می شوند. خط آخر، یک صفحه ی منو را می افزاید- پارامترها به ترتیب نام گذاری و عنوان بندی می شوند، کاربر برای مشاهده ی این صفحه به سطح مجوزدار نیاز دارد، صفحه ی ذخیره و تابع برای نمایش /ذخیره سازی مورد استفاده قرار می گیرند (که در مورد ما mytheme_admin نامیده میشود) تابع mytheme_add_init را ببینید، آیا یک تابع خالی را مشاهده می کنید؟ اجازه دهید که به همین گونه باقی بماند، بعدا به آن خواهیم پرداخت.

مرحله ی 6

هنوز هیچ صفحه ی گزینه های تمی نداریم، درست است؟ خوب، آیا تابعmytheme_admim را به یاد دارید که چند خط قبل درباره ی آن صحبت کردیم؟ ما هنوز هم آن تابع را ننوشته ایم. بنابراین از کدهای مراحل 6، 7 و 8 برای نوشتن آن تابع استفاده می کنیم. شروع می کنیم:

function mytheme_admin() {

global $themename, $shortname, $options;
$i=0;

if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';

?>
<div class="wrap rm_wrap">
<h2><?php echo $themename; ?> Settings</h2>

<div class="rm_opts">
<form method="post">

<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>

<?php break;

case "close":
?>

</div>
</div>
<br />


<?php break;

case "title":
?>
<p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p>


<?php break;

case 'text':
?>

<div class="rm_input rm_text">
 <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
 <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" 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="rm_input rm_textarea">
 <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
 <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows=""><?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="rm_input rm_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="rm_input rm_checkbox">
 <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>

<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
 </div>
<?php break;

اگر یک گزینه ی نوع “open” وجود دارد – هیچ کاری انجام نشده است. اگر یک گزینه ی نوع “close” وجود دارد، دوdiv بسته شده اند. گزینه ی “title” تنها یک بار مورد استفاده قرار می گیرد – این یک مقدمه برای گزینه های تم است. برای هر کدام از انواع “text” (type=”text” ورودی)، “select” (کرکره)، “checkbox” و “textarea” ( آشکار است که به چه معنایی هستند) ورودی مربوه نمایش داده می شود. به توجه

مرحله ی 8

case "section":

$i++;

?>

<div class="rm_section">
<div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?>/functions/images/trans.gif" class="inactive" alt="""><?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div class="clearfix"></div></div>
<div class="rm_options">


<?php break;

}
}
?>

<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<div style="font-size:9px; margin-bottom:10px;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
 </div>

<?php
}

?>

<?php
add_action('admin_init', 'mytheme_add_init');
add_action('admin_menu', 'mytheme_add_admin');
?>

.rm_wrap{
 width:740px;
}
.rm_section{
 border:1px solid #ddd;
 border-bottom:0;
 background:#f9f9f9;
}
.rm_opts label{
 font-size:12px;
 font-weight:700;
 width:200px;
 display:block;
 float:left;
}
.rm_input {
 padding:30px 10px;
 border-bottom:1px solid #ddd;
 border-top:1px solid #fff;
}
.rm_opts small{
 display:block;
 float:right;
 width:200px;
 color:#999;
}
.rm_opts input[type="text"], .rm_opts select{
 width:280px;
 font-size:12px;
 padding:4px;
 color:#333;
 line-height:1em;
 background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
 background:#fff;
}
.rm_input textarea{
 width:280px;
 height:175px;
 font-size:12px;
 padding:4px;
 color:#333;
 line-height:1.5em;
 background:#f3f3f3;
}
.rm_title h3 {
 cursor:pointer;
 font-size:1em;
 text-transform: uppercase;
 margin:0;
 font-weight:bold;
 color:#232323;
 float:left;
 width:80%;
 padding:14px 4px;
}
.rm_title{
 cursor:pointer;
 border-bottom:1px solid #ddd;
 background:#eee;
 padding:0;
}
.rm_title h3 img.inactive{
 margin:-8px 10px 0 2px;
 width:32px;
 height:32px;
 background:url('images/pointer.png') no-repeat 0 0;
 float:left;
 -moz-border-radius:6px;
 border:1px solid #ccc;
}
.rm_title h3 img.active{
 margin:-8px 10px 0 2px;
 width:32px;
 height:32px;
 background:url('images/pointer.png') no-repeat 0 -32px;
 float:left;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border:1px solid #ccc;
}
.rm_title h3:hover img{
 border:1px solid #999;
}
.rm_title span.submit{
 display:block;
 float:right;
 margin:0;
 padding:0;
 width:15%;
 padding:14px 0;
}
.clearfix{
 clear:both;
}
.rm_table th, .rm_table td{
 border:1px solid #bbb;
 padding:10px;
 text-align:center;
}
.rm_table th, .rm_table td.feature{
 border-color:#888;
 }

function mytheme_add_init() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
}

jQuery(document).ready(function(){
 jQuery('.rm_options').slideUp();

 jQuery('.rm_section h3').click(function(){
 if(jQuery(this).parent().next('.rm_options').css('display')==='none')
 { jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');

 }
 else
 { jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
 }

 jQuery(this).parent().next('.rm_options').slideToggle('slow');
 });
});

function mytheme_add_init() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
wp_enqueue_script("rm_script", $file_dir."/functions/rm_script.js", false, "1.0");
}

$var = get_option('nt_colur_scheme');

/* To change the CSS stylesheet depending on the chosen color */
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/<?php echo get_option('nt_color_scheme'); ?>.css" />

/*To echo some footer copyright text, with HTML */
<p><?php echo stripslashes(get_option('bl_footer_text')); ?></p>