何事にも重要なのが第一印象。ウェブサイトの場合、訪問者がアクセスしてまず最初に目にするものは、トップページのヘッダーであるのが一般的です。
WordPressテーマ開発において、ヘッダーテンプレートは必須ではありませんが、ほとんどのテーマにはヘッダーが設置されています。「ヘッダー」は長年存在しており、ページの最上部に位置し、重要な要素を含むHTMLのブロックを意味します。具体的には、以下のような要素が含まれます。
- ブランディング：サイト名やロゴが一般的であり、色、画像、動画などを使用してブランディングを強化することができる。
- プライマリナビゲーション：複数のページがある場合には、通常ナビゲーションメニューが各ページの上部に共通して表示される。
- セカンダリナビゲーション：プライマリナビゲーションメニューに関連するリンクを意味し、「ログイン」ボタンやSNSアカウント、買い物カゴにアクセスできるアイコンなどが一例。
- 検索フィールド：検索機能をサポートしている場合、（必須ではないが）ヘッダーに検索フィールドがあると訪問者が利用しやすい。
CMSを代表するWordPressでは、テーマテンプレートのマークアップとデータベースにあるコンテンツ（ロゴへのリンクやメニュー項目など）を組み合わせることで、ヘッダーのようなコンポーネントを動的に生成し、すべてのページに挿入することができます。
WordPressテーマのエコシステムは充実しており、多数のマーケットプレイスに何万種類ものテーマが存在するため、目的に適したテーマを見極めるのが大変なほどです。
テーマを選択してインストールした後は、ヘッダーを含むいくつかの要素をカスタマイズし、ブランディングを追加して、サイトを構築していきます。
ブロックテーマとクラシックテーマ
WordPressサイトのヘッダーのカスタマイズ方法は、テーマの種類（およびカスタマイズの程度）によって異なります。WordPressサイトのヘッダーを変更する方法は、以下の3通りあります。
- サイトエディターを使用する─WordPress 5.0以降、サイトコンテンツ用のブロックエディターとしてGutenbergが導入されています。WordPress 5.9のリリースではこの機能がテーマにも拡張され、フルサイト編集を可能にする強力なツールに。サイトエディターとHTMLベースのコンポーネントでテーマのさまざまな部分を構築する機能は、WordPress標準のカスタマイズにかつてない柔軟性をもたらしています。
- WordPressカスタマイザーを使用する─上記のようなカスタマイズ性に優れたテーマが「ブロックテーマ」と呼ばれる一方、かつては主流であったカスタマイザーと関連ウィジェットを使って微調整を行うテーマは、現在「クラシックテーマ」に分類されます。クラシックテーマは何千種類も存在し、現在でもリリースされていますが、ブロックテーマと比較して、ヘッダーのカスタマイズに制限があります。
- テーマファイルを直接編集する─クラシックテーマファイルのコード編集にはPHPの基礎知識が必要になりますが、カスタマイザーの機能が不十分である場合には解決策になります。
なお、今回はDiviなどのサードパーティのWordPressページビルダー、およびヘッダー（およびフッター）の編集に特化したプラグインを使用した編集方法は取り上げません。これらのツールは、テーマファイルを直接編集する必要があるが、PHPのコーディングは避けたいという場合に有用です。
ブロックテーマのヘッダーを編集する方法
Gutenbergを使ってコンテンツを作成したことがあれば、WordPressには見出し、段落、リストからメディア、ナビゲーション、フォームまで、あらゆるものを簡単に作成できるブロックが豊富に用意されていることはご存知でしょう。最新の投稿やコメントへのリンクの生成、タグクラウドの表示、カレンダーの挿入など、クラシックテーマのウィジェット的なタスクを実行するブロックもあります。
これらの中から複数のブロックを組み合わせてスタイルを設定し、パターンとして保存することができます。また、WordPressテーマのヘッダーなど、ページレイアウトを定義する部分にこれらの要素を追加することも可能です。
個々のブロックと同様に、テンプレートパーツもHTMLファイルで定義できるため、ブロックテーマでのカスタマイズは簡単です。というのも、変更を記述する情報はWordPressのデータベースに保存され、ページが生成される際に様々な要素に適用されるためです。
したがって、ブロックテーマではヘッダーを「編集する」と言っても、WordPressのテーマディレクトリに保存されているファイルを編集することはほぼありません。
ブロックテーマのヘッダーの仕組み
ヘッダーのようなテンプレートパーツの背後にあるHTMLを確認することは、テーマをカスタマイズする際に何が起こっているのかを理解するのに役立ちます。
この記事では例としてSeedletテーマを使用します。Seedletにはブロックテーマ版とクラシックテーマ版があり、前者はBlockbaseテーマが親として使用されています。Seedletディレクトリにあるheader.htmlファイルの全貌は以下のとおりです。
<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->WordPressブロックの重要な動作のほとんどは、HTMLコメントの中で処理されており、コメントがページ構築時にスタイル情報などのディレクティブを渡します。上記のHTMLは、デフォルトのヘッダーに縦の間隔を加えていますが、Blockbaseテーマにパターンを追加することが主なアクションであり、このパターンは（.htmlが追加されると）header-centered.htmlファイルに格納されます。
Blockbaseテーマ内のテンプレート部分のディレクトリには、ヘッダーに関連するファイルが含まれます。
header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.htmlたとえば、header-rounded-logo.htmlファイルには、ロゴ画像を円形に切り抜くCSSクラスを追加するHTMLコメントがあります。Seedletのheader.htmlファイルを直接編集する場合は、header-centered.htmlの代わりにheader-rounded-logo.htmlを追加しますが、サイトエディターを使用すればテンプレートパーツを適用し、ハードドライブ上のテーマファイルをそのままにしておくことができます。
サイトエディターを使用してヘッダーを編集する
サイトでブロックテーマを使用している場合、WordPress管理画面で「外観」＞「エディター」でサイトエディターを開きます。
サイトエディターの初期表示は、ヘッダー、フッター、およびテーマ開発者によって追加されたテンプレートパーツを含むフルページレイアウトになります。ヘッダーエリアをクリックすると、すぐに編集可能です。
ヘッダーにはロゴのプレースホルダーがあり、サイト名と主要なナビゲーション（現状は「About us（会社概要）」と「Sample Page（サンプルページ）」のみ）が表示され、キャッチフレーズ（タグライン）もサイトの基本情報に追加すると表示されます。
前述のheader-centered.htmlテンプレート部分にはすでにこれらのコメントが含まれているため、すでにヘッダーに表示されています。
<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->主要なナビゲーションは以下のコメントで生成します。
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->ロゴを追加する手順は以下のとおり。
- ロゴのプレースホルダーを選択
- 「メディアを追加」をクリック
- メディアライブラリからロゴを選択するかアップロードする
サイトヘッダーへのロゴの追加は、クラシックテーマでも簡単に実行できるほど一般的な操作。そこで次に、テンプレートにないブロックを追加してみます。テンプレートにまだない「Shop」ブロックを追加してみます。
サイトエディターの左上にあるトグルアイコン（以下参照）をクリックし、ブロック挿入ツールを開きます。
ブロック挿入ツールを開いたら、以下の手順に従ってください。
-
- 検索フィールドから（またはスクロールで）「ナビゲーション」ブロックを見つける
- ブロックをヘッダー上部の余白にドラッグする
次に、このナビゲーションブロックを編集し、プライマリナビゲーションから独立した独自のリンクを作成します。右側の「設定」パネルで「テキスト」フィールドに「Shop」を入力し、「リンク」フィールドにECサイト用サブドメインを指定します。
デフォルトのヘッダーテンプレートはページの中央に配置されます。例えば、以下の手順で「Shop」メニューを右揃えにすることもできます。
- ナビゲーションブロックを選択する
- ツールバーの「項目の揃え位置を変更」をクリックする
- 「右揃え」を選択する
これでヘッダーは以下のようになります。
クラシックテーマのヘッダーを編集する方法
テーマカスタマイザーは、2012年のWordPress 3.4で初めてリリースされました。当時これは画期的な更新で、この機能の導入によりコーディングなしでサイトのルック＆フィールを変更できるようになりました。
その後、カスタマイザーの機能は大幅に強化されましたが、テーマ開発者によって、カスタマイズできるものとできないものが決まるという点には変わりありません。サイト所有者がブロックベースのサイトエディターで自由に外観を変更できるのとは対照的です。
カスタマイザーを使用してヘッダーを編集する
カスタマイザーをサポートするクラシックテーマを使用している場合は、WordPress管理画面で「外観」＞「カスタマイズ」でカスタマイザーを開きます。
カスタマイザーのメインメニューから「サイト基本情報」を選択し、ヘッダーのカスタマイズ可能なコンポーネントにアクセスします。
このテーマの「サイト基本情報」セクションでは、ロゴの追加または変更、サイトのタイトルとキャッチフレーズ（WordPress管理画面の「設定」＞「一般」のエントリに応じて初期設定される）の編集が可能です。
また、サイトのプライマリナビゲーションはヘッダーに配置され、フッターとSNSアカウントへのリンクを設置する場所も用意されています。カスタマイザーでは、各エリアに割り当てるメニューは選択できますが、エリア自体は基本的に固定されています。
上の「ロゴを選択」をクリックし、メディアライブラリからロゴ画像を選択するか、新たにアップロードします。
ロゴがすでに配置してある状態では、カスタマイザーで画像を削除したり、別の画像に置き換えたりすることができます。
WordPressカスタマイザーを使ってヘッダーに追加したロゴ。
カスタマイザーでできること
カスタマイザーは、どのようにしてロゴがアップロード可能であるか、そしてアップロード後どこに配置すべきかを判断しているのでしょうか。
これは、テーマのfunctions.phpスクリプトにある以下の項目が手掛かりになります。
/**
* コアカスタムロゴのサポートを追加
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 240,
'flex-width' => false,
'flex-height' => false,
)
);上のコードは、カスタマイザーの「サイト基本情報」タブにある「ロゴを選択」ボタンをメディアライブラリへのリンクとともに有効化します。
次に、サイトのヘッダー構築に使用されるPHPコード内で、ロゴが表示されるべき場所に以下のコードが追加されます。
<div class="site-logo"><?php the_custom_logo(); ?></div>この結果は以下のようになります。
テーマファイルを編集してヘッダーを変更する方法
先ほどサイトエディターを使ったブロックテーマのヘッダー編集方法を取り上げた際、セカンダリメニューとして「Shop」を追加しました。このブロックはヘッダー内の任意の場所に配置することができましたが、クラシックテーマでこれを行うには、ヘッダーに関連するPHPコードを編集することになります。
該当するテーマファイルを開き、セカンダリメニュー用のHTMLを追加することもできますが、後から「Shop」の文言を「Show Now」に変更したり、URLを変更したり、メニューに「ログイン」のような別の項目を追加したりしたくなるかもしれません。
したがって、カスタマイザーに組み込まれているヘッダーにナビゲーションを追加し、テーマコードに戻ることなく、WordPress内のメニューエディターでセカンダリメニューの内容を変更できるのが理想的です。
まずはバックアップから
サイトのヘッダーをカスタマイズするためにPHPコードを編集するということは、通常header.phpファイルを編集することになりますが、複数のファイルを組み合わせて1つのヘッダーを構築するテーマもあります。
まずはテーマファイルに変更を加える前に、バックアップを作成しておきましょう。バックアップの作成方法および復元方法はこちらをご覧ください。
バックアップを作成しても、サードパーティテーマの更新により変更が上書きされてしまうことがあります。変更したテーマファイルをバックアップから復元するまで、変更がサイトから消えてしまうことを防ぐため、変更したファイル専用の子テーマを作成し、ステージングサイトで更新をテストすることをお勧めします。
クラシックテーマでWordPressヘッダーを編集する
今回に例として取り上げるクラシックテーマには、プライマリナビゲーション用のエリアが存在します。カスタマイザーにアクセスして、この場所に割り当てるメニューを選択することができます。この例では、「Primary Menu」になっています。
フッターとSNSアカウントへのリンク用のエリアもありますが、以下のスクリーンショットでは有効になっていないことがわかります。
テーマのfunctions.phpスクリプトを見ると、最初にメニューの場所が参照されています。
// このテーマは wp_nav_menu() を使用
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);このブロックにセカンダリナビゲーションメニューを登録します。
// このテーマは wp_nav_menu() を使用
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);カスタマイザーに戻ると、「メニューの位置」セクションに「Secondary Navigation」の項目が表示されるようになります。
メニューに名前（この例では「Secondary Menu」）を付けて、リンクを追加していきます。ブロックテーマのサイトエディターで行ったように、「Shop」メニューを作成します。
ヘッダーのテーマファイルに戻り、セカンダリメニューが存在し、そのメニューに少なくとも1つのエントリがあることを確認するコードを追加します。その後メニューの内容を解析して表示します。
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// メニュースラッグの取得
$location_name = 'secondary;
$locations = get_nav_menu_locations();
$menu_id = $locations[ $location_name ];
$menu_obj = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu_class' => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>これで、ヘッダーのセカンダリナビゲーションの任意の場所に「Shop」が表示されるようになりました。
この方法であれば、WordPress管理画面で「Shop」に使用するアンカーテキストを変更したり、セカンダリメニューを追加したりすることができます。
まとめ
サードパーティプラグインやページビルダーを使用せずにWordPressサイトのヘッダーを編集する場合、ブロックテーマであれば、サイトエディターと組み合わせることで簡単かつ柔軟に実行可能です。サイトエディターでは、ページレイアウトの任意の場所に好きなブロックを配置することができます。またブロックの定義やスタイルの変更はWordPressのデータベースに保存されるため、ディスク上のテーマファイルを変更する必要はありません。
クラシックテーマの場合は、カスタマイザーを利用してテーマ開発者が「カスタマイズ可能」とした要素のみを変更できます。それ以外の要素を変更するには、PHPコードを編集することになります。
WordPressサイト構築を効率化してくれるソリューションをお探しなら、60,000+の開発者、ウェブデザイナー、フリーランスが利用する無料のローカル開発ツールであるDockerベースのDevKinstaがお勧めです。
Kinstaのテクニカルエディター。救急車や消防車を追いかける記者としてキャリアをスタート。1990年代後半からインターネット関連の技術情報を担当している。
コメントを残す