身につくWP

WordPressを身につけて稼ぎたい人のためのWebサイト

2.ヘッダーファイルを作成しよう

初めに

今回は、header.phpという共通パーツを作ります。

これでページのヘッダー部分は全て1つのファイルで作成出来るようになります。

テンプレートを新しく作る度に毎回書く必要はなくなります。

手間がグッと減りますね。

また、変更にも強くなります。

header.phpファイルに書いてる内容を書き換えれば、全ページの内容が書き変わります。

開発効率的にも、必ず必要な知識です。

この章でしっかり学びましょう。

※こちらのコースは、WP初級の続きから学習します。

この記事で覚えて欲しいこと

  • 「header.php」というファイル名
  • get_header()というテンプレートタグ

header.phpにする部分を整理する

それでは、header.phpを作成していきましょう。

まず、どの部分を共通化するのか、現在の記述を確認します。

ちなみに、共通化する部分は特に決まってはいません。

自分の都合の良いように決めれば大丈夫です。

現在のhome.phpは、下記のようになっています。

home.php

<!DOCTYPE html>
<html lang="jp">
<head>
・・・・<meta charset="UTF-8">
・・・・<title>TOPページ|3229WP初級</title>
・・・・<?php wp_head(); ?>
</head>
<body>
・・・・<p>3229WPのTOPページです。<br>
・・・・home.phpで表示されています。</p>
・・・・<p>ブログの一覧を表示します</p>
・・・・<?php
・・・・・・・・if ( have_posts() ):
・・・・・・・・while ( have_posts() ):
・・・・・・・・the_post();
・・・・?>
・・・・<article>
・・・・・・・・<h2>
・・・・・・・・・・・・<?php the_title(); ?>
・・・・・・・・</h2>
・・・・・・・・<p>
・・・・・・・・・・・・<?php the_content(); ?>
・・・・・・・・</p>
・・・・</article>
・・・・<?php
・・・・・・・・endwhile;
・・・・・・・・endif;
・・・・?>
・・・・<?php wp_footer(); ?>
</body>
</html>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^

今回はキリが良く、</head>までをheader.phpにしようと思います。

それでは、header.phpファイルを作成していきます。

header.php

<!DOCTYPE html>
<html lang="jp">
<head>
・・・・<meta charset="UTF-8">
・・・・<title>TOPページ|3229WP初級</title>
・・・・<?php wp_head(); ?>
</head>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^

出来たら、テーマの中に配置します。

共通パーツを読み込む

それでは、今作ったheader.phpを各ページに読み込みます。

読み込む時には、テンプレートタグを使います。

そのタグ名はget_header()です。

これを書くことで、テーマ内のheader.phpを読み込んでくれます。

すごくピンポイントなタグです。

早速、home.phpを書き換えましょう。

home.php

<?php・get_header();・?>
<body>
・・・・<p>3229WPのTOPページです。<br>
・・・・home.phpで表示されています。</p>
・・・・<p>ブログの一覧を表示します</p>
・・・・<?php
・・・・・・・・if ( have_posts() ):
・・・・・・・・while ( have_posts() ):
・・・・・・・・the_post();
・・・・?>
・・・・<article>
・・・・・・・・<h2>
・・・・・・・・・・・・<?php the_title(); ?>
・・・・・・・・</h2>
・・・・・・・・<p>
・・・・・・・・・・・・<?php the_content(); ?>
・・・・・・・・</p>
・・・・</article>
・・・・<?php
・・・・・・・・endwhile;
・・・・・・・・endif;
・・・・?>
・・・・<?php wp_footer(); ?>
</body>
</html>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^

書き換えたら、サイトの表示を確認します。

もしも問題があったら、表示がおかしくなります。

問題なく表示されていますね◎

同じように、他のファイルも修正します。

single.php、page.phpをそれぞれ書き換えてください。

single.php

<?php・get_header();・?>
<body>
・・・・<p>3229WPの詳細ページです。<br>
・・・・single.phpで表示されています。</p>
・・・・<h2>
・・・・・・・・<?php the_title(); ?>
・・・・</h2>
・・・・<p>
・・・・・・・・<?php the_content(); ?>
・・・・</p>
・・・・<?php wp_footer(); ?>
</body>
</html>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^

page.php

<?php・get_header();・?>
<body>
・・・・<p>3229WPの固定ページです。<br>
・・・・page.phpで表示されています。</p>
・・・・<h2>
・・・・・・・・<?php the_title(); ?>
・・・・</h2>
・・・・<p>
・・・・・・・・<?php the_content(); ?>
・・・・</p>
・・・・<?php wp_footer(); ?>
</body>
</html>

・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^

これで、共通のheader.phpに書き換えることが出来ました。

今後修正する時は、1つのファイルだけで済みます。

これで効率が上がりますね!

横から失礼します

get_header()の「()」って何?

と疑問に思った方がいるかも知れません。

これはPHPの関数の書き方です。

中に何か文字が入る時もあれば、空になる時もあります。

どちらにせよ、必ず()は使います。

()があれば関数ということが分かるということになりますね!

次の章で学ぶこと

次の章では、footer.phpを作っていきます。

header.phpを作る時と、流れは同じです。

復習のつもりで、やっていきましょう。

この記事のまとめ

  • header.phpを作る流れが分かる
  • get_header()というテンプレートタグの使い方が分かる

学習 かばちゃんた
かばちゃんた
未経験から独学でプログラミングを勉強し、今ではフリーランスとして生活出来るようになった現役のプログラマーです。MENTAというサービスでこれまで100名以上学習サポートをしてきました。分かりやすく丁寧な解説を心掛け、プラグラミング学習に役立つ情報を発信していきます。