افزونه های وردپرس

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

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

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

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

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

افزونه ای که در این آموزش برای ایجاد منوهای واکنش گرا در وردپرس معرفی می کنم، با عنوان Responsive Menu در مخزن وردپرس به ثبت رسیده است.

این افزونه که دارای دو نسخه تجاری و رایگان می باشد، تا کنون با بیش از ۱۰۰.۰۰۰ نصب فعال توانسته است امتیاز ۴.۶ را از کاربران خود به دست بیاورد.

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

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

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

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

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

این مطلب را از دست ندهید :
نمایش لیست نویسندگان در وردپرس با افزونه AuthorAvatars

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

در هر قسمت از آپشن ها اگر Pro را دیدید آن آپشن برای نسخه تجاری بوده و اگر Semi pro را مشاهده کردید آن بخش رایگان می باشد.

تب Initial Setup

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

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

Menu to Use: در این گزینه منوی دلخواه خود را برای نمایش در بخش فهرست ریسپانسیو از بین فهرست های ساخت شده انتخاب کنید.

Original Menu to Hide: در این گزینه می توانید منوی اصلی خود را با کمک کدهای CSS سفارشی سازی کنید.

تنظیمات افزونه بخش container
تنظیمات بخش container

تب Container

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

تنظیمات منوها
تنظیمات مربوط به منوها

تب Menu

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

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

تب Sub-Menus

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

این مطلب را از دست ندهید :
افزودن امکانات جدید به گوتنبرگ با افزونه Advanced Gutenberg
تنظیمات دکمه ها
تنظیمات افزونه Responsive Menu

تب Button

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

تنظیمات افزونه Responsive Menu
تنظیمات Technical

تب Technical

در این تب می توانید تنظیماتی مانند تغییر رنگ مدیریت افزونه به رنگ تیره یا روشن، تغییر سرعت فایل های جاوااسکریپت و بازگردانی به تنظیمات اولیه را انجام دهید.

تنظیمات Responsive Menu
تنظیمات پیشرفته در Responsive Menu

تب Advanced

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

پیش نمایش افزونه Responsive Menu
فهرست های ریسپانسیو در وردپرس

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

عاطفه نوربخش

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

پاسخی بگذارید

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

۲ دیدگاه

  1. واقعا واسه جامعه وردپرس کار ها متاسفم که شما به مردم آموزش میدید
    یا زبانتون خوب نیست که از سایت های خارجی کپی کنید ، یا اصلا هیچی بلد نیستید
    Original Menu to Hide یعنی کلاس یا آیدی منو اصلی رو وارد کنید تا عرض از مقدار تعریف شده کم تر شد مخفیش کنه

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

تخفیف های جشنواره نوروز 1399 را از دست ندهید!شرکت در جشنواره نوروزی
+
بستن