آموزش تغییر ظاهر منوی کاربری در وردپرس

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

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

• نحوه اضافه کردن یک تصویر در ویجت نوار ابزار وردپرس
• آموزش ایجاد مگامنو در وردپرس با افزونه Max Mega Menu

یکپارچه‌سازی منوهای کاربری وردپرس با استفاده از افزونه

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

CSS Hero یک ویرایشگر WYSIWYG ارائه می‌دهد. بر روی دکمه‌ شناوری که در نوار ابزار CSS Hero وبسایت‌تان قابل مشاهده است کلیک کنید.

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

در تصویر بالا، کادر top navigation menu را می‌بینیم. به فرض می‌خواهیم رنگ زمینه منوی کاربری را عوض کنیم. در این بخش ما top navigation را انتخاب می‌کنیم که کل منو را در بر بگیرد. CSS Hero به شما امکانات مختلفی نظیر ویرایش متن، پس‌زمینه، مرزها، حاشیه، لایه و غیره را می‌دهد.

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

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

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

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

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

<?php wp_nav_menu(); ?>-1

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

این کد به وردپرس محل منو را می‌گوید و همچنین یک کلاس اولیه CSS به منوی ناوبری اضافه می‌کند.

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

وردپرس همچنین به شما اضافه کردن کلاس‌های CSS سفارشی خود را به موارد خاص منو می‌دهد. شما می‌توانید از این ویژگی برای سبک آیتم‌های منو، نظیر اضافه کردن آیکون تصویری به منوی خود و یا تنها با عوض کردن برای نشان دادن آیتم‌ها استفاده کنید. به سمت صفحه Appearance بروید صفحه منوها در مدیریت وردپرس خود را باز کرده و بر روی دکمه گزینه‌های صفحه کلیک کنید.

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

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