آیا می خواهید منوهای ناوبری وردپرس خود را برای تغییر رنگ یا ظاهر آن ها سفارشی کنید؟ شما تم وردپرس ظاهر منوهای ناوبری سایت شما را مدیریت می کند. شما به راحتی می توانید آن را با استفاده از CSS سفارشی کنید تا نیازهای خود را برآورده کند. در این آموزش، ما به شما نشان خواهیم داد که چگونه منوهای ناوبری وبلاگ وردپرس خود را سبک کنید.

به-سبک-به-منوها د ناوبری د وردپرس

1 روش: چگونه می توانید منوهای وردپرس خود را با یک افزونه سبک دهید

شما تم وردپرس از CSS برای سبک های پیمایش شما استفاده می کند. بسیاری از مبتدیان با ویرایش CSS راحت نیستند مضامین وردپرس. بنابراین در آن زمان است که یک افزونه برای استایل دادن به منو مفید است، زیرا شما را از ویرایش فایل‌های تم یا نوشتن کد نجات می‌دهد.

ابتدا کاری که باید انجام دهید نصب و فعال سازی افزونه است " قهرمان CSS ". برای جزئیات بیشتر به راهنمای گام به گام ما در مورد نحوه نصب a مراجعه کنید پلاگین وردپرس.

CSS Hero یک است پلاگین وردپرس حق بیمه که به شما امکان می دهد خودتان طراحی کنید تم وردپرس بدون نوشتن یک خط کد (نه HTML یا CSS مورد نیاز است).

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

حالا باید روی دکمه کلیک کنید CSS قهرمان در نوار ابزار وردپرس خود.

CSS-قهرمان-منوی-وردپرس

CSS Hero یک ویرایشگر WYSIWYG ارائه می دهد (آنچه می بینید همان چیزی است که می گیرید "آنچه می بینید همان چیزی است که می گیرید") با کلیک بر روی این دکمه ، یک نوار ابزار شناور CSS Hero در سمت راست به وب سایت خود هدایت می شوید.

نوار ابزار CSS-قهرمان

برای شروع ویرایش باید روی نماد آبی در بالا کلیک کنید.

موس خود را روی فهرست منو خود حرکت دهید و CSS Hero با نمایش مرزهای آن ، آن را برجسته می کند. هنگامی که روی منوی پیمایش برجسته کلیک می کنید ، موارد مختلفی را که می توانید ویرایش کنید به شما نشان می دهد.

سفارشی کردن یک منو با CSS-قهرمان

در تصویر بالا ، می توانید مورد منو ، منوی پیمایش و ظرف منوی پیمایش و غیره را مشاهده کنید.

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

CSS Hero اکنون به شما ویژگیهای مختلفی را می دهد که می توانید مانند متن ، رنگ پس زمینه ، مرزها ، حاشیه ها ، بالشتک ها و غیره تغییر دهید.

CSS-اموال قهرمان

می توانید روی خاصیتی که می خواهید ویرایش کنید کلیک کنید. CSS Hero شما رابط ساده ای را ارائه می دهد که می توانید تغییرات خود را انجام دهید.

ویرایش یک اموال-CSS-با-CSS-قهرمان

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

با ایجاد تغییرات ، پیش نمایش زنده از نتیجه نهایی خواهید داشت.

پیش نمایش به زندگی می کنند-CSS-قهرمان

هنگامی که از تغییرات خوشحال شدید ، روی دکمه "ذخیره" در "کلیک کنید CSS قهرمان برای ذخیره تغییرات خود

بهترین بخش این روش این است که می توانید تغییراتی را که ایجاد کرده اید به راحتی خنثی کنید. CSS Hero یک تاریخچه کامل از تمام تغییرات شما را نگه می دارد ، و می توانید بین این تغییرات بیایید و بروید.

روش دوم: چگونه می توان سبک منوی پیمایش خود را دستی تغییر داد

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

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

منوهای ناوبری WordPress در یک لیست نامرتب نمایش داده می شوند (لیست گلوله).

اگر از برچسب php زیر استفاده کنید ، لیستی بدون کلاسهای CSS مرتبط با آن نمایش می دهد.


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

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

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

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

'Primary'، 'menu_class' => 'Primary-menu'،)))؛ ؟>

این کد به WordPress می گوید که اینجاست که موضوع فهرست اصلی را نشان می دهد. همچنین می افزاید: کلاس CSS " منوی اصلی در منوی پیمایش.

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

#header منوی .primary {} // ظرف کلاس #header .primary UL منوی {} // ظرف کلاس اول لیست نامرتب #header منوی .primary UL UL {} // لیست نامرتب در یک لیست نامرتب #header .primary منو لی {} // هر کدام از اقلام ناوبری #header لی منوی .primary {} // هر کدام از اقلام ناوبری # هدر لی لنگر منوی .primary UL {} // لیست نامرتب اگر رها کردن آیتم ها #header .primary وجود دارد -menu li li {} // هر آیتم ناحیه کشویی #header .primary-menu li li a {} // هر کدام از لنگرها

# سربرگ را با کلاس کانتینر یا "" جایگزین کنید ID مورد استفاده توسط موضوع وردپرس شما.

این ساختار به شما کمک می کند تا ظاهر منوی پیمایش خود را کاملاً تغییر دهید.

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