آموزش افزونه WP Mega Menu و اضافه کردن مگامنو به وردپرس

در این مقاله به آموزش افزونه WP Mega Menu برای اضافه کردن مگامنوها به وردپرس می پردازیم. این افزونه بیش از 20 هزار نصب فعال داشته و امتیاز 4.5 از 5 را کسب کرده است.

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

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

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

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

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

آموزش افزونه WP Mega Menu و اضافه کردن مگامنو به وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه، منوی جدیدی به نام WP Mega Menu در پیشخوان وردپرس نشان داده می شود.

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

اگر با نحوه ساخت فهرست در وردپرس آشنا هستید از این قسمت عبور کرده و مستقیماً قسمت آموزش افزونه WP Mega Menu را مطالعه کنید.

آموزش ساخت فهرست در وردپرس

قبل از اینکه به آموزش افزونه WP Mega Menu بپردازیم، روش ساخت فهرست در وردپرس را به صورت مختصر توضیح خواهیم داد. برای ساخت فهرست در وردپرس باید در پیشخوان وردپرس به مسیر نمایش » فهرست ها رفته و یک فهرست جدید ایجاد کنید. شکل زیر نحوه انجام این کار را نشان داده است.

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

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

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

اکنون در ادامه آموزش افزونه WP Mega Menu ابتدا فهرست مورد نظر خود را در یک مکان خاص قرار داده سپس Mega Menu را برای آن مکان فعال می کنیم. پس از آن می توانیم طراحی/قالب مگامنو را در آن فهرست استفاده کنیم.

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

حال در پیشخوان وردپرس به مسیر نمایش » فهرست ها بروید. حتماً توجه داشته باشید که در بخش تنظیمات صفحه گزینه Mega Menu Settings فعال باشد.

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

روی تب مدیریت جایگاه ها کلیک کرده و دستورالعمل شکل زیر را دنبال کنید.

حال که یک فهرست ایجاد کرده و محل آن را در سایت مشخص کردید، وقت آن رسیده است که از Mega Menu برای زیباتر و کاربردی تر کردن فهرست خود استفاده کنید. در ادامه آموزش افزونه WP Mega Menu به نحوه استفاده از این افزونه می پردازیم.

آموزش استفاده از افزونه WP Mega Menu

افزونه WP Mega Menu قالب های خود را براساس موقعیت ها و مکان های قرارگیری فهرست اعمال می کند. این امر به این معنی است که شما می توانید یک قالب خاص را برای قرارگیری در مکان فهرست بالایی انتخاب کنید. از آن پس هر فهرستی که برای موقعیت فهرست بالایی ساخته می شود، طرحی (قالب) خاص مگامنو را دریافت خواهد کرد. این قابلیت باعث مدیریت آسان فهرست ها می شود.

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

1. با زدن تیک Enable قالب را فعال کنید. سپس بر روی دکمه Save کلیک کنید. شما در این قسمت می توانید از قالب های پیش فرض افزونه یا قالبی که خودتان آن را ایجاد کرده اید، استفاده نمایید. روش ساخت قالب در افزونه WP Mega Menu را در قسمت آموزش زیرمنوهای افزونه بخش Themes توضیح خواهیم داد.
2. بر روی دکمه ذخیره فهرست در سمت چپ صفحه کلیک نمایید تا تمام تغییرات اعمال شده ذخیره شود.

در این بخش می توانید با کلیک بر روی دکمه Export Menu منوی ایجاد شده را برون بری کرده سپس در زیرمنوی Themes پیشخوان وردپرس آن را درون ریزی کنید. در قسمت آموزش زیرمنو های افزونه WP Mega Menu بیشتر در این باره صحبت خواهیم کرد.

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

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

با قرار گرفتن موس بر روی یکی از آیتم های سطح بالای فهرست می توانید گزینه ساخت مگامنو را ببینید. بر روی دکمه WP Mega Menu کلیک کنید.

صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

در این صفحه دو تب Options و Icon را مشاهده می کنید. در این تب ها ویژگی های خاصی وجود دارد که می توانید آنها را برای همه سطوح آیتم های فهرست استفاده کنید. در مورد این تب ها بعداً صحبت خواهیم کرد.

برای شروع ساخت مگامنو باید سوئیچ Mega Menu را در حالت YES قرار دهید. پس از آن سازنده بصری کشیدن و رها کردن فهرست فعال خواهد شد.

هنگامی که مگامنو فعال سازی شد، می توانید با کلیک بر روی دکمه Add Row و انتخاب یکی از قسمت های نشان داده شده، ردیف ها و ستون ها را اضافه کرده و ابزارک های موجود در سایدبار سمت راست صفحه را با عمل کشیدن و رها کردن در ستون های هر ردیف وارد کنید.

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

