0から始めるWordPress自作テーマ作成【TOPページの表示とテンプレートタグ編】

更新日：2021年10月8日 / 投稿日：2020年08月30日

前回ではheader.phpの作成に続き、footer.phpの作成方法をご紹介いたしました。

header.phpの作成編はこちら

footer.phpの作成編はこちら

今回は、今まで作成したファイルを連結するテンプレートタグを使ってTOPページを表示させるとろこまでをご紹介したいと思います。

～目次～

1 テンプレートタグとは
- 1.1 代表的なテンプレートタグ
- 1.2 非推奨のテンプレートタグのあるので使用には注意しましょう
2 作成したindex.phpにテンプレートタグを入れて、ヘッダーとフッターを呼び出そう
- 2.1 index.phpにヘッダーとフッターを呼び出すテンプレートタグを入れます
3 header.phpにファイルをつなぐテンプレートタグを入れます
- 3.1 style.cssのパスを出力するテンプレートタグを入れます
- 3.2 wp_headタグをヘッダーに追加します
4 フッターと、TOPページのメインコンテンツにも必要なテンプレートタグを入れましょう
- 4.1 フッターにもヘッダーと同様にwp_footerタグを追加します
5 ここまでが出来ましたら、サーバーに一度アップロードして上手く表示が出来ているかを確認してみましょう
- 5.1 アップロードする場所
6 まとめ

テンプレートタグとは

WordPressでは、何かを呼び出したり出力したりする際に、テンプレートタグを使用します。

これによってヘッダーやフッター、サイドバーやその他にも様々なものを呼び出したり出力させてたりする事が出来ます。

代表的なテンプレートタグ

ここでは、数多くあるテンプレートタグの中でもよく使われているテンプレートタグについて見ていきましょう。

サイトのパーツを呼び出すテンプレートタグ

インクルードタグとも呼ばれていて、サイトのテンプレートファイルを呼び出すタグ。

タグ	用途
get_header()	header.phpを呼び出すテンプレートタグ。
get_footer()	footer.phpを呼び出すテンプレートタグ。
get_sidebar()	sidebar.phpを呼び出すテンプレートタグ。
get_search_form	検索フォームを呼び出すたテンプレートタグ。

get_template_part()でもテンプレートファイルを呼び出せます。

ファイルパスやリンクを繋げるテンプレートタグ

タグ	用途
echo get_stylesheet_uri()	テーマ内にあるstyle.cssのパスを出力するテンプレートタグ。
echo get_stylesheet_directory_uri()	追加するcssファイルを読み込む場合に使用するテンプレートタグ。
echo get_template_directory_uri()	画像パスを出力する時やjsなどの外部ファイルのパスを出力する時に使用するテンプレートタグ。

非推奨のテンプレートタグのあるので使用には注意しましょう

代表的でよく使用するテンプレートタグをご紹介させて頂きましたが、WordPressのテンプレートタグにはバージョンアップなどに伴い、現在では非推奨となっているテンプレートタグもあります。

非推奨のタグを使用すると、予期せぬエラーや場合によってはセキュリティにも良くない場合がありますので、極力推奨されているテンプレートタグの使用を心がけましょう。

また、今回はテンプレートタグを使用して、TOPページの表示する事を目的とした記事になるので、テンプレートタグ自体のご紹介は機会があれば次回以降にご紹介していきたいと思います。

作成したindex.phpにテンプレートタグを入れて、ヘッダーとフッターを呼び出そう

さて、テンプレートタグについて、簡単にご紹介させて頂いたのですが、このテンプレートタグを使って、TOPページを表示させる方法をご紹介していきます。

index.phpにヘッダーとフッターを呼び出すテンプレートタグを入れます

以前に作成したindex.phpには現在、ヘッダーとフッターがない状態かと思います。

このindex.phpにテンプレートタグを入れてヘッダーとフッターを以下のように追加して呼び出します。

<?php get_header(); ?>//  header.phpを呼び出すテンプレートタグ
<main>
  ここに、TOPページに表示するメインコンテンツになるコードがはいります。
</main>
<?php get_footer(); ?>//  footer.phpを呼び出すテンプレートタグ

上のコードの」ように、index.phpにヘッダーとフッターを呼び出すテンプレートタグを追加すると、上書き保存をします。

header.phpにファイルをつなぐテンプレートタグを入れます

