初めに
今回は、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を作る時と、流れは同じです。
復習のつもりで、やっていきましょう。