برای اضافه کردن یک مگامنوی تب بندی شده می توانید از قسمت انتخاب ابزارک ها در سمت راست صفحه، ابزارک WPMM Grid Posts را کشیده و در یک ستون رها کنید.

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

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

برای اضافه کردن ابزارک فروشگاه ووکامرس کافی است از قسمت ابزارک ها WPMM Grid WooCommerce را کشیده و در یک ستون رها کنید.

پس از آن بر روی آیکون مثلثی شکل کلیک کرده و ابزارک WPMM Grid WooCommerce را با قرار دادن محصولات خود و عکس ها و اطلاعات مربوط به آنها ویرایش کنید. شما می توانید یک عنوان برای این بخش انتخاب کرده و یک دسته خاص یا کل دسته ها را برای نشان دادن محصولات آنها انتخاب کنید.

در ادامه آموزش افزونه WP Mega Menu به شما نشان می دهیم که چگونه از تب های  Options و Icon برای تمام سطوح آیتم های فهرست استفاده کنید.

تنظیمات گزینه ها

برای استفاده از این ویژگی در مسیر نمایش » فهرست ها » تب ویرایش فهرست ها، موس را بر روی هریک از آیتم های دلخواه فهرست خود قرار داده و روی دکمه WP Mega Menu کلیک کنید.

در صفحه نمایش داده شده بر روی گزینه Options کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

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

• Upload Background Image : در این قسمت می توانید برای یک آیتم سطح بالا یک تصویر پس زمینه انتخاب کنید.
• Hide Text: اگر می خواهید یک آیتم فهرست بدون نمایش متن داشته باشید، این گزینه را فعال کنید.
• Hide Arrow : اگر می خواهید آیتم های منوی کشویی شما نشانگر بالا و پایین نداشته باشند، این گزینه را فعال کنید.
• Disable Link : انتخاب این گزینه لینک آیتم های منو را غیرفعال می کند.
• Hide Item on Mobile : انتخاب این گزینه باعث پنهان شدن آیتم های فهرست در دستگاه های تلفن همراه می شود.
• Hide Item on Desktop : انتخاب این گزینه باعث پنهان شده آیتم های فهرست در کامپیوترها می شود.
• Menu Item Alignment : می توانید تراز آیتم های فهرست را روی چپ، راست یا مرکز تنظیم کنید.
• Icon Position : شما می توانید همراه با عنوان آیتم های فهرست، آیکون نمایش دهید. در این قسمت تراز قرارگیری این آیکون ها را روی چپ، راست یا مرکز تنظیم کنید.
• Badge Text : برای جلب توجه کردن بعضی از آیتم های فهرست و نشان دادن آنها به طرزی متفاوت می توانید به آنها متن نشان دار اضافه کنید. متن نشان دار خود را وارد کرده و یکی از استایل های موجود را انتخاب کنید.

 تغییرات را ذخیره کنید و کار شما تمام شده است.

قرار دادن آیکون برای مگامنو با افزونه WP Mega Menu

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

در این قسمت هم آیکون های پیش فرض وردپرس و هم آیکون های Font Awesone وجود دارند.

حال در ادامه آموزش افزونه WP Mega Menu به بررسی زیرمنوهای این افزونه در پیشخوان وردپرس و نحوه تنظیمات آنها می پردازیم.

آموزش زیرمنوهای افزونه WP Mega Menu

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

تنظیمات کلی

تنظیمات کلی یا عمومی افزونه WP Mega Menu را می توانید در صفحه تنظیمات انجام دهید. برای این کار باید بر روی منوی WP Mega Menu در پیشخوان وردپرس کلیک کنید. در این بخش از آموزش افزونه WP Mega Menu زیرمنوی تنظیمات افزونه را بررسی خواهیم کرد.

• Disable Mega menu on Mobile: اگر می خواهید مگامنو در موبایل غیرفعال باشد این گزینه را فعال کنید.
• CSS Output Location: قالب های مگامنو دارای برخی از کدهای CSS هستند. در این قسمت می توانید مکان ذخیره سازی CSS کامپایل شده قالب های منو را تعریف کنید. شما در این قسمت دو گزینه برای انتخاب دارید. فایل سیستم و تگ <head>.
• Menu Container Tag: در این قسمت می توانید تگ container منو را انتخاب کنید. بهتر است از تگ div برای سایت های غیر HTML5 استفاده کنید. حالت پیش فرض افزونه WP Mega Menu استفاده از nav است.
• Responsive Breakpoint: در این قسمت می توانید عرضی را که در آن مگامنو تبدیل به موبایل منو می شود، انتخاب کنید. انتخاب 0px به معنی غیرفعال کردن منوی رسپانسیو است. مقدار پیش فرض 767px می باشد.

