آموزش ایجاد منوی ریسپانسیو در وردپرس
بارگذاری...آیا قصد دارید یک منوی ریسپانسیو برای سایت خود طراحی کنید؟ همانطور که می دانید امروزه اکثر کاربران از طریق موبایل وارد وب سایت ها می شوند، بنابراین ضروریست که منوی سایت شما در موبایل به صورت کاملاً ریسپانسیو طراحی شده باشد تا کاربران بتوانند راحت تر در سایت شما پیمایش کنند. به همین منظور ما در این مطلب قصد داریم آموزش ایجاد منوی ریسپانسیو در وردپرس را در اختیار شما عزیزان قرار دهیم. با ما همراه باشید.
آموزش ساخت منو موبایلی در وردپرس
چگونه منوی ریسپانسیو ایجاد کنیم ؟ روش های مختلفی وجود دارد که شما می توانید به کمک آن منوی سایت خود را ریسپانسیو کنید که در ادامه مطلب سعی می کنیم ساده ترین و بهترین آنها را به شما آموزش دهیم. پس همراه ما باشید تا شما را با آموزش ساخت منوی ریسپانسیو در وردپرس آشنا کنیم.
1- نحوه ایجاد منوی ریسپانسیو در وردپرس با استفاده از افزونه
یکی از ساده ترین روش های ساخت منو در موبایل، استفاده از یک افزونه می باشد.
افزونه های مختلفی در این خصوص ارائه شده که ما قصد داریم افزونه Responsive Menu را به شما معرفی کنیم. این افزونه ریسپانسیو با قابلیت تنظیم بسیار بالا یکی از افزونه های پرطرفدار وردپرس می باشد که بیش از 150 گزینه قابل تنظیم، ترکیبی از 22500 گزینه را ارائه می دهد! هیچ تجربه یا دانش کدنویسی با رابط کاربری آسان مورد نیاز نیست، شما می توانید آن را دقیقاً همانطور که می خواهید با کمترین پیچیدگی طراحی کنید.
بیشتر بخوانید: فشرده سازی تصاویر Compress JPEG and PNG
در اولین قدم باید این افزونه را در سایت خود نصب کنید. برای انجام اینکار، در ابتدا وارد پیشخوان وردپرس خود شوید و سپس از بخش “افزونه ها” روی گزینه “افزودن” کلیک نمائید. سپس نام افزونه را در باکس بالای صفحه وارد و سرچ نمائید. پس از اینکه افزونه برای شما نمایان شد کافیست آن را نصب و فعال کنید. همچنین اگر با طریق نصب افزونه آشنایی ندارید، می توانید مطلب “چگونه در وردپرس افزونه اضافه کنیم؟ راه های نصب پلاگین در وردپرس” را مشاهده کنید.
پس از فعال سازی، این افزونه یک آیتم منوی جدید با عنوان “منوی پاسخگو” به نوار مدیریت وردپرس شما اضافه می کند. با کلیک بر روی آن به صفحه تنظیمات افزونه وارد می شوید.
در ابتدا باید عرض صفحه را وارد کنید که در آن نقطه افزونه شروع به نمایش منوی ریسپانسیو می کند. به صورت پیش فرض این بخش روی عدد 800 پیکسل تنظیم شده که برای اکثر سایت ها به خوبی کار می کند.
پس از آن، باید منوی مورد نظر خود را برای منوی ریسپانسیو خود انتخاب کنید. اگر هنوز منوی ایجاد نکرده‌اید، باید از بخش “نایش” روی گزینه “فهرست ها” کلیک کنید و سپس یک منوی جدید بسازید. همچنین اگر با طریقه ساخت منو آشنایی ندارید، نگران نباشید. زیرا ما قبلاً در این خصوص آموزشی برای شما منتشر کرده ایم که آن را میتوانید از طریق لینک “چگونه در وردپرس فهرست بسازیم؟” مشاهده نمائید.
آخرین گزینه روی صفحه ارائه یک کلاس CSS برای منوی غیر ریسپانسیو فعلی شما است. این به افزونه اجازه می دهد تا منوی غیر ریسپانسیو شما را در صفحه نمایش های کوچکتر مخفی کند. در نهایت بعد از اعمال تعییرات فراموش نکنید که روی دکمه “به روز رسانی گزینه ها” کلیک کنید. حال می توانید وب سایت خود را مشاهده کنید، سپس خواهید دید که منوی شما در موبایل به شکلی ریسپانسیو نمایش داده می شود.
بیشتر بخوانید: چگونه در وردپرس پروفایل نویسنده را ایجاد کنیم؟
2- آموزش ایجاد منوی واکنشگرا در وردپرس با کدنویسی
یکی دیگر از روش های نحوه ساخت منو موبایلی در وردپرس ، استفاده از کدنویسی می باشد. در این روش شما باید کد سفارشی را به فایل های وردپرس خود اضافه کنید.
نکته: این روش به مبتدیان توصیه نمی شود. همچنین قبل از هرگونه اقدامی حتماً یک نسخه پشتیبان از اطلاعات وب سایت خود تهیه کنید تا در صورت بروز هر گونه مشکل بتوانید سایتتان را به حالت اولیه بازگردانید.
در اولین قدم، یک ویرایشگر متن مانند نوت پد را باز کنید و سپس کدهای زیر را درون آن قرار دهید:
( function() {var nav = document.getElementById( 'site-navigation' ), button, menu;if ( ! nav ) {return;}button = nav.getElementsByTagName( 'button' )[0];menu = nav.getElementsByTagName( 'ul' )[0];if ( ! button ) {return;}// Hide button if menu is missing or empty.if ( ! menu || ! menu.childNodes.length ) {button.style.display = 'none';return;}button.onclick = function() {if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {menu.className = 'nav-menu';}if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {button.className = button.className.replace( ' toggled-on', '' );menu.className = menu.className.replace( ' toggled-on', '' );} else {button.className += ' toggled-on';menu.className += ' toggled-on';}};} )(jQuery);پس از آن فایل را با عنوان navigation.js در دسکتاپ خود ذخیره کنید.
در مرحله بعد باید وارد کنترل پنل هاست خود شوید. پس از آن باید به پوشه روت سایت خود یا همان public-html مراجعه کنید. سپس باید فایلی را که ذخیره کرده اید را در پوشه /wp-content/themes/your-theme-dir/js/ در سایت وردپرس خود آپلود نمائید. فهرست خود را با فهرست موضوعی فعلی جایگزین کنید. اگر پوشه قالب شما پوشه js ندارد، باید آن را ایجاد کنید.
بیشتر بخوانید: نحوه responsive کردن وردپرس؛ چگونه سایت وردپرس خود را ریسپانسیو کنیم؟
پس از آپلود فایل جاوا اسکریپت، مرحله بعدی این است که مطمئن شوید سایت وردپرس شما این جاوا اسکریپت را بارگذاری می کند. برای اینکار باید کد زیر را به فایل functions.php قالب خود اضافه کنید:
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . 'https://cdn3.wpbeginner.com/js/navigation.js', array('jquery'), '20160909', true );حال باید منوی ناوبری را به قالب وردپرس خود اضافه کنیم. معمولاً منوی پیمایش به فایل header.php قالب اضافه می شود:
<nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle">Menu</button> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?></nav>مرحله آخر اضافه کردن CSS است تا منوی ما از کلاس‌های CSS مناسب برای جابجایی استفاده کند تا هنگام مشاهده در موبایل همراه کار کند.
/* Navigation Menu */.main-navigation { margin-top: 24px; margin-top: 1.714285714rem; text-align: center;}.main-navigation li { margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143;}.main-navigation a { color: #5e5e5e;}.main-navigation a:hover,.main-navigation a:focus { color: #21759b;}.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul { display: none;}.main-navigation ul.nav-menu.toggled-on,.menu-toggle { display: inline-block;}// CSS to use on mobile devices@media screen and (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; display: inline-block !important; text-align: left; width: 100%; } .main-navigation ul { margin: 0; text-indent: 0; } .main-navigation li a, .main-navigation li { display: inline-block; text-decoration: none; } .main-navigation li a { border-bottom: 0; color: #6a6a6a; line-height: 3.692307692; text-transform: uppercase; white-space: nowrap; } .main-navigation li a:hover, .main-navigation li a:focus { color: #000; } .main-navigation li { margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; } .main-navigation li ul { margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .main-navigation li ul ul { top: 0; left: 100%; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul { border-left: 0; clip: inherit; overflow: inherit; height: inherit; width: inherit; } .main-navigation li ul li a { background: #efefef; border-bottom: 1px solid #ededed; display: block; font-size: 11px; font-size: 0.785714286rem; line-height: 2.181818182; padding: 8px 10px; padding: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; white-space: normal; } .main-navigation li ul li a:hover, .main-navigation li ul li a:focus { background: #e3e3e3; color: #444; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a { color: #636363; font-weight: bold; } .menu-toggle { display: none; } }پس از آن منوی موبایل سایت شما به صورت ریسپانسیو خواهد شد.
بیشتر بخوانید: ابزارهای تست ریسپانسیو سایت وردپرس؛ 8 ابزار تست Responsive وبسایت
سوالات متداول
بهترین افزونه برای ساخت منوی ریسپانسیو چه افزونه ای است؟
هم اکنون افزونه های مختلفی هم به صورت رایگان و هم به صورت پولی ارائه شده اند که با کمک هریک از آنها به سادگی می توانید منوی سایت خود را در موبایل ریسپانسیو کنید. افزونه Hero Mega Menu و افزونه Responsive Menu را می توان جزء بهترین افزونه ها دانست.
چگونه سایت وردپرس خود را ریسپانسیو کنیم؟
بیشتر بخوانید: مگا منو چیست؟ نکاتی که هنگام ساخت mega menu باید بدانید
جمع بندی: چگونگی ایجاد منوی ریسپانسیو در وردپرس
چگونگی ساخت منوی واکنشگرا در وردپرس ؟ یکی از اقداماتی که می تواند به موفقیت وب سایت شما کمک کند، طرح بندی ریسپانسیو در گوشی موبایل می باشد. به این دلیل که امروزه اکثر کاربران از طریق موبایل وارد وب سایت می شوند، بنابراین لازم است حتماً منوی سایت شما در موبایل ریسپانسیو طراحی شده باشد. ما در این مطلب آموزش ایجاد منوی ریسپانسیو در وردپرس را در اختیار شما قرار دادیم. امیدوارم این مطلب مورد رضایت شما عزیزان قرار گرفته باشد.
منبع: wpbeginner
لیست مطالب
مطالب مرتبط
آموزش نحوه اضافه کردن ستون در المنتور
اهمیت بهینه سازی تصاویر در وردپرس
آموزش نحوه ویرایش متن در وردپرس
آموزش اضافه کردن نقشه تعاملی Google در سایت های وردپرسی
آموزش روش های مقابله با حملات SQL Injection
آموزش دریافت نماد الکترونیکی (راهنمای تصویری گرفتن اینماد)
حذف گزینه های شخصی در برگه ویرایش پروفایل وردپرس
چگونگی راه اندازی آسان نسخه کلون از سایت وردپرسی در هاست اشتراکی
اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.
نظرات کاربران
ثبت دیدگاه