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

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

امروز، ما به تمامی مراحل ایجاد یک پنل گزینه های انتخابی (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 را فعال کنید.

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

	

		

			

				
">
					
					
				
			

			/*Repeat the inputs for as many options as required. */
			/* use 
 for each new section of inputs eg General, Home Page etc */
		
	

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

مرحله ی 3

این قطعه از تابع built-in get_categories وردپرس برای واکشی تمام دسته بندی ها استفاده می کند، و سپس با استفاده از یک حلقه foreach تم را در متغیر$wp_cats ذخیره می کند. و سپس گزینه ی “یک دسته بندی را انتخاب کنید” (“Choose a category”) به بالای صف اضافه می شود.

$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 '
'.$themename.' settings saved.
';
if ( $_REQUEST['reset'] ) echo '
'.$themename.' settings reset.
';

?>

 Settings

To easily use the theme, you can use the menu below.

این یک تکه بزرگ از کد است! توضیح: با استفاده از یک حلقه ی foreach PHP همه ی انواع گزینه ها، بر صورت مورد به مورد بررسی خواهند شد. ما از یک تکنیک تعویض مورد برای این استفاده می کنیم. متغیر تعویض، گزینه است – موارد همسان و ارزیابی شده اند. بیانیه ی ‘break’ را بعد از هر مورد می بینید؟ این به منظور جلوگیری از اتفاق افتادن چیزی به نام ویژگی ‘fall-through’ است. هنگامی که یک مورد همسان شده است، همه ی موارد متوالی نیز اجرا می شوند. این به این معنی است که اگر ما مورد 3 را همسان کنیم، مورد 4، 5 و غیره نیز اجرا خواهد شد. ما این اتفاق را نمی خواهیم، درست است؟ بنابراین برای جلوگیری از تعویض مورد از یک (break) استفاده کنید.