نحوه سفارشی سازی منوها در وردپرس

نحوه سفارشی سازی منوها در وردپرس

باکس دانلود افزونه و قالبهای موردنیاز آموزش زیر

منوها در یک سایت یا فروشگاه اینترنتی از جمله بخش های مهم محسوب میشود, زیرا یک کاربر با ورود به وبسایت شما اولین چیزی که مشاهده میکند منوهای ناوبری است. از اینرو در این آموزش میخواهیم باهم منوهای وبسایت وردپرسی شما را سفارشی سازی (استایل دهی) کنیم. پس همراه ما باشید با آموزش نحوه سفارشی سازی منوها در وردپرس…

نحوه استایل دهی کردن منوها در وردپرس
نحوه استایل دهی کردن منوها در وردپرس

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

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

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

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

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

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

نحوه استفاده از افزونه CSS Hero در سفارشی سازی منوهای وردپرس

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

افزونه CSS Hero
افزونه CSS Hero

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

ویرایشگر زنده
ویرایشگر زنده

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

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

کلیک روی منو
کلیک روی منو

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

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

ویژگیهای مختلف
ویژگیهای مختلف

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

رابط کاربری ساده CSS Hero
رابط کاربری ساده CSS Hero

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

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

پیش نمایش
پیش نمایش

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

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

روش 2: سفارشی سازی منوهای وردپرس با کدنویسی

در این روش نیاز است که خودتان CSS سفارشی را به صورت دستی اضافه کنید و برای کاربران توسعه دهنده منظور شده است.

منوهای ناوبری وردپرس در یک لیست نامرتب (لیست بولت یا همان <ul></ul>) نمایش داده می شوند.

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

<?php wp_nav_menu(); ?>

لیست نامرتب شما دارای نام کلاس “منو” است که هر آیتم در لیست دارای کلاس CSS است.

البته این درصورتی قابل استفاده است که شما تنها یک جایگاه منوی ناوبری در قالب خود داشته باشید. با این حال، اکثر قالب ها دارای منوهای ناوبری متعددی هستند در مکان های متفاوتی نمایش داده میشوند(برای مثال منوی موجود در بخش کپی رایت یا منوی دسته بندی در فروشگاه های اینترنتی).

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

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

<?php wp_nav_menu( array( 'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

این کد به وردپرس می گوید که primary-menu کلاس css برای منوی primary می باشد .پس استایل های خود را باید به کلاس primary-menu وارد کنیم.

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

// container class
#header .primary-menu{} 
  
// container class first unordered list
#header .primary-menu ul {} 
  
//unordered list within an unordered list
#header .primary-menu ul ul {} 
  
 // each navigation item
#header .primary-menu li {}
  
// each navigation item anchor
#header .primary-menu li a {} 
  
// unordered list if there is drop down items
#header .primary-menu li ul {} 
  
// each drop down navigation item
#header .primary-menu li li {} 
  
// each drap down navigation item anchor
#header .primary-menu li li a {}

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

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

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

// Class for Current Page
.current_page_item{} 
  
// Class for Current Category
.current-cat{} 
  
// Class for any other current Menu Item
.current-menu-item{} 
  
// Class for a Category
.menu-item-type-taxonomy{}
   
// Class for Post types
.menu-item-type-post_type{} 
  
// Class for any custom links
.menu-item-type-custom{} 
  
// Class for the home Link
.menu-item-home{}

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

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

دکمه گزینه های صفحه
دکمه گزینه های صفحه

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

افزودن کلاس اختصاصی
افزودن کلاس اختصاصی

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

نمونه هایی از استایل دهی منو ها در وردپرس

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

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

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

inspect tool
inspect tool

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

1. نحوه تغییر رنگ قلم در منوهای ناوبری وردپرس

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

#top-menu  li.menu-item a {
color:#ff0000;
}

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

ابزار بازرسی
ابزار بازرسی

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

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

کلاس مورد استفاده در قالب خود برای منوی ناوبری
کلاس مورد استفاده در قالب خود برای منوی ناوبری

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

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

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

تغییر رنگ پس زمینه
تغییر رنگ پس زمینه

3. نحوه تغییر رنگ پس زمینه یک آیتم تنها در منو

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

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

به قسمت ” نمایش » فهرست ها ” را بروید و بر روی دکمه گزینه های صفحه در گوشه سمت چپ بالای صفحه کلیک کنید. این گزینه به منوی پرواز پایین می آید که باید مربع کنار گزینه “کلاسهای CSS” را علامت بزنید.

دکمه گزینه های صفحه در گوشه سمت چپ
دکمه گزینه های صفحه در گوشه سمت چپ

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

افزودن کلاس
افزودن کلاس

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

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

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

تغییر رنگ پس زمینه یک آیتم تنها
تغییر رنگ پس زمینه یک آیتم تنها

4- افزودن Hover Effects به منوهای ناوبری

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

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

#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
}

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

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

افزودن Hover Effects
افزودن Hover Effects

5- ایجاد منوهای ناوبری چسبان (Sticky Floating ) در وردپرس

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

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

#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}

به سادگی #top-menu را با CSS ID از فهرست پیمایش خود جایگزین کنید.

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

منوهای ناوبری Sticky Floating
منوهای ناوبری Sticky Floating

6. ایجاد منوهای ناوبری شفاف در وردپرس

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

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

background-color:transparent; 

اینگونه است که در سایت نسخه ی نمایشی ما به نظر می رسد.

منوهای ناوبری شفاف
منوهای ناوبری شفاف

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

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

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

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