ゆるくはじめるWordPress.

テンプレートファイル作り&インクルードタグの使い方【WordPressテーマ作り STEP5】

template-top

いよいよ、空っぽだったテンプレートファイルの中身を作っていく作業です。
PHPやら、WordPressのテンプレートタグやら初めて見る人にはちょっととっつきにくいようなものも出てきて、うわぁ…となるかもしれません。これらを全部覚えようと思ったらそれはもう膨大な量ですが、必要な物から少しづつ、作りながらやっていけば案外単純に思えたりするものです。
今までWordPressを全く触ったことが無かった私でもなんとか使えるテーマを完成させることができたので、きっと大丈夫。
まぁとりあえずやってみましょう!

テンプレートファイルにHTMLとCSSを流し込む

WordPressのサイドメニューから、外観>テーマの編集へ進みます。
前回作ったテーマフォルダに入れたファイルの名前が右側に並んでいると思うので、これらに内容を入れていきます。

テーマの編集

style.css

『スタイルシート(style.css)』を選択すると事前に入れておいたテーマ名などが表示されていると思うので、それは消さずに残したまま、その下にこれまでで作ったCSSの内容を全部コピー&ペーストします。
そしたら画面下のファイルを更新ボタンを押して保存。ハイ、これで終了!
これでテーマフォルダ内のcssファイルも同様に更新されています。

style.css

/*
Theme Name: simple
*/
(ここにコピペ)

header.php

『テーマヘッダー(header.php)』にはHTMLの<!DOCTYPE html></header>まで、サイト上部に常に表示される部分を今まで作ったHTMLからコピペ。
<html><body>がこのファイル中では終了タグが無い状態になりますが、終了タグはfooter.phpに含めて常にセットで表示させるようにするので問題なしです。

header.php:例

<!DOCTYPE html>
<html>
<head>
(省略)
</head>
<body>
<header class="header">
(省略)
</header><!-- header-->

sidebar.php

『サイドバー(sidebar.php)』には、サイドバーの部分のHTMLを丸ごとコピペ。
これまでの例で言えば<div class="sidebar"></div><!-- sidebar -->の部分。

sidebar.php:例

<div class="sidebar">
(省略)
</div><!-- sidebar -->

footer.php

『テーマフッター(footer.php)』には同じように<footer></html>HTMLの最後までを入れます。ここまでの3つのPHPファイルがパーツで使うテンプレートファイル。

footer.php:例

<footer class="footer">
  <p>© 2016 Sitename</p>
</footer><!-- footer -->
</body>
</html>

index.php

そして最後に残ったコンテンツ部分のHTMLを『メインインデックスのテンプレート(index.php)』にコピペします。これで今まで作ったHTMLとCSSはすべてWordPressに移すことができました!
ここからWordPressのテンプレートタグを色々と使っていきます。

テンプレートタグ:WordPressに登録された情報を呼び出したりするための専用のタグの事。


index.phpにパーツのファイルを呼び出す

今、ページとしてのテンプレートファイルはindex.phpしかないので、全てのページでindex.phpの内容が表示される事になってます。
まだindex.phpにはコンテンツの内容しか書かれていないので、ヘッダーやフッターなどのパーツも一緒に表示できるよう、パーツファイルをインクルードタグを使って呼び出します。

index.php:例

<?php get_header(); ?>
<div class="content">
(省略)
</div><!--content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

PHPのタグは開始タグ<?php、終了タグ?>の中に処理したい内容を書いて使います。;(セミコロン)は1つの命令文の終わりを示すもの。
今呼び出したい3つのファイルはあらかじめ用意されている関数で呼び出す事ができるので、それぞれ
get_header()
get_sidebar()
get_footer()
で呼び出します。
各タグの場所に中身のHTMLが表示されるので、順序が崩れないように注意。

インクルードタグ:テンプレートファイル内で他のテンプレートファイルを呼び出すためのタグ。上記の一般的なもの以外でも任意の名前で作ったファイルをget_template_part()で呼び出す事もできます。
例:test.php → <?php get_template_part('test'); ?>

インクルードタグ – WordPress Codex 日本語版


これまでの作業で構造はほぼほぼできあがったので、次回はスタイルシートを適応させたり、動的に内容を表示できるよう、様々なテンプレートタグを埋め込んでいきたいと思います。


スポンサーリンク

公開日:2016-1-24