ساخت قالب در افزونه WP Mega Menu

این بخش از آموزش افزونه WP Mega Menu به راه اندازی افزونه که یکی از اولویت های اول استفاده از این افزونه نیز می باشد، اختصاص دارد. برای انجام این کار در پیشخوان وردپرس به مسیر WP Mega Menu » Themes بروید.

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

با استفاده از افزونه WP Mega Menu می توانید یک فایل txt. که قبلاً برون بری کرده اید را در این بخش درون ریزی کنید. کافی است بر روی دکمه Import Theme کلیک کنید. همچنین می توانید منویی را که قبلاً ایجاد و برون بری کرده و در ابتدای آموزش افزونه WP Mega Menu در مورد آن صحبت کردیم، در این قسمت درون ریزی کنید. کافی است بر روی دکمه Import Menu کلیک کنید.

همچنین در این افزونه می توانید قالب های جدید برای فهرست خود ایجاد کنید. این قالب ها استایلینگ و رفتار نوارهای ناوبری نیرو گرفته با مگا منو را تعریف می کنند. برای ساخت یک قالب جدید در افزونه WP Mega Menu بر روی دکمه Create New Theme کلیک کنید.

با کلیک بر روی این دکمه صفحه ای به شما نشان داده می شود که شامل چندین تب محتلف است در ادامه آموزش افزونه WP Mega Menu به بررسی این تب ها و نحوه ساخت یک قالب جدید در این افزونه می پردازیم.

آموزش ساخت قالب جدید در افزونه WP Mega Menu

General Settings

این بخش شامل تنظیمات اولیه قالب مگا منوی شما است.

• Theme Title : در بخش تنظیمات عمومی باید یک عنوان برای قالب خود انتخاب کنید تا هنگام انتخاب قالب برای نوار فهرست بتوانید آن را پیدا کنید.
• Enable Sticky Menu : در این قسمت می توانید نوار فهرست خود را چسبنده کنید. اگر این گزینه را فعال کنید نوار فهرست حتی اگر کاربر به انتهای صفحه اسکرول کند، در بالای صفحه باقی خواهد ماند.
• Z-index : مقداری که در این قسمت وارد می شود تضمین می کند که فهرست توسط دیگر بخش های سایت اورفلو نمی شود. این مقدار باید بیشتر از سایر محتواهای سایت باشد. افزونه WP Mega Menu توصیه می کند که مقدار Z-index را روی 100 قرار دهید. اگر فهرست توسط دیگر بخش های سایت اورفلو شد این مقدار را بالاتر ببرید.
• Dropdown Indicator Arrow : اگر از یک منوی کشویی استفاده می کنید می توانید برای آیتم های منو نشانگر تعریف کنید. شما می توانید از آیکون نشانگر (بالا/پایین) برای آیتم های منوی کشویی استفاده نمایید.
• Enable Search Bar : در افزونه WP Mega Menu یک گزینه نوار جستجو وجود دارد که با فعال کردن این گزینه می توانید نوار جستجو را به فهرست خود اضافه کنید.

پس از اعمال تغییرات لازم بر روی دکمه ذخیره تغییرات کلیک کنید.

Menu Bar

در این بخش از آموزش افزونه WP Mega Menu به بررسی تب Menu Bar می پردازیم. ابن بخش ظاهر و حس نوار فهرست ناوبری را تعریف می کند. در این قسمت گزینه های زیادی برای تنظیم منوی ناوبری وجود دارد.

