افزونه 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 را پیدا کرده و در منوی کشویی مربوطه، فهرست موردنظر خود را انتخاب کنید. فهرست های نشان داده شده در این قسمت همان فهرست هایی است که در وردپرس شما موجود است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تنظیمات منو

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پیشرفته

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