آیا می خواهید یک منوی واکنش گرا در وبلاگ وردپرس خود ایجاد کنید؟

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

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

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

سپس به این دلیل که چرا ما اینجا هستیم

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

روش اول: منوی تلفن همراه را با افزونه وردپرس ایجاد کنید

این روش آسان تر است و برای مبتدیان توصیه می شود زیرا به مهارت های مخصوص برنامه نویسی احتیاج ندارد.

در این روش منویی ایجاد خواهیم کرد (با نماد همبرگر) که روی صفحه تلفن همراه اسلاید می کند.

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

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

ابتدا باید اندازه ای را که باید منوی تلفن همراه از آن نشان داده شود وارد کنید. پیش فرض 800px است که باید برای اکثر وب سایت ها کار کند.

پس از آن شما باید منو مورد نظر خود را از طریق موبایل انتخاب کنید.

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

فراموش نکنید که روی «کلیک کنید» گزینه های به روز رسانی برای ذخیره تنظیمات خود

ما همچنین به شما پیشنهاد می کنیم موارد ما را کشف کنید افزونه های 10 WordPress برای ایجاد منوها در وبلاگ شما

اکنون می توانید از وب سایت خود بازدید کرده و صفحه مرورگر خود را برای دیدن منوی پاسخگو در اندازه خود تغییر اندازه دهید.

افزونه « منوی پاسخگو »گزینه های دیگری را ارائه می دهد که به شما امکان می دهد رفتار و شکل ظاهری منوی پاسخگو خود را اصلاح کنید. می توانید این گزینه ها را در صفحه تنظیمات افزونه کاوش کرده و در صورت لزوم آن را تنظیم کنید.

روش 2: نحوه اضافه کردن منوی موبایل به صورت دستی

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

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

در یکی از آموزش های قبلی ما به شما نشان می دهیم نحوه ایجاد افزونه WordPress.

ابتدا باید یک ویرایشگر متن مانند Notepad باز کرده و این کد را جای گذاری کنید.

(function () {nav var = document.getElementById ('سایت-ناوبری')) ، دکمه ، منو ، اگر (! nav) {بازگشت؛} دکمه = nav.getElementsByTagName ('دکمه') [0]؛ menu = nav. getElementsByTagName ('ul') [0]؛ if (! را فشار دهید) {Return؛} // دکمه مخفی کردن اگر فهرست از دست رفته یا خالی باشد اگر (! menu ||! menu.childNodes.l طول) {button.style.display = 'هیچ'؛ بازگشت؛} button.onclick = تابع () {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 '،' ')؛} other {button.className + =' toggled-on '؛ menu.className + =' toggled-on '؛}}؛}) (jQuery)؛

اکنون باید این پرونده را با نام ذخیره کنید " navigation.js روی میز شما

سپس برای بارگیری این پرونده باید در سایت "/ wp-content / themes / your-them / js /" در وب سایت وردپرس خود یک مشتری FTP باز کنید.

عبارت "را جایگزین کنید خود موضوع » با نام پوشه شما تم وردپرس جاری. اگر پوشه تم شما پوشه js ندارد، باید آن را ایجاد کنید.

پس از بارگذاری فایل JavaScript ، مرحله بعدی این است که مطمئن شوید وب سایت وردپرس شما پرونده های JavaScript را بارگیری می کند. شما باید کد زیر را به "" اضافه کنید functions.php "از شما تم وردپرس.

چیز دیگری کشف کنید چه کاری می توانید با پرونده های function.php انجام دهید؟

 wp_enqueue_script ( 'bpc_togglemenu، get_template_directory_uri ()' /js/navigation.js، آرایه ( 'جی کوئری')، 20160909، درست است.)؛

اکنون باید منوی ناوبری را در خود اضافه کنیم تم وردپرس. معمولاً منوی پیمایش در قسمت “ فایل 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;
    }
    
    }

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

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

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

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

1. UberMenu به

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

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

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

3 الگو از منو ، طرح کاملاً پاسخگو ، سازگاری با دستگاه های تلفن همراه (iPhone ، iPad ، Android) ، پشتیبانی لمسی و غیره ... را در میان دیگران پیدا خواهید کرد.

دانلود | نسخه ی نمایشی | میزبانی وب

2. LMM

Liquida Mega Menu که LMM نیز نامیده می شود یک است پلاگین وردپرس برای کاربران و توسعه دهندگان طراحی شده است. این رابط کاربری ساده و شهودی دارد که در داشبورد WP ادغام شده است و به شما امکان می دهد تعداد نامحدودی از مگا منوها را بدون هیچ گونه مهارت برنامه نویسی ایجاد و سفارشی کنید.

این برنامه ده ها ویژگی دارد ، چه برای کاربران عادی و چه برای کاربران پیشرفته. به عنوان ویژگی های مختلف ، این ویژگی را در میان سایر موارد ارائه می دهد: یکپارچه سازی خودکار و دستی ، پشتیبانی از multisite, مراقبت از مضامین کودکان، سبک کاملاً قابل تنظیم برای منوها، مکان های منوی قابل تنظیم، منوی چسبناک و غیره…

دانلود | نسخه ی نمایشی | میزبانی وب

3. 8Degree Fly Menu

8Degree Fly Menu یک افزونه برتر وردپرس است که به شما امکان می دهد یک منوی بوم را در وب سایت خود اضافه کنید ، تا ظاهری به شما بدهد که اطلاعات شما را به روشی ساده برجسته کند. برای ایجاد منوهای خود از عملکرد پیش فرض منوی وردپرس استفاده می کند.

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

همچنین بخوانید: 10 افزونه وردپرس برای بهینه سازی ستون های فرعی و هدرهای چسبنده

همچنین از یک ویرایشگر WYSIWYG به شما کمک می کند تا توضیحات طولانی خود را به روشی کاربر پسند درک کنید.با این ویرایشگر می توانید از کد کوتاه نیز استفاده کنید.

دانلود | نسخه ی نمایشی | میزبانی وب

سایر منابع پیشنهادی

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

• چگونه به تغییر نام تصاویر را بر روی یک وبلاگ وردپرس
• چگونه برای ایجاد یک منوی شناور در وردپرس
• افزونه های 8 وردپرس برای ایجاد یک مگامنای در وبلاگ شما
• برخی از نکات برای ایجاد منوهای مدرن برای وبلاگ شما
• افزونه های 6 وردپرس برای مدیریت دسته ها و زیر شاخه ها در وبلاگ شما

نتیجه

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

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

در ضمن ، در مورد خودتان به ما بگویید نظر و پیشنهادات در بخش اختصاصی

...