۰۹۳۶-۲۵۱-۰۱۶۴ (تلگرام)
حساب کاربری
صفحه اصلی / آموزش / آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه
همکاری با پروان وب
31 فروردين 1397
3 1,178 0

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

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

در این مقاله ما ساخت منوی واکنش گرا در وردپرس را به شما نشان خواهیم داد که چگونه می توانید ساخت منوی ریسپانسیو بدون افزونه را ایجاد کنید که این آموزش ایجاد منوی واکنش گرا با css می باشد. به لطف انعطاف پذیری ارائه شده توسط وردپرس، راه های بی شماری برای انجام این کار وجود دارد. چون ما قصد داریم این کار را در زیر 8 کیلوبایت انجام دهیم که این بدان معناست که این یک منوی ریسپانسیو در وردپرس فوق العاده کارآمد خواهد بود. با یک تیر دو نشان می خواهیم بزنیم، ما یک منو ایجاد میکنیم تا همه امکانات را پوشش دهد. قبل از شروع، پیشنهاد می کنیم که برخی دانش در زمینه توسعه ی اولیه را داشته باشید. ما فقط میخواهیم در حد آشنایی مهارت داشته باشید ، پس نگران نباشید. آشنایی شما در زمینه HTML، CSS، jQuery و وردپرس ایده ال می باشد. این آموزش برای مبتدیان در حد متوسط است ، این آموزش ایجاد منوی واکنش گرا با css  است چون شامل تغییرات فایل های قالب وردپرس می باشد. شما به فایل های قالب وردپرس که در زیر آمده است باید دسترسی داشته باشید:

functions.php
header.php
footer.php
Style.css

قبل از انجام هر گونه تغییر، لطفا یک بک آپ از سایت خود بگیرید، که برای اینکار میتوانید مقاله دانلود افزونه وردپرس بک آپ گیری خودکار WP DB Backup را مطالعه کنید. می توانید تغییرات را در محیط محلی آزمایش کنید، با این کار همیشه راهی برای بازگشت به فایل‌های اصلی خود دارید. در این مقاله ما قصد داریم از bigSlide.js، یک افزونه جی کوئری کوچک برای ایجاد پانل های اسلاید خارج از صفحه استفاده کنیم. در وب سایت plugin’s، آن را به عنوان افزونه جی کوئری خیلی خیلی کوچک(فشرده یک کیلوبایت) برای ایجاد پنل ناوبری اسلاید خارج از صفحه توصیف کرده است. این خط با هدف ناوبری ضعیف و متوسط ما هماهنگ است.

ساخت منوی واکنش گرا در وردپرس

responsive - آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

در این آموزش ما ساخت منوی ریسپانسیو بدون افزونه با زبانی بسیار ساده برای شما بیان خواهیم کرد. 1. آخرین نسخه فشرده bigSlide.js را دانلود کنید. فایل را در پوشه theme /js خود کپی کنید. 2. توابع functions.php در ویرایشگر کد باز کنید و wp_enqueue_script را جستجو کنید. احتمالا چندین نمونه را مشاهده خواهید کرد، زیرا wp_enqueue_script روش استاندارد اضافه کردن اسکریپت به وردپرس است. 3. درست بعد از آخرین نمونه از wp_enqueue_script ، قطعه زیر را اضافه کنید و ذخیره کنید.

wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );

فایل header.php را باز کنید و کلاس push رو در هر جایی که مدنظر دارید بعد از تگ body (بدنه) قرار بدهید.

 <body <?php body_class(); ?>><div id="page" class="hfeed site">

بنابراین شما در آخر برا خاتمه دادن کد زیر را اضافه می کنید:

 <div id="page" class="hfeed site push">

۵. در حالی که هنوز داخل فایل header.php هستید site-navigation رو سرچ کنید.

در اکثر قالب ها به همین شکل خواهد بود اما اگر نبود به این شکل قرار بدهید کد زیر را:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>

6. اضافه کنید تگ لینک زیر رو قبل از بسته شدن تگ </nav> مانند کد زیر ضافه کنید.

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
<a href="#responsive-menu" class="menu-link">☰</a>
</nav>

در اینجا ما یک آیکن منوی موبایل ایجاد میکنیم.

responsive navigation menu hamburger - آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

7. فایل footer.php را باز می کنید و <?php wp_footer(); ?>را جستجو  می کنید درست بعد از این خط، قطعه زیر را اضافه کنید:

<div id="responsive-menu" class="panel mobile-menu"><?php wp_nav_menu( array('theme_location' => 'primary',) );?></div>
<script> jQuery('.menu-link').bigSlide({
menu: '.mobile-menu',
speed: 300,
side:"right",
easyClose:true});</script>

در حقیقت، ما یک منوی پنهانی در پایین صفحه ایجاد می کنیم. 8. در آخر، style.css را باز کنید و بعد از آخرین خط، کد زیر را اضافه کنید:

