부트스트랩 네비게이션 바를 WordPress 메뉴로 변환
인터넷에는 이에 대한 많은 토픽들이 있지만 매우 복잡하다는 것을 알게 되었다.기본적으로 Bootstrap 탐색 메뉴를 WordPress 메뉴로 변환합니다.
기본 Bootstrap Navbar가 있다고 가정합니다.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" id="bs-example-navbar-collapse-1">
<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 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
보통 이 네비게이션 바를 WordPress 페이지와 링크하는 방법은 각 페이지를 수동으로 나열하는 것이 아니라<li>다음을 사용합니다.
<ul class="nav navbar-nav">
<?php wp_list_pages('title_li=');?>
</ul>
이 출력에는 WordPress에서 작성한 모든 페이지가 나열됩니다.
<ul class="nav navbar-nav">
<li class="page_item page-item-9"><a href="...">About</a></li>
<li class="page_item page-item-2"><a href="...">Sample Page</a></li>
</ul>
페이지를 추가할 수 있고 예상대로 메뉴에 포함되어 있기 때문에 괜찮습니다.
문제
문제는 드롭다운 항목을 메뉴 모음에 포함시키고 이를 WordPress에 통합하는 방법을 모른다는 것입니다. 예를 들어 다음과 같습니다.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
WordPress와 어떻게 통합하면 다음 번에 새로운 드롭다운 목록을 추가할 때 일반 메뉴 항목과 동일하게 쉽게 할 수 있을까요?
WordPress codex 웹사이트 및 기타 튜토리얼 링크는 제공하지 말아주시면 감사하겠습니다.
이 https://github.com/twittem/wp-bootstrap-navwalker을 사용하여 nav walker 파일을 추가하고 지시에 따라야 합니다.이것은 랜덤 사이트에서 작성한 샘플입니다.앞으로 WP를 전개하기 위해서, 이것을 학습할 필요가 있기 때문에, 자신의 사이트에 맞추어 조정하지 않습니다.믿을 수 없을 정도로 간단합니다. 확인해 보세요.
<div id="nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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-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'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.container-fluid -->
</nav>
</div><!-- #nav -->
눈치채셨겠지만 기본적으로 코드 뒤에 있는 것을 교체해야 합니다.
<!-- Collect the nav links, forms, and other content for toggling -->
와 함께
<?php
wp_nav_menu( array(
'menu' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
및 voila
class collapse navbar-collapse 내의 ul 요소를 다음 예시와 같이 wp_nave_menu로 대체할 수 있습니다.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right'))
?>
</div>
드롭다운 메뉴 문제를 해결하려면 다음 작업을 수행해야 합니다.
에 가다
class-wp-bootstrap-navwalker.php파일찾다
$atts['data-toggle'] ="dropdown";로 대체한다.$atts['data-bs-toggle'] ="dropdown";
<?php wp_nav_menu( array('menu' => 'primary', ) ); ?>
세로형 아코디언 타입의 부트스트랩5 메뉴를 작성하는데 필요한 유연성을 제공했던 문제에 대한 나의 견해는 다음과 같습니다.
https://github.com/exonianp/wp-bootstrap5-accordeon-vertical-menu
저는 구식의 방법으로 다소 복잡한 JOIN 쿼리를 작성하기로 했습니다.wp_get_nav_menu_items와 현재 돌고 있는 다양한 워커(아직도 사용 가능)의 제한에 충분히 만족했기 때문입니다.
언급URL : https://stackoverflow.com/questions/25332527/convert-bootstrap-navbar-to-wordpress-menu
'programing' 카테고리의 다른 글
| WordPress Admin / Backend에서 기본 페이지 순서 변경 (0) | 2023.04.04 |
|---|---|
| ReactJs에서 문서를 작성하는 방법 (0) | 2023.04.04 |
| BETWIN 절 대 <= AND >= (0) | 2023.04.04 |
| ESLint - 오류:ES 모듈을 로드하려면 Import를 사용해야 합니다. (0) | 2023.04.04 |
| SqlDataReader에서 JSON으로 변환 (0) | 2023.03.25 |