cum să poziționezi logo-ul în centrul altor elemente din bara de navigare

8 iun. 2014, 23:44:18
Vizualizări: 19.4K
Voturi: 3

Dezvolt un website în WordPress și trebuie să creez o bară de navigare în care logo-ul site-ului să fie plasat între elemente, astfel:

element1 element2 LOGO element3 element4

Mă gândesc să folosesc clasa Walker dar nu știu de unde să încep. Aveți alte sugestii/mai bune? Mulțumesc!

0
Toate răspunsurile la întrebare 1
0

Aveți multe opțiuni. Adică s-ar putea realiza doar cu CSS. Majoritatea oamenilor petrec prea mult timp încercând să facă WordPress mai complex, când de fapt ar trebui să ne simplifice lucrurile. Probabil când veți termina, vă veți da seama că ați fi putut face lucrurile în 1/10 din timp folosind doar HTML.

Cea mai simplă opțiune este să creați două meniuri, stânga și dreapta, și apoi să adăugați o imagine între ele:

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

Sau chiar mai interesant, adăugați un uploader în personalizatorul temei pentru a face asta direct din interfața frontală.

Meniul (probabil localizat în 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>

Apoi adăugați acest cod în 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');

Nu complicați lucrurile când nu este nevoie.

Walkers pot face lucrurile mai complicate, deoarece se suprascriu unul pe altul, iar cu toate pluginurile interesante care modifică funcționalitatea meniurilor, niciunul nu funcționează împreună.

Totuși, dacă nu vă pasă de asta, pur și simplu descărcați un plugin care face deja ceea ce doriți:

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

Personal, cred că shortcode-urile sunt soluția când vine vorba de meniuri. Puteți face aproape orice doriți cu ele și nu veți pierde zile întregi extinzând clasa walker.

Cum faceți asta? Alegeți mai întâi câmpurile la care doriți să aplicați shortcode-uri. Iată un filtru "walker" pentru câmpul de descriere. Probabil nu îl folosiți oricum. Mai bine îl faceți util.

Adăugați asta în 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);

Acum puteți pune shortcode-uri în câmpul de descriere și acestea vor fi afișate în meniu. De asemenea, nu ar trebui să afecteze tema dacă aveți suport pentru descrieri.

Cum adăugați shortcode-uri pentru imagini? https://wordpress.org/plugins/stag-custom-sidebars/

Vă permite să creați un număr nelimitat de bare laterale care nu sunt asignate nicăieri. Adăugați un widget de text într-o nouă bară laterală creată și introduceți:

<a itemprop="url" href="http://www.example.com/" title="Compania mea Avocați, Chicago"><img src="http://www.example.com" alt="Compania mea cool" /></a>

Acestea sunt și câteva adăugiri excelente de shortcode-uri care vă vor permite să adăugați shortcode-uri. Am descoperit că aceasta este cea mai consistentă metodă de a construi meniuri complexe în WordPress, deoarece adaugă opțiuni nelimitate prin utilizarea de widget-uri/conținut/imagini/icoane/etc. în meniuri și nu dezactivează nicio funcționalitate a meniului. Rețineți că, dacă adăugați un shortcode în câmpul de descriere, acesta nu va afișa câmpul normal de titlu în acel element specific al listei de meniu.

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

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

9 iun. 2014 00:59:34