WordPressの教科書でグローバルメニューが表示されないときの対処

あなた

WordPressのサイトを構築できるようにWordPressの教科書を購入したものの、グローバルメニューを設定する98ページでうまくメニューが表示されない。番号もあっているはずなのに、なぜ・・・

という方向けの記事となっています。

セイタ

こんにちは、セイタです。

先程、ぼくもWordPressの教科書を実践していて、グローバルメニューの表示する部分でつまずき3時間を費やしました。

方法としては、簡単な方法でした。

まずは、基本的な方法について再確認していきましょう。

WordPressの教科書でグローバルメニューが表示されないときの対処方法

基本的な改善方法は、下記の2点になります。

WordPressの教科書で制作しているサイトのHTMLを確認

製作中のページを右クリックして、『ページのソースを表示』という項目をクリックすると、該当のページのHTMLが表示されるかと思います。

そこで、『Ctrl + F』もしくは、Macユーザーだったら『⌘ + F』を押すと、ページ内検索のテキストモーダルが表示されるので、その部分に『li id="menu-item-』と入力して検索を行ってください。

そうすることで、nav.cssの『#global-nav #menu-item-home』その他5項目の書き換える数字が確認できると思います。

その数字を間違いなく入力しFTTPもしくは、使っているFTPソフトのCSSフォルダの中にアップロードし、上書き保存をしてください。

トップページで再読込を行い、グローバルメニューが正常に表示されればOKです。

キャッシュを削除する

もう一つの解決方法が『キャッシュの削除』です。

CSSが反映されないときは、キャッシュの削除を行えば改善する可能性があると知っていながらも、頭がはてなでいっぱいになっていると盲点となってしまいます。

ここでは、Chromeを元に手順を解説します。

以上で作業完了です。

以上2点の方法でグローバルメニューが正常に表示されるかと思いますので、確認をしてみてください。

問題解決にはググる力と、知識の引き出しの多さが重要

WordPressの教科書という名書に油断して、解説どおりに進めていればストップすること無く進めると油断していました。

今回のケースでうまくいかない人は一定数いるようで、ググったところteratailや公式の回答などがあったのですが、どれも解決に直結するものではありませんでした。

恐らく、CSSがうまく反映されない場合、キャッシュの削除を行うというのは常識という認識の中で書かれているためか、書籍内にもその対処法は載っておらず･･･

teratailのページでも、当たり前なのですが一部のコードしか載せていないため回答者の方は摩訶不思議な状態でもなんとか心当たりのある知識で回答されていました。

こちらのページで紹介した方法を実践していただくことで、先に進めるようになるかと思いますので、是非お試しいただいてWordPressの教科書でサイト制作の学習を進めてください。