как разместить логотип по центру среди других элементов в навигационной панели
Я разрабатываю сайт на WordPress и мне нужно создать навигационную панель, в которой логотип сайта должен располагаться между элементами меню следующим образом:
пункт1 пункт2 ЛОГОТИП пункт3 пункт4
Я думаю использовать класс Walker
, но не знаю, с чего начать. У вас есть другие/лучшие предложения? Спасибо!
У вас есть множество вариантов. Я имею в виду, что этого можно добиться только с помощью CSS. Большинство людей тратят слишком много времени, пытаясь усложнить WordPress, хотя он должен упрощать нам жизнь. Скорее всего, когда вы закончите, вы поймете, что могли бы сделать это в 10 раз быстрее, просто используя HTML.
Самый простой вариант — просто создать два меню, слева и справа, а затем добавить изображение между ними:
<nav id="primary-navigation" class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'left', 'menu_class' => 'nav-menu' ) ); ?>
<a itemprop="url" href="http://www.example.com/" title="Моя компания"><img src="http://www.example.com" alt="Моя крутая компания" /></a>
<?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
Или, что еще круче, добавьте загрузчик в настройщик темы, чтобы делать это прямо из интерфейса.
Меню (скорее всего, находится в header.php
):
<nav id="primary-navigation" class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'left', 'menu_class' => 'nav-menu' ) ); ?>
<?php if ( get_theme_mod( 'mytheme_logo' ) ) : ?>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'mytheme_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
<?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
Затем добавьте это в ваш functions.php
:
function themeslug_theme_customizer( $wp_customize ) {
$wp_customize->add_setting( 'mytheme_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mytheme_logo', array(
'label' => 'Логотип',
'section' => 'mytheme_logo_section',
'settings' => 'mytheme_logo',
) ) );
}
add_action('customize_register', 'themeslug_theme_customizer');
Не усложняйте вещи без необходимости.
Walkers могут усложнить ситуацию, на мой взгляд, потому что они переопределяют друг друга, и со всеми крутыми плагинами, изменяющими функциональность меню, ни один из них не работает вместе.
Однако, если вас это не волнует, просто скачайте плагин, который уже делает то, что вам нужно:
http://wordpress.org/plugins/menu-image/ http://wordpress.org/plugins/nav-menu-images/screenshots/
Лично я считаю, что шорткоды — это лучший подход для меню. С ними вы можете делать практически все, что угодно, и не тратить дни на расширение класса walker.
Как это сделать? Сначала выберите поля, к которым вы хотите применить шорткоды. Вот фильтр "walker" для поля описания. Скорее всего, вы его все равно не используете. Можно сделать его полезным.
Добавьте это в ваш functions.php:
function shortcode_menu_description( $item_output, $item ) {
if ( !empty($item->description)) {
$output = do_shortcode($item->description);
if ( $output != $item->description )
$item_output = $output;
}
return $item_output;
}
add_filter("walker_nav_menu_start_el", "shortcode_menu_description" , 10 , 2);
Теперь вы можете добавлять шорткоды в поле описания, и они будут выводиться в вашем меню. Это также не должно влиять на вашу тему, если у вас есть поддержка описаний.
Как добавить шорткоды для изображений? https://wordpress.org/plugins/stag-custom-sidebars/
Позволяет создавать неограниченное количество сайдбаров, которые нигде не назначены. Добавьте текстовый виджет в новый сайдбар и просто вставьте:
<a itemprop="url" href="http://www.example.com/" title="Моя компания
Юристы, Чикаго"><img src="http://www.example.com" alt="Моя крутая компания" /></a>
Вот еще несколько отличных дополнений для шорткодов, которые позволят вам добавлять их. Я считаю, что это наиболее последовательный способ создания сложных меню в WordPress, потому что он добавляет бесконечные возможности, используя виджеты/контент/изображения/иконки и т.д. в меню, и не отключает никакую функциональность меню. Обратите внимание, что если вы добавите шорткод в поле описания, он, очевидно, не будет выводить обычное поле заголовка в этом конкретном пункте меню.
http://wordpress.org/plugins/widget-or-sidebar-per-shortcode/
http://wordpress.org/support/view/plugin-reviews/custom-content-shortcode
