初心者・独学でもわかる！WordPressの教本でつまずきやすい操作と解決法 Part1-固定ページ・メニュー・CSS
「WordPressを教本で学習中の独学者が、よくつまずく操作系の盲点」に焦点を当てた、実務者目線の有益なコンテンツです。
WordPressの教本を読みながらサイトを作っていて、 「あれ？これ、設定したのに反映されない…」 「ページを公開しないと動かないの？」 そんな“教本だけでは気づきにくい落とし穴”にハマったことはありませんか？
今回は、Wordpressを専門書で学習していて、初心者が「？」になりそうなことを書いていきます。
このページでは、初心者がつまずきやすい「固定ページの親子設定」「メニュー項目の扱い方」「サイトマップとCSS追加」などの操作について、実際の管理画面と動作のつながりを理解できるように解説します。
初めて使う方や独学で学ぶ方でも、自信をもって操作できるようになります！
「ぼくら」の失敗談
1.親子ページにしたのに、子ページが表示されない。さらに、追加した固定ページがメニューに表示されない。⇒どちらも、「公開状態」のページにすれば表示される。
2.メニューといえば、グローバルメニューを指すと思っていた。⇒他にも、メニューには、パンくずリスト（現在位置の表示）やサイドメニュー（ナビゲーションバー）などがある。
1.固定ページの親子関係設定と注意点
WordPressの固定ページで「親子関係をうまく設定できない」「順番を変えても反映されない」という場面でつまずきがちなので、原因・確認方法・設定時の注意点を実務者目線でわかりやすく整理します。
メニュー項目は、5～7程度が理想的です。メニュー項目が多いときには、階層化がひとつの手段になります。
例えば、「管理画面」＞「外観」＞「メニュー」で、「○○アトリエ」という親メニューの下に「展覧会」「油彩画集」などの子メニューをつくるのです。「○○アトリエ」上にカーソルを持っていくと、子メニューの「油彩画集」などがその下に表示されるようになります。
⑴.公開状態にしていないと親ページへの紐付けが反映されない理由
①WordPressの動作仕様による制限
・非公開ページは「存在するけど、サイト構成には反映されない」扱いになります。
・管理画面では作成した内容が表示されますが、メニュー・リンク階層・サイトマップなどには表示されない仕様です。
②よくある誤解
・「親ページに設定したのに、子ページが表示されない…」
・これは、子ページが下書きや非公開状態だと、階層上の接続がサイト上には反映されないためです。
＊回避策：「設定作業中だけ一時的に公開」にしておくのがおすすめ → 公開後、設定確認 → 必要があれば再度「非公開」に戻します。
⑵.管理画面での確認方法（名前の前の「ー」）
固定ページ一覧に、子ページのタイトルの前に「ー（ハイフン）」が表示されていれば親子関係になっています。
⑶.並び順の変更と「0番」から始める注意点
固定ページ一覧 ＞「クイック編集」→「順序」欄に数値を入力
数値が小さい順に表示されます。 （例：0 → 1 → 2 → …）
「順序の初期値は空欄」＝0と同じに見えます。明示的に「0番」「1番」などを設定することで、表示順をコントロールできるようになります。
すべての子ページに「順序値」を入れて、0番から始めて連番で並べるのが基本ルールです。
2.メニュー設定でつまずきやすいポイント
WordPressのメニュー設定は、見た目以上に「公開状態」「階層関係」「テーマとの連携」が影響するため、独学者が理解しづらくてつまずきがちな箇所です。ここでは、初心者が実際によく混乱するポイントを“原因・症状・回避策”つきでわかりやすく解説します。
⑴.ページを「公開」していないと、メニューに表示されない
症状： メニュー編集画面で、追加したい固定ページ名が表示されない
理由： WordPressは「公開状態のページ」しかメニュー候補に読み込まない
回避策： メニューに登録したいページは、一時的に「公開」にして作業する（完了後に非公開可）
⑵.階層メニューを作ったのに、表示が崩れる or 反映されない
症状： サブメニューが表示されない／位置がバラバラ
理由： ドラッグ＆ドロップで親子関係を設定していない、テーマが階層表示に未対応
回避策：
- メニュー編集画面で「1段下にドラッグ」して、親子関係をつくる
- テーマによって階層メニュー非対応の場合がある → 初心者は「Lightning」など基本機能が揃ったテーマを使うと安心
⑶.メニューの表示位置が想定と違う（ヘッダー・フッターに出ない）
症状： 作ったはずのメニューがページ上に反映されない
理由： 「メニューの位置指定」が設定されていない／テーマが複数位置に対応している
回避策：
- 管理画面＞外観＞メニュー＞「位置の管理」タブで「メインメニュー」や「フッターメニュー」などに割り当てる
- 「このテーマで使用できる位置」を事前に確認する
⑷.メニュー項目が多すぎて、崩れる or 読みにくい
症状： スマホで表示が崩れる／一覧性がなくなる
理由： メニュー項目が8個以上、かつ階層化していないと見づらくなる
回避策：
- 基本は「5〜7個」で設計するとユーザーが迷わない
- 階層メニューにして整理すると、ナビゲーションがわかりやすくなる
3.メニューは「グローバルメニュー」だけではない
WordPressには他にも以下のメニューがあります：
- ハンバーガーメニュー（スマホ）
- パンくずリスト（現在位置の表示）
- サイドメニュー（ナビゲーションバー）
- コンテキストメニュー（右クリック系）
- ドロップダウンメニュー（階層型）
4.サイトマップ作成とCSSの追加方法
WordPressでのサイトマップ作成とCSS追加は、学習者が「反映されない」「操作場所がわからない」と迷いやすいポイントですが、設定がわかればとても便利な機能です。ここでは、独学者が使いやすいように、UIの動きと注意点を中心にわかりやすく整理して解説します。
⑴.HTMLサイトマップ作成と「公開状態でないと表示されない」理由
非公開ページが表示されない理由
| 状況 | 原因 |
|---|---|
| サイトマップを設置したが一部ページが出ない | ページが「下書き」や「非公開」になっているため |
| サイトマップページ自体が表示されない | サイトマップページがまだ「公開」になっていないため |
回避策：
教本では「書けばOK」と見えるけど、表示には“公開状態”が必要なのが注意点！
- サイトマップページ自体を「公開」に変更する（下書きだとサイトに表示されない）
- 各子ページも「公開」設定にしておく → 非公開ページはサイト構造に含まれない扱いになる
⑵.CSSの追加方法
管理画面の 外観＞カスタマイズ を選択して、左サイドメニューから [追加 CSS] を選択してもよいのですが、ページのカスタマイズで左サイドのメニューから [追加 CSS]を選択したほうが簡単です。（テーマによって「表示場所」や「CSSの反映方法」が異なります。）
入力後は右側のプレビューで即時反映されます →「公開」ボタンを押して保存します。
UIが分かりやすく、リアルタイムで確認できます。
