web-dev-qa-db-fra.com

comment mettre le logo au centre des autres éléments de la barre de navigation

Je développe un site Web sous wordpress et je dois créer une barre de navigation dans laquelle le logo du site Web doit être placé entre les éléments suivants:

item1 item2 LOGO item3 item4

Je pense utiliser la classe Walker mais je ne sais pas par où commencer. Avez-vous d'autres/meilleures suggestions? Merci!

phpmenus
3
DamianFox

Vous avez beaucoup d'options. Je veux dire que cela pourrait être réalisé avec juste css. La plupart des gens passent trop de temps à essayer de rendre Wordpress plus complexe lorsqu'il est supposé simplifier les choses pour nous. Les chances sont que lorsque vous avez terminé, vous vous rendrez compte que vous auriez pu faire les choses en 1/10e du temps en utilisant simplement le langage HTML.

L'option la plus simple consiste à créer deux menus gauche et droit, puis à ajouter une image entre les deux:

<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="My Company"><img src="http://www.example.com" alt="My cool company" /></a>
<?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Ou même plus cool, ajoutez un téléchargeur à votre personnalisateur de thème pour le faire directement à partir du frontend.

Menu (probablement 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>

Ajoutez ensuite ceci à votre 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'    => 'Logo',
    'section'  => 'mytheme_logo_section',
    'settings' => 'mytheme_logo',
) ) );
}
add_action('customize_register', 'themeslug_theme_customizer');

Ne compliquez pas les choses quand vous n'en avez pas besoin aussi.

Les marcheurs peuvent rendre les choses plus compliquées si vous me demandez, car ils se superposent et avec tous les plugins sympas qui changent la fonctionnalité des menus, aucun d’entre eux ne fonctionne ensemble.

Cependant, si vous ne vous souciez pas de cela, téléchargez simplement un plugin qui fait déjà ce que vous voulez:

http://wordpress.org/plugins/menu-image/http://wordpress.org/plugins/nav-menu-images/screenshots/

Personnellement, je pense que les codes abrégés sont la voie à suivre en ce qui concerne les menus. Vous pouvez faire à peu près tout ce que vous voulez avec eux et ne pas perdre de jours à étendre la classe de marcheur.

Comment est-ce que tu fais ça? Choisissez les champs auxquels vous voulez appliquer les codes courts en premier. Voici un filtre "walker" pour le champ de description. Les chances sont que vous ne l'utilisez pas de toute façon. Pourrait aussi bien le rendre utile.

Ajoutez ceci à vous êtes 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);

Vous pouvez maintenant mettre des codes courts dans votre description et les afficher dans votre menu. Cela ne devrait pas non plus affecter votre thème si vous avez le support de description.

Comment ajoutez-vous des shortcodes d'images? https://wordpress.org/plugins/stag-custom-sidebars/

Vous permet de créer des barres latérales illimitées qui ne sont attribuées nulle part. Ajoutez un widget texte à une nouvelle barre latérale créée et ajoutez simplement:

<a itemprop="url" href="http://www.example.com/" title="My Company
Lawyers, Chicago"><img src="http://www.example.com" alt="My cool company" /></a>

Ce sont également d'excellents ajouts au shortcode qui vous permettront d'ajouter des shortcodes. J'ai trouvé que c'était le moyen le plus cohérent de créer des menus wordpress complexes, car il ajoute des options infinies à l'aide de widgets/contenu/images/icônes/etc. aux menus et ne désactive aucune fonctionnalité du menu. Notez que si vous ajoutez un shortcode au champ de description, il ne produira évidemment pas le champ de titre normal dans cet élément de liste de menu spécifique.

http://wordpress.org/plugins/widget-or-sidebar-per-shortcode/

http://wordpress.org/support/view/plugin-reviews/custom-content-shortcode

8
Bryan Willis