Ajouter un logo dans son menu wordpress

Petit tuto pour expliquer comment intégrer son logo dans la barre de menu wordpress, à la manière des menus bootstrap.Je pars ici sur un twenty-twelve mais ca devrait le faire sur tout wordpress.
On peut trouver des fonctions pour ca sur stackoverflow.

Ici je vais montrer comment procéder pour avoir quelque chose de dynamique, c’est à dire permettre à l’utilisateur de changer de logo quand il le souhaite.

Premièrement, le customizer

Je poste ici mon fichier customizer.php, situé dans le dossier inc, à la racine du blog:

<?php /** * ecommerceTheme Customizer. * * @package blackbear */ /** * Add postMessage support for site title and description for the Theme Customizer. * * @param WP_Customize_Manager $wp_customize Theme Customizer object. */ function blackbear_theme_customizer($wp_customize) { // Highlight and link color $wp_customize->add_setting('blackbear_link_color', array(

        'default' => '#ffffff',

        'transport' => 'postMessage',

        'sanitize_callback' => 'sanitize_hex_color',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'blackbear_link_color', array(

        'label' => __('Link and Highlight Color', 'blackbear'),

        'section' => 'colors',

        'settings' => 'blackbear_link_color',

    )));



    // Logo upload

    $wp_customize->add_section('blackbear_logo_section', array(

        'title' => __('Logo', 'blackbear'),

        'priority' => 30,

        'description' => __('Upload a logo to replace the default site name and description in the header', 'blackbear')

    ));



    $wp_customize->add_setting('blackbear_logo', array(

        'sanitize_callback' => 'esc_url_raw',

    ));



    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'blackbear_logo', array(

        'label' => __('Logo', 'blackbear'),

        'section' => 'blackbear_logo_section',

        'settings' => 'blackbear_logo',

    )));



   



 

}



add_action('customize_register', 'blackbear_theme_customizer');



function blackbear_sanitize_hex_color($color) {

    if ('' === $color)

        return '';



    // 3 or 6 hex digits, or the empty string.

    if (preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color))

        return $color;



    return null;

}







/**

 * Add CSS in <head> for styles handled by the theme customizer

 *

 * @since 1.5

 */

function blackbear_add_customizer_css() {

    $color = blackbear_sanitize_hex_color(get_theme_mod('blackbear_link_color'));

    ?>

    <!-- Debut customizer CSS -->



<style>

        body {

            border-color: <?php echo $color; ?>

        }

        a:visited {

            color: <?php echo $color; ?>

        }

        .main-navigation a:hover,

        .main-navigation .sub-menu a:hover,

        .main-navigation .children a:hover,

        .main-navigation a:focus,

        .main-navigation a:active,

        .main-navigation .current-menu-item > a,

        .main-navigation .current_page_item > a,

        .blackbear-lang:hover {

            background-color: <?php echo $color; ?>

        }

    </style>



    <?php

}



add_action('wp_head', 'blackbear_add_customizer_css');

J'ai rajouté la partie logo, pour qu' la "personnalisation " du thème en front, on puisse charger un logo.Point d'explication, faites un copier coller du code concernant le logo, allez jusqu'au bout, testez pour voir si ca marche, et si oui, revenez en arrière pour mieux comprendre ce que fait le code, ou comment il faut organiser son fichier customizer.

Deuxièmement, le fichier functions.php

Tout d'abord on y place l'appel à notre customizer:

require( get_template_directory() . '/inc/customizer.php' );

Ensuite, ca dépend des thèmes, certains le mettent la, d'autres dans le customizer.php directement: il faut enregistrer notre customizer et lui donner les liens vers les fichiers js nécessaires

function blackbear_customize_register( $wp_customize ) {

	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';

	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';

	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

}

add_action( 'customize_register', 'blackbear_customize_register' );



/**

 * Enqueue Javascript postMessage handlers for the Customizer.

 *

 * Binds JS handlers to make the Customizer preview reload changes asynchronously.

 *

 * @since Black Bear 1.0

 */

function blackbear_customize_preview_js() {

	wp_enqueue_script( 'blackbear-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20141120', true );

}

add_action( 'customize_preview_init', 'blackbear_customize_preview_js' );

Ensuite on code une fonction récupérée sur stackoverflow, mais améliorée pour pouvoir prendre en compte notre logo à l'intérieur du menu:

add_filter( 'wp_nav_menu_items', 'cc_add_logo_nav_menu', 10, 2 );

function cc_add_logo_nav_menu( $menu, stdClass $args ){

if ( 'primary menu' != $args->theme_location )

    return $menu;

$blackbear_logo = get_theme_mod( 'blackbear_logo' );

    if( $blackbear_logo != '' ) {

$menu .= '

<nav class="nav-image"><img decoding="async" src="' .$blackbear_logo . '/></nav>



';

return $menu;

}

}

J'ajoute un filtre sur wp_nav_menu_item;
Première condition pour dire si ce n'est pas mon menu, renvoie moi juste le menu tel quel
deuxième ligne pour déclarer mon logo : get_theme_mod( 'blackbear_logo' ); ici je vais chercher le logo généré par le customizer..Donc je dis ici, mon logo est celui généré par le customizer, s'il y a un logo, s'il n'est pas vide, rajoute moi dans mon menu la nav avec mon logo...

Troisièmement, le fichier header.php

Enfin, dans mon fichier header.php je code mon menu de la manière suivante:

une première condition pour dire si le customizer a un logo affiche le, sinon affiche le titre, puis mon menu wordpress généré par wp_nav_menu()

<nav id="site-navigation" class="main-navigation" role="navigation">

		<?php if (get_theme_mod('blackbear_logo')) : ?>

                                <a class="nav-logo" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel='home'><img src='<?php echo esc_attr(get_theme_mod('blackbear_logo')); ?>' class="img-responsive" alt='<?php echo esc_attr(get_bloginfo('name', 'display')); ?>'></a>

                            <?php else : ?>

                                <a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a>

                            <?php endif; ?>

			

                    <button class="menu-toggle"><?php _e( 'Menu', 'blackbear' ); ?></button>

			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'blackbear' ); ?>"><?php _e( 'Skip to content', 'blackbear' ); ?></a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

		</nav>



<!-- #site-navigation -->

C'est bien sur ici un exemple, mais c'est pour montrer comment créer un uploader de logo dans son customizer, s'en servir pour l'afficher sous condition en appellant ce logo dans le header et dans en créant la fonction dans functions.php

Enfin dans votre css, vous aurez certainement besoin de placer des float:left et right pour distinguer ces deux éléments, menu et logo.

22/09/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress