campaign-off40

دوره مجازی قالب وردپرس (جلسه 21): تبدیل header قالب و منوی اصلی به وردپرس



visibility  
mode_comment   ۴۳

به نام خدا و با سلام. در جلسه 21 ام از دوره مجازی قالب حرفه ای وردپرس قراره با هم دیگه بخش منوی بالای وب سایت رو تکمیل کنیم وآیکن ها کتابخونه font awesome رو بهش اضافه کنیم. در ادامه کدهای بخش هدر قالب رو از html وارد قالب وردپرس می کنیم و عنوان وب سایت رو به صورت داینامیک نشون میدیم و کمی هم بهش استایل میدیم. بعد از این موارد منوی اصلی قالب رو که قراره دسته بندی های وب سایت رو نمایش بده ایجاد کنیم و اونارو کمی استایل بدیم.. در این جا ما گزینه های منو رو از دسته بندی های انتخاب می کنیم و این بخش رو باید با دقت ببینید.

در این جلسه خواهیم دید :

  • اضافه کردن آیکن ها به منوی بالایی سایت
  • پیاده سازی هدر قالب در وردپرس
  • ایجاد فایل های قالب برای هدر
  • تغییرات لوگو و عنوان وب سایت در قالب وردپرس
  • اضافه کردن فایل منوی اصلی به قالب وردپرس و پیاده سازی آن
  • اضافه کردن گزینه های منوی به منوی دسته بندی ها و نمایش آن در قالب
info توجه

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

ثبت نام در پکیج آموزش طراحی قالب وردپرس

comment دیدگاه کاربران
alireza azami replyپاسخ

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

کیوان علی محمدی

ممنون دوست عزیز. شما لطف دارید.چشم ما سعی خودمونو می کنیم.

زمان الله ابراهیمی replyپاسخ

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

کیوان علی محمدی

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

majid zare replyپاسخ

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

کیوان علی محمدی

سلام. اصلاح شد.

زمان الله ابراهیمی replyپاسخ

سلام استاد توی آموزش ها اگه امکان دارد درمورد rss
صحبت کیند یکم توضیح بدید و بگید که چطور rss به دست بیاریم ممنون

کیوان علی محمدی

سلام rss وب سایت های وردپرس در آدرس /feed بدست میاد. حالا ما یه توضیحی درباره اش میدیم.

reza_yki replyپاسخ

سلام استاد اگه بخوایم ایکون رو که با css در منو وارد کردیم هم داخل تگ a باشه چی کار کنیم چون من فقط می خوام ایکون دیده بشه و به لینک مورد نظر بره ممنون

کیوان علی محمدی

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

حمید حسینی تبار replyپاسخ

چطور شماره آی دی یک دسته رو پیدا کنم ؟
چون هر چی گشتم پیدا نکردم .

کیوان علی محمدی

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

محمد replyپاسخ

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

کیوان علی محمدی

سلام معمولا برای بوتس ترپ اگه کدهای اصلی منو رو قرار بدین بقیه رو خودش درست نشون میده و البته نباید کد خاصی برای اون منو خودتون نوشته باشین.فقط کافیه کلاس های wrapper رو به تولید کننده منو اضافه کنید.این آموزش رو هم ببینید.
http://code.tutsplus.com/tutorials/how-to-integrate-bootstrap-navbar-into-wordpress-theme–wp-33410

میلاد کریمی replyپاسخ

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

کیوان علی محمدی

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

حمید حسینی تبار replyپاسخ

با سلام
چطور میتونم یک سایت 2 زبانه داشته باشم ؟

کیوان علی محمدی

سلام منظورتون کدنویسی هستش یا افزونه؟

حمید حسینی تبار

بعضی از سایتها گزینه انتخاب زبان داره و بر اساس انتخاب انگلیسی و یا فارسی قالب سایت rtl , ltr میشه . چطور این مورد رو ایجاد میکنن ؟

کیوان علی محمدی

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

فرهاد replyپاسخ

با سلام
استاد علی محمدی من می خوام یه منو داشته باشم که با استفاده از یه کلاس که از کلاس Walker_Nav_Menu مشتق میشه بتونم کلاس های css خودم رو بهش اعمال کنم. من می خوام در پنل ادمین وردپرس کلاس های خاصی رو که همون کلاس های font awesome هستند برای آیتم های فهرست مشخص کنم و بعد به جای اینکه این کلاس های css روی تگ های li اعمال بشن بیام و یه تگ i قرار بدم و کلاس های فونت آوسام رو بهش بدم.
من از کد زیر برای تابع start_el در کلاس walker استفاده کردم. اما دقیقا نمی دونم چطوری باید کلاس های css فونت آوسام رو نمایش بدم.

کیوان علی محمدی

در قسمت خروجی که در output قرار میگیره باید در بین تگ ها li شما تگ i رو اضافه کنید.

فرهاد

