خانه / وردپرس / آموزش وردپرس / بازی باکدها: آموزش ساخت پنل تنظیمات در وردپرس،قسمت چهارم

تاریخ انتشار: مرداد 28, 1394 تعداد بازدید: 421 بازدید تعداد دیدگاه ها: 0

بازی باکدها: آموزش ساخت پنل تنظیمات در وردپرس،قسمت چهارم

بازی باکدها: آموزش ساخت پنل تنظیمات در وردپرس،قسمت چهارمReviewed by فریش تم on Aug 19Rating: 5.0بازی باکدها: آموزش ساخت پنل تنظیمات در وردپرس،قسمت چهارمبا قسمت نهایی آموزش ساخت پنل تنظیمات در وردپرس در خدمت شما هستم.در قسمت قبل تنظیمات سفارشی را در پیشخوان ایجاد کرده و تنظیمات موارد درونی آن را با یکدیگر ساختیم

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

پس برای شروع یک فایل با نام setting.php ساخته و کد زیر را در ان قرار دهید:

.input_section{
border:1px solid #ddd;
border-bottom:0;
background:#f9f9f9;
border-radius: 3px 3px 3px 3px;
}
.option_input label{
font-size:12px;
font-weight:700;
width:15%;
display:block;
float:left;
}
.option_input {
padding:30px 10px;
border-bottom:1px solid #ddd;
border-top:1px solid #fff;
}
.option_input small{
display:block;
float:right;
width:60%;
color:#999;
}
.option_input input[type="text"], .option_input select{
width:20%;
font-size:12px;
padding:4px;
color:#333;
line-height:1em;
background:#f3f3f3;
}
.option_input input:focus, .option_input textarea:focus{
background:#fff;
}
.option_input textarea{
width:20%;
height:175px;
font-size:12px;
padding:4px;
color:#333;
line-height:1.5em;
background:#f3f3f3;
}
.input_title h3 {
color: #464646;
cursor: pointer;
float: right;
font-size: 14px;
margin: 0;
padding: 5px 0 0;
text-shadow: 0 1px 0 #FFFFFF;
font-family:tahoma;

}
.input_title{
cursor:pointer;
border-bottom:1px solid #ddd;
margin: 0;
padding: 7px 10px;
background-color: #F1F1F1;
background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
font-size: 15px;
font-weight: normal;
line-height: 1;
border-bottom-color: #DFDFDF;
box-shadow: 0 1px 0 #FFFFFF;
}
.input_title h3 img {
position: relative;
top: -2px;
vertical-align: middle;
margin-right: 5px;
}

.input_title span.submit{
display: block;
float: left;
margin: 0 20px;
padding: 0;
}
.clearfix{
clear:both;
}

form > p.submit {
float: right;
padding: 0;
margin-right: 30px;
}
.options_wrap > ul li {
display: inline;
margin-right: 5px;
}
.content_options .message {
margin-top: 30px
}
.footer-credit{
margin-top: 60px
}

حال این فایل را ذخیره کرده و سپس در قسمتی که فایل function.php وجود دارد قرار دهید.حال باید یک فایل بسازید و در آخرین قدم جی کوئری ها را نیز قرار دهید پس یک فایل با نام setting_script.js ساخته و سپس کد زیر را در آن قرار دهید:

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

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

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

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

حال این فایل را ذخیره کرده و در مکانی که function.php قرار دارد انتقال دهید و در نهایت باید فایل ها را در قالب وردپرس فراخوانی نمائیم پس فایل function.php را گشوده و کد زیر را به جای کد های تابع theme_settings_init قرار دهید.

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

آموزش ساخت پنل تنظیمات در وردپرس،قسمت اول
آموزش ساخت پنل تنظیمات در وردپرس،قسمت دوم
آموزش ساخت پنل تنظیمات در وردپرس،قسمت سوم

منبع: فریش تم ارائه دهنده : پوسته وردپرس ، قالب وردپرس ، افزونه وردپرس ، آموزش وردپرس

کانال تلگرام فریش تم
  • دیدگاه شما پس از تایید در سایت نمایش داده می شود.
  • از ارسال متن بصورت فینگلیش خودداری نموده و فارسی تایپ کنید.
  • دیدگاه و سوالات شما توسط کارشناسان ما بین 1 تا 12 ساعت پاسخ داده خواهد شد.
  • از ارسال دیگاه جهت پشتیبانی محصولات تجاری پرهیز و برای پشتیبانی از بخش پشتیبانی سایت اقدام فرمائید

هنوز دیدگاهی ثبت نشده است.