آموزش ایجاد Burger Menu در سایت های وردپرسی

خانه » آموزش وردپرس » آموزش ایجاد Burger Menu در سایت های وردپرسی

آموزش ایجاد Burger Menu در سایت های وردپرسی

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

آموزش ایجاد Burger Menu در سایت های وردپرسی

آموزش ایجاد Burger Menu در سایت های وردپرسی

فهرست‌های واکنش‌گرا در وردپرس

به تازگی در قالب‌های وردپرسی نوعی منو بکار برده می شود که با کلیک کاربر به صورت تمام صفحه بر روی صفحه گوشی نمایش داده می‌شوند و با کلیک دوباره‌ی کاربر جمع می‌شوند و به جای اشغال کردن فضای زیادی از سایت تنها یک آیکون کوچک در سایت قرار می‌گیرد که دسترسی کاربران به منو نیز بدون ایجاد مزاحمت برای آنها صورت می‌پذیرد. این منو به اصطلاح  Burger Menu یا منوی همبرگری گفته می‌شود.

برای ایجاد  Burger Menu شما به دو مورد در سایت وردپرسی خود نیاز دارید:

  1. داشتن یک سایت با پشتیبانی از قابلیت فهرست‌های واکنش‌گرا در وردپرس
  2. بکار بردن قالب اصلی یا قالب فرزند برای شخصی‌سازی منوها

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

برای شروع شخصی‌سازی اول کلاس CSS را برای اعمال شخصی‌سازی در کدهای خود پیدا کنید؛ برای مثال قالبی که ما می خواهیم آن را شخصی‌سازی نماییم کلاسی با نام menu.main دارد که باید کدهای آن را عوض کنیم. در حال حاضر قالب ما به صورت کاملا معمولی منو را در نمایش عموم قرار می‌دهد:

نمایش منوی فعلی در نسخه دسکتاپ قالب

آموزش ایجاد Burger Menu در سایت های وردپرسی

در اینجا می خواهیم شروع شخصی‌سازی فهرست‌های واکنش‌گرا در وردپرس را انجام دهیم و برای شروع کار اول باید آیکون مربوط به نمایش منو به این سبک را در سایت وردپرسی خود اضافه کنید. تنها باید کد زیر را به خط بعد از منوی سایت وردپرسی موجود در فایل سربرگ یا header.php بیافزایید تا آیکون در سایت شما نشان داده شود:

الان در صورتی که سایت خود را مجددا بارگذاری کنید، آیکون در کنار منوی سایت شما نشان داده می‌شود.

پنهان کردن منو در سایزهای بزرگ و نسخه دسکتاپ

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

با این کد نمایش فهرست‌های واکنش‌گرا در وردپرس به این سبک برای همه ی دستگاه‌های بازدیدکننده از سایت غیرفعال می‌شود. اکنون با افزودن قطعه کد دیگری مشخص می‌کنیم این منو برای دستگاه‌های تا سایز حداکثر ۴۸۰px در وردپرس نشان داده شود:

در صورتی که نیاز به نمایش آن در سایز‌های بزرگتر از ۴۸۰px دارید، تنها باید عدد مربوط به آن را عوض کنید. پس از آن باید کد دیگری را برای مشخص کردن رنگ و موقعیت نمایش منو در وردپرس بیافزایید:

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

ناشر محصول

فاطمه ساجدی

فاطمه ساجدی

فاطمه ساجدی هستم. کارشناسی ارشد ای تی. کار تولید محتوا و طراحی سایت رو انجام میدم.

مطالب جدید

جلوگیری از ارسال نظرات اسپم در وردپرس

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

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

انتقال مستقیم به صفحه تسویه حساب در ووکامرس

انتقال مستقیم به صفحه تسویه حساب در ووکامرس

کاهش رتبه الکسا در وردپرس

کاهش رتبه الکسا در وردپرس

ساخت جدول قیمت گذاری در وردپرس

ساخت جدول قیمت گذاری در وردپرس

افزونه meta slider

افزونه meta slider

هنوز نظری ثبت نشده! شما نظری ندارید؟!