как разместить логотип по центру среди других элементов в навигационной панели

8 июн. 2014 г., 23:44:18
Просмотры: 19.4K
Голосов: 3

Я разрабатываю сайт на WordPress и мне нужно создать навигационную панель, в которой логотип сайта должен располагаться между элементами меню следующим образом:

пункт1 пункт2 ЛОГОТИП пункт3 пункт4

Я думаю использовать класс Walker, но не знаю, с чего начать. У вас есть другие/лучшие предложения? Спасибо!

0
Все ответы на вопрос 1
0

У вас есть множество вариантов. Я имею в виду, что этого можно добиться только с помощью 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

9 июн. 2014 г. 00:59:34