مگا منوهای کشویی- یک طراحی عالی پیدا کنید. ناوبری سایتداشتن تعداد زیادی صفحه همیشه یک مشکل بوده است. با افزایش تعداد صفحات و اشغال فضای زیادی، منوهای استاتیک کلاسیک a la sitemap به سرعت رشد می کنند. منوهای کشویی پویا می توانند به میزان قابل توجهی در فضای صفحه صرفه جویی کنند، اما قابلیت استفاده قربانی می شود - پیمایش به کار فعال و نسبتاً دقیق ماوس نیاز دارد. کمی از دست رفته و منوی اشتباه آشکار می شود.

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

همانطور که ممکن است، مگا منو اکنون، همانطور که می گویند، در روند است، و اگر هنوز از آن استفاده نکرده اید، باید نگاه دقیق تری به آن بیندازید.

UberMenu: افزونه مگا منو وردپرس

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

علاوه بر این، منو دارای تعدادی ویژگی عالی دیگر نیز می باشد، مانند:

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

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

هزینه: 19 دلار

مگا منوی اصلی

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

هزینه: 15 دلار

منوی مگا Liquida

منوی مگا Liquida- یک پلاگین مدرن و چند منظوره که برای هر دو مناسب است کاربران عادی، و توسعه دهندگان - می توان آن را به راحتی در تم توسعه یافته خود جاسازی کرد.

این افزونه طیف گسترده ای از گزینه ها را برای ایجاد منوبا طراحی مدرن و شیک: عمودی یا جهت افقی، امکان گنجاندن آیتم های منو لینک ها، تصاویر و حتی کارت های محصول WooCommerceیا Easy Digital Downloads، که می تواند هنگام توسعه فروشگاه های آنلاین مفید باشد.

هزینه: 19 دلار

منوی مگا آسمان

سه گزینه طراحی برای دستگاه های تلفن همراه، 9 طرح رنگ، شبکه سفارشی، اشکال و 360 نماد برداری. این مجموعه به Sky Mega Menu اجازه می دهد تا جایگاه شایسته خود را در میان نوع خود بگیرد.

هزینه: 6 دلار

WP Mega Menu

پلاگین از دسته باید داشته باشد. بسیاری از تنظیمات و گزینه ها، کار با دسته ها، زیر شاخه ها و پیام ها، بهینه سازی سئوو دو طرح رنگی از پیش تعیین شده (تیره و روشن) که با این حال به راحتی می توان آنها را به دلخواه تغییر داد.

هزینه: 29 دلار

منوی NOO

به منظور درک پنل تنظیمات منوی NOOشما حتی نیازی به خواندن اسناد ندارید - همه چیز بسیار شهودی است. در دست داشتن پیش نمایشدر زمان واقعی، می توانید به سادگی مقادیر را تغییر دهید و در حین تماشای افکت، لغزنده ها را حرکت دهید. رنگ بندی را می توان به صورت کاملا دلخواه تغییر داد و هر گزینه را می توان به نام خود ذخیره کرد و تعداد این گزینه ها نامحدود است.

محتویات آیتم های منو می تواند باشد متن، لینک ها، تصاویر، فیلم ها، فرم ها و ویجت های مختلف. از شبکه 12 ستونی خود برای جا دادن همه آن استفاده می کند.

هزینه: 15 دلار

منوی قهرمان – افزونه مگا منو وردپرس پاسخگو

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

طراحی مدرن و شیک و البته کاملا .

هزینه: 19 دلار

Superfly - افزونه منوی وردپرس پاسخگو

به اصطلاح منوی پرواز- آخرین روند در دنیای طراحی وب. چنین منوی بی سر و صدا در گوشه صفحه به شکل یک نماد "چرت می‌زند"، تقریباً هیچ فضایی را اشغال نمی‌کند، و هنگامی که ماوس را روی آن می‌برید، باز می‌شود، عناصر صفحه را جابه‌جا می‌کند و آنها را روی هم نمی‌گذارد.

یکی از نمایندگان این نوع مگا منو افزونه Superfly - Responsive Menu WordPress است. ابزاری چشمگیر هم از نظر طراحی و هم از نظر ویژگی.

هزینه: 22 دلار

تغییر منو

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

تغییر منو بسیار ساده است، منوی مینیمالیستی، که با این وجود کاملاً با عملکرد اصلی خود مقابله می کند.

هزینه: 5 دلار

