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



visibility  
mode_comment   ۴۱

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

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

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

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

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

comment دیدگاه کاربران
شیوا شادیه 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 ورد پرس زدم درست شد خداروشکر.

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

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

ارسال نظرات

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

1 2