ممنون استاد. البته جواب این سوال رو با جستجو در اینترنت پیدا کردم. اینجا جواب رو می نویسم تا بقیه دوستان استفاده کنن.
برای نمایش font awesome ها باید نام کلاس های css رو در پنل ادمین وردپرس در بخش فهرست ها و نام کلاس های css مشخص کرد. بعد از اون متد classes از شی item که دومین پارامتر تابع start_el هست یه آرایه برمی گردونه شامل لیست تمام کلاس ها. برای اینکه به هدفمون برسیم باید با عملیات رشته ای و آرایه ای کلاس های مربوط به font awesome رو از درون آرایه استخراج کرده و به عنوان کلاس برای تگ i ست کنیم.

شیوا شادیه replyپاسخ

سلام و خسته نباشید خدمت مهندس علی محمدی
من میخوام برای تاپ منوی کارم آیکون هایی غیر از اونایی که تو فایل ایندکس ایجاد کردم استفاده کنم ولی متاسفانه نمایش نمیده ولی وقتی کد (کلاس)آیکون هایی که قبلا تو اچ تی ام ال م وارد کردم میزنم به درستی نمایش میده …… مشکل کار کجاست؟؟؟؟؟؟؟؟؟؟؟

کیوان علی محمدی

سلام احتمالا استایل هایی دیگه ای که روی منو اعمال شده استایل های شما رو غیر فعال میکنه.

pedram2020 replyپاسخ

سلام
من فولدر sl-theme این جلسه رو توی دایرکتوری themes قرار میدم. همه چیز درست میشه. اما آیکونهای مربوط به fontawsome روی سر منوها قرار میگیرند. اگر ممکنه راهنمایی بفرمایید.

کیوان علی محمدی

سلام کش مروگر رو پاک کنید و هم چنین استایل های آیکن ها رو.

pedram2020 replyپاسخ

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

وحید صالحی

در فایل استایلتون زمانی که float رو به عنصر مورد نظر اعمال می کنید important هم اعمال کنید بطور مثال:
.sample:float ritght!important

pedram2020

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

کیوان علی محمدی

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

اینفوگر replyپاسخ

با سلام . در منوهای وردپرسی یک چارچوب کلی وجود داره که به صورت ul li a هستش ما میتونیم به صورت هایی روی ul و li ها مدیریت داشته باشیم . اما مثلا اگه فرضا 8 تا anchor داشته باشیم توی منویی که تولید شده و به هر کدوم بخوایم id یا کلاس خاصی که مد نظرمون هست رو بدیم باید چکار کنیم ؟ من راهی ندیدم که وردپرس پیش بینی کرده باشه . ما از plugin های خاصی استفاده میکنیم که ممکنه لازم باشه به anchorها id های خاص و منحصر به فرد بدیم . باید چکار کرد ؟ از js و jquery نمیخوام استفاده کنم . راه مستقیمی وجود نداره ؟

کیوان علی محمدی

سلام فکر میکنم با استفاده از کلاس های walker می تونید اینکارو انجام بدین.

sima ahmadi replyپاسخ

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

کیوان علی محمدی

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

Sina Ghoshuni replyپاسخ

سلام مهندس محمدی، من یک منویی دارم برای بالای سایتم که به صورت بوتسرپ هست، کدش رو در زیر قرار میدم اگه ممکنه برای این مورد راهنماییم کنید!
هر جوری فکر کردم با روش کلاس ست کردن توی وردپرس نمیشه
همان طور که میبینید چندین جا از کلاس استفاده کرده مثلا برای ul اول کار یا مثلا برای تگ a

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
	
  </div>
</nav>
کیوان علی محمدی

سلام این مورد حتما باید با استفاده از Walker ها پیاده سازی بشه.

مرتضی مهاچر replyپاسخ

سلام و وقت بخیر
مشکلی که دارم اینه که وقتی یه سری تغییرات در فایل style.css وارد می کنم (مثلا کدزیر)اصلا بر فایل ورد پرسم اعمال نمیشه یعنی تغییرات را نشون نمیده(همه فایل ها رو سیو می کنم و حتی وردپرس رو دوباره راه اندازی می کنم ولی هیچ). ولی در این جلسه شما به راحتی اعمال می کنید و مشکلی هم ندارید. بنظر باید یه تنظیماتی انجام بدم که نمی دونم لطفا راهنمایی بفرمایید.
در کد زیر باید font awsome ها در کنار نوشته های منوها قرار بگیره ولی هیچ اتفاقی نمی افته.

#top-bar #top-right-menu ul li:before{
    float: right;
}
کیوان علی محمدی

سلام بهتره مرحله به مرحله پیش برید و چک کنید . معمولا یک اشتباه کوچیک این مشکلات رو درست میکنه. آدرس فایل ها رو چک کنید و مطمئن بشید از طریق developer tools این کدهای css رو المنت های مورد نظر اعمال شدن یا نه.

مرتضی مهاچر replyپاسخ

تشکر استاد
ctrl+f5 رو که توی refresh ورد پرس زدم درست شد خداروشکر.

کیوان علی محمدی

خواهش میکنم و خدارو شکر درست شد. ^_^

Hassan replyپاسخ

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

کیوان علی محمدی

سلام. بیشتر توضیح بدید لطفا.

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.