WP Floating Menu Pro

WP Floating Menu Proیک افزونه 2 در 1 است. منوی ناوبری برای یک سایت یک صفحه ایو برچسب های منو علاوه بر این، با استفاده از این افزونه می توانید حداقل به صورت بصری، سایت سنتی خود را به یک سایت مدرن تک صفحه ای تبدیل کنید. WP Floating Menu Pro ارائه خواهد کرد پیمایش صافاز یک قسمت صفحه به قسمت دیگر

در اختیار توسعه دهنده، WP Floating Menu Pro 13 و 7 گزینه مختلف برای مکان در صفحه، گزینه های سفارشی سازی، رنگ ها، محتوا و تعداد موارد ارائه می دهد.
برای نمایشگرهای کوچکتر از 480 پیکسل، این امکان وجود دارد خاموش شدن خودکارمنو.

هزینه: 17 دلار

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

منوی فلکسی دارای 5 نوع منوی مختلف و کاملاً قابل تنظیم است: منوی پرواز، عریض (عرض صفحه)، عریض+توضیحات، عریض+تصاویر و عمودی.

هزینه: 14 دلار

Max Mega Menu (رایگان)

خیلی خوب افزونه با ویرایشگر منو کشیدن و رها کردنو امکان جاسازی تقریباً هر ویجتی در آیتم های منو - از فرم های تماس گرفته تا نقشه های گوگل.

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

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

به هر حال مگا منو چیست؟ بله، همان چیزی است، منوی ناوبری معمولی که احتمالاً بیش از یک بار با آن برخورد کرده اید و پیکربندی کرده اید. درست بر خلاف عملکرد استاندارد، وجود دارد ویژگی های اضافیبرای سفارشی سازی و نمایش عناصر جداگانه. به عنوان مثال، اضافه کردن نه تنها یک زیر منوی عمودی، بلکه یک زیر منوی افقی، افزودن آیکون ها و تصاویر جداگانه به منو، تنظیم دقیق ظاهر برای همه آیتم های منو و غیره. همه اینها در پلاگین های امروزی ما است.

فرصت عالی دیگر برای افزودن یک منوی ناوبری عالی به سایت خود با یک افزونه، Mega Menu توسط WooRockets.com است. نصب و فعال سازی افزونه استاندارد است.

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

به بخش بروید مگا منو WRدر پنل مدیریت خود و روی آن کلیک کنید جدید اضافه کن. می افتیم صفحه جدیدبرای ساخت منوی جدید کسانی که قبلاً با آهنگسازهای Drag & Drop سروکار داشته اند، بلافاصله احساس می کنند که در خانه خود هستند. روند ساخت منو تفاوت چندانی با ساخت صفحه ندارد.

در ابتدا مطمئن شوید که در بالای منو − محلمنو دقیقا همان چیزی است که شما نیاز دارید. یا بر روی آن کلیک کنید مکان مدیریتبرای انتخاب یک منو

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

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

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

یک چیز بسیار کاربردی، به طور خلاصه. بیهوده نیست که نویسندگان علاوه بر این افزونه، دارای: فرم تماس و البته آهنگساز هستند که ظاهراً اساس افزونه مگا منو بوده است. شما می توانید یک نسخه نمایشی کار با تمام شکوه خود را در اینجا ببینید.

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

سلام! در زندگی من، مثل همیشه، رویدادهای زیادی وجود دارد، بنابراین پیدا کردن زمان برای وبلاگ بسیار دشوار است. دیروز بلیط سریلانکا خریدیم و به زودی 4 ماه پرواز خواهیم کرد، به ما سر بزنید! و حالا من دنبال زیباترین لباس عروس هستم :))
امروز در مورد نحوه ایجاد منو در وردپرس و همچنین اضافه کردن این بلوک ها در قسمت های دلخواه قالب صحبت خواهیم کرد.
ما یاد خواهیم گرفت که چگونه منو را سفارشی کنیم و آن را به دلخواه خود ویرایش کنیم.

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

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

پس از ایجاد یک تم فرزند که می‌توان آن را بدون تأثیر بر تم اصلی تغییر داد، اجازه دهید تابع زیر را به فایل function.php آن اضافه کنیم.

1 2 3

register_nav_menus( آرایه ( "منوی اضافی" => __( "منوی اضافی" , "نام موضوع شما" ) ) ) ;

