Как создать меню WordPress из существующего кода шаблона HTML?

Question

Как создать меню WordPress из существующего кода шаблона HTML?

Поэтому я использовал шаблон HTML для веб-сайта и добавил функциональность WordPress. Тем не менее, моя навигация в Header.php просто использует get_permalink для ссылок на страницы. Я хочу сохранить то же навигационное меню со всеми его функциями, но разрешить добавление страниц на панели инструментов.

Текущий код выглядит следующим образом:

    <!-- Overlay Navigation Menu -->
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in">
<div class="overlay-navigation-scroll-pane">
<div class="overlay-navigation-inner">
<div class="v-align-middle">
<div class="overlay-navigation-header row collapse full-width">
<div class="column width-12">
<div class="navigation-hide overlay-nav-hide">
<a href="#"> <span class="icon-cancel"></span> </a>
</div>
</div>
</div>
<div class="row collapse full-width">
<div class="column width-12">
<nav class="overlay-navigation nav-block">
<h4 class="menu-title">Website Title</h4>
<ul>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Overlay Navigation Menu End -->
<div class="wrapper reveal-side-navigation">
<div class="wrapper-inner">
<!-- Header -->
<header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div class="logo-inner"> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> </div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li>
<!-- Button -->
<div class="v-align-middle"> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>" class="button small text-uppercase pull-right no-margin-bottom">Book Now </span></a> </div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show overlay-nav-show nav-icon"> <span class="icon-menu"></span> </a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
<li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- MAIN CONTENT GOES HERE-->
</div>
</div>

Код довольно раздутый, но учитывает мобильную отзывчивость и другие эффекты Javascript, которые идут с темой.

Какой лучший способ подойти к этому? Спасибо

-1

html php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Шаг 1: Зарегистрируйте навигационное меню в вашем functions.php

<?php
function my_wp_nav_menu(){
register_nav_menus( array(
'primary' => 'Main Navigation'
) );
}
add_action( 'after_setup_theme', 'my_wp_nav_menu' );

Шаг 2: Войдите в Appearance-> Меню в панели инструментов добавьте элементы навигации и выберите Главная навигация как меню.

Шаг 3: заменить навигацию uls в вашем HTML с:

<?php
wp_nav_menu( array(
'container' => '',
'theme_location' => 'primary'
) );

Это заменит ваш список меню WordPress, которым вы можете управлять в WordPress. По умолчанию, wp_nav_menu оборачивает список меню div вот почему мы устанавливаем 'container' => '' так что все, что вы получаете, это разметка списка меню.

1