it-swarm.com.de

so platzieren Sie das Logo in der Mitte anderer Elemente in der Navigationsleiste

Ich entwickle eine Website in WordPress und muss eine Navigationsleiste erstellen, in der das Logo der Website zwischen den folgenden Elementen platziert werden muss:

item1 item2 LOGO item3 item4

Ich überlege, die Klasse Walker zu verwenden, weiß aber nicht, wo ich anfangen soll. Haben Sie andere/bessere Vorschläge? Vielen Dank!

3
DamianFox

Sie haben viele Möglichkeiten. Ich meine, es könnte mit nur CSS erreicht werden. Die meisten Leute verbringen zu viel Zeit damit, WordPress komplexer zu gestalten, wenn es darum geht, die Dinge für uns zu vereinfachen. Wenn Sie fertig sind, werden Sie wahrscheinlich feststellen, dass Sie die Dinge in einem Zehntel der Zeit erledigt haben könnten, wenn Sie nur HTML verwenden.

Am einfachsten ist es, links und rechts nur zwei Menüs zu erstellen und dazwischen ein Bild hinzuzufügen:

<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>

Oder noch cooler, fügen Sie Ihrem Theme-Customizer einen Uploader hinzu, um dies direkt vom Frontend aus zu tun.

Menü (wahrscheinlich 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>

Dann füge dies zu deinem functions.php hinzu:

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');

Machen Sie Dinge nicht komplizierter, wenn Sie sie nicht brauchen.

Wanderer können die Dinge komplizierter machen, wenn Sie mich fragen, weil sie sich gegenseitig überschreiben und mit all den coolen Plugins, die die Menüfunktionen ändern, keiner von ihnen zusammenarbeitet.

Wenn dir das jedoch nichts ausmacht, lade einfach ein Plugin herunter, das bereits das tut, was du willst:

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

Ich denke, Shortcodes sind der richtige Weg, wenn es um Menüs geht. Sie können so ziemlich alles tun, was Sie wollen, und verschwenden keine Tage damit, die Walker-Klasse zu erweitern.

Wie machst Du das? Wählen Sie die Felder aus, auf die Shortcodes zuerst angewendet werden sollen. Hier ist ein "Walker" -Filter für das Beschreibungsfeld. Vermutlich nutzt du das sowieso nicht. Könnte es auch nützlich machen.

Fügen Sie dies zu ihrer functions.php hinzu:

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);

Sie können nun Shortcodes in Ihre Beschreibung einfügen und diese in Ihrem Menü ausgeben. Es sollte sich auch nicht auf Ihr Thema auswirken, wenn Sie Unterstützung für Beschreibungen haben.

Wie fügt man Bild-Shortcodes hinzu? https://wordpress.org/plugins/stag-custom-sidebars/

Hiermit können Sie eine unbegrenzte Anzahl von Seitenleisten erstellen, die nirgendwo zugewiesen sind. Fügen Sie einer neu erstellten Seitenleiste ein Text-Widget hinzu und fügen Sie einfach Folgendes hinzu:

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

Dies sind auch einige großartige Shortcode-Ergänzungen, mit denen Sie beide Shortcodes hinzufügen können. Ich habe festgestellt, dass dies die konsistenteste Methode ist, um komplexe WordPress-Menüs zu erstellen, da sie mit Widgets/content/images/icons/etc endlose Optionen bietet. zu Menüs und deaktiviert keine Funktionen des Menüs. Beachten Sie, dass das normale Titelfeld in diesem einen bestimmten Menülistenelement nicht ausgegeben wird, wenn Sie dem Beschreibungsfeld einen Shortcode hinzufügen.

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

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

8
Bryan Willis