Cómo colocar el logo en el centro de otros elementos en la barra de navegación

8 jun 2014, 23:44:18
Vistas: 19.4K
Votos: 3

Estoy desarrollando un sitio web en WordPress y necesito crear una barra de navegación donde el logo del sitio debe colocarse entre elementos como este:

elemento1 elemento2 LOGO elemento3 elemento4

Estoy considerando usar la clase Walker pero no sé por dónde empezar. ¿Tienen otras/mejores sugerencias? ¡Gracias!

0
Todas las respuestas a la pregunta 1
0

Tienes muchas opciones. Quiero decir, podría lograrse solo con CSS. La mayoría de las personas pasan demasiado tiempo tratando de hacer WordPress más complejo cuando se supone que debe simplificarnos las cosas. Lo más probable es que cuando termines te des cuenta de que podrías haberlo hecho en 1/10 del tiempo simplemente usando HTML.

La opción más simple es crear dos menús, izquierdo y derecho, y luego agregar una imagen en el medio:

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

O incluso mejor, agrega un cargador al personalizador de temas para hacerlo directamente desde el frontend.

Menú (probablemente ubicado en 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>

Luego agrega esto a tu 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');

No compliques las cosas cuando no es necesario.

Los Walkers pueden complicar las cosas, en mi opinión, porque se sobrescriben entre sí y con todos los plugins geniales que cambian la funcionalidad de los menús, ninguno funciona bien juntos.

Sin embargo, si no te importa eso, simplemente descarga un plugin que ya haga lo que deseas:

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

Personalmente, creo que los shortcodes son el camino a seguir cuando se trata de menús. Puedes hacer prácticamente cualquier cosa con ellos y no perder días extendiendo la clase Walker.

¿Cómo se hace esto? Primero elige los campos a los que deseas aplicar los shortcodes. Aquí hay un filtro "walker" para el campo de descripción. Lo más probable es que no lo uses de todos modos. Mejor hazlo útil.

Agrega esto a tu 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);

Ahora puedes poner shortcodes en tu campo de descripción y se mostrarán en tu menú. Tampoco debería afectar tu tema si tienes soporte para descripciones.

¿Cómo agregas shortcodes de imágenes? https://wordpress.org/plugins/stag-custom-sidebars/

Te permite crear barras laterales ilimitadas que no están asignadas a ningún lugar. Agrega un widget de texto a una nueva barra lateral creada y simplemente añade:

<a itemprop="url" href="http://www.example.com/" title="Mi Empresa
Abogados, Chicago"><img src="http://www.example.com" alt="Mi empresa genial" /></a>

Estos son algunos complementos geniales de shortcodes que te permitirán agregar shortcodes. He encontrado que esta es la forma más consistente de construir menús complejos en WordPress porque agrega opciones infinitas al usar widgets/contenido/imágenes/iconos/etc. en los menús y no deshabilita ninguna funcionalidad del menú. Ten en cuenta que si agregas un shortcode al campo de descripción, obviamente no mostrará el campo de título normal en ese elemento específico de la lista del menú.

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

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

9 jun 2014 00:59:34