register_nav_menus(array("additionalmenu" => __("Additional Menu"، "Your Theme Name")));

اگر تم فرزند ایجاد نمی کنید، آن را به فایل توابع اصلی طرح زمینه خود اضافه کنید.

این ویژگی به ما این امکان را می دهد که یک منوی اضافی وردپرس را به قالب خود اضافه کنیم و منطقه دیگری برای آن ایجاد کنیم.

پس از افزودن، به پنل مدیریت در "مدیریت مناطق" بروید:

یک ناحیه موضوع اضافی باید با عنوانی که در تابع دادیم ظاهر شود.

اگر می‌خواهید بخش‌های ناحیه اضافی را تغییر دهید، روی «استفاده از منوی جدید» کلیک کنید یا «صفحه اصلی» را انتخاب کنید. سپس همان بخش ها در قسمت جدید مانند منوی اصلی نمایش داده می شوند.

در مورد ما، یک منوی جدید به نام Additional ایجاد می کنیم:

قسمت تم «منو اضافی» را برای آن انتخاب کنید.

اما اکنون باید این ناحیه را به بلوک های قالب پیوند دهیم. به عنوان مثال، ما باید یک منوی اضافی در زیر عنوان یک سایت وردپرس ایجاد کنیم. به فایل header.php بروید یا آن را در تم فرزند کپی کنید. بعد از تگ body موارد زیر را اضافه کنید:

1 2 3

<div id = "منوی اضافی" > ( آرایه ( "theme_location" =>"منوی اضافی")) ?></div>

نتیجه را ببینیم:

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

تغییرات زیر را در فایل style.css اعمال می کنیم:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

ناوبری #additionalmenu ( عرض : 940px ; /* عرض ظرف */حاشیه : 0 خودکار ; ) #additionalmenu li (نمایش: درون خطی؛ padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu (عرض: 100%؛ بالا: 420px؛ /* تورفتگی از لبه بالایی */پس زمینه رنگ : #000 ; /* رنگ پس زمینه */ موقعیت : نسبی ; )

#additionalmenu navi ( عرض: 940px; /*عرض کانتینر */ margin: 0 auto; ) #additionalmenu li (نمایش: درون خطی؛ padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu ( عرض: 100% ؛ بالا: 420 پیکسل؛ /* حاشیه بالا */ رنگ پس زمینه: #000؛ /* رنگ پس زمینه */ موقعیت: نسبی؛ )

ببینیم چی شد:

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

ویجت ها و افزونه ها برای افزودن منوها به وردپرس

پیشنهاد می کنم ویدیویی در مورد ایجاد منو در وردپرس تماشا کنید:

در مقاله در مورد ویجت "منو سفارشی" ذکر شد. بیایید آن را با جزئیات بیشتری تجزیه و تحلیل کنیم.

به «ظاهر» - «ابزارک‌ها» بروید، ویجت «منو سفارشی» را پیدا کنید و آن را به قسمتی که برای موضوع شما در دسترس است و برای وبلاگ مناسب است بکشید:

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

بر این اساس، بلوک زیر در نوار کناری سمت راست نمایش داده می شود:

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

به عنوان مثال، در اینجا یک افزونه برای ایجاد یک منوی چند سطحی عمودی در وردپرس وجود دارد: Navgoco Vertical Multilevel Slide Menu.

یا ویجت منوی کشویی قابل تنظیم تر.

ویجت‌های دارای جلوه‌های JQwery برای منوها نیز محبوب هستند، برای مثال: JQuery Slick Menu Widget.

بیایید مثالی از نحوه کار آن بزنیم.

پس از نصب ویجت jQuery Slick Menu، به "Appearance" - "Widgets" بروید.

در میان لیست ویجت های موجود، یک ابزارک جدید، نصب شده توسط ما، باید ظاهر شود. آن را به یک منطقه در دسترس منتقل کنید، در مورد ما نوار کناری:

بیایید تنظیمات آن را باز کنیم:

نام منو (بخش هایی که ایجاد کردیم)، Tab Text - نام بلوکی که در سایت نمایش داده می شود، مکان (سمت چپ - در سمت چپ) را انتخاب می کنیم، Offset - تورفتگی از قسمت لبه بالایی در پیکسل، سرعت انیمیشن - سرعت انیمیشن (سریع). برای ناپدید شدن خودکار بلوک، می توانید منوی بسته شدن خودکار را انتخاب کنید. و رنگ بلوک را انتخاب کنید. روی ذخیره کلیک کنید و نتیجه را ببینید:

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

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

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

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

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

ناوبری اصلی ul li، .ثانویه ناوبری ul li (نمایش: بلوک !مهم؛ )

خوب، پس از آن، باید تورفتگی ها و خصوصیات دیگر را کمی تغییر دهید.

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

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

من همیشه سعی می‌کنم کاری انجام دهم، چیزهای مختلف را می‌گذارم و حذف می‌کنم، تا زمانی که متوجه شدم چگونه این منو را عمودی کنم، دنبال یک مناسب دیگر می‌گردم. برای این منو همون راه حل css که نوشتی میشه اعمال کرد؟ میشه بگید این خطوط رو تو کد خود افزونه در کدوم قسمت کد قرار بدم؟ آیا مکان اهمیت دارد؟
من به مگا منوی مگا با ویرایش انتخاب شده از افزونه ها رفتم، سپس بخش های زیر وجود دارد:
css
megamenu.scss
reset.scss
toggle-blocks.scss
مدیر
mixin.scss
من خطوط مشابهی را در هیچ یک از آنها پیدا نکردم تا اصلاح کنم

من فقط یک نوب کامل هستم و متوجه نشدم که چرا باید برای من نمایش داده شود، ظاهراً برای اینکه به کد نگاه کنم و آن را پیشنهاد کنم. پاسخ ادمین را در انجمن پشتیبانی Max Mega Menu پیدا کردم که نسخه عمودی فقط در نسخه Pro (پرداخت شده) موجود است، بنابراین در حال حاضر باید از آن صرف نظر کرد. لطفاً هر افزونه مشابهی را معرفی کنید، معیارها به شرح زیر است:
- قابلیت نصب در سایدبار
- منو باید کشویی باشد
- هنگام جابجایی به هر یک از دسته ها، به طوری که در این مرحله باز می ماند و با رفرش صفحه به طور کامل بسته نمی شود

دقیقا.
بدون دیدن این منو، توصیه و توصیه غیرممکن است. ممکن است چند خط در CSS کافی باشد. اما یک واقعیت نیست.

اگر چه، اگر واقعاً قصد دارید از این مگا منو استفاده کنید که تمام ویژگی های آن را آشکار می کند، 23 دلار برای چنین محصولی اصلاً زیاد نیست. ارزشش را دارد.

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

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

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

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

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

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

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

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

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

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

"primary", "menu_class" => "primary-menu")); ?>

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

اکنون می توانید منوی ناوبری خود را با این ساختار CSS سبک دهید.

#header .primary-menu() // class container #header .primary-menu ul () // class container first list unordered #header .primary-menu ul ul () //لیست نامرتب در یک لیست نامرتب #header .primary -menu li () // هر مورد ناوبری #header .primary-menu li a () // هر مورد ناوبری anchor #header .primary-menu li ul () // لیست نامرتب در صورت وجود موارد کشویی #header .primary -menu li li () // هر مورد ناوبری کشویی #header .primary-menu li li a () // هر آیتم ناوبری بازشو لنگر

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

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

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

Current_page_item() // Class for Current Page .current-cat() // Class for Current Category .current-menu-item() // کلاس برای هر مورد دیگر منوی فعلی .menu-item-type-taxonomy() // کلاس برای یک دسته .menu-item-type-post_type() // کلاس برای Pages .menu-item-type-custom() // کلاس برای هر مورد سفارشی که اضافه کردید .menu-item-home() // کلاس برای لینک صفحه اصلی

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

می‌توانید از این ویژگی برای استایل دادن به آیتم‌های منو استفاده کنید، مانند افزودن نمادها به یک تصویر با استفاده از منو یا تغییر رنگ ساده برای برجسته کردن آیتم منو.

بریم سراغ صفحه ظاهر » منوهاو دکمه را فشار دهید.

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

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

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

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

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

ابتدا باید افزونه CSS Hero را نصب و فعال کنید. برای بیشتر اطلاعات دقیقراهنمای گام به گام ما در مورد نحوه انجام را ببینید.

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

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

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

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

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

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

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

فرض کنید می خواهیم رنگ متن همه آیتم های منوی ناوبری را تغییر دهیم. در این حالت، ما یک منوی ناوبری را انتخاب می کنیم که بر همه منوها تأثیر می گذارد.

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

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

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

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

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

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

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