• Menu Align : این گزینه به شما اجازه می دهد تا تراز نوار منو را تنظیم کنید. شما می توانید تراز منو را چپ، مرکز یا راست انتخاب کنید. تراز پیش فرض چپ است. اما برای سایت های فارسی زبان آن را بر روی راست تنظیم کنید.
• Menu Bar Height : در این قسمت می توانید ارتفاع فهرست خود را به پیکسل تنظیم کنید.
• Menu Background : در این قسمت می توانید یک رنگ ترنسپرنت یا ثابت را برای پس زمینه فهرست انتخاب کنید.
• Menu Padding : در این قسمت می توانید برای نوار فهرست پدینگ (padding) تنظیم کنید. تنظیمات پدینگ برای بالا، پایین، چپ و راست امکان پذیر است.
• Border Radius : اگر می خواهید گوشه های فهرست شما گرد باشد می توانید از این گزینه استفاده کنید. مقادیر را برای گوشه سمت راست و چپ بالا و راست و چپ پایین به پیکسل وارد کرده و گوشه های فهرست خود را گرد کنید.
• Shadow : افزونه WP Mega Menu یک ویژگی سایه ارائه می دهد که با استفاده از آن می توانید در اطراف فهرست سایه ایجاد کنید. شما می توانید با وارد کردن مقادیر مورد نظر خود به پیکسل در جعبه های از پیش تعریف شده، سایه افقی، سایه عمودی و تاری سایه ها را تنظیم کنید. همچنین در قسمت گزینش رنگ می توانید بای سایه رنگ انتخاب کنید.
• Menu Border : در این قسمت می توانید برای فهرست خود حدود تعیین کنید. شما می توانید عرض خط مرزی را در بالا، پایین، چپ و راست تعیین کرده و همچنین نوع خط مرزی را تعیین کنید. در قسمت گزینش رنگ می توانید یک رنگ برای مرز اطراف فهرست انتخاب کنید.

Brand Logo

این قسمت از آموزش افزونه WP Mega Menu به بخش برند اختصاص دارد. ممکن است بخواهید لوگوی برند خود را در فهرست ناوبری وارد کنید. با استفاده از گزینه لوگو می توانید لوگوی برند خود را در سمت چپ فهرست وارد کنید.

• Add Logo : از این قسمت برای بارگذاری فایل لوگوی برند در سرور سایت خود استفاده کنید. همچنین می توانید از URL یک لوگوی از پیش بارگذاری شده به جای بارگذاری فایل جدید استفاده کنید.
• Logo Width و Logo Height : از این فیلدها برای تنظیم دقیق ظاهر لوگوی خود استفاده کنید.
• Logo Margin : از این قسمت برای ایجاد یک ظاهر شکیل و مرتب برای لوگوی خود استفاده کنید.

First Level Menu Items

در نوار فهرست آیتم هایی که در بالا دیده می شوند ( در نگاه اول)، آیتم های سطح اول فهرست نامیده می شوند. همچنین این آیتم ها به عنوان آیتم های سطح بالا نیز شناخته می شوند. در این قسمت از آموزش افزونه WP Mega Menu به بررسی تنظیمات این آیتم ها می پردازیم. 

• Item Text : با سفارشی سازی گزینه های این بخش می توانید ظاهر متن آیتم های سطح اول فهرست را تغییر دهید. گزینه های پیکربندی شامل خانواده فونت (font family)، رنگ، رنگ هاور، اندازه فونت، وزن فونت، ارتفاع خط، تبدیل متن و فاصله گذاری کلمات است.
• Item Background Color : شما می توانید رنگ پس زمینه آیتم های سطح اول منو را تغییر دهید تا ظاهر متفاوتی به فهرست خود بدهید. در این قسمت می توانید به سادگی رنگ پس زمینه و شفافیت آن را تنظیم کنید.
• Item Background Hover Color : با استفاده از این ابزار می توانید رنگ هاور آیتم های سطح اول منو را تغییر دهید.
• Item Padding و Item Margin : با استفاده از این قسمت ها می توانید پدینگ و مارجین آیتم های سطح اول فهرست را تنظیم کنید.
• Item Border : اگر می خواهید در اطراف آیتم سطح اول مرز تعیین کنید، از این قسمت استفاده نمایید. شما می توانید از انواع مرزهای ارائه شده یکی را انتخاب کرده و رنگ آن را انتخاب نمایید.
• Item Border Hover : در این قسمت می توانید کاری کنید که با قرار گرفتن موس بر روی آیتم سطح اول استایل مرزهای آن تغییر کند. می توانید عرض، نوع و رنگ مرز را تغییر دهید.
• Highlight Current Item : با فعال کردن این گزینه هنگام دیدن یک آیتم سطح بالا آن آیتم هایلایت می شود.

Sub Menu Items

تمام آیتم هایی که در زیر آیتم های سطح اول فهرست قرار می گیرند، آیتم های زیرفهرست هستند. در این قسمت می توانید ظاهر این آیتم ها را تغییر دهید.

تمام گزینه های این قسمت غیر از First Item مشابه حالت قبل است و نیازی به توضیح مجدد آن نیست.

First Item : در این افزونه آیتم های زیرمنو که در ابتدای هر زیر منو قرار گرفته اند، اولین آیتم یا First Item نامیده می شوند. شما می توانید رنگ، رنگ هاور، اندازه فونت، وزن فونت، ارتفاع خط، تبدیل متن و فاصله گذاری کلمات را برای اولین زیرمنو ها سفارشی سازی کنید.

