خرید vps ارزان

تبلیغات
طراحی و بهینه سازیمشاهده


آخرین ارسال های تالار مشاهده انجمن
  • کوپن 2 پاسخ 14 بازدید
  • درخواست قالب Zephyr 5.1 3 پاسخ 21 بازدید
  • ثابت کردن اسلایدر 0 پاسخ 9 بازدید
  • مبتلایان به بواسیر این غذاها را نخورند 4 پاسخ 140 بازدید
  • آموزش تصویری جامع نصب و تنظیمات اسکریپت NextPost 218 پاسخ 4787 بازدید
  • Help - Grameasy version 2 0 پاسخ 26 بازدید
  • درخواست افزونه user pro 1 پاسخ 27 بازدید
  • فروش فوری و ارزان سایت وبلاگدهی با دامین رند Blogs.city 0 پاسخ 196 بازدید
  • ايميل ايزي گرام 0 پاسخ 32 بازدید
  • تکنولوژی شارژ فوق سریع هواوی 0 پاسخ 7 بازدید
  • هاست

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

    مقالات,آموزش,ترفند , وردپرس
    آموزش ساخت منوهای ریسپانسیو در وردپرس Burger MenuReviewed by M J on Nov 27Rating: 4.0آموزش ساخت منوهای ریسپانسیو در وردپرس Burger Menuفهرست‌های واکنش‌گرا در وردپرس یکی از مواردی هستند که گاهی با وجود ریسپانسیو بودن وب‌سایت ممکن است برای کاربران جذاب و کاربردی نباشند و کاربران در هنگام استفاده از آن با مشکلاتی روبرو باشند. در این مقاله با آموزش ایجاد و شخصی‌سازی منوی سایت به صورتی کاملا حرفه‌ای و زیبا در خدمت شما کاربران عزیز بیست اسکریپت هستیم.

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

     

    آموزش ساخت فهرست‌های واکنش‌گرا در وردپرس Burger Menu

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

     

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

     

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

     

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

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

     

     

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

     

     

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

     

     

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

     

     

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

     

     

    سپس کدهای زیر را نیز در ادامه‌ی آن اضافه کنید:

     

     

    این کدها به کوئری و کلاس toggle-nav قالب شما قابلیت باز شدن به شکلی زیبا با کلیک کاربران را می‌دهد و آن را از حالت ساده خارج می‌کند.
    با استفاده از کدهای درج شده در این مقاله فهرست‌های واکنش‌گرا در وردپرس را از حالت ساده به حالت حرفه‌ای و Animated Burger Menu تبدیل کنید. البته در نظر داشته باشید حتی اگر قالب شما کاملا واکنش‌گرا باشد، نمایش منو به این سبک بیشتر به دسترسی کاربران به منوها کمک می‌کند اما استفاده به صورت معمولی ممکن است مشکلاتی داشته باشد و باعث خستگی کاربران شود.

     

    پیشنهاد: همچنین میتوانید آموزش های زیر را مطالعه کنید:


    The product includes software licensed under GNU General Public License (GPL) or GNU

    دانلود
    .

    خرید هاست وردپرس با SSL رایگان



    مطلب مفیدی بود ؟
    نویسنده : admin 0 مقالات,آموزش,ترفند , وردپرس

    لینک کوتاه مطلب : https://www.20script.ir/?p=29367

    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    2,661حذف و بهینه سازی دیتابیس وردپرس با افزونه WP-Sweep تاریخ : 2017/04/30
    1,931افزونه شبیه سازی پنل وردپرس به محیط دسکتاپ ویندوز WP OS Desktop Backend تاریخ : 2017/12/3
    2,304افزونه نمایش نوار اعلانات در پنل وردپرس Smart Notification تاریخ : 2018/09/1
    1,958غیر فعال کردن خوراک RSS وردپرس تاریخ : 2016/03/30
    3,303آموزش افزودن یک زمینه دلخواه به همه پست ها در وردپرس تاریخ : 2015/12/22
    8,618دانلود قالب رستوران و فست فود Cooker برای وردپرس تاریخ : 2016/04/10
    4,180ساخت آسان نمودارهای متحرک در وردپرس تاریخ : 2016/10/23
    3,793ویرایش صفحه ی ورود و خروج در وردپرس تاریخ : 2014/07/31
    3,074دانلود پوسته پزشکی MedicalDoctor برای وردپرس تاریخ : 2016/08/5
    16,018قالب سایت تفریحی ایران پرتال برای وردپرس تاریخ : 2014/04/26
    2,545ارسال ایمیل به تمام کاربران سایت در وردپرس تاریخ : 2017/07/14
    1,715افزونه مخفی کردن محتوای وردپرس Hide My Site تاریخ : 2017/06/14
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب