در قسمت اول و دوم آموزش ساخت پنل تنظیمات قالب وردپرس ، نحوه ساخت 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)
لطفا اموزش ارتباط این پنل با قالب وردپرس را قرار دهید مثلا تعویض عکس هدر
با تشکر
سلام دوست عزیز. به زودی ارتباط پنل با قالب را خواهم گفت
سلام و عرض ادب و احترام
تشکر بابت مطلب جامع و کاملتون
با get_option میشه اطلاعات رو به دست آورد نه؟
سلام حسین جان
بله دقیقا میشه با این تابع اطلاعات رو بدست آورد
لطفا در پست ۲ که سوال کردم در این پست پاسخ دهید یا یک مطلب جدید در موردش ایجاد کنید .تا من و دیگر دوستان بتوانن استفاده کنن چون دقدقهخیلی از دوستان اینه
softriz4@gmail.com
مرسی از راهنمایتون
سلام حمید جان
بلافاصله بعد از پیدا کردن مرجعی برای این آموزش حتما در سایت منتشر می کنم
سلام.آموزشاتتون خوب بود
میشه dream weavr رو هم از ابتدا آموزش بدین
ممنون میشم
سلام دوست من
دریم ویور تنها یک نرم افزار طراحی وب هست و کار باهاش آسونه فقط کافیه کد نویسی بلد باشی
مرسی از اینکه پشتکار دارید و به سوالات من ودیگر دوستاران پاسخ میدهید اومید وارم این سایت در بهترین رتبه قرار بگیره
ممنون میشم کمکم کنید در پیرو سوالاتی که از شما کردم
سلام دوست من
راستش آموزش کدنویسی در خصوص درخواست شما پیدا نکردم اما افزونه ای به نام user submitted posts هست که امکان ارسال نوشته به کاربران را خارج از پیشخوان فراهم کرده و نوشته بعد از تائید شما منتشر میشه
خودم تستش کردم مشکلی نداشت
متشکرم از شما من هم کلی گشتم چیزی پیدا نکردم حال که ارسال پست خارج از پیشخوان رو فراهم میکنه جای بس اومیدواری داره شاید بشه کدهای رو ازش خارج کرد که بشه توی تم بکار ببریم
بسیار عالی …….
با تشکر از مطلب خوبتون
من بعدی از افزودن اسنایل و اسکریپت تغییری ندیدم و هرچقدر چک کردم مشکلی پیدا نکردم استایل از طرف فانکشن فراخوانی نمیشه راه حلی مد نظر دارید؟؟
سلام دوست من. آموزش کاملا تست شده و هیچگونه مشکلی نداره
احتمالا مرحله ای رو اشتباه انجام می دهید
اگه مشکلی نیست کد فانکشنم رو بزارم
خیر مشکلی نداره. به ایمیل wpschool1@gmail.com بفرستید
فکر کنم مشکل از لوکال باشه رو لوکال کار نمیکنه؟؟؟؟
نه ارتباطی به لوکال بودن نداره
من تمامی کد های سی اس اس و جی کوئری که تو آموزش بود رو اینلاین کردم و اینشکلی تو لوکال کار کرد اما وقتی رو هاستم همینطوری بدون اینکه اینلاین کنم چک کنم کار کرد برا همین فکر می کنم می تونه از لوکال باشه
سلام. این آموزش روی لوکال تست شده به هر حال خوشحالم که مشکلتون حل شد
عالی بود ممنونم
سایت خیلی خوبی دارین موفق باشین
سلام. خسته نباشید. ممنون از آموزش مفیدتون
مشکلی که دارم در مورد انتخاب دسته ها هست
وقتی دسته ها رو کنترل پنل انتخاب میکنم بجای اینکه در سایت به صورت مثلا cat=3 نشون بده با نام دسته نشون میده. میخوام بدونم مشکل ار کجاست. تشکر
با تشکر از مطالب مفیدتون
لطفا آموزش نحوه انتخاب پست برای قسمتهای مختلف قالب مثلا گالری تصاویر یا اخبار یا هر بخش دیگه قالب که در تنظیمات قالب باشد را هم در سایت قراردهید .
سلام دوستان کد مثل کد بالا انجام دادم ولی وقتی قالب بارگذاری میکنم صفحه سفید میشه راهنمایی لطفا
سلام دوست عزیز. این آموزش تست شده و بدون نقص هستش. ممکنه جایی در کدنویسی مشکلی داشته باشد. لطفا debug وردپرس رو فعال کنید و علت رو پیدا کنید
سلام میشه راهنماییم کنید که برای تغییر رنگ پس زمینه یا رنگ لینک ها چی کار باید بکنم؟
ممنون
سلام دوست عزیز. شما می بایست از color piker استفاده کنید
سلام ممنون که اموزش ها را قرار میدید ولی ای کاش یکم هم توضیح میداید که این کد چی کار میکنه اون کد چی کار میکنه – نمیدونم شاید این شیوه مرسوم اموزش وردپرس باشه چون هر جا اموزش وردپرس دیدم همین جوری بوده این کد را داخل فایل فلان کپی کنید صفحه رو رفرش کنید حالا باید این جوری شده باشه – شرمنده یکم تند صحبت کردم ناراحت که نشدید ؟؟؟
سلام دوست عزیز. ممنون از انتقادی که کردی. اما چون من در ابتدای آموزش گفتم که کاربرانی که میخوان این آموزشو دنبال کنن باید با php آشنایی داشته باشن به خاطر همینم چون این کدها ساده هستن من توضیحی درباره اونا ندادم. اما چشم از این به بعد سعی میکنم خط به خط توضیح بدم
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس