come posizionare il logo al centro tra gli altri elementi nella barra di navigazione
Sto sviluppando un sito in WordPress e devo creare una barra di navigazione in cui il logo del sito deve essere posizionato tra gli elementi del menu in questo modo:
item1 item2 LOGO item3 item4
Sto valutando di usare la classe Walker
ma non so da dove iniziare. Avete altri/suggerimenti migliori? Grazie!
Hai molte opzioni. Voglio dire, potrebbe essere ottenuto solo con il CSS. La maggior parte delle persone passa troppo tempo a cercare di rendere WordPress più complesso quando dovrebbe semplificarci le cose. Probabilmente quando avrai finito ti renderai conto che avresti potuto fare le cose in 1/10 del tempo utilizzando semplicemente HTML.
L'opzione più semplice è creare due menu, uno a sinistra e uno a destra, e poi aggiungere un'immagine nel mezzo:
<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="La mia Azienda"><img src="http://www.example.com" alt="La mia fantastica azienda" /></a>
<?php wp_nav_menu( array( 'theme_location' => 'right', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
O ancora meglio, aggiungi un caricatore al personalizzatore del tema per farlo direttamente dal frontend.
Menu (probabilmente situato in 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>
Poi aggiungi questo al tuo 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');
Non complicare le cose quando non è necessario.
I Walker possono rendere le cose più complicate secondo me, perché si sovrascrivono a vicenda e con tutti i fantastici plugin che cambiano la funzionalità dei menu, nessuno di essi funziona insieme.
Tuttavia, se non ti interessa, scarica semplicemente un plugin che fa già quello che vuoi:
http://wordpress.org/plugins/menu-image/ http://wordpress.org/plugins/nav-menu-images/screenshots/
Personalmente, penso che gli shortcode siano la strada da percorrere quando si tratta di menu. Puoi fare praticamente tutto quello che vuoi con loro e non sprecare giorni estendendo la classe Walker.
Come si fa questo? Scegli prima i campi a cui vuoi applicare gli shortcode. Ecco un filtro "walker" per il campo descrizione. Probabilmente non lo usi comunque. Tanto vale renderlo utile.
Aggiungi questo al tuo 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);
Ora puoi inserire shortcode nel tuo campo descrizione e verranno visualizzati nel tuo menu. Inoltre, non dovrebbe influenzare il tuo tema se hai già il supporto per le descrizioni.
Come aggiungi shortcode per le immagini? https://wordpress.org/plugins/stag-custom-sidebars/
Ti permette di creare un numero illimitato di sidebar che non sono assegnate da nessuna parte. Aggiungi un widget di testo a una nuova sidebar creata e inserisci semplicemente:
<a itemprop="url" href="http://www.example.com/" title="La mia Azienda
Avvocati, Chicago"><img src="http://www.example.com" alt="La mia fantastica azienda" /></a>
Questi sono anche alcuni ottimi plugin per shortcode che ti permetteranno di aggiungere shortcode. Ho trovato che questo sia il modo più coerente per costruire menu complessi in WordPress perché aggiunge opzioni infinite utilizzando widget/contenuti/immagini/icone/ecc. nei menu e non disabilita alcuna funzionalità del menu. Nota che se aggiungi uno shortcode al campo descrizione, ovviamente non mostrerà il normale campo titolo in quell'elemento specifico del menu.
http://wordpress.org/plugins/widget-or-sidebar-per-shortcode/
http://wordpress.org/support/view/plugin-reviews/custom-content-shortcode
