技術 technology

header.phpを読み解く – WordPress公式テーマのコードを解読しよう！

コーポレートサイトにWordPressを採用している企業は増加傾向にあるかと思います。それに伴い、「制作会社からもらったマニュアルで最低限の運営作業はできるようになったけど、ちょっと変えたいところがあるんだよなあ。でもどうすればいいんだろう？」という担当者の方も増えているのではないでしょうか？

また、「HTMLとCSSの知識はあるけど、WordPressのコードは怖くて手が出せない」という方も多いかと思います。

そこで、ここから何回かに分けてWordPressテーマのファイルのコードを読みながら、その仕組みや構造を紹介していきます。解説はわかりやすさを優先するために細かい部分を省略したり、本来の意味と異なる説明を行う場合もありますがご了承ください。なお、サンプルには公式テーマであるTwentyNineteenを利用しています。

それでは、第二回、header.phpを取り上げていきます。

header.phpの構成

header.phpに記述するものに決まりがあるわけではありませんが、一般的なテーマでは

  1. ページに関する説明を行うheadエリア
  2. サイトのグローバルナビゲーション
  3. メインイメージの表示のコントロール

を行うためのコードが記述されています。ナビゲーションの位置を変更したい場合や、メインイメージの構造を変更したいという場合にはこのファイルを確認してみましょう。

header.phpの利用方法

テーマファイル内で、get_header ()関数を記述すると、header.phpが表示されるようになっています。　また、header.phpを複数用意して、使い分けることも可能です。複数のheader.phpを利用したい場合は、ファイル名をheader-example.phpのようにheader-○○○.phpとした上で、get_header ( ‘ example’ ) などとすると、そのファイルが呼び出されます。

header.phpの全体像

まずは全体像を確認しましょう。ヘッドタグ<head>~</head>で囲まれた部分がheadエリア、<body <?php body_class(); ?>>以降がナビゲーションエリア、<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>以降がメインイメージの表示コントロールエリアに当たります。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?><!doctype html>
<!-- -->
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentynineteen' ); ?></a>

		<header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

			<div class="site-branding-container">
				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
			</div><!-- .site-branding-container -->

			<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
				<div class="site-featured-image">
					<?php
						twentynineteen_post_thumbnail();
						the_post();
						$discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null;

						$classes = 'entry-header';
					if ( ! empty( $discussion ) && absint( $discussion->responses ) > 0 ) {
						$classes = 'entry-header has-discussion';
					}
					?>
					<div class="<?php echo $classes; ?>">
						<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
					</div><!-- .entry-header -->
					<?php rewind_posts(); ?>
				</div>
			<?php endif; ?>
		</header><!-- #masthead -->

<div id="content" class="site-content">

headエリア

Webページに関する情報を記述するエリアがheadエリアです。headではページのタイトルや概要文などのmetaタグを記述したり、ページ内で使用する他のファイルの読み込みなどを行います。ただし、WordPressではこれらの管理を関数やプラグインで行うため、実際の記述は少ないです。

