آموزش افزونه Responsive Menu و اضافه کردن منوهای رسپانسیو به وردپرس

آموزش افزونه Responsive Menu

Responsive Menu یک افزونه ساده وردپرس است که به شما اجازه می دهد فهرست فعلی قالب خود را به یک فهرست واکنش گرا که قابل نمایش در صفحات موبایل و تبلت نیز هست، تبدیل کنید. این افزونه با داشتن بیش از 150 گزینه قابل تنظیم، ترکیبی از 22،500 گزینه را در اختیار شما قرار می دهد. در این مقاله به آموزش افزونه Responsive Menu می پردازیم و با تنظیمات آن آشنا می شویم.

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

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

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

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

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

در این آموزش افزونه Responsive Menu را مورد بررسی قرار داده و نحوه استفاده از آن و تنظیمات و سفارشی سازی های پیشرفته این افزونه را توضیح خواهیم داد.

آموزش افزونه Responsive Menu و نحوه اضافه کردن منوهای رسپانسیو به وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس منویی با نام Responsive Menu اضافه خواهد شد.

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

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

آموزش افزونه Responsive Menu

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

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

در پیشخوان وردپرس روی Responsive Menu کلیک کنید. صفحه افزونه به شکل زیر برای شما باز خواهد شد.

آموزش افزونه Responsive Menu

این صفحه حاوی چندین تب است. تب مورد استفاده در این قسمت Initial Setup  است. ابتدا در مورد کاربرد این تب توضیح داده سپس در ادامه آموزش به بررسی باقی تب های موجود در افزونه Responsive Menu می پردازیم.

راه اندازی اولیه در افزونه Responsive Menu

در تب Initial Setup گزینه Menu to Use را پیدا کرده و در منوی کشویی مربوطه، فهرست موردنظر خود را انتخاب کنید. فهرست های نشان داده شده در این قسمت همان فهرست هایی است که در وردپرس شما موجود است.

آموزش افزونه Responsive Menu

اگر بر روی دکمه Update Options کلیک کنید، فهرست موردنظر شما توسط افزونه Responsive Menu مورد استفاده قرار می گیرد.

گزینه دیگر در این تب، Breakpoint است. در این قسمت باید عرضی را مشخص کنید که اگر صفحه نمایش کاربر از آن کوچکتر باشد، فهرست رسپانسیو مشخص شده در این تب برای او نمایش داده شده و منوی اصلی مخفی می شود. اگر این مقدار را به عنوان مثال روی 800 پیکسل تنظیم کنید، دیگر در صفحه دسکتاپ فهرست Responsive Menu را نخواهید دید اما با کوچک کردن عرض صفحه نمایش، فهرست ظاهر می شود.

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

آموزش تب Container در افزونه Responsive Menu

روی تب Container در بالای صفحه کلیک کنید.

در بخش Ordering این تب می توانید آیتم های منو را با یک روش ساده و بصری مجدداً مرتب کرده یا آنها را غیرفعال کنید. برای مرتب سازی مجدد آیتم ها کافی است آنها را کشیده و در محل موردنظر خود رها کنید. برای فعال/غیرفعال کردن آیتم ها کافی است روی دکمه ON/OFF کلیک کنید.

آموزش افزونه Responsive Menu

در قسمت Sizing می توانید عرض Container نشان داده شده در صفحه نمایش را زمانی که بر روی دکمه منو کلیک می شود، مشخص کنید. همچنین می توانید ماکزیمم و مینیمم مقدار عرض را نیز تعیین کنید.

آموزش افزونه Responsive Menu

در بخش Background می توانید یک تصویر برای پس زمینه Container انتخاب کنید. همچنین می توانید رنگ Container و Container داخلی را نیز سفارشی سازی کنید.

آموزش افزونه Responsive Menu

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

آموزش افزونه Responsive Menu

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

آموزش افزونه Responsive Menu

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

آموزش افزونه Responsive Menu

در بخش Additional Content می توانید هر نوع HTML سفارشی، شورت کد، متن یا هر مورد دلخواه دیگری را به دیگر آیتم های Container ضمیمه کنید و رنگ آن را نیز سفارشی سازی نمایید.

آموزش افزونه Responsive Menu

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

در افزونه Responsive Menu می توانید به فهرست خود انیمیشن اضافه کرده و آن را جذاب تر و تعاملی تر کنید. در قسمت Animation می توانید نوع انیمیشن مورد نظر خود را مشخص کرده و جهت ظاهر شدن آن را نیز تعیین کنید.

آموزش افزونه Responsive Menu

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

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

آموزش افزونه Responsive Menu

در قسمت Technical می توانید تنظیمات تکنیکی افزونه را انجام دهید.

آموزش افزونه Responsive Menu

Close on Page Clicks: با فعال کردن این گزینه اگر کاربر بر روی صفحه کلیک کند Container ناپدید می شود.

Close on Link Clicks: اگر می خواهید با کلیک بر روی هریک از آیتم های لینک منو، Container ناپدید شود، این گزینه را فعال کنید.

