Меню для WordPress 3 с элементом Span и ссылкой на главную страницу

28.01.2011

Итак,

  • Что имеем: WordPress 3 с его замечательной менюшкой.
  • Что хотим: WordPress 3 меню, но с элементом span(надо при верстке определенного дизайна менюшек) и ссылку на главную, которая будет выделена, когда мы будем на главной.

С ссылкой на главную все довольно просто:

1
2
3
<li <?php if (is_front_page()) echo ('class="current_menu_item"'); ?>>
	<a href="<?php echo get_option('home'); ?>"><span>Главная</span></a>
</li>

С меню все чуть сложнее. Для начала выводим само меню и засовываем его в переменную:):

1
2
3
4
ob_start();
wp_nav_menu( array('theme_location' => 'header-menu', 'container' => 'none', 'depth' => '1' ) );
$header_menu = ob_get_contents();
ob_end_clean();

Потом, мы помним, что нам необходимо обернуть текст ссылки в span, используем регулярное выражение:

1
$header_menu = preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', $header_menu);

Казалось бы, что мы все сделали, однако не тут то было, при попытке вставить то, что у нас получилось в html меню у нас получится вложенные списки, соответственно нужно еще раз использовать регулярные выражения, но уже для того, чтобы убрать ненужную обертку ul и оставить только li.

1
$header_menu = preg_replace('%(<ul.*?class="menu".*?>(.*?)</ul>)%si', '$2</ul>', $header_menu);

Вот теперь у нас все получилось и мы сделали все, как хотели, итоговый код выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="menu">
 
<li <?php if (is_home()) echo ('class="current-menu-item"'); ?>><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php
ob_start();
wp_nav_menu( array('theme_location' => 'header-menu', 'container' => 'none', 'depth' => '1' ) );
$header_menu = ob_get_contents();
ob_end_clean();
 
$header_menu = preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', $header_menu);
$header_menu = preg_replace('%(<ul.*?class="menu".*?>(.*?)</ul>)%si', '$2</ul>', $header_menu);
 
echo $header_menu;
?>
</ul>

И не забываем включить и зарегистрировать меню, для этого в functions.php необходимо прописать следующее:

1
2
3
4
5
6
function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ))
  );
}
add_action( 'init', 'register_my_menus' );
Смотреть все приёмы и трюки Wordpress