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

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

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

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

css

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

install

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

<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 در درون آن. با استفاده از کلاس هایی مثل

، می توانیم کرکره، ورودی متن و جایگاه متن را به شکل متفاوتی، طراحی کنیم.
در حال حاضر، مهم ترین مسئله این است که برنامه نویسی آن نباید به صورت دستی انجام شود، باید از انعطاف پذیریPHP ها تا حد ممکن استفاده کنیم. این به معنی بهره وری است: به صورت دستی برنامه نویسی نکید، هنگامی که برای این کار حلقه در اختیار شما است!

مرحله ی 3

توسط باز کردن فایل functions.php در ویرایشگر کد مورد علاقه شما آغاز می شود (من از Notepad++ استفاده می کنم) کد زیر را وارد کنید:

<?php

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

این قطعه از تابع 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 را ببینید، آیا یک تابع خالی را مشاهده می کنید؟ اجازه دهید که به همین گونه باقی بماند، بعدا به آن خواهیم پرداخت.

  پوسته پارسی گالری عکس Xenon

مرحله ی 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">


خیلی ساده است، این طور نیست؟ اگر گزینه ها ذخیره شده اند، یک پیام که آن را نشان دهد، بنویسید. به همین ترتیب برای تنظیمات مجدد، عمل کنید. یک class=”updated fade” مشاهده خواهید کرد – وردپرس به طور خودکار آن را در چند بخش محو خواهد کرد. جذاب است، نه؟ پس از آن “rm_wrap” div را شروع خواهیم کرد.

مرحله ی 7

آنچه از بالا کسب کرده ایم را در کد زیر قرار دهید:

<?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;


 

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

?>

 
برای گزینه ی نوع “section”، من یک متغیر شمارنده ی $ را استفاده کرده ام. این متغییر رد شماره ی بخش را نگه می دارد و آن را به نام دکمه ی ثبت (submit) برای داشتن دکمه ی ثبت منحصر به فرد، الحاق می کند. همچنین در پایان یک شکل آخر برای تنظیم مجدد همه ی گزینه ها وجود دارد. تصویر استفاده شده است همان تصویر شفاف استفاده شده در تابع jQuery خواهد بود. با استفاده از آخرین قطعه از کد، توابع خود را اجرا کنید:

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


 
این کار به وردپرس می گوید که یک منوی ادمین اضافه کند.

مرحله ی 9

ugly

و حالا بفرمایید! ما صفحه ی پنل ادمین عالی خود را با موقعیت منوی جداگانه برای خودش، داریم. پس اجازه دهید آن را امتحان کنیم – روی لینک کلیک کنید. این زشت ترین صفحه ی پنل ادمینی که تا به حال دیده اید خواهد بود. بنابراین اجازه دهید دوست خوبمان، CSS را صدا کنیم! در فهرست nettuts / یک پوشه ی جدید ایجاد کنید و آن را “functions” بنامید. یک فایل جدیدCSS ، functions.css، در آنجا ایجاد کنید. کد زیر را در آن قرار دهید:

.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;
 }


 

من در اینجا هیچ توضیحی نخواهم داد، بخوبی روشن است که هر اعلانCSS چه کاری انجام می دهد، و شما آزاد هستید که طرح را برای تم خودتان سفارشی کنید.

مرحله ی 10

در حال حاضر ما یک فایلCSS خوب داریم. اما حالا چگونه آن را به این صفحه اضافه کنیم؟ به هر ترتیب، ما بهاسناد دسترسی مستقیم نداریم. آیا تابع mytheme_add_init() را که در مرحله ی 3 نوشتیم به یاد دارید؟ این تابع در اینجا مفید خواهد بود. آن را به این تغییر دهید:

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


این کار فایلfunctions.css را به سر اضافه می کند. جایگاه فایل ها به وسیله ی فهرست قالب تعیین می شود.

css

مرحله ی 11

حالا به صفحه نگاه کنید. بسیار خوب به نظر می رسد، این طور نیست؟ اما شما ممکن است سوال کنید که آیکون ‘+’ چیست؟ خب، اینجا جایی است که jQuery به میان می آید. یک فایل جدید rm_script.js در پوشه ی nettuts/functions/ ایجاد کنید. کد زیر را در آن قرار دهید:

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');
 });
});

کاری که می کند این است – پس از آن که DOM بارگذاری می شود، تمامrm_options ها بالا می روند. وقتی که بر روی آیکون’+’ کلیک می شود، طبقات غیر فعال از تصویر حذف شده و طبقات فعال اضافه می شوند – که آن را به یک آیکون’-‘ تبدیل می کنند. معکوس این کار زمانی که بر روی آیکون’-‘ کلیک می شود، اتفاق می افتد.

