آموزش های ویژه

آموزش ساخت درگاه پرداخت آنلاین

آموزش های وب
Feb 2014 18

گام 1 آموزش بوت استرپ [BootStrap]

آموزش بوت استرپ ( گام 1 ) bootstrap چیست ؟

دوره بوت استرپ
Jan 2015 14

دانلود به ازای پرداخت در وردپرس

آموزش وردپرس
Oct 2014 24

آموزش حرفه ای افزایش امنیت وردپرس

امنیت وردپرس
Feb 2014 24

آخرین مطالب

آموزش دیکامپایل کردن اپلیکیشن اندروید [apk] و جلوگیری از آن
آموزش طراحی قالب وردپرس [گام 2] آدرس دهی سورس و تصاویر
آموزش راه اندازی وبسایت (چگونه سایت بسازم ؟) [گام 2] کار با سی پنل (CPanel)
راه اندازی سایت از صفر [گام 1] هاست و دامین چیست ؟
دوره های آموزشی جدید [آقای برنامه نویس]
ارتباط گوشی اندروید با گنو/لینوکس [KDE Connect]
دانلود قالب وردپرس آرشا [طراحی شده با بوت استرپ]
آموزش طراحی قالب وردپرس [گام 1] مقدمات

دوره های آموزشی

دوره مقدماتی آموزش گنو

100%

دوره آموزش بوت استرپ

99%

دوره انجمن ساز IPS Suite 4

35%

دوره آموزش MySQL

40%

جدول دوره های آموزشی

آموزش تبدیل منو بوت استرپ به منو وردپرس

حسین شفیعیان آموزش وردپرس اکتبر 2015 25

یکی از مواردی که طراحان در تبدیل کردن قالب بوت استرپ به وردپرس ، داینامیک کردن منو بوت استرپ است. اگر به کد های منوی بوت استرپ دقت کنید متوجه میشید که به سادگی داینامیک نخواهد شد. افزونه ی WP Bootstrap Menu نیز برای این مورد طراحی شده اما اگر بخواهیم قالبمان به افزونه خاصی وابسته نباشید در ادامه با ما همراه باشید …

در ابتدا فایل wp_bootstrap_navwalker.php را از لینک زیر دانلود و در فولدر قالبتان (کنار فایل style.css) قرار بدید:

دانلود فایل

لینک دانلود

0.1 مگابایت

منبع فایل : https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2

سپس فایل functions.php قالبتان را باز کرده و کد زیر را به انتهای آن اضافه کنید:

require_once('wp_bootstrap_navwalker.php');

1	require_once('wp_bootstrap_navwalker.php');

اگر قالبتون از قبل از منو وردپرس پشتیبانی نمیکرد کد زیر را نیز به functions.php اضافه نمایید :

register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

register_nav_menus( array(

'primary' => __( 'Primary Menu', 'THEMENAME' ),

) );

با استفاده از دستور زیر در فایل header.php امکان استفاده از منو را اضافه کنید :

<?php
        wp_nav_menu( array(
                'menu'                    => 'primary',
                'theme_location'        => 'primary',
                'depth'                  => 2,
                'container'              => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                'menu_class'            => 'nav navbar-nav',
                'fallback_cb'      => 'wp_bootstrap_navwalker::fallback',
                'walker'                        => new wp_bootstrap_navwalker())
        );
?>

<?php

wp_nav_menu( array(

'menu' => 'primary',

'theme_location' => 'primary',

'depth' => 2,

'container' => 'div',

'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',

'menu_class' => 'nav navbar-nav',

'fallback_cb' => 'wp_bootstrap_navwalker::fallback',

'walker' => new wp_bootstrap_navwalker())

);

مثال ساده استفاده در header.php به صورت زیره :

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
                                <?php bloginfo('name'); ?>
                        </a>
                </div>
                <?php
                        wp_nav_menu( array(
                                'menu'                    => 'primary',
                                'theme_location'        => 'primary',
                                'depth'                  => 2,
                                'container'              => 'div',
                                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                                'menu_class'            => 'nav navbar-nav',
                                'fallback_cb'      => 'wp_bootstrap_navwalker::fallback',
                                'walker'                        => new wp_bootstrap_navwalker())
                        );
                ?>
        </div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

<?php bloginfo('name'); ?>

</a>

</div>