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

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

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

Responsive Menu یک افزونه ساده وردپرس است که به شما اجازه می دهد فهرست فعلی قالب خود را به یک فهرست واکنش گرا که قابل نمایش در صفحات موبایل و تبلت نیز هست، تبدیل کنید. در این مقاله به آموزش افزونه 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 به بررسی باقی تب ها می پردازیم.

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

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

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

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

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

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

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

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

در این تب می توانید آیتم های منو را با یک روش ساده و بصری مجدداً مرتب کرده یا آنها را غیرفعال کنید. برای مرتب سازی مجدد آیتم ها کافی است آنها را کشیده و در محل موردنظر خود رها کنید. برای فعال/غیرفعال کردن آیتم ها کافی است روی دکمه 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 کلیک کنید.

Menu

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

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

آموزش افزونه 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 به بررسی این تب می پردازیم.

Button

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

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

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

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

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

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

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

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

Technical

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

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

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

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

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

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

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

Advanced

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

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

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

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

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

دانلود افزونه
صفحه افزونه
امتیاز دادن به این نوشته:
  • میزان رضایت کاربران
  • خوانایی مطالب
  • تصاویر مرتبط

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

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

آموزش افزونه a3 Lazy Load

آموزش افزونه a3 Lazy Load برای افزایش سرعت وردپرس

در این مقاله به آموزش افزونه a3 Lazy Load می پردازیم. این افزونه ویژگی های …

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

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