WordPress操作メモ

2026.05.30

将来的にWordPressの操作マニュアルを作ろうと思って、本サイトの制作過程で、操作メモを書き貯めていきます。最初は単階層で、量が増えたら複数階層に変えていきます。市販書は「さあ！こんなサイトを作ろう！」から始まりますが、こちらはそんな迎合的なものではなく、用語の意味を述べたり、画面ごとの操作を解説する「マニュアル」です。

●固定ページと投稿の使い分け

1. WPは本来は「投稿」を表示するブログソフト
本来の「投稿」は、新しい記事が随時、時系列で一番上に表示されて積み重なって表示されていきます。しかし、固定ページを中心としたサイトも構築できます。

項目投稿（Posts）固定ページ（Pages）
主な用途ブログ記事、お知らせ、日記、ニュース会社概要、数学塾の案内、お問い合わせ
時系列日付順に並ぶ（新しいものが上）日付に関係なく独立している
分類（整理）カテゴリーによる階層化ができる。
さらにタグでの仕分けも可能。		親ページ・子ページという階層を作れる。
カテゴリーと同様の階層化は可能

2. 「投稿」のカテゴリー（多重フォルダ）管理機能
固定ページを中心としたサイトを構築する際、固定ページには表示したくない大量なデータや記述を、リンク先に格納したい場合、外から見えないように、カテゴリーを使って多層的に格納するることができます。

●固定ページと投稿の追加

●固定ページの追加の手順

  1. 固定ページ一覧画面で固定ページを追加、順序調整
  2. 固定ページ画面で内容を記述
  3. 外観メニュー画面で「メニューに追加」、順序調整

●投稿の追加の手順

  1. 多階層のカテゴリーを設計
  2. 投稿一覧画面で投稿を追加、順序調整
  3. 投稿画面で内容を記述
  4. 外観メニュー画面でカテゴリーを選択して「メニューに追加」、順序調整

●見出しメニューの追加の手順

  1. 外観メニュー画面で「メニューに追加」、urlは「#」、内容記述は不要
  2. 外観メニュー右画面で位置調整、親子設定、「#」は削除


●キャッチフレーズを表示させる3つの必須条件（確定版）

  • 条件1：文字の入力
    「設定」＞「一般」の「キャッチフレーズ」欄に文章が入力されていること。
  • 条件2：レイアウトの選択
    「Cocoon設定」＞「ヘッダー」のヘッダーレイアウトで、必ず「センターロゴのいずれか」を選択していること。
  • 条件3：最初の画面の指定
    「設定」＞「表示設定」で、作成した固定ページをホームページ（最初の画面）に指定していること。

●グローバルメニュー（ヘッダーナビ）の制限

ヘッダーレイアウトで「トップメニュー」のいずれかを選択すると、画面上部に設定していたはずのメインメニュー（横並びのリンク集）が強制的に非表示になります。

●メニュー調整の手順
・フォントサイズ
　一括：　　　Cocoon 設定/全体/サイトフォント/文字サイズ
　個別：　　　外観/メニュー/メニュー項目/ナビゲーションラベル
・文字色：　　外観/メニュー/表示オプション/詳細メニュー設定を表示/CSS クラス
　　　　　　　外観/カスタマイズ/追加 CSS/blue-text
・下線：　　　外観/カスタマイズ/追加 CSS/

設定内容：

WordPressのメニュー設定で blue-text のクラスが付与されている項目だけを狙い、文字色・下線色をともに「#0000ff（青）」に指定。他と同様に文字の底辺から「1px（1pt）」空けて下線を引いています。目的：4番のグレー設定を後から上書きし、指定されたグループだけを確実に青文字・青下線にするため。

［メニュー設定要領］

  1. /* 1. 項目同士の行間を極限まで狭く固定 /
  2. .widget_nav_menu ul li {
  3. 　　 padding-top: 0 !important;
  4. 　　padding-bottom: 0 !important;
  5. 　　margin: 0 0 1px 0 !important;
  6. / 項目同士の縦の隙間 */
  7. }
  8. /* 2. すべての文字の余白を完全にゼロにし、下線を文字に密着させる /
  9. .widget_nav_menu ul li a {
  10. 　　 display: inline-block !important;
  11. 　　 下線を文字の長さぴったりにする
  12. 　　padding: 0 !important;
  13. 　　margin: 0 !important;
  14. 　　line-height: 1.1 !important; /
  15. 文字の上下余白を完全に排除 */
  16. 　　text-decoration: none !important;
  17. }
  18. /* 3. 【修正】見出し項目：左端（親階層）かつ「本当にURLが空欄、または#」の項目だけを黒字・下線なしにする / .widget_nav_menu ul.menu > li > a:not([href]),
  19. .widget_nav_menu ul.menu > li > a[href=””],
  20. .widget_nav_menu ul.menu > li > a[href=”#”] {
  21. 　　color: #000000 !important;
  22. 　　border-bottom: none !important;
  23. 　　padding-bottom: 0 !important;
  24. }
  25. /* 4. 通常のリンク付きメニュー（子階層、および親階層のリンクあり）：
  26. 【blue-textなし】濃いグレー・すぐ下1ptに青下線 /
  27. .widget_nav_menu ul.sub-menu li:not(.blue-text) a:not(.blue-text),
  28. .widget_nav_menu ul.menu > li > a[href]:not([href=””]):not([href=”#”]) {
  29. 　　color: #333333 !important;
  30. 　　padding-bottom: 1px !important;
  31. /* 文字の底辺から正確に1pt(1px)空ける */
  32. 　　border-bottom: 1px solid #0000ff !important;
  33. }
  34. /* 5. 中央のグループ（blue-text）：【blue-textあり】青文字・すぐ下1ptに青下線 /
  35. .widget_nav_menu ul.sub-menu li.blue-text a,
  36. .widget_nav_menu ul.sub-menu li a.blue-text {
  37. 　　color: #0000ff !important; padding-bottom:
  38. 　　1px !important; /
  39. 他と同様に正確に1pt(1px)空ける */
  40. 　　border-bottom: 1px solid #0000ff !important;
  41. }

●グループとテーブル：コンテナと要素
グループとは外枠（コンテナ / 枠組み）であって、画面上に物理的な制限範囲（枠）を確保するための構造（集合ではない）。
テーブルは要素（表そのもの）であって、グループの中に配置される中身です。

ホーム