自動生成されるclassやid

🧭 1. ナビゲーションメニュー（wp_nav_menu()）

🔹 自動生成される構造

<ul id="menu-header-menu" class="menu">
  <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item">
    <a href="/about/">会社概要</a>
  </li>
</ul>

🔸 自動付与される主なクラス・ID一覧

要素自動付与属性説明
<ul>id="menu-{スラッグ}"メニュー名（スラッグ）が自動反映される。
class="menu"すべてのメニュー共通。
<li>id="menu-item-{番号}"メニュー登録時に自動で採番。
class="menu-item"全項目共通。
menu-item-type-{type}投稿タイプなど。例：menu-item-type-post_type / menu-item-type-custom
menu-item-object-{object}対象オブジェクト名。例：menu-item-object-page
current-menu-item現在表示中のページがそのメニュー項目と一致。
current-menu-parent現在のページの親要素である場合。
current-menu-ancestor祖先階層にあたる場合。
<a>基本的にクラスなし（カスタム可）nav_menu_link_attributes フィルターで追加可能。

🔸 クラスを追加・変更する方法

wp_nav_menu([
  'theme_location' => 'header',
  'menu_class'     => 'my-header-menu',
  'menu_id'        => 'global-nav',
]);

🧱 2. ウィジェット領域（register_sidebar() → dynamic_sidebar()）

functions.phpでウィジェット領域を登録した場合：

register_sidebar([
  'name'          => 'サイドバー',
  'id'            => 'sidebar-1',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget'  => '</aside>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
]);

🔹 出力結果例

<aside id="text-2" class="widget widget_text">
  <h2 class="widget-title">テキストウィジェット</h2>
  <p>内容...</p>
</aside>

🔸 自動付与クラス・ID

要素自動付与属性説明
<aside>id="ウィジェットタイプ-番号"例：id="text-2"
class="widget widget_{タイプ}"例：class="widget widget_text"
<h2>class="widget-title"タイトル部分。

🏠 3. <body> タグのクラス（body_class()）

WordPressはページの種類に応じて自動で多くのクラスを付与します。

🔹 例

<body class="home blog logged-in admin-bar no-customize-support">

🔸 主なクラス

クラス意味
homeトップページ
blog投稿一覧ページ
single投稿ページ（個別記事）
page固定ページ
archiveアーカイブページ
category-{スラッグ}カテゴリページ
tag-{スラッグ}タグページ
author-{スラッグ}投稿者ページ
logged-inログイン済みユーザー
admin-bar管理バーが表示中
custom-backgroundカスタム背景有効時

🔸 カスタムクラスを追加する方法

add_filter('body_class', function ($classes) {
    $classes[] = 'my-theme';
    return $classes;
});

📄 4. <post> 出力（ループ内）

the_post() 内で出力される記事は、post_class() によってクラスが付与されます。

🔹 出力例

<article id="post-12" class="post-12 post type-post status-publish format-standard category-news">

🔸 自動付与されるクラス

クラス意味
post-{ID}投稿ID
type-{投稿タイプ}post, page, custom post type
status-{ステータス}publish, draft, private など
format-{投稿フォーマット}standard, image, quote など
category-{スラッグ}投稿のカテゴリ
tag-{スラッグ}タグ

🧰 5. カスタマイズのヒント

対象カスタマイズ方法
メニュー項目nav_menu_css_class, nav_menu_item_id フィルター
メニューリンクnav_menu_link_attributes フィルター
ウィジェットbefore_widget, after_widget
bodybody_class フィルター
投稿post_class フィルター

✅ まとめ

対象関数主な自動クラス/ID
メニューwp_nav_menu()menu-item, current-menu-item など
ウィジェットdynamic_sidebar()widget, widget_text など
bodybody_class()home, single, category-news など
投稿post_class()post-12, category-news など

＼ 最新情報をチェック ／

コメント

PAGE TOP
タイトルとURLをコピーしました