<?php
/**
 * //ここはテンプレートに関する情報です。詳しくは前回をご覧ください。
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?>
<!doctype html><!--htmlのバージョンを定義しています。この場合はHTML5を意味しています。 -->

<html <?php language_attributes(); ?>><!--jaやenなど、このhtmlの基本言語が何かを指定します。関数によって出力します。-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" /><!--文字コードを指定します。UTFー8が主流となっています。文字コードに誤りがあると文字化けの原因となるため、注意が必要です。-->
	<meta name="viewport" content="width=device-width, initial-scale=1" /><!--レスポンシブデザインとするには必要な記述です。表示幅をウィンドウサイズとイコールとしています。-->
	<link rel="profile" href="https://gmpg.org/xfn/11" /><!--リンク先との関係を指定するタグですが、現在利用されていない機能なので、不要でしょう。-->
	<?php wp_head(); ?><!--WordPress(プラグインを含む）がhead内にタグを出力する際にはこの関数のある場所に出力されます。-->
</head>

wp_head()が最も大切

Twentynineteenでは、HTMLのバージョン指定<!doctype html>に始まり、headタグ<head>が配置されています。htmlで全てを書き込む場合には、例えば<meta name=”description” content=”~~~”>や<meta OG:image~~>などの記述を行います。

WordPressの場合は、こういったタグをプラグインやfunctions.phpによって指定するのが一般的です。指定された情報は関数wp_head( )のある場所に出力されるので、wp_head関数は必ず記述しましょう。

wp_head()の記述がないと、様々な情報が抜け落ちてしまいます。なお、記述位置はheadタグが閉じる直前が一般的です。

ナビゲーションエリア

このエリアでは、<div id=”page” class=”site”>によりページが開始され、headerタグ<header>によって、ページのヘッダーが開始されています。header終了は次のエリアで行われていて、このエリアのメインでは主に、アイキャッチ画像があるかの分岐と、ナビゲーションの出力が行われています。

<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content">
		<?php _e( 'Skip to content', 'twentynineteen' ); ?>
		<!--翻訳ファイルがあった場合に、翻訳後の内容を出力してくれます。-->
	</a>
	<header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">
	<!--
	headerタグに対して、アイキャッチの有無で与えるクラス名を振り分けています。
        is_singularは、投稿が表示されているかどうかを判定する関数です。
	twentynineteen_can_show_post_thumbnail()は、テーマ独自に用意された関数で、アイキャッチが設定されているかどうかなどを判別します。
	&&は、前後のどちらも満たせば、Trueとなる条件分岐法です。条件 ? 〜〜:〜〜の構文は三項演算子と呼ばれる分岐で、条件式がTrueであれば右辺を、falseであれば右辺を実行します。
        -->
			<div class="site-branding-container">
				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
				<!-- get_template_part関数を利用して、site-branding.phpを呼び出しています。site-branding.phpはナビゲーションが記載されています。 -->
			</div><!-- .site-branding-container -->

 

 

メイン画像の表示エリア

			<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
			<!-- 投稿が表示されていてかつ、アイキャッチがあれば、以下のコードを出力します。 -->
				<div class="site-featured-image">
					<?php
						twentynineteen_post_thumbnail();
						// テーマの独自関数です。後日詳しくみていきますが、アイキャッチ画像を出力します。
						the_post();
						//投稿の情報を取得します。
						$discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null;
						//テーマ独自の関数を利用しています。固定ページではなく、アイキャッチが表示できる場合にコメント情報を取得します。
						$classes = 'entry-header';
					if ( ! empty( $discussion ) && absint( $discussion->responses ) > 0 ) {
						//コメントの数がゼロでないかどうかを判定しています。
						$classes = 'entry-header has-discussion';
					}
					?>
					<div class="<?php echo $classes; ?>">
						<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
						<!--entry-header.phpの呼び出しです。entry-header.phpには見出しやコメント数などの表示に関わるコードが記述されています。  -->
					</div><!-- .entry-header -->
					<?php rewind_posts(); ?>
					<!--the_post()で取得した投稿の情報を、別の場所でもう一度利用するための記述です。 -->
				</div>
				<!--分岐ここまで  -->
			<?php endif; ?>
		</header><!-- #masthead -->

	<div id="content" class="site-content">

条件分岐について

プログラミングでは、条件によって処理を変更する条件分岐が至る所で発生します。WordPressのテーマでも至る所に使われていますので、ここで簡単に条件分岐について触れておきます。

条件分岐とはその名の通り、なんらかの条件によってその後に行うことを変更することを指し、最もシンプルな条件分岐はif文です。

条件分岐（ if )

if文の基本構文は

if( $sample ){
  //処理
}

となり、( )の中に記述された条件が真であれば { } の中身に進みます。また、条件が真であるということには、例えば変数の中身が存在しているということも含まれます。

Twenteennineteenでは下記の部分が if 分岐です。

<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?> 
<!-- 投稿が表示されていてかつ、アイキャッチがあれば、以下のコードを出力します。 -->
<!-- ~~中略~~ -->
<?php endif;?>

この例の場合は、 { } （波かっこ）の代わりに、: （コロン）と<?php endif;?>を記述していますが、内容は同じです。PHP文の中でhtmlを記述するにあたって必要な echo などを省略できるため、こちらの形もよく利用されます。

条件分岐（三項演算）

以下のコードは、アイキャッチの有無でheaderタグに与えるクラスを変更する処理が含まれています。ここでは三項演算と呼ばれる方法を使っています。

<header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

三項演算は、?の手前が条件となり、この条件が満たされた場合（これを真やTrueと呼びます。）には、続く：の左辺を実行し、満たされなかった場合（これを偽やFalseと言います。）は右辺を実行する条件分岐法です。

コードのコメントにも記載しましたが、この場合は、『個別ページを表示中かつアイキャッチが存在していればsite-header featured-imageを、どちらか一方でも満たさない場合はsite-headerをclassとする』という分岐になります。

まとめ

  • header.phpには、サイトのヘッダーを記述している
  • wp_head()は必須
  • WordPressテーマには条件分岐が多数含まれている

今回は以上となります。

シェア
一覧ページへ 

Other contents
その他のコンテンツ

会社概要
ごあいさつ
沿革
東日印刷グループ
環境活動
一般事業主行動計画
毎日新聞グループ
東日印刷の特徴
採用

Go to Top

Contact
お問い合わせ

各種問い合わせはこちら 

Copyright © Tonichi Printing CO., LTD. All Rights Reserved.

CONTACT