web-dev-qa-db-ja.com

メニューナビゲーションラベルにHTMLを出力させる方法

私はWordPressのメニューをスタイルする方法についての Jason Bradleyのアドバイス に従っています。

具体的には、 Font-Awesome を使用してナビゲーション項目の前にアイコンを挿入します。

私の "Home"リンクのNavigation Labelフィールドにこのコードを入れてみました。

<i class="icon-fixed-width icon-home"></i> Home

ただし、ブラウザでページを表示すると、HTMLがそのまま表示され、タグやその他のHTMLは解釈されません。

Wordpressのメニューは3.6で変更されましたか？明らかなものが足りないのですか。

私は自分のサイト全体でそれらのアイコンを使用しているので、私のフォント素晴らしいインストールがうまくいくことを知っています。ありがとう。

menusnavigationicon
1
JP Lew

"Navigation"フィールドはCSSクラスを配置したい場所にないです。ナビゲーションはユーザーがメニューに表示するものなので、そこにコードを入れないでください。

アイテムにカスタムCSSクラスを入力するには、次の手順を実行する必要があります。

  • ページの右上隅にある[画面オプション]タブをクリックします。
  • [詳細メニューのプロパティを表示]で、[CSSクラス]チェックボックスをオンにします。
  • これで、すべてのメニュー項目について、「CSSクラス（オプション）」というラベルの付いたフィールドに「icon-fixed-width icon-home」と入力できます。

仕事は終わった！ :)

3
Manu

ページIDを使用してカスタムナビゲーションタイトルを取得します。

function get_custom_nav_title( $menu_name, $page_id ) { 
    $args = array(
        'order'                  => 'ASC',
        'orderby'                => 'menu_order',
        'post_type'              => 'nav_menu_item',
        'post_status'            => 'publish',
        'output'                 => ARRAY_A,
        'output_key'             => 'menu_order',
        'nopaging'               => true,
        'update_post_term_cache' => false 
    );
    $items = wp_get_nav_menu_items( $menu_name, $args );
    //print_r( $items );
    foreach ( $items as $item ) {
        if ( $item->object_id == $page_id ) {
            return $item->title;
        }
    }   
}
1
Rahul Mishra