استفاده از منو بوت استرپ در وردپرس
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

خیلی از طراحان و کدنویسان کار با بوت استرپ رو کاملا بلدن و میتونند با استفاده از این فریم ورک یک قالب کامل طراحی کنند اما موقع تبدیل قالب به وردپرس دچار مشکل عجیبی میشوند!

همانطور که میدانید کد قرار دادن منو به صورت عادی در وردپرس به شکل زیر هستش

کد:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>


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

وقتی شما تابع فهرست رو قرار میدهید وردپرس به صورت خودکار ul و li پیش فرض خودش رو در قالب شما قرار میده به صورت زیر

کد:
<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul>



همان طور که میدانید ul و li در بوت استرپ دارای class های خاص خودشون هستش و با پاک شدن این class ها قالب شما به هم ریخته میشود! حالا میخوام راه حلی رو بهتون نشون بدم تا به کمک اون بتونید منو بوت استرپ در وردپرس اجرا کنید و از طریق پنل تنظیمات فهرستتون رو تنظیم کنید!

۱- از کد استاندارد منو بوت استرپ استفاده کنید

کدی که در پایین قرار داره کد استاندارد یک منو بوت استرپ هستش دقت کنید که کد شما باید استاندارد و مشابه همین کد باشه

کد:
<nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div></nav>



۲- قرار دادن کدهای ضروری در قالب وردپرس

۲-۱- دو قسمت کدهای زیر را در فایل functions.php قالب خودتون کپی و جایگذاری کنید.

کد:
/* Theme setup */add_action( 'after_setup_theme', 'wpt_setup' ); if ( ! function_exists( 'wpt_setup' ) ): function wpt_setup() { register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) ); } endif;



------------------------

کد:
function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min');}add_action( 'init', 'wpt_register_js' );function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' );}add_action( 'wp_enqueue_scripts', 'wpt_register_css' );



۲-۲- بعد از جایگذاری کدهای بالا فایل wp-bootstrap-navwalker رو از لینک زیر دانلود کنید و در قالب در جایی که index.php قرار داره جایگذاری کنید

دانلود فایل نیاز
رمز فایل : codenvis.ir



۲-۳- بعد از دانلود فایل و قرار دادن اون در فایل قالبتون حالا نوبت فراخوانیش هست ، برگردید ببه فایل Functions.php و کد زیر رو در اون جایگذاری کنید

کد:
<?php // Register custom navigation walker require_once('wp_bootstrap_navwalker.php');?>



۳- به قسمت فهرست‌ها بروید و یک فهرست جدید با هر نامی که میخواهید بسازید ، سپس به قسمت مدیریت جایگاه‌ها بروید و منویی که ساختید رو بر روی فهرست اصلی بگذارید و پس از آن ذخیره کنید.

۴- حالا وقت قرار دادن کد منو بوت استرپ در وردپرس هستش!

در کد استاندارد منو بوت استرپ کد زیر را پیدا کنید

کد:
<a class="navbar-brand" href="#">Brand</a>



و به جای آن کد زیر رو قرار بدهید

کد:
<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>


و در ادامه کد زیر را پیدا کرده و پاک کنید

کد:
<ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li></ul>



و به جای آن کد زیر که قرار دادیم رو جای گذاری و سپس ذخیره کنید

کد:
<?php /* Primary navigation */wp_nav_menu( array( 'menu' => 'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', //Process nav menu using our custom nav walker 'walker' => new wp_bootstrap_navwalker()));?>



حالا منو بوت استرپ در وردپرس راه اندازی شده و شما میتونید از این پس فهرست‌های قالبتون رو از پنل وردپرس مدیریت کنید.

منبع آموزش : codenvis.ir/استفاده-از-منو-بوت-استرپ-در-وردپرس/
کدنویس
امضاي کاربر :

تشکر شده:

1 کاربر از sarkhosh به خاطر اين مطلب مفيد تشکر کرده اند: admin-mehrdad /

پاسخ ها
دمو نداشت ؟
چون بیشتر افرادی که میخوان یه پست اموزشی در زمینه کد رو مطالعه کنن اولین چیزی که میخوان ببینن دمو هست

تشکر شده:

1 کاربر از admin-mehrdad به خاطر اين مطلب مفيد تشکر کرده اند: sarkhosh /

شرمنده دمویی نتونستم درست کنم ولی از عنوان معلومه که میخوان چیکار کنن
اینجا منویی که از بوت استرپ برداشتن و شخصی سازی کردن میتونن توی وردپرس استفادش کنن
امضاي کاربر :


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.