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

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

Styling navigation menus in WordPress

ما دو روش مختلف نشان خواهیم داد. روش اول برای مبتدیان است زیرا از پلاگین استفاده می کند و به دانش کد احتیاجی ندارد. روش دوم برای کاربران DIY متوسط ​​است که ترجیح می دهند به جای پلاگین از کد CSS استفاده کنند.

روش 1: سبک کردن منوهای پیمایش وردپرس با استفاده از یک افزونه h4>

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

این زمانی است که یک افزونه یک ظاهر طراحی شده در وردپرس مفید واقع می شود. این کار شما را از ویرایش پرونده های تم یا نوشتن هر کدی نجات می دهد.

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

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

کاربران WPBeginner می توانند از این CSS Hero Coupon برای دریافت استفاده کنند. 34٪ تخفیف در خرید آنها.

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

بعد ، باید روی دکمه CSS Hero در نوار ابزار مدیر وردپرس خود کلیک کنید.

Launch CSS Hero

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

CSS Hero Toolbar

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

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

Point and click to customize menu

در تصویر بالا ، ظرف برتر فهرست پیمایش را به ما نشان می دهد. فرض کنید می خواهیم رنگ پس زمینه منوی پیمایش خود را تغییر دهیم. در این صورت ، ما ناوبری بالایی را انتخاب می کنیم که روی کل فهرست ما تأثیر بگذارد.

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

CSS properties

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

Change appearance of an element

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

هنگام ایجاد تغییرات ، می توانید آنها را به صورت زنده در پیش نمایش موضوع مشاهده کنید.

Live preview of your CSS changes

هنگامی که از تغییرات راضی شدید ، برای ذخیره تغییرات بر روی دکمه ذخیره در نوار ابزار CSS Hero کلیک کنید.

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

روش 2: به صورت دستی منوهای پیمایش وردپرس را سبک کنید h4>

این روش نیاز به افزودن دستی CSS سفارشی دارد و برای کاربران متوسط ​​طراحی شده است.

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

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


لیست مرتب نشده شما دارای نام کلاس “menu” است و هر مورد از لیست دارای کلاس CSS خاص خود است.

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

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

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

 'اصلی' ،
        'menu_class' => 'منوی اصلی' ،
         ))
؟>

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

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

// کلاس کانتینر
#header .primary-menu {}

// کلاس کانتینر اولین لیست مرتب نشده است
#header .primary-menu ul {}

// لیست مرتب نشده در لیست نامرتب
#header .primary-menu ul ul {}

 // هر مورد ناوبری
#header .primary-menu li {}

// هر لنگر مورد ناوبری
#header .primary-menu li a {}

// لیست مرتب نشده اگر موارد کشویی وجود دارد
#header .primary-menu li ul {}

// هر مورد ناوبری کشویی
#header .primary-menu li li {}

// هر لنگر مورد ناوبری را ببندید
#header .primary-menu li li a {}

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

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

با این وجود ، موارد دیگری وجود دارد کلاسهای CSS تولید شده توسط WordPress به طور خودکار به هر منو و مورد منو اضافه می شود. این کلاسها به شما امکان می دهد منوی پیمایش خود را حتی بیشتر تنظیم کنید.

// کلاس برای صفحه فعلی
.current_page_item {}

// کلاس برای گروه فعلی
گربه فعلی {}

// کلاس برای هر مورد منوی فعلی
مورد منوی فعلی {}

// کلاس برای یک دسته
.منو-مورد-نوع-طبقه بندی {}
 
// کلاس برای انواع پست
.menu-item-type-post_type {}

// کلاس برای هر پیوند سفارشی
.menu-item-type-custom {}

// کلاس برای خانه پیوند
.menu-item-home {}

وردپرس همچنین به شما امکان می دهد کلاسهای CSS سفارشی خود را به موارد منو منفرد اضافه کنید.

می توانید از این ویژگی برای سبک دادن به موارد منو استفاده کنید ، مانند افزودن نمادهای تصویر با منوهای خود یا فقط با تغییر رنگ برای برجسته کردن یک مورد منو.

به صفحه ظاهر »منوها در مدیر وردپرس خود بروید و بر روی گزینه های صفحه دکمه.

Enable CSS classes option for individual menu items

هنگامی که آن جعبه را علامت گذاری کردید ، می بینید که برای ویرایش هر مورد منوی جداگانه ، یک قسمت اضافی اضافه می شود.

Adding a custom CSS class to a menu item in WordPress

اکنون می توانید از این کلاس CSS در صفحه سبک خود برای افزودن CSS سفارشی خود استفاده کنید. این فقط با کلاس CSS که اضافه کرده اید روی مورد منو تأثیر می گذارد.

