اموزش ساخت پنل تنظیمات قالب وردپرس (قسمت ۳)

اموزش ساخت پنل تنظیمات قالب وردپرس (قسمت ۳)

در قسمت اول و دوم آموزش ساخت پنل تنظیمات قالب وردپرس ، نحوه ساخت post type و چیدمان گزینه های تنظیمات را یاد گرفتیم. حال در این مقاله  به اضافه کردن استایل و جی کوئری های مربوطه می پردازیم

در قسمت ۲ آموزش ساخت پنل تنظیمات قالب وردپرس ، صفحه تنظیمات را با گزینه های اضافه ساختیم و حالا نیاز داریم که به آن استایل و کد جی کوئری اضافه کنیم

خب حالا شروع می کنیم:

در ابتدا فایلی به نام panel.css ساخته و کد زیر را داخل آن قرار دهید:

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

فایل را در جایی که فایل functions.php وجود دارد ذخیره کنید.

قدم بعدی افزودن کدهای جی کوئری است. پس فایل به نام panel_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');
});
});

فراموش نکنید که این فایل ها باید در مسیری که functions.php وجود دارد قرار دهید. حالا نوبت به این رسیده که فایل ها را فراخوان کنیم

پس فایل function.php را بار کنید و دنبال تابع theme_settings_init() بگردید. سپس کد مربوط به تابع را با کد زیر جایگزین کنید

function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
wp_enqueue_style("panel_style", get_template_directory_uri()."/panel.css", false, "1.0", "all");
wp_enqueue_script("panel_script", get_template_directory_uri()."/panel_script.js", false, "1.0");
}

در نهایت پنل شما باید به شکل زیر باشد:

آموزش امروز  ساخت پنل تنظیمات قالب وردپرس هم به پایان رسید. به زودی مقاله ای در خصوص ارتباط این پنل با قالب وردپرس آماده خواهم کرد.