Divi: بهترین تم وردپرس تمام وقت!

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

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

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

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

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

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

نحوه ایجاد منوی وردپرس همراه پاسخگو

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

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

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

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

یک منوی پاسخگو ایجاد کنید


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

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

افزونه منوی داشبورد پاسخگو وردپرس

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

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

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

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

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

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

به راحتی وب سایت خود را با Elementor بسازید

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

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

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

روش 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>

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

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

ما فرض می کنیم که مکان منویی که توسط قالب وردپرس شما تعریف شده است "" اصلی " در غیر این صورت ، از مکانی که توسط قالب وردپرس تعریف شده استفاده کنید.

آخرین مرحله افزودن مقداری 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 یک افزونه وردپرس است که به ایجاد یک megamenu بسیار قابل تنظیم ، پاسخگو و در دسترس کاربران اختصاص داده شده است. بدون نیاز به پیکربندی خاص ، بعد از نصب کاربردی است.

افزونه منوی وردپرس Ubermenu

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

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

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

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

2. LMM

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

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

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

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

3. 8Degree Fly Menu

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

8degree پرواز منو پاسخگو افزونه منوی بوم برای وردپرس

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

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

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

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

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

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

نتیجه

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

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

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

...