成果物をまとめて確認する
[成果物]WordPressのHTML出力分析とカスタマイズ実践 – wp_nav_menuで学ぶ制御技術
【WordPressのHTML出力分析とカスタマイズ実践 – wp_nav_menuで学ぶ制御技術】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。
前回の記事では、wp_enqueue_style
による実践的なスタイルシート読み込みと、複数のCSSファイルを効率的に管理する方法を学習しました。
今回は、WordPressの任意の関数が出力するHTMLを分析し、パラメーターで制御する実践的な技術を習得します。wp_nav_menu
を例に、「分析→理解→実装」のワークフローを体験していきましょう。
今回の目標
目次
WordPressをカスタマイズする上で最も重要なスキルは、関数が生成するHTMLを正確に分析し、その構造を理解することです。この技術は、wp_nav_menu
に限らず、今後学習するwp_list_categories
、wp_list_pages
、get_template_part
等、あらゆる関数で応用できます。
wp_nav_menuを使って、実際の分析プロセスを体験してみましょう。
まず、最小限の設定でwp_nav_menu
を実行し、どのようなHTMLが生成されるかを確認します。
<?php wp_nav_menu( 'header-menu'); ?>
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-23">
<a href="http://sample.local/" aria-current="page">ようこそ</a>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-24">
<a href="http://sample.local/about/">会社概要</a>
<ul class="sub-menu">
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
<a href="http://sample.local/about/history/">沿革</a>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
<a href="http://sample.local/about/access/">アクセス</a>
</li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://sample.local/service/">サービス</a>
</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">
<a href="http://sample.local/voice/">お客様の声</a>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
<a href="http://sample.local/contact/">お問い合わせ</a>
</li>
</ul>
</div>
wp_nav_menuが生成するHTMLの構造、付与されるclassを確認することができます。なお数字が付いたclassは、メニューの作成順や環境によってことなりますので、スタイル指定には使わないようにしましょう。
WordPressが自動付与するCSSクラスは、単なる識別子ではありません。これらは開発者への「ヒント」として機能しており、WordPressの設計思想を理解する重要な手がかりです。
menu-{メニュー名}-container
:メニュー全体のコンテナmenu-item
:階層に関係なく全てのメニューアイテムに付与current-menu-item
:現在表示中のページに付与menu-item-has-children
:子メニューを持つ親メニューに付与sub-menu
:子メニューのリストに付与current-menu-item
クラスは、WordPressが自動的に判定して付与します。これにより、JavaScriptを使わずに「現在のページの強調表示」が実現できます。この仕組みを理解することで、効率的なナビゲーションメニューが構築できます。
この設定により、第3階層以降のメニューは出力されず、シンプルで扱いやすいHTML構造が維持されます。
実習に入る前に、サイトタイトル(h1
)とナビゲーションメニューを横並びに配置する基本レイアウトを作成していきます。
前回学習したmain.cssを使用します。functions.phpの設定は前回のままで変更不要です。
ヘッダーにglobal-header
クラスを設定し、flexbox
でタイトルとメニューを左右に配置します。
<header class="global-header">
<h1><?php the_title();?></h1>
<?php wp_nav_menu( 'header-menu' ); ?>
</header>
main.cssに以下のスタイルを追加して、タイトルとメニューを横並びに配置します。
.global-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.0rem 2.0rem;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
wp_nav_menu
が出力するHTMLに対してスタイルシートを適用し、「横並び+階層のドロップダウン」メニューを作成してみましょう。
HTML構造の分析結果に基づいて、段階的にドロップダウンメニューを実装していきます。「分析→理解→実装」のワークフローを体験しましょう。
まず、ul
タグのデフォルトスタイルをリセットし、メニューアイテムを横並びに配置します。WordPressが自動生成する.menu-header-menu-container
クラスと.menu
クラスを活用します。
/* Step 1: メニューリストの基本設定 */
.menu-header-menu-container .menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.0rem;
}
各メニューアイテムにボーダーと背景色を設定します。WordPressが全てのメニューアイテムに自動付与する.menu-item
クラスを活用します。
/* Step 2: メニューアイテムの装飾 */
.menu-header-menu-container .menu .menu-item {
border: 1px solid gray;
background-color: rgba(255, 255, 255, 0.5);
}
.menu-header-menu-container .menu .menu-item a {
display: block;
padding: 1.0rem 1.5rem;
color: black;
text-decoration: none;
white-space: nowrap;
transition: all 300ms ease;
}
サブメニューを正しい位置に表示するため、親メニューにrelative
ポジションを設定し、インジケーターも追加します。WordPressが子メニューを持つ親メニューに自動付与する.menu-item-has-children
クラスを活用します。
/* Step 3-1: 親メニューの位置設定とインジケーター */
.menu-header-menu-container .menu .menu-item.menu-item-has-children {
position: relative;
}
.menu-header-menu-container .menu .menu-item.menu-item-has-children > a::after {
content: "▼";
margin-left: 0.5rem;
font-size: 0.8rem;
}
/* Step 3-2: サブメニューの初期状態設定 */
.menu-header-menu-container .menu .menu-item .sub-menu {
display: none;
position: absolute;
top: 100%;
left: -1px;
z-index: 10;
width: 100%;
margin: 0;
padding: 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
list-style: none;
}
現在表示中のページを視覚的に強調するスタイルとホバーエフェクトを追加し、さらにサブメニューをホバーで表示する機能を実装します。
/* Step 4-1: ホバーエフェクトと現在ページの強調 */
.menu-header-menu-container .menu .menu-item a:hover,
.menu-header-menu-container .menu .menu-item.current-menu-item a {
color: white;
background-color: orange;
}
/* Step 4-2: ホバーでサブメニューを表示 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children:hover .sub-menu {
display: block;
}
/* Step 4-3: サブメニューアイテムのスタイル */
.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item {
border: 1px solid gray;
border-top: none;
background-color: white;
width: 100%;
}
.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item:first-child {
border-top: 1px solid gray;
}
今回習得した「HTML出力分析とパラメーター制御」の技術は、wp_nav_menu
以外でも応用できます。
// 基本出力を分析
<?php wp_list_categories(); ?>
// パラメーターで制御
<?php wp_list_categories(array(
'depth' => 2,
'show_count' => true,
'hierarchical' => true
)); ?>
// 基本出力を分析
<?php wp_list_pages(); ?>
// パラメーターで制御
<?php wp_list_pages(array(
'depth' => 1,
'sort_column' => 'menu_order',
'include' => '10,20,30'
)); ?>
今回は、wp_nav_menu
を例に「WordPressが出力するHTMLの分析とパラメーターによる制御技術」を学習しました。
この分析手法は、WordPressの任意の関数で応用できる普遍的なスキルです。新しい関数に出会った時も、同じアプローチで効率的にカスタマイズできるようになります。
これらの技術をマスターすることで、どのような関数でも「読み解いて→理解して→カスタマイズする」ことができるようになります。
次回は「タイトル」について解説します。SEOにおいて非常に重要な要素であるページタイトルの適切な設定方法を学習します。
WordPressでは、ページの種類に応じて適切なタイトルを動的に生成する必要があります:
このような階層構造を反映したタイトルを自動生成する仕組みを構築し、SEO効果を最大化するタイトル設定をマスターしましょう!
次回もお楽しみに!
この記事で作成した成果物は、以下のページでまとめて確認することができます。
wp_enqueue_styleを使った実践的なWordPressスタイルシート管理方法を解説。style.cssとは別のファイルでスタイルを管理し、複数のスタイルシートを効率的に読み込む方法を学習します。依存関係の設定による読み込み順序制御、自動バージョン更新など、プロの開発現場で使われる実践的な技術を詳しく説明します。
WordPressにおけるSEO効果を最大化するタイトル設定方法を詳しく解説します。HTMLの基本ルールに従った一意のタイトル設定、階層構造を反映した動的なタイトル生成、H1タグの適切な使い分けを学習できます。実践的な方法を段階的に説明し、検索エンジンとユーザーにとって分かりやすいWordPressサイトの構築技術を習得できます。
WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。
学習ストーリー第24話まで掲載中