web-dev-qa-db-ja.com

ナビゲーションバーの他の項目の中央にロゴを配置する方法

私はワードプレスでウェブサイトを開発しています、そして私はウェブサイトのロゴがこのような項目の間に置かれなければならないナビゲーションバーを作成しなければなりません：

item1 item2 LOGO item3 item4

私はWalkerクラスを使うことを考えていますが、どこから始めればいいのかわかりません。他に良い提案がありますか？ありがとうございます。

phpmenus
3
DamianFox

たくさんの選択肢があります。私はそれがちょうどCSSで達成できたことを意味します。それは私たちのために物事を簡素化することになっているときほとんどの人はWordpressをより複雑にしようとするのにあまりにも多くの時間を費やします。 hdmlを使用するだけで、1/10の時間で物事を成し遂げることができたことに気付くでしょう。

最も簡単な方法は、左右に2つのメニューを作成して、その間に画像を追加することです。

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

あるいは、もっとクールな場合でも、フロントエンドから直接実行するために、アップローダをテーマカスタマイザに追加してください。

メニュー（おそらく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>

それからこれをあなたの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');

あなたがあまり必要としないときに物事を複雑にしないでください。

ウォーカーは、あなたが私に尋ねると物事をより複雑にする可能性があります。それらはお互いを上書きし、メニュー機能を変更するすべてのクールなプラグインと一緒には機能しません。

あなたがそれを気にしないのであれば、単にあなたが欲しいものを既にしているプラ​​グインをダウンロードしてください：

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

個人的には、メニューに関してはショートコードが適しています。あなたはほとんどあなたが彼らと一緒にやりたいことを何でもすることができ、ウォーカークラスを拡張する日々を無駄にしません。

これどうやってやるの？ショートコードを最初に適用するフィールドを選択します。これはdescriptionフィールド用の "walker"フィルタです。オッズはあなたがとにかくそれを使用していないということです。それを便利にするかもしれません。

これをあなたの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);

あなたは説明フィールドにショートコードを入れることができます、そしてそれはあなたのメニューにそれらを出力します。説明のサポートがある場合は、テーマにも影響しません。

画像のショートコードをどのように追加しますか？ https://wordpress.org/plugins/stag-custom-sidebars/ /

どこにも割り当てられていない無制限のサイドバーを作成できます。新しく作成したサイドバーにテキストウィジェットを追加して、以下を追加するだけです。

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

これらはどちらもあなたがショートコードを追加できるようにするいくつかの素晴らしいショートコードの追加です。これは、ウィジェット/コンテンツ/画像/アイコンなどを使用して無限のオプションを追加するため、これが複雑なワードプレスメニューを構築するための最も一貫した方法であることがわかりました。メニューに追加して、メニューの機能を無効にすることはありません。説明フィールドにショートコードを追加した場合、その特定のメニューリスト項目の通常のタイトルフィールドは出力されません。

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

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

8
Bryan Willis