続いて、header.phpの方にもテンプレートタグを追加していきましょう。

style.cssのパスを出力するテンプレートタグを入れます

WordPressでは、通常のHTMLで作成したファイルの読込のパスではスタイルシートを読み込めなかったり、画像を読み込めなかったりします。

ですので、以下のようにスタイルシートやその他の外部ファイルのパスを読み込めるようにテンプレートタグを使ってパスを書き換えます。

style.cssの読み込む場合

<link href="style.css" rel="stylesheet">// 修正前のパス
↓このようにパスにテンプレートタグを入れます
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">// 修正後のパス

その他のcssを読み込む場合

<link href="css/page.css" rel="stylesheet">// 修正前のパス
↓このようにパスにテンプレートタグを入れます
<link href="<?php echo get_stylesheet_directory_uri(); ?>" rel="stylesheet">// 修正後のパス

画像を読み込む場合

<img src="images/images.jpg" alt="画像パス">// 修正前のパス
↓このようにパスにテンプレートタグを入れます
<img src="<?php echo get_template_directory_uri(); ?>/images/images.jpg" alt="画像パス">// 修正後のパス

jsなどの外部ファイルを読み込む場合

<script src="js/script.js"></script>// 修正前のパス
↓このようにパスにテンプレートタグを入れます
<script src="<?php echo get_template_directory_uri(); ?>js/script.js"></script>// 修正後のパス

wp_headタグをヘッダーに追加します

headタグの閉じタグの直前に、wp_headというテンプレートタグを追加します。

このタグはWordPressのテーマ作成をする際に必ず必要で、無いとWordPressが上手く動かなくなる場合がありますので、必ず入れるようにしましょう。

<head>
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>js/script.js"></script>
<?php wp_head(); ?>//  ヘッドタグの閉じタグの直前に追加します
</head>

フッターと、TOPページのメインコンテンツにも必要なテンプレートタグを入れましょう

上のようにテンプレートタグを追加したら、フッターやTOPページのメインコンテンツにあたる画像パスやリンクパスにも、テンプレートタグを入れていきます。

リンクタグには、以下のようにテンプレートタグを追加しましょう

<!-- TOPページへのリンク -->
<a href="index.html">TOPページへ</a>// 修正前のパス
<!-- ↓このようにパスにテンプレートタグを入れます -->
<a href="<?php echo home_url(); ?>">TOPページへ</a>// 修正後のパス
<!-- 下層ページへのリンク -->
<a href="page/index.html">TOPページへ</a>// 修正前のパス
<!-- ↓このようにパスにテンプレートタグを入れます -->
<a href="<?php echo home_url(); ?>/page/">TOPページへ</a>// 修正後のパス

フッターにもヘッダーと同様にwp_footerタグを追加します

header.phpの時と同様に、footer.phpにも、wp_footerというテンプレートタグをボディタグの締めタグの直前に追加します。

<?php wp_footer(); ?>// ボディタグの閉じタグの直前に追加します
</body>
</html>

ここまでが出来ましたら、サーバーに一度アップロードして上手く表示が出来ているかを確認してみましょう

ここまでの作業を終えましたら、次は一度、サーバーにファイルをアップロードして、ちゃんと表示されているかを確認しましょう。

アップロードする場所

作成したファイルは、WordPressのthemesディレクトリとう、テーマを格納しているフォルダがありますので、そこに、今回作成したテーマをアップロードします。

まず、サイトの名前など任意の名前のフォルダを作成し、今まで作成したサイトのファイル一式を入れて以下のディレクトリへアップロードします。

ドメイン名/wp/wp-content/themes/今回作成したフォルダ名/

※環境によりパスが変わりますので、詳細は各自で確認して下さい。

アップロード後、サイトが問題なく表示されていれば今回は無事作業が成功した事になります。

もし不具合があれば、もう一度パスは間違えていないか、タグの記述に間違いは無いかしっかりと確認し、ミスがあれば修正して再度アップロードして表示されるようにしましょう。

まとめ

今回はWordPressで作成したファイルで、TOPページを表示させるために、テンプレートタグをご紹介し、TOPページを表示させる方法もご紹介しましたが、いかがだったでしょうか？

まずは、ここまでがファーストステップと捉えて、次回以降も、ポイントを押さえてご紹介していければと思います。

この記事を書いた人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

詳しく見る