質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

WordPressでグローバルナビゲーションが表示されません

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,352

taro_nii_chan

score 197

 WordPressの入門書でつまづいています

WordPressを「WordPressの教科書 Ver4.x 対応版」という本で勉強し始めたところです。
Webサーバはローカル(MAMP)でやっています。
WordPressのバージョンは4.9.4–jaです。

Chapter3まで進んだところで「プラグイン」なのか「テーマ」なのかそれ以外なのか忘れましたがスマホで言うところのバッジみたいな赤い丸があって「更新」とあったのでクリックしたら見た目が大きく変わってしまいました。
そこでサンプルコードのChapter2までの出来上がったもので上書きしてChapter3から再度始めようと思ったのですが、グローバルナビゲーションが表示されなくなってしまっています。

 やった事

本(p.98)には表示されないのが正常で、表示させるには
css/nav.css

#global-nav #menu-item-home


をブラウザでソースコード表示した対応する部分のidの

#global-nav #menu-item-数字


に書き換えると出来ると書いてありますが、書き換えても表示されません。

具体的には、ソースコード表示は

(略)
<nav id="global-nav" class="menu-global-container"><ul id="menu-global" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-83 current_page_item menu-item-100"><a href="http://localhost/wordpress/">トップページ</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="http://localhost/wordpress/about/">会社概要</a>
<ul class="sub-menu">
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://localhost/wordpress/about/business/">事業紹介</a></li>
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://localhost/wordpress/about/history/">沿革</a></li>
    <li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://localhost/wordpress/about/access/">アクセスマップ</a></li>
</ul>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-104"><a href="http://localhost/wordpress/mall/">モール開発実績</a>
<ul class="sub-menu">
    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://localhost/wordpress/mall/tokyo/">汐留モール</a></li>
    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://localhost/wordpress/mall/singapore/">ドリアンモール</a></li>
    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://localhost/wordpress/mall/bangkok/">チャオプラヤモール</a></li>
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://localhost/wordpress/mall/jakarta/">タムリンモール</a></li>
</ul>
</li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="http://localhost/wordpress/archives/category/column/">コラム</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/wordpress/inquiry/">お問い合わせ</a></li>
</ul></nav>
(略)


となっていたので、
css/nav.css

(略)
#global-nav #menu-item-home {
    background-image: url(../images/nav/menu_home.png);
    width: 194px;
}
#global-nav #menu-item-about {
    background-image: url(../images/nav/menu_about.png);
}
#global-nav #menu-item-mall {
    background-image: url(../images/nav/menu_mall.png);
}
#global-nav #menu-item-column {
    background-image: url(../images/nav/menu_column.png);
}
#global-nav #menu-item-inquiry {
    background-image: url(../images/nav/menu_inquiry.png);
    width: 194px;
}
(略)



css/nav.css

(略)
#global-nav #menu-item-100 {
    background-image: url(../images/nav/menu_home.png);
    width: 194px;
}
#global-nav #menu-item-109 {
    background-image: url(../images/nav/menu_about.png);
}
#global-nav #menu-item-104 {
    background-image: url(../images/nav/menu_mall.png);
}
#global-nav #menu-item-113 {
    background-image: url(../images/nav/menu_column.png);
}
#global-nav #menu-item-103 {
    background-image: url(../images/nav/menu_inquiry.png);
    width: 194px;
}
(略)


としてみました。

何か分かることがありましたら教えてください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • taro_nii_chan

    2018/03/26 20:25

    なるほど、言われてみるとidとclassに同じ名前が着いていますね。再確認してみます。と同時に、Chapter2まで出来上がっていると本には書いてあるソースに頼らず別ディレクトリにWordPressをインストールして初めからやってみようかとも思っています。回り道ですが繰り返しで理解も深まるかと思いまして。依頼ありがとうございます。

    キャンセル

  • yoshinavi

    2018/03/26 21:00

    理解する、覚える、という意味では再度やり直す方が、手間は掛かりますが、理解せず進めるよりは今後を考えると、遥かに有効だと思います。

    キャンセル

  • KentaroShikada

    2019/08/17 17:44

    全く同じ箇所でつまづいています!
    どのような解決方法がありますか?

    キャンセル

回答 1

check解決した方法

0

解決はしてないのですが、
他のこと(laravel)に注力しなければならない状況になったので
一旦この質問はクローズさせていただきます。

teratailに「あきらめる」機能があればそれを使うところなのですが今の所ないようなので。
次回の「集まっtail」の時にでも話題に上げてみようと思います。

ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る