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

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

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

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

やった事

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

css
1#global-nav #menu-item-home

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

css
1#global-nav #menu-item-数字

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

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

html
1（略）
2<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>
3<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>
4<ul class="sub-menu">
5	<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>
6	<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>
7	<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>
8</ul>
9</li>
10<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>
11<ul class="sub-menu">
12	<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>
13	<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>
14	<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>
15	<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>
16</ul>
17</li>
18<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>
19<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>
20</ul></nav>
21（略）

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

css
1（略）
2#global-nav #menu-item-home {
3	background-image: url(../images/nav/menu_home.png);
4	width: 194px;
5}
6#global-nav #menu-item-about {
7	background-image: url(../images/nav/menu_about.png);
8}
9#global-nav #menu-item-mall {
10	background-image: url(../images/nav/menu_mall.png);
11}
12#global-nav #menu-item-column {
13	background-image: url(../images/nav/menu_column.png);
14}
15#global-nav #menu-item-inquiry {
16	background-image: url(../images/nav/menu_inquiry.png);
17	width: 194px;
18}
19（略）

を
css/nav.css

css
1（略）
2#global-nav #menu-item-100 {
3	background-image: url(../images/nav/menu_home.png);
4	width: 194px;
5}
6#global-nav #menu-item-109 {
7	background-image: url(../images/nav/menu_about.png);
8}
9#global-nav #menu-item-104 {
10	background-image: url(../images/nav/menu_mall.png);
11}
12#global-nav #menu-item-113 {
13	background-image: url(../images/nav/menu_column.png);
14}
15#global-nav #menu-item-103 {
16	background-image: url(../images/nav/menu_inquiry.png);
17	width: 194px;
18}
19（略）

としてみました。

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

yoshinavi

2018/03/18 07:55

この提示コードでは不明です。「書き換えると出来ると書いてありますが、書き換えても表示されません。」とありますが、単純に「home→100」「about→109」などの書き換えで表示されるようになっているのでしょうか？再度、確認が必要と思います。

taro_nii_chan

2018/03/19 09:42

ありがとうございます。ソースコードが <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> とidがmenu-item-100となっているのでcss/nav.cssの「#menu-item-home」を「#menu-item-100」に、 <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> となっているのでcss/nav.cssの「#menu-home-about」を「#menu-item-109」に（以下同文）と対応した数字に修正することでグローバルナビゲーションが表示されると書籍に書いてあります。数字は環境に依存するので環境に応じた数字に書き換えるようにと言う主旨の説明です。

yoshinavi

2018/03/26 06:40

同じ資料が手元には無いので、推測ですが、idとclassに同名があるので、どこかでの誤記述かもしれません。セレクタの誤記述かもしれません。再度見直しをされると良いかもです。

taro_nii_chan

2018/03/26 11:25

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

yoshinavi

2018/03/26 12:00

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