افزدون پنل تنظیمات به وردپرس – ۳

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

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

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

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

.input_section{
border:1px solid #ddd;
borderbottom:0;
background:#f9f9f9;
borderradius: 3px 3px 3px 3px;
}
.option_input label{
fontsize:12px;
fontweight:700;
width:15%;
display:block;
float:left;
}
.option_input {
padding:30px 10px;
borderbottom:1px solid #ddd;
bordertop:1px solid #fff;
}
.option_input small{
display:block;
float:right;
width:60%;
color:#999;
}
.option_input input[type=“text”], .option_input select{
width:20%;
fontsize:12px;
padding:4px;
color:#333;
lineheight:1em;
background:#f3f3f3;
}
.option_input input:focus, .option_input textarea:focus{
background:#fff;
}
.option_input textarea{
width:20%;
height:175px;
fontsize:12px;
padding:4px;
color:#333;
lineheight:1.5em;
background:#f3f3f3;
}
.input_title h3 {
color: #464646;
cursor: pointer;
float: right;
fontsize: 14px;
margin: 0;
padding: 5px 0 0;
textshadow: 0 1px 0 #FFFFFF;
fontfamily:tahoma;
}
.input_title{
cursor:pointer;
borderbottom:1px solid #ddd;
margin: 0;
padding: 7px 10px;
backgroundcolor: #F1F1F1;
backgroundimage: mozlineargradient(center top , #F9F9F9, #ECECEC);
fontsize: 15px;
fontweight: normal;
lineheight: 1;
borderbottomcolor: #DFDFDF;
boxshadow: 0 1px 0 #FFFFFF;
}
.input_title h3 img {
position: relative;
top: 2px;
verticalalign: middle;
marginright: 5px;
}
.input_title span.submit{
display: block;
float: left;
margin: 0 20px;
padding: 0;
}
.clearfix{
clear:both;
}
form > p.submit {
float: right;
padding: 0;
marginright: 30px;
}
.options_wrap > ul li {
display: inline;
marginright: 5px;
}
.content_options .message {
margintop: 30px
}
.footercredit{
margintop: 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”);
}
در نهایت پنل شما باید به شکل زیر باشد:
local_offerevent_note خرداد ۸, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *