Для начала давайте скопируем из учебной верстки шапку и подвал сайта в соответствующие файлы темы WordPress.
1. Берем вот этот код из index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<body class="stretched"> <!-- Document Wrapper ============================================= --> <div id="wrapper" class="clearfix"> <!-- Header ============================================= --> <header id="header" class="transparent-header full-header" data-sticky-class="not-dark"> <div id="header-wrap"> <div class="container clearfix"> <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> <!-- Logo ============================================= --> <div id="logo"> <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Logo"></a> </div><!-- #logo end --> <!-- Primary Navigation ============================================= --> <nav id="primary-menu" class="dark"> <ul> <li class="current"><a href="index.html"><div>Home</div></a></li> <li> <a href="blog.html"><div>Blog</div></a> <ul> <li><a href="blog-single.html"><div>Single post</div></a></li> </ul> </li> <li><a href="full-width.html"><div>Page</div></a></li> <li><a href="shop.html"><div>Shop</div></a></li> <li><a href="portfolio.html"><div>Portfolio</div></a></li> <li><a href="contacts.html"><div>Contacts</div></a></li> </ul> <!-- Top Cart ============================================= --> <div id="top-cart"> <a href="cart.html" id="top-cart-trigger"><i class="icon-shopping-cart"></i><span>5</span></a> </div><!-- #top-cart end --> <!-- Top Search ============================================= --> <div id="top-search"> <a href="#" id="top-search-trigger"><i class="icon-search3"></i><i class="icon-line-cross"></i></a> <form action="search.html" method="get"> <input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.."> </form> </div><!-- #top-search end --> </nav><!-- #primary-menu end --> </div> </div> </header><!-- #header end --> |
и копируем в header.php.
2. И так же копируем вот этот код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!-- Footer ============================================= --> <footer id="footer" class="dark"> <!-- Copyrights ============================================= --> <div id="copyrights"> <div class="container clearfix"> <div class="col_half"> Copyrights © 2020<br> <div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div> </div> <div class="col_half col_last tright"> <div class="fright clearfix"> <a href="#" class="social-icon si-small si-borderless si-facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a> <a href="#" class="social-icon si-small si-borderless si-twitter"> <i class="icon-twitter"></i> <i class="icon-twitter"></i> </a> <a href="#" class="social-icon si-small si-borderless si-gplus"> <i class="icon-gplus"></i> <i class="icon-gplus"></i> </a> </div> <div class="clear"></div> <i class="icon-envelope2"></i> info@site.com <span class="middot">·</span> <i class="icon-headphones"></i> +7(999) 99-99-999 </div> </div> </div><!-- #copyrights end --> </footer><!-- #footer end --> </div><!-- #wrapper end --> <!-- Go To Top ============================================= --> <div id="gotoTop" class="icon-angle-up"></div> |
в footer.php.
Для работы с меню в SP Framework существует класс SP_Framework_Menu.
Давайте попробуем создать функцию вывода меню и разместим ее в sp-framework/core/functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
function sp_get_header_menu($menuID=null, $result=null){ if(!empty($menuID)){ $itemsLv1 = SP_Framework_Menu::get($menuID); $itemsLv2 = SP_Framework_Menu::get($menuID); $result .= '<ul>'; foreach ($itemsLv1 as $itemLv1) { if($itemLv1['have_children'] == 'y'){ $result .= '<li>'; $result .= '<a href="'.$itemLv1['url'].'"><div>'.$itemLv1['title'].'</div></a>'; $result .= '<ul>'; foreach ($itemsLv2 as $itemLv2) { if($itemLv1['id'] == $itemLv2['parent']){ $result .= '<li><a href="'.$itemLv2['url'].'"><div>'.$itemLv2['title'].'</div></a></li>'; } } $result .= '</ul>'; $result .= '</li>'; } else { $result .= '<li><a href="'.$itemLv1['url'].'"><div>'.$itemLv1['title'].'</div></a></li>'; } } $result .= '</ul>'; } return $result; } |
Вызывать эту функцию надо как вы уже догадались в header.php. Вот что должно получится:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav id="primary-menu" class="dark"> <?php echo sp_get_header_menu('top-menu');?> <!-- Top Cart ============================================= --> <div id="top-cart"> <a href="cart.html" id="top-cart-trigger"><i class="icon-shopping-cart"></i><span>5</span></a> </div><!-- #top-cart end --> <!-- Top Search ============================================= --> <div id="top-search"> <a href="#" id="top-search-trigger"><i class="icon-search3"></i><i class="icon-line-cross"></i></a> <form action="search.html" method="get"> <input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.."> </form> </div><!-- #top-search end --> </nav><!-- #primary-menu end --> |
Теперь создадим функцию для меню в подвале сайта. Разместим ее там же.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function sp_get_footer_menu($menuID=null, $result=null){ if(!empty($menuID)){ $itemsLv1 = SP_Framework_Menu::get($menuID); $result .= '<div class="copyright-links">'; foreach ($itemsLv1 as $itemLv1) { $result .= '<a href="'.$itemLv1['url'].'">'.$itemLv1['title'].'</a>'; } $result .= '</div>'; } return $result; } |
Вызывать эту функцию нужно в footer.php. Вот что должно получится:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<footer id="footer" class="dark"> <!-- Copyrights ============================================= --> <div id="copyrights"> <div class="container clearfix"> <div class="col_half"> Copyrights © <?php echo date('Y')?><br> <?php echo sp_get_footer_menu('bottom-menu');?> </div> |
Как вы уже заметили, я в качестве параметра, передаю функциям ID меню. Это так называемая область отображения меню. Создается с помощью метода register_nav_menus.
|
1 2 3 4 |
register_nav_menus( array( 'top-menu' => esc_html__('Top menu', 'sp-theme'), 'bottom-menu' => esc_html__('Bottom menu', 'sp-theme'), )); |
Этот код находится в functions.php нашей темы.