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

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

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

در ابتدا فایلی به نام 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");
}

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

ساخت پنل تنظیمات قالب وردپرس

 

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

موفق باشید

 

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

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

ارتباط قالب با پنل تنظیمات ( قسمت نهایی )

30 دیدگاه برای “ساخت پنل تنظیمات قالب وردپرس (قسمت ۳)

  • مجتبی
    - ۲۸ اردیبهشت , ۱۳۹۳

    لطفا اموزش ارتباط این پنل با قالب وردپرس را قرار دهید مثلا تعویض عکس هدر
    با تشکر

    • الناز بیک زاده
      - ۲۸ اردیبهشت , ۱۳۹۳

      سلام دوست عزیز. به زودی ارتباط پنل با قالب را خواهم گفت

      • حسین
        - ۳۰ اردیبهشت , ۱۳۹۳

        سلام و عرض ادب و احترام
        تشکر بابت مطلب جامع و کاملتون
        با get_option میشه اطلاعات رو به دست آورد نه؟

        • الناز بیک زاده
          - ۳۰ اردیبهشت , ۱۳۹۳

          سلام حسین جان
          بله دقیقا میشه با این تابع اطلاعات رو بدست آورد

  • حمید
    - ۳۰ اردیبهشت , ۱۳۹۳

    لطفا در پست ۲ که سوال کردم در این پست پاسخ دهید یا یک مطلب جدید در موردش ایجاد کنید .تا من و دیگر دوستان بتوانن استفاده کنن چون دقدقهخیلی از دوستان اینه
    softriz4@gmail.com
    مرسی از راهنمایتون

    • الناز بیک زاده
      - ۳۰ اردیبهشت , ۱۳۹۳

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

  • استخر پیش ساخته
    - ۳۰ اردیبهشت , ۱۳۹۳

    سلام.آموزشاتتون خوب بود
    میشه dream weavr رو هم از ابتدا آموزش بدین
    ممنون میشم

    • الناز بیک زاده
      - ۳۰ اردیبهشت , ۱۳۹۳

      سلام دوست من
      دریم ویور تنها یک نرم افزار طراحی وب هست و کار باهاش آسونه فقط کافیه کد نویسی بلد باشی

  • حمید
    - ۳۱ اردیبهشت , ۱۳۹۳

    مرسی از اینکه پشتکار دارید و به سوالات من ودیگر دوستاران پاسخ میدهید اومید وارم این سایت در بهترین رتبه قرار بگیره
    ممنون میشم کمکم کنید در پیرو سوالاتی که از شما کردم

    • الناز بیک زاده
      - ۳۱ اردیبهشت , ۱۳۹۳

      سلام دوست من
      راستش آموزش کدنویسی در خصوص درخواست شما پیدا نکردم اما افزونه ای به نام user submitted posts هست که امکان ارسال نوشته به کاربران را خارج از پیشخوان فراهم کرده و نوشته بعد از تائید شما منتشر میشه
      خودم تستش کردم مشکلی نداشت

      • حمید
        - ۱ خرداد , ۱۳۹۳

        متشکرم از شما من هم کلی گشتم چیزی پیدا نکردم حال که ارسال پست خارج از پیشخوان رو فراهم میکنه جای بس اومیدواری داره شاید بشه کدهای رو ازش خارج کرد که بشه توی تم بکار ببریم

  • Mr AHD
    - ۳۰ خرداد , ۱۳۹۳

    بسیار عالی …….

  • احسان
    - ۴ تیر , ۱۳۹۳

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

    • الناز بیک زاده
      - ۴ تیر , ۱۳۹۳

      سلام دوست من. آموزش کاملا تست شده و هیچگونه مشکلی نداره
      احتمالا مرحله ای رو اشتباه انجام می دهید

  • احسان
    - ۴ تیر , ۱۳۹۳

    اگه مشکلی نیست کد فانکشنم رو بزارم

    • الناز بیک زاده
      - ۴ تیر , ۱۳۹۳

      خیر مشکلی نداره. به ایمیل wpschool1@gmail.com بفرستید

  • احسان
    - ۴ تیر , ۱۳۹۳

    فکر کنم مشکل از لوکال باشه رو لوکال کار نمیکنه؟؟؟؟

    • الناز بیک زاده
      - ۴ تیر , ۱۳۹۳

      نه ارتباطی به لوکال بودن نداره

      • احسان
        - ۵ تیر , ۱۳۹۳

        من تمامی کد های سی اس اس و جی کوئری که تو آموزش بود رو اینلاین کردم و اینشکلی تو لوکال کار کرد اما وقتی رو هاستم همینطوری بدون اینکه اینلاین کنم چک کنم کار کرد برا همین فکر می کنم می تونه از لوکال باشه

        • الناز بیک زاده
          - ۵ تیر , ۱۳۹۳

          سلام. این آموزش روی لوکال تست شده به هر حال خوشحالم که مشکلتون حل شد

  • یو پی اس
    - ۵ تیر , ۱۳۹۳

    عالی بود ممنونم

  • طراحی سایت
    - ۱۱ مرداد , ۱۳۹۳

    سایت خیلی خوبی دارین موفق باشین

  • ساسان
    - ۵ شهریور , ۱۳۹۳

    سلام. خسته نباشید. ممنون از آموزش مفیدتون
    مشکلی که دارم در مورد انتخاب دسته ها هست
    وقتی دسته ها رو کنترل پنل انتخاب میکنم بجای اینکه در سایت به صورت مثلا cat=3 نشون بده با نام دسته نشون میده. میخوام بدونم مشکل ار کجاست. تشکر

  • کیهان
    - ۶ شهریور , ۱۳۹۳

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

  • محمود
    - ۸ آذر , ۱۳۹۳

    سلام دوستان کد مثل کد بالا انجام دادم ولی وقتی قالب بارگذاری میکنم صفحه سفید میشه راهنمایی لطفا

    • الناز بیک زاده
      - ۱۲ آذر , ۱۳۹۳

      سلام دوست عزیز. این آموزش تست شده و بدون نقص هستش. ممکنه جایی در کدنویسی مشکلی داشته باشد. لطفا debug وردپرس رو فعال کنید و علت رو پیدا کنید

  • رضا
    - ۹ آذر , ۱۳۹۳

    سلام میشه راهنماییم کنید که برای تغییر رنگ پس زمینه یا رنگ لینک ها چی کار باید بکنم؟
    ممنون

    • الناز بیک زاده
      - ۱۲ آذر , ۱۳۹۳

      سلام دوست عزیز. شما می بایست از color piker استفاده کنید

  • ابوالفضل
    - ۴ مرداد , ۱۳۹۴

    سلام ممنون که اموزش ها را قرار میدید ولی ای کاش یکم هم توضیح میداید که این کد چی کار میکنه اون کد چی کار میکنه – نمیدونم شاید این شیوه مرسوم اموزش وردپرس باشه چون هر جا اموزش وردپرس دیدم همین جوری بوده این کد را داخل فایل فلان کپی کنید صفحه رو رفرش کنید حالا باید این جوری شده باشه – شرمنده یکم تند صحبت کردم ناراحت که نشدید ؟؟؟

    • الناز
      - ۵ مرداد , ۱۳۹۴

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

دیدگاه خود را بیان کنید

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

-- بارگیری کد امنیتی --