فراموش نکنید که در انتها بر روی دکمه ذخیره تغییرات کلیک کنید.

Dropdown Menu

منوی کشویی برای مدل های چند سطحی نوار ناوبری، انتخاب بسیار محبوب طراحان و توسعه دهندگان است. در این قسمت از آموزش افزونه WP Mega Menu چندین ابزار برای سفارشی سازی ظاهر منوهای کشویی ارائه شده است.

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

Mega Menu

ساختن مگامنو قلب افزونه WP Mega Menu است. با استفاده از این ابزار می توانید نوارهای ناوبری بزرگ و جذابی را ساخته و سفارشی سازی کنید.

• Background Color : در این قسمت می توانید رنگ پس زمینه مگامنو را مشخص کنید. فهرست بزرگ شما این رنگ را به عنوان پس زمینه خواهد گرفت.
• Mega Menu Width : در این قسمت عرض مگامنو را انتخاب می نمایید. می توانید عرض مورد نظر خود را به درصد (مطابق با رزولوشن صفحه وب) یا پیکسل وارد کنید.
• Inner Padding : در این قسمت یک پدینگ داخلی برای مگامنو تعیین می کنید. از باکس های داده شده برای تعریف پدینگ بالا، پایین، چپ و راست استفاده کنید.
• Border Radius : برای گرد کردن گوشه های مگامنو از این قسمت استفاده کنید. در باکس مربوط به این گزینه میزان گردشدگی را به پیکسل وارد کنید.
• Border : در این قسمت می توانید برای مگامنو مرز تعیین کنید. عرض مرز، نوع مرزبندی و رنگ مرز را تعیین کنید.
• Border Separator : برای جدا کردن مرز آیتم های مگا منو از این قسمت استفاده کنید. ترکیبی از عرض، نوع و رنگ جدا کننده مرز را انتخاب کنید. به عنوان مثال عرض: 1px، نوع: solid، رنگ: #dddddd .
• Box Shadow : برای قرار دادن یک باکس سایه در اطراف مگامنو از این قسمت استفاده کنید. می توانید در باکس های تعیین شده سایه افقی، سایه عمودی، میزان تاری و مقدار گستردگی سایه را تنظیم کنید. همچنین می توانید برای سایه رنگ انتخاب کنید.

Widgets

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

• Heading Typography : برای تایپوگرافی سربرگ ابزارک گزینه های سفارشی سازی رنگ، رنگ هاور، اندازه فونت، وزن فونت، ارتفاع خط، تبدیل متن و فاصله گذاری کلمات را در اختیار دارید.
• Padding : در این قسمت می توانید پدینگ ابزارک را تنظیم کنید.
• Item Margin : تنظیم مارجین ابزارک ها را در این قسمت انجام می دهید.
• Border : در این قسمت برای ابزارک ها مرز تعریف می کنید.
• Item Border Hover : اگر می خواهید با قرار گرفتن موس بر روی آیتم های منو ابزارک استایل مرز آنها تغییر کند می توانید در این قسمت این کار را انجام دهید.
• Content Color : در این قسمت می توانید رنگ محتوای ابزارک را تغییر دهید.

Animation

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

Mobile Menu

شما در افزونه WP Mega Menu می توانید مگامنو را برای دستگاه های تلفن همراه ظاهر یا پنهان کنید. اگر می خواهید مگامنو در تلفن های همراه نشان داده شود باید تنظیمات چند مورد را پیکربندی کنید.

Toggle Button Settings : در دستگاه های تلفن همراه صفحه نمایش کوچکتر از دسکتاپ است بنابراین نمی توانید آیتم های مگامنو را مانند دسکتاپ نمایش دهید. بنابراین باید از یک Toggle Button استفاده کنید. با کلیک بر روی این دکمه و فعال کردن آن مگامنو نمایش داده می شود. شما در این قسمت می توانید ترازبندی، متن عنوان منو، اندازه فونت، رنگ متن، رنگ هاور متن، رنگ پس زمینه و مارجین این دکمه را سفارشی سازی کنید.

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

Social Links

برای اینکه مدیران سایت ها بتوانند لینک پروفایل شبکه های اجتماعی خود را به نوار فهرست اضافه کنند، این گزینه در افزونه WP Mega Menu اضافه شده است. همچنین می توانید انتخاب کنید لینک شبکه های اجتماعی را در یک تب جدید یا در تب فعلی باز شود.

در قسمت Social Icons می توانید کلاس آیکون و آدرس URL شبکه های اجتماعی خود را وارد کنید. برای اضافه کردن شبکه های اجتماعی بیشتر بر روی Add More کلیک کنید.

Additional CSS/JS

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

Export

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه