/ در آموزش ها, آموزش وردپرس, اشتراک رایگان / توسط
آخرین زمان ویرایش:

چگونه منوی ناوبری bootstrap را با پوسته وردپرس ادغام کنیم

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید)

آیا تا حالا به سرعت بخشدین به روند توسعه قالب وردپرس فکر کرده اید؟ من فرض می کنم که جواب شما “بله” می باشد و شما در حال حاظر با بوت ستراپ آشنایی دارید و از نمونه های بوت استراپ برای توسعه استفاده کرده اید. این سوال به وجود می آید که “چگونه می توان اجزاء بوت ستراپ را در وردپرس ادغام کرد؟”

این سری از آموزش چگونگی ادغام اجزاء بوت ستراپ محبوب در داخل وردپرس را پوشش می دهد. اجازه دهید با منوی ناوبری شروع کنیم که به ما اجازه ایجاد یک نوار ناوبری واکنش گرا یا همان “responsive” را می دهد. برای حفظ راحتی این آموزش من یک نوار ناوبری شامل فقط لوگو و منو را انتخاب می کنم.

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

<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>

اجازه دهید برای درک بهتر، کدهای بالا را توضیح دهم:

<nav role=”navigation”>…</nav>

یک تگ “<nav>” همراه با کلاس “navbar” و “role=”navigation تمام محتوای منو را دربر می گیرد.

<div class=”navbar-header”>…</div>

یک تگ <div> همراه با کلاس “navbar-header” در هر صفحه نمایشی با هر اندازه ای قابل مشاهده است.

<button class=”navbar-toggle” type=”button” data-toggle=”collapse” data-target=”.navbar-ex1-collapse”>…</button>

یک <button> که محتوا را بر روی صفحه نمایش کوچک نشان می دهد، این دکمه ضروری است اما شما می توانید محتوای داخل آن را تغییر دهید.

<a class=”navbar-brand” href=”#”>Brand</a>

Brand – یک لینک همراه با لوگو، اختیاری می باشد، شما می توانید حذف کنید یا موقیت آن را عوض کنید.

<div class=”collapse navbar-collapse navbar-ex1-collapse”>…</div>

یک “<div>” همراه با کلاس “collapse” و ‘navbar-collapse” که شامل تمام محتوایی می باشد که صفحه نمایش کوچک می باشد.

<ul class=”nav navbar-nav”>…</ul>

یک “<ul>” همراه با کلاس “nav navbar-nav” که نوار منو سایت را نمایش می دهد.

 

ادغام نمونه ها داخل قالب وردپرس

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

آماده کردن قالب خود برای منو

فایل “functions.php” خود را باز کرده و اگر آن را Register نکرده اید، پس آن را ثبت کنید:

<?php
/* Theme setup */
add_action( ‘after_setup_theme’, ‘wpt_setup’ );
if ( ! function_exists( ‘wpt_setup’ ) ):
function wpt_setup() {
register_nav_menu( ‘primary’, __( ‘Primary navigation’, ‘wpbaboon’ ) );
} endif;
?>

ثبت فایل های Bootstrap و jQuery:

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” را از GitHub دانلود کنید. فایل را در ریشه تم خود قرار دهید. به فایل “function.php” برگشته و کد زیر را اضافه کنید:

<?php // Register custom navigation walker
require_once(‘wp_bootstrap_navwalker.php’);
?>

به قسمت مدیریت وردپرس بروید از منوی “نمایش” گزینه “فهرستها” را انتخاب کنید. منویی به اسم “Primary” ایجاد کنید. به قسمت مدیریت جایگاه ها رفته و منوی کشویی منوی “Primary” را انتخاب کنید و در آخر ذخیره کنید.

ادغام نمونه نوار ناوبری در یک قالب

فایل “header.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 navbar’,
//Process nav menu using our custom nav walker
‘walker’ => new wp_bootstrap_navwalker())
);
?>

حال منوی بوت استرپ با وردپرس ادغام شد.

نتیجه گیری :

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

نوشته های مشابه

چگونه صفحه سفارشی در وردپرس درست کنیم

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

بهترین راه برای بارگذاری سی اس اس در وردپرس

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *