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

دسته بندی: وردپرس
زمان مطالعه: 1 دقیقه
۰۷ آبان ۱۳۹۴

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

جلسات دوره

نظرات کاربران

Hassan

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

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

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

مرتضی مهاچر

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

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

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

مرتضی مهاچر

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

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

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

Sina Ghoshuni

سلام مهندس محمدی، من یک منویی دارم برای بالای سایتم که به صورت بوتسرپ هست، کدش رو در زیر قرار میدم اگه ممکنه برای این مورد راهنماییم کنید!
هر جوری فکر کردم با روش کلاس ست کردن توی وردپرس نمیشه
همان طور که میبینید چندین جا از کلاس استفاده کرده مثلا برای 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 ها پیاده سازی بشه.

sima ahmadi

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

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

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

اینفوگر

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

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

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

pedram2020

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

وحید صالحی

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

pedram2020

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

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

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

pedram2020

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

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

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

شیوا شادیه

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

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

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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