サポート » 使い方全般 » グローバルナビの更新

  • WordPress初心者です。
    “WordPressの教科書2″を使ってサイトを制作しております。
    P.65のグローバルナビゲーションについての質問です。
    “wp_nav_menu”を使ってグローバルナビゲーションを実装しました。
    “wp_nav_menu”にslugのクラス属性を追加しています。
    一度クラス登録したナビゲーションの画像データを新しいものに変更したいのですが、どのようにすれば出来ますでしょうか。
    保存先フォルダ内のナビゲーションの画像を更新しても、サイトには反映されませんでした。

    コードを下記します。
    <header.php>

    add_filter('nav_menu_css_class', 'apt_slug_nav', 10, 2);
      wp_nav_menu(array(
        'container' => 'div',
        'container_id' => 'global_nav',
        'theme_location' => 'place_pc_global',
        'depth' => 3,
      ));
      remove_filter('nav_menu_css_class', 'apt_slug_nav');

    <functions.php>

    // wp_nav_menuにslugのクラス属性を追加する。
    function apt_slug_nav($css, $item) {
      if ($item->object == 'page') {
        $page = get_post($item->object_id);
        $css[] = 'menu-item-slug-' . esc_attr($page->post_name);
      }
      return $css;
    }

    初歩的な質問かもしれませんが、お答えいただけると幸いです。
    よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    現在のバージョンのWordPressでは、そういった難しいコードを書かなくても大丈夫です

    外観 / メニュー を開いて、画面右上のScreen Optionsを開きます

    Show advanced menu properties(日本語になっていると思いますが)
    のcss classesにチェックを入れると、メニューのそれぞれに、CSS Classを入力するフィールドが表示されるので、そこに半角英数で、わかりやすいクラス名を入力します

    あとは、CSSで、背景画像を指定してやればいいです。

    トピック投稿者 whii09p40

    (@whii09p40)

    ご回答いただきありがとうございます。

    早速ご回答を参考に変更させていただきました。
    クラス名を指定後、スタイルシートに下記のように追記したのですが、変更が適応されないままです。

    .toppage {
      background-image: url("../images/nav/menu01.png") }

    他にしなければならないことなどはありますか。
    知識が乏しくてすみません。

    .toppage {
      background-image: url("../images/nav/menu01.png") }

    “WordPressの教科書2″を持っていないので、確認させていただきますが

    imagesディレクトリは、wp-content/themes/images/ になんですか?

    imagesディレクトリは、wp-content/themes/(theme name)/images/ じゃありませんか?

    であれば、

    .toppage {
      background-image: url("images/nav/menu01.png")
    }
    トピック投稿者 whii09p40

    (@whii09p40)

    nobitaさん、
    ご回答いただきありがとうございます。
    無事表示されました!
    初歩的なことに丁寧にご対応いただきとても感謝しております!
    ありがとうございました!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「グローバルナビの更新」には新たに返信することはできません。