پس از انجام تنظیمات لازم روی دکمه Update Options کلیک کنید.

تنظیمات منو

در این قسمت از آموزش افزونه Responsive Menu به بررسی تب Menu در صفحه افزونه می پردازیم.

اولین قسمت این تب مربوط به استفاده از آیکون در کنار هریک از آیتم های منو است. این تب مربوط به نسخه Pro این افزونه می باشد. اما شما می توانید با افزونه Menu Icons در کنار آیتم های فهرست آیکون نمایش دهید.

آموزش افزونه Responsive Menu

در قسمت Depth می توانید عمق منو و تعداد سطوح آن را مشخص کنید.

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

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

آموزش افزونه Responsive Menu

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

در قسمت Item Borders می توانید عرض، رنگ، رنگ هاور مرز آیتم های منو را مشخص کرده و همچنین رنگ مرز آیتمی که روی آن قرار دارید و رنگ هاور آن را تعیین کنید.

آموزش افزونه Responsive Menu

در قسمت های Item Text و Item Background می توانید رنگ متن هریک از آیتم های منو و رنگ پس زمینه آن همچنین رنگ هاور، رنگ آیتم فعلی، رنگ هاور آیتم فعلی را در هر دو مشخص کنید.

آموزش افزونه Responsive Menu

در قسمت های Trigger Icon، Trigger Sizing، Trigger Colours، Trigger Background، Trigger Border می توانید سفارشی سازی تریگر را انجام دهید.

اگر برای آیتم های منو توضیحات خاصی دارید می توانید بخش Descriptions را فعال کنید.

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

آموزش افزونه Responsive Menu

تب Sub Menus نیز مربوط به تنظیمات زیرمنو ها است و نحوه انجام تنظیمات آن نیز مانند تب Menu است.

تب Button مربوط به سفارشی سازی دکمه نشان دادن منو بر روی صفحه نمایش است که در ادامه آموزش افزونه Responsive Menu به بررسی این تب می پردازیم.

نمایش دکمه فهرست

افزونه Responsive Menu این امکان را به شما می دهد که برای دکمه روی صفحه انیمیشن قرار دهید. این کار را می توانید در قسمت Animation انجام دهید. البته در نسخه رایگان این افزونه تنها یک انیمیشن موجود است  و برای دسترسی به باقی انیمیشن ها باید نسخه Pro آن را خریداری کنید.

آموزش افزونه Responsive Menu

اگر منو را در سمت راست صفحه قرار داده باشید، دکمه نشان دادن منو در زیر آن پنهان می شود. برای رفع این مشکل دکمه Push Button with Menu را فعال کنید.

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

آموزش افزونه Responsive Menu

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

در قسمت Title می توانید یک عنوان برای دکمه انتخاب کرده و تنظیمات آن را انجام دهید. یا به جای عنوان از یک تصویر در قسمت Image استفاده کنید.

تب های Technical و Advanced مربوط به سفارشی سازی و تنظیمات پیشرفته افزونه است. در ادامه آموزش افزونه Responsive Menu توضیح مختصری در مورد این تب ها خواهیم داد.

آموزش تنظیمات تکنیکی افزونه Responsive Menu

در قسمت Admin Theme می توانید رنگ پیشخوان افزونه را از حالت تیره به روشن تغییر دهید.

آموزش افزونه Responsive Menu

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

آموزش افزونه Responsive Menu

در قسمت های Import و export می توانید تنظیمات اعمال شده را از جایی دیگر درون ریزی کرده یا همین تنظیمات را برون بری کنید و در سایتی دیگر یا در صورت لزوم در همین سایت استفاده کنید.

آموزش افزونه Responsive Menu

در قسمت Rebuild با کلیک بر روی دکمه های Reset Options و Reset Database می توانید به ترتیب تنظیمات اعمال شده را به حالت پیش فرض برگردانده و پایگاه داده را مجدداً بسازید.

پیشرفته

در این بخش از آموزش افزونه Responsive Menu به بررسی تب Advanced می پردازیم. بیشتر تنظیمات تب Advanced مربوط به نسخه Pro این افزونه است. در این تب تنها می توانید سرعت انیمیشن های افزونه را سفارشی سازی کرده و قابلیت استفاده از شورت کد را فعال کنید. در این صورت با اعمال شورت کد [responsive_menu] در هر جایی از سایت می توانید منوی خود را قرار دهید.

آموزش افزونه Responsive Menu

فراموش نکنید که در پایان تمام تنظیمات بر روی دکمه Update Options کلیک کنید.

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

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

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

دانلود افزونه Responsive Menu
صفحه افزونه Responsive Menu

درباره ی مینا قدسی

مطلب پیشنهادی

WP Job Manager

WP Job Manager افزونه راه اندازی سایت کاریابی در وردپرس

WP Job Manager  یک افزونه ایجاد سیستم فرصت های شغلی و ساخت سایت کاریابی برای …

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *