سرخط خبرها
خانه << وردپرس << آموزش وردپرس << آموزش طراحی قالب وردپرس – قدم سوم بخش ۲
آموزش طراحی قالب وردپرس
آموزش طراحی قالب وردپرس

آموزش طراحی قالب وردپرس – قدم سوم بخش ۲

با طراحی سایت امداد رایانه میهن و تعمیر کامپیوتر در محل همراه باشید….

 

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

همچنین بخش head رو ساختیم. حالا نوبت به این رسیده که بریم سراغ طراحی بخش هدر سایت

من یک طرحی رو انتخاب کردم برای بخش هدر که عکسشو هم این پایین گذاشتم.

این نکته رو هم بگم که میخواییم از فریم ورک بوت استراپ استفاده کنم.

آخرین ورژن بوت استراپ را از سایت getbootstrap.com دانلود کنید

همچنین آخرین ورژن جی کوئری رو هم از سایت jquery.com/download دانلود کنید

header

آموزش طراحی قالب وردپرس

 

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

من این کد رو هم به فایل functions.php اضافه کردم

 

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

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

این کد رو به فایل header.php اضافه کنید

 

 آموزش طراحی قالب وردپرس

خب همونطور که میبینید کد بالا یک بخش لوگو یک بخش بنر تبلیغاتی و یک بخش برای منو داره

اما ما نمی خواهیم لوگو یا بنر تبلیغاتیمونو دستی از اینجا ادیت کنیمک بلکه میخواهیم اینم داینامیک باشه. مثل theme option. حالا یه روشی رو برای ساخت پنل تنظیمات پوسته میگم بهتون.

افزونه option tree

با این افزونه میتونیم یک پنل تنظیمات حرفه ای و کامل بسازیم. بعد از این که افزونه رو نصب و فعال کردید، در زیر منو نمایش منو جدیدی به نام Option Tree ظاهر میشه. به بخش settings بروید

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

4

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

هنگام افزودن یک تنظیم جدید هم نام و آی دی و نوع ازتون میخواد. مثلا من برای لوگو سایت نوع رو upload گذاشتم. و همچنین آی دی رو eli_logo گذاشتم.

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

 

تابع ot_get_option(‘ID’) : این تایع مقدار تنظیم رو بر میگردونه فقط کافیه به جای ID آی دی که برای تنظیم گذاشتید رو قرار بدید. پس اسم ID های بالا رو عوض کنید

اگر با php آشنا باشید متوجه میشی که چه اتفاقی می افته

در واقع اومدیم شرط گذاشتیم که اگر لوگو آپلود شده پس تصویر لوگو رو چا کنید در غیر این صورت عنوان سایت بر می گرده. همچنین اگر بخش تبلیغات خالی بود اون رو قرار بده در غیر این صورت جاشو خالی بزار.

اگر در رابطه با افزونه مشکل داشتید در بخش دیدگاه بگید. کار باهاش خیلی راحته

خب تمامی فایل ها رو ذخیره کنید و صفحه سایت رو رفرش کنید. باید لوگو و همچنین منو و همچنین تبلیغات ( در صورت گذاشتن ) رو ببینید اگر هم یکی از اینارو نمیبیند یه جای کارو اشتباه انجام دادید. اما اگر میبینید باید ظاهر زشتی داشته باشه.

من کد CSS رو هم واستون قرار میدم. در نهایت باید این شکلی باشه

header2

 

عکس بالا هدری هستش که من طراحی کردم

کد css هم این است

 

اینم تصویر خط بالا

top-body

حالا سیو کنید و تغییرات رو ببینید

همچنین من یه کد دیگه هم تو فایل فانکشن گذاشتم که اگر کاربر لاگین کرده بود نوار ادمین رو نشون نده

کدش هم اینه

 

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

هر سوالی در رابطه با این بخش از آموزش طراحی قالب وردپرس داشتید همینجا در دیدگاه ها قرار بدید

موفق باشید

تا بعد بای

درباره ی محمد محمودی

محمد محمودی
سلام من محمد محمودی هستم. در زمینه کامپیوتر اعم از وب، برنامه نویسی ، موبایل ، طراحی ، و.... مهارت دارم. امیدوارم بتونم کمکتون کنم و در توانم باشه

همچنین ببینید

آموزش طراحی قالب وردپرس

آموزش طراحی قالب وردپرس – قدم دوم

با طراحی سایت امداد رایانه میهن و تعمیر کامپیوتر در محل همراه باشید…. سلام دوستان …

پاسخ دهید

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

سوال امنیتی زیر را پاسخ دهید ( الزامی ) Time limit is exhausted. Please reload the CAPTCHA.