نمونه هایی از Styling Menu Navigation در وردپرس h4>

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

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

اساساً ، شما فقط باید نشانگر را به عنصری که می خواهید تغییر دهید ، نشان دهید ، کلیک راست کرده و سپس ابزار Inspect را از فهرست مرورگر انتخاب کنید.

Using inspect tool to look up for CSS classes to modify

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

1 نحوه تغییر رنگ قلم در منوهای پیمایش وردپرس h4>

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

# top-menu li.menu-item a {
رنگ: # ff0000؛
}

در این مثال ، # top-menu شناسه اختصاص یافته به لیست غیر مرتب است که منوی ناوبری ما را نمایش می دهد. برای یافتن شناسه مورد استفاده در طرح زمینه خود ، باید از ابزار بازرسی استفاده کنید.

Changing font color of WordPress navigation menus

2. نحوه تغییر رنگ زمینه از نوار منوی پیمایش h4>

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

Finding CSS class for navigation menu container

بعد از آن می توانید از CSS سفارشی زیر برای تغییر رنگ پس زمینه نوار منوی پیمایش استفاده کنید.

.navigation-top {
background-color: # 000؛
}

در وب سایت نمایشی ما نحوه مشاهده آن است.

Changing background color of navigation menu bar

3 نحوه تغییر رنگ پس زمینه یک مورد منو h4>

ممکن است متوجه شده باشید که بسیاری از وب سایت ها از رنگ زمینه متفاوت برای مهمترین پیوندها در فهرست پیمایش خود استفاده می کنند. این پیوند می تواند دکمه ورود به سیستم ، ثبت نام ، تماس یا خرید باشد. با دادن رنگ متفاوت به آن ، پیوند چشمگیرتر می شود.

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

به منوهای شکل ظاهری بروید و روی دکمه گزینه های صفحه در گوشه سمت راست بالای صفحه کلیک کنید. این یک منوی پرواز پایین است که در آن شما باید کادر کنار گزینه ‘CSS کلاس ها را علامت بزنید.

Enable CSS classes option for individual menu items

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

Adding custom css class to a menu item

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

.با ما تماس بگیرید {
background-color: # ff0099؛
شعاع مرز: 5px؛
}

این نحوه مشاهده آن در سایت آزمون ما است.

Changing background color of a single menu item in WordPress navigation menus

4. افزودن جلوه های شناور به منوهای پیمایش وردپرس h4>

آیا می خواهید موارد منو با تغییر ماوس تغییر رنگ دهند؟ این ترفند خاص CSS باعث تعامل بیشتر منوهای ناوبری شما می شود.

به سادگی CSS سفارشی زیر را به طرح زمینه خود اضافه کنید.

# top-menu li.menu-item a: شناور {
background-color: #fff؛
رنگ: # 666؛
شعاع مرز: 5px؛
}

در این مثال ، # top-menu شناسه CSS است که توسط طرح زمینه شما برای لیست فهرست ناوبری مرتب نشده استفاده می شود.

نحوه مشاهده این مورد در سایت آزمون ما در اینجا است.

Mouseover effect in WordPress navigation menus

5. در WordPress

منوهای ناوبری مهم و مهم را ایجاد کنید

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

برای چسبناک کردن منوهای ناوبری خود می توانید کد CSS زیر را به طرح زمینه خود اضافه کنید.

# منوی بالا {
    پس زمینه: # 2194af؛
    ارتفاع: 60 پیکسل
    z-index: 170؛
    حاشیه: 0 خودکار؛
    border-bottom: 1px solid #dadada؛
    عرض: 100٪
    موقعیت: ثابت
    بالا: 0؛
    سمت چپ: 0؛
    راست: 0؛
    text-align: درست؛
    بالشتک سمت راست: 30 پیکسل
}

به سادگی # منوی بالا را با CSS ID منوی پیمایش خود جایگزین کنید.

در نسخه نمایشی ما اینگونه به نظر می رسد:

Sticky navigation menu

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

6. منوهای پیمایش شفاف را در وردپرس ایجاد کنید h4>

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

برای شفاف سازی منوهای پیمایش خود ، به سادگی نمونه CSS زیر را به موضوع خود اضافه کنید.

# سایت-ناوبری {
background-color: transparent؛
}

در سایت نمایشی ما اینگونه مشاهده شد.

Transparent navigation menus in WordPress

بسته به موضوع شما ، ممکن است لازم باشد موقعیت تصویر هدر را طوری تنظیم کنید که قسمت پشت منوهای شفاف شما را پوشش دهد.

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/.

دیدگاهتان را بنویسید