ساخت فهرست های رسپانسیو در وردپرس با Responsive Menu

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

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

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

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

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

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

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

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

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

پیشنهاد مطالعه: ۵مورد از بهترین افزونه های SMTP وردپرس

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

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

فهرست های رسپانسیو در وردپرس با Responsive Menu

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

افزودن خاصیت کشویی به یک فهرست

برای این که اولین منوی خودتان را رسپانسیو و بصورت کشویی بسازید لازم است تنظیمات این بخش را بخوبی انجام دهید.

initial setup (فهرست های رسپانسیو در وردپرس)

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

در فیلد دوم هم منوی مورد نظرتان را که می‌خواهید بصورت کشویی شود انتخاب کنید. در فیلد سوم هم باید id و یا class منویی که می‌خواهید مخفی شود قرار دهید (باید کمی با کدهای css آشنایی داشته باشید).

توضیحات بیشتر

اگر تنظیمات این بخش را متوجه نشده‌اید به توضیحات توجه کنید:

کاربری با عرض صفحه نمایش ۴۰۰ پیکسل وارد سایت شما می‌شود پس منوی مورد نظرتان طبق این افزونه باید مخفی و کشویی شود. حال باید منویی را که از قبل در جای مشخص خودش بوده است پنهان کنیم و این کار را با دادن id و یا class منوی اصلی به فیلد سوم (CSS of Menu to Hide) تصویر بالا انجام می‌دهیم.

بعد از انجام تنظیمات بالا می‌توانید در خروجی، منوی کشویی که ایجاد کردید را مشاهده کنید (قبل از مشاهده عرض صفحه نمایش خودتان را کوچکتر از ۸۰۰ پیکسل کنید تا منوی کشویی فعال شود).

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

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

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

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

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

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

تنظیمات افزونه

همانطور که گفتیم این افزونه تنظیمات زیادی در بخش رایگان خود ندارد و با همین تنظیمات هم می‌توانیم استفاده‌های خوبی کنیم و فهرست های رسپانسیو در وردپرس ایجاد کنیم.

Pro (فهرست های رسپانسیو در وردپرس)

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

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

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

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

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

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

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

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

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

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

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