.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}
.push{position:relative;}
.menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;}
.mobile-menu a{display:block;color:#fff;padding:10px 15px;}
.mobile-menu a:hover{background-color:#555;}
.mobile-menu li{border-bottom:1px #444 solid;}
@media only screen and (max-width:900px) {

#primary-menu{display:none;}
.mobile-menu #primary-menu{display:block;}
.menu-link{display:inline-block;}
}

ما از یک طرح رنگی تیره استفاده کرده ایم. responsive navigation menu mobile slide - آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه این رویکرد در تقریبا تمام قالب های وردپرس استاندارد کار خواهد کرد. ممکن است مجبور شوید چند تنظیم انجام دهید.در نهایت، اصول پایدار باقی می مانند. منطق این است که در اندازه صفحه نمایش 900 پیکسل یا کمتر، شما به طور پیش فرض اسکرول اصلی را پنهان کرده و نشانگر آیکن منوی موبایل را به جای آن نشان می دهید. با کلیک کردن یا ضربه زدن بر روی نماد منو موبایل، منوی ما در پایین صفحه تکرار شده به عنوان یک برنامه مانند پانل جانبی باز می شود. امیدوارم در این مقاله توانسته باشید آموزش منوی ریسپانسیو در وردپرس را بخوبی یاد گرفته باشید.

به این محتوا چه امتیازی می دی ؟
وحید رنجبر مشترک

وحید رنجبر هستم مهندس برنامه نویسی و یکی از طرفداران پروان وب حدود 5 سال است که در زمینه سایت وردپرس مشغول به کار هستم.

ثبت نظر جدید

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

لیست نظرات

  1. سعید صادقی
    27 ارديبهشت 1404

    سلام واقعا محتوای سایتتون عالی ممنون

    پاسخ
    • صالح طالبی
      27 ارديبهشت 1404

      ممنونم از لطفتون ، موفق باشید

      پاسخ
  2. میثم شمسی پور
    27 ارديبهشت 1404

    درود
    دوست عزیز این کد با rtl مشکل داره و وقتی body رو روی direction:ltr قرار میدم کار میکنه
    مشکل کار چیه؟

    پاسخ
🔥داغ ترین مطالب
🔻 جدید ترین مطالب
پر فروش ترین محصولات
اشتراک گذاری :

تبلیغات متنی

به این مطالب نیز شاید علاقه مند باشید ...

مطالب مشابه

نشانه‌گذاری اسکیما چیست و چه تاثیری در نتایج جستجو دارد؟
0 13

نشانه‌گذاری اسکیما چیست و چه تاثیری در نتایج جستجو دارد؟

نشانه‌گذاری اسکیما (Schema Markup) نوعی داده ساختاریافته است که به زبان ساده به موتورهای جستجو کمک می‌کند تا بهتر متوجه شوند محتوای هر صفحه وب درباره چیست. این داده‌ها مستقیماً به کدهای HTML سایت اضافه می‌شوند و اطلاعات دقیق‌تری درباره عناصر مختلف صفحه ارائه می‌دهند؛ مانند معرفی افراد، سازمان‌ها، محصولات، رویدادها و حتی فیلم‌ها. در […]

سیدعلی سعادت
۲۵ ارديبهشت ۱۴۰۴ . ۲۲:۵۹
چگونه بدون از دست دادن اطلاعات، نسخه ووکامرس را به نسخه قبلی برگردانیم؟
0 22

چگونه بدون از دست دادن اطلاعات، نسخه ووکامرس را به نسخه قبلی برگردانیم؟

آیا به دنبال روشی ساده برای تغییر نسخه ووکامرس بدون از بین رفتن داده‌ها هستید؟ اگر پس از به‌روزرسانی ووکامرس با مشکلاتی مواجه شده‌اید، دانگرید کردن به نسخه قبلی می‌تواند فروشگاه آنلاین شما را به وضعیت پایدار برگرداند. در این بخش از آموزش کامل بازگردانی وردپرس به نسخه قبلی، سه روش کاربردی برای بازگشت به […]

سیدعلی سعادت
۲۵ ارديبهشت ۱۴۰۴ . ۰۰:۱۳
۸ تا از بهترین افزونه‌های لیست علاقه‌مندی ووکامرس برای فروشگاه‌های وردپرسی
0 17

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

اگر فروشگاه اینترنتی شما بر پایه ووکامرس ساخته شده، احتمالاً به دنبال راهی هستید تا تجربه خرید کاربران را جذاب‌تر کنید و بازگشت آن‌ها به سایت را افزایش دهید. یکی از ساده‌ترین و مؤثرترین روش‌ها برای این کار، استفاده از افزونه لیست علاقه‌مندی است. با استفاده از افزونه علاقه مندی ووکامرس برای سایت های وردپرسی، […]

سیدعلی سعادت
۲۴ ارديبهشت ۱۴۰۴ . ۲۱:۲۴
نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور
0 15

نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور

در این مقاله، قصد داریم با رویکردی پروژه‌محور، نحوه طراحی قالب وردپرس با استفاده از React را آموزش دهیم. ادغام قدرت رابط کاربری React با سیستم مدیریت محتوای وردپرس، امکانی فراهم می‌کند تا قالب‌هایی سریع، مدرن و تعاملی طراحی کنید. این راهنما به شما کمک می‌کند تا با استفاده از ابزارهای مدرن، یک قالب وردپرس […]

سیدعلی سعادت
۲۳ ارديبهشت ۱۴۰۴ . ۲۱:۰۲
مشاهده وبلاگ
عضویت در خبرنامه

خطا: فرم تماس پیدا نشد.

محصول مورد نظر با موفقیت به سبد خرید اضافه شد.