rm_options ها با استفاده از تابع Toggle لغزاننده، بالا یا پایین می روند (که به وسیله ی حالت CSS تعیین می شود) – ساده به نظر می رسد، نه؟ برای اضافه کردن این اسکریپت، همان تابع mytheme_add_init() استفاده شده است. آن را به این تغییر دهید:

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");
}


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

css

 

مرحله ی 12

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

$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>


نتیجه گیری
من امیدوارم که شما از این مقاله ی آموزشی استفاده برده باشید. این پنل گزینه های استاندارد برای شما نیست. این یکی از table استفاده نمی کند، jQuery آن افزایش پیدا می کند، از CSS عالی استفاده می کند، برای استفاده بسیار جذاب و بسیار آسان است. هدف از این آموزش یادگیری است – به عنوان مثال، شما همیشه می توانید پنل های پیش ساخته را با زبانه ها جایگزین کنید و یا حتی کارهای پیشرفته تر انجام دهید. از خلاقیت خود استفاده کنید! شما میتوانید پرسش ها ی خود را به راحتی در بخش نظرات مطرح کنید.
WooThemes نسخه ی دو فریم ورک خود را منتشر کرده است. شما می توانید جزئیات آن را در اینجا ببنید.

خوشحال و همچنان همیار وردپرسی بمانید …

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

331,349 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 4 سال عضو همیار وردپرس

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

  2. 4 سال عضو همیار وردپرس

    با سلام و خسته نباشید خدمتتون. امکانش هست یه مورد تغییر رنگ قالب رو مثال بزنید؟
    مثلا من رنگ پس زمینه ی فوترم رو توی style.css دادم و حالا میخوام با استفاده ازین آموزش شما رنگشو عوض کنم.
    من هر کاری کردم نتونستم ممنون میشم راهنمایی کنید

  3. سلام.در واقع با این آموزش این امکان به مشتری سایت داده میشه که خودش یه سری تغییرات رو اعمال کنه برای سایتش.درسته؟؟؟؟ چون من دنبال امکانی هستم که پنل مدیریتی به کاربر بدم و متوجه نشه که سایتش با وردپرس طراحی شده.ممنون میشم راهنمایی کنید

  4. سلام! میخواستم ببینم هنوزم این آموزش با توجه به اومدن setting api ها کاربرد داره و یا باید از روش جدید استفاده کرد! در سایت های ایرانی معمولا از همین روش مقاله شما استفاده کردن ولی در مقالات سایت های مرجع و خود وردپرس از این روش https://codex.wordpress.org/Function_Reference/update_option که همون section ها و fileds ها هست!
    میخواستم اگر بشه یه توضیحی بفرمایید که این دو روش با هم چه تفاوت هایی دارند و اصولا باید از چه روشی برای ساخت پنل تنطمات برای پوسته و پلاگین ها مون استفاده کنیم!
    مزیتی که روشی که در این مقاله توضیح دادید اینکه یه فرم جنریتور میسازیم و دیگه لازم نیست برای پنل های آتی کدهای اچ تی ام ال فرم بزنیم و فقط از طریق آرایه میگیم چه المان هایی اضافه کنه و بسیار مرتبتره! آیا میشه در روش جدید هم به این شکل عمل کرد! رفرنسی سراغ دارید؟

  5. ببخشيد ي كنترل بنل برا من درست كنيد جقدر ميشه

  6. مشکل حل شد

  7. سلام
    بنده برای مثال خط:

    یا

    رو به جایی که میخوام اضافه میکنم و تو تنظیم قالب متن رو وارد میکنم
    ذخیره میکنم، ولی در قالب تغییری ایجاد نمیشه

  8. سلام ممنون از مطالب مفیدتون. یه سوال داشتم از خدمتت علی جان. میشه در ادمین پنل تم به جای فیلد متنی، ویرایشگر دیداری داشت تا بهتر بشه روی متن کار کرد. ممنون میشم راهنمایی کنید

  9. خیلی خوبه…

  10. به نام خدا
    جدیدا راهی اومده تو سه سوت می شه درست کرد خیلی هم کاربردیه
    کافیه ی که یک سرچ بکنید

  11. سلام لطفا کمکم کنید من وردپرس دارم و قبلا رو سایت کس دیگه با پوسته وردپرس اینفلدENFOLD کار کردم خیلی اسون بود ولی الان نمیدونم چه جوری برای خودم این قالب رو تهیه کنم و نصب کنم و افزونه هایی که باهاش مطابقت داره چی هست. لطفا کمک کنید خیلی حیاتی با من تماس بگیرید یا اس ام اس بزنید 09190646578

    • سلام .. دوست عزیز منم روی یکی چند تا از وبسایتام از همین قالب استفاده میکنم .. توی نت بگردید هست .. هم فارسی هم انگلیسیش .. من پنجاه تومن خریدم ولی اندازه دویست هزار تومن ازش راضی ام 😉

  12. خانم ندا گرجی زاده ارسال کردن این مطلب و از آقای حاجی محمدی تشکر میکنید؟

  13. به به بسیار عالی ، تو یکی از پروژه ها واقعا کمک حالم شد 🙂

  14. بسيار عالي بود
    فقط كاش لينك منبع رو هم ميكذاشتين

  15. سلام. خسته نباشید.
    مطلب واقعا کاربردی ای بود.

  16. سلام و عرض ادب
    من از یه شهرستان تماس میگیرم و نیاز ضروری به چندین جلسه اموزش خصوصی و بصورت انلاین در طراحی قالب وردپرس یا تبدیل قالب های html , css به قالب وردپرس دارم
    ممنون میشم در این راستا اساتید گرامی اگر استادی که به این رشته واقف باشه و بتونه قبول زحمت کنه را معرفی کنند
    برای معرفی از طریق ایمیل لطفا باهام تماس بگیرید یا در جواب همین کامنت معرفی کنید
    تیک هشدار ایمیل فعال کردم و بعد از جواب و راهنمایی پر مهر شما مطلع خواهم شد
    فقط ضروریه ولطفا خواهش میکنم هر چه زودتر باشه خیلی بهتره
    با تشکر وارزوی توفیق روز افزون

  17. سلام
    همین دو روز پیش بود دنبال آموزش ساخت پنل می گشتم که یهو رفتم تو NET.TUTSPLUS.NET دقیقا همین آموزشو دیدم
    دمتون گرم که فارسیش کردین
    عالی
    مــــــــــــــــــــــــــــاچـــــــــــــــــــــــــــ :d

  18. WOW!!
    it’s cooool !

  19. سلام
    ممنون از شما بابت آموزش های بروز و حرفه ای که میگذارید.
    در مورد افزونه theme option که بیشتر در قالب های fabtheme استفاده می شود اطلاعاتی دارید؟
    ضمنا من از اسکریپتی که شما برای فروش گذاشته اید استفاده کردم و خیلی راحت تر و آسون تر بود.
    همچنین برای تغییر فایل های css باید یک فایل به نام css.php ایجاد کنیم و متغیرها رو در اون استفاده کنیم ، این رو گفتم چون خودم چند وقت پیگیر این بودم که چطور به صورت موردی فایل css رو تغییر بدم.

    • 9 سال عضو همیار وردپرس

      بله جواد جان 100% اسکریپتی که قرار داده شده به مراتب راحت تره و بنظرم با توجه به قیمتش و اینکه محدودیت نصب نداره میتونه خیلی با ارزش باشه اما خیلی از کاربرا فکر میکردن این همون آموزیه که تو سطح نت هست و ما فقط آماده کردیم و میفروشیم خواستیم نشون بدیم که متفاوت است

  20. اقا ببخشید من همین قالبی رو که شما سورسش رو قرار دادید رو نصب کردم ولی هر چی تنظیم میکنم توی قالبم تغییراتی اعمال نمیشه .

  21. واقعا ممنونم خیلی عالیه 🙂 خیلی خوشحال شدم که شما این آموزش رو قرار دادید .

  22. خیلی عالی و به موقع بود

  23. سلام علی جان …
    مثل همیشه عالی بود .
    فقط دو تا پیشنهاد:
    – ترجمه ات خوبه اما سعی کن یکمی ساده تر و واضح تر توضیح بدی . خیلی جاها بهتر بود که یه چیزایی خودت به ترجمه اضافه می کردی.
    – پیشنهاد می کنم اینطور آموزش هایی که تخصصی و فوق العاده بدرد بخورند رو بصورت یک فیلم آموزشی روی سایت قرار بدی. مثلا متن مقاله باشه + دانلود فیلم

    منتظر خبر کارگاه هستیم!

  24. سلام
    آموزش ها همه حرفه ای
    مرســــــــــــــــــــــــــــــــــی

  25. علی جان واقعاً بهم حس خیانت دست داد اگر برا این مطلب نظر نذارم 😛
    واقعاً خسته نباشی! خیلی عالی بود!

مطالب زیر را حتما بخوانید

    پوسته پارسی گالری عکس Xenon

    پس از معرفی چندین پوسته وبلاگی و شرکتی امروز به سراغ یک پوسته متفاوت با موضوع گالری عکس رفتیم که توسط تیم web2feel طراحی و توسط تیم DBSTheme فارسی...

    دانلود قالب زیبا و فارسی Myst

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

دوره‌های آموزشی