こんにちはKotaです。
この記事ではWordPressのテーマを自作したい初心者に向けて解説していきたいと思います。
今回は「テンプレートファイルへの分割方法」をご説明していきます。テンプレートファイルって何？どうしたら良いの？header.php、index.php、sidebar.php、footer.phpなどのお話ししていきますので、参考になればと思います。
こちら↓のYouTubeに作業内容を掲載してありますので、こちらもご覧下さい。
「WordPressTip’s 8-1 テンプレートファイルへの分割方法」
また本ブログでは、WordPressのテーマを自分で作れるよう、一通りの解説をしていく予定です。40代でも出来ます！一緒にやっていきましょう。
また、本ブログでは「サックリ」伝えて「ゆっくり」説明していきますので、お急ぎの方はサックリだけでも見ていって下さいね。
目次
対象者
- WordPressのテーマを自作したい人(オリジナルテーマを作りたい人)
- WordPressのテンプレートファイル(ページテンプレート)について知りたい人
- 最低限の知識を身につけている人
- とにかくWordPressやそのテーマ作りに興味がある人
事前に最低限必要なスキル
- HTML,CSS,Bootstrap,PHP(基礎的な事がわかればok)
- WordPressの使い方がそれなりにわかる
1.WordPressTip’s テンプレートファイルへの分割方法（本文）サックリ
さて、今回はWordPressのテーマを自作するときに必要な、テンプレートファイルについて、まずはサックリお伝えします。
テンプレートファイルについて
WordPressでは一つのページを表示するのに、幾つかのテンプレートファイルのデータを繋げる事で表示させています。このコーナーでは基本となるいくつかのファイルを説明していきます。
・header.php
・index.php
・sidebar.php
・footer.php
・single.php
・page.php
ここでは以上の6つをご紹介。
テンプレートファイルって何？
その名の通りですが、テンプレート用のファイルです。構造などの枠組みをテンプレート化したものなので、中身のデータを変えれば、違うページを作る事が出来ます。
また、テンプレートファイルの組み合わせを替える事によって、ページに表示する内容を変えることができます。
テンプレートファイルへの分割方法
まず必要なのは元データ。index.htmlとして表示させるはずの1ページ分が必要です。ブログの一番最初に表示させるページですね。それを以下の4つのファイルに分解して保存します。
header.php + index.php + sidebar.php + footer.php
ではどの範囲をどのファイルへ保存するのか？
・「一番上〜<header>要素まで」→header.phpへ
・「<header>要素の後の要素〜<footer>要素の手前まで」→index.phpへ
・「<aside>要素」→sidebar.phpへ
・「<footer>要素以降〜一番下」→footer.phpへ
となります。
ではシングルページ(投稿記事用)の場合は？まずシングル用の通常のhtmlページを用意し、以下のように分割します。
・「<header>要素の後の要素〜<footer>要素の手前まで」→single.phpへ
index.phpがsingle.phpになった以外は同じです。
次に固定ページは？同様に元となるhtmlページを用意して分割へ。
・「<header>要素の後の要素〜<footer>要素の手前まで」→page.phpへ
こちらもindex.phpがpage.phpになった以外は同じですね。
sidebar.phpについてはお好みで使用しましょう。使わないという選択をも出来ます。
以上です。サックリお伝えしました。
WordPressTip’s テンプレートファイルへの分割方法（補足）ゆっくり
さて、以下は雑談混じりでもう少し説明をしていきます。 のでここからは読み飛ばしてOK。気になった人だけ読み続けてもらえれえばと思います。
テンプレートファイルについて(詳細)
「テンプレートファイルって面倒」と感じますか？
私も最初はそう感じました。1ページ分をHTMLで作って終わり。その方がずっと楽だと。なぜわざわざ分割するの？
これはHTMLだけでサイトを作っていけば、すぐに理解できると思います。ただし1ページではなく、複数ページを扱う場合です。2ページ目を作ろうとすると、ヘッダーやフッダーなど1ページ目との共通部分が出てきます。テンプレートファイルであれば、header部分などは同じファイルを使えば済んでしまいますね。
今度は、ヘッダー部分を修正したい！となったらどうでしょうか？1ページだけなら1回。2ページあれば2回・・・ページ数が多ければ多いほど、同様の修正を全てのページへ適用しなければなりません。これは大変な作業です。ですが、テンプレートファイルであれば、一つのheader.phpを直すだけ。それだけでheader.phpを使用している全てのページへ変更が適用できてしまうのです。
実は、テンプレートファイルに分割した後に「テンプレートタグ」に置き換えるという作業が必要なんです。また面倒な・・・と思いますよね？確かに。ですが、これを置き換えておくと、その部分にはデータベースからのデータを読み込む事ができるのです。つまり、レイアウトやスタイルはそのままに、表示させる文章や画像などを変える事ができます。ので、同じテンプレートファイル(WordPressテーマ)をAというブログ、Bというブログそれぞれに使用していたとしても、違った内容を表示できるのです。
また、シングルページであれば、このテンプレートファイルがあれば、毎回記事を投稿すると、同じスタイルで複数のページが簡単に出来上がります。
以上ですが、この便利で面倒なテンプレートファイルの構造により、快適なサイト運用ができるので、はりきってオリジナルのテーマを作っていきましょう！
header.phpについて
ではheader.phpについてもう少し詳しく書いておきます。
元となるinde.htmlページは
<!DOCTYPE html>
から始まっていると思うので、header.php内のコードもそこから始まります。
で、どこまでをheader.phpに入れるのか？
基本的にはナビゲーションまで。だと思います。もし、ナビゲーションの下に、全ページで表示させたい要素があるのなら、それもheader.phpに入れる事になります。
このheader.phpを実際に表示するには、index.phpの中に読み込むという必要があります。どうやって？それにはテンプレートタグを使用します。
<?php get_header(); ?>
の一行をindex.phpの一番上に加える事で可能となります。「get_header()」をテンプレートファイルと呼びます。
index.phpについて
次はindex.phpです。
ページの中心となるファイルで、他のテンプレートファイルは、index.phpの中で読み込んで表示させます。
元となるinde.htmlページのナビゲーションまではheader.phpに入れたので、その後ろからがindex.phpに入れる部分。となります。
どこまでか？フッターの手前まで入れましょう。
ですがサイドバーがあればそれは取り除いておきます。(sidebar.phpに入れます)
分解し別のテンプレートファイルとしたものを、読み込む指示を行います。
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php footer(); ?>
これらのテンプレートタグを、表示すべき場所に使用する事で可能となります。
sidebar.phpについて
次はsidebar.phpです。
さてもう説明するまでもないかと思いますが、サイドバーとなる部分を抜き取って、sidebar.phpとして保存します。<aside>〜</aside>の部分ですね。
index.phpに
<?php get_sidebar(); ?>
を書いておくと、その部分に読み込まれます。
サイドバーを使用しないのであれば、必要のないファイルです。
footer.phpについて
次はfooter.phpです。
<footer>〜</html>をfooter.phpとして保存します。
もし<footer>より上(手前)に、各ページ共通で表示させたい要素があれば、それをfooter.phpに含めておきます。
index.phpに
<?php get_footer(); ?>
を書き読み込みます。
single.phpについて
次はsingle.phpです。シングルページ(投稿ページ)用ですね。
single.phpへ入れるコードの範囲はindex.phpと同様です。
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php footer(); ?>
を使うのも同様です。
single.phpにはサイドバーはいらないよ。というのであればget_sidebar()は使いません。
page.phpについて
次はpage.phpです。こちらは固定ページ用ですね。
page.phpへ入れるコードの範囲はindex.phpやsingle.phpと同様です。
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php footer(); ?>
を使うのも同様です。
single.phpにサイドバーが要らないなら、使いません。
という訳で今回の「WordPressTip’s テンプレートファイルへの分割方法」はここまでとします。
テンプレートファイルという考え方自体は簡単で、とても便利なものです。今回ご紹介した以外のファイルもありますので、調べつつ利用してみて下さいね。
本ブログのこの記事や他の記事にて、ここ分からんぞ！とか、ここ違くない？などあったらお問い合わせください(^o^)
このWordPressTip’sのコーナーでは以前Twitterにて投稿したもの、YouTubeにUPした動画の詳細として書いていきます。私なりのテーマ作成の流れを一通り書いていきますので、TwitterやYouTubeも見て下さいね。
ーーーーーーーーーー 広告 ーーーーーーーーーー
(1)ドメイン購入
このサイトのドメインはこちらで購入しました↓
お名前.com
まずは自分の使いたいドメイン名を、気軽に検索してみて下さいね。
空いているかどうか。いくらかかるのか。が直ぐにわかります。
1年契約からで、大概のドメインは年額1,000円もかからず購入出来ますよ。
(2)レンタルサーバー契約
このサイトで使用しているレンタルサーバーはこちらです↓
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
実際に使ってみて、使いやすさ、スピード、安定性、価格など、実際に使用して、とても満足しているのでオススメです。
わからない事があったら、まずは公式のマニュアルを見て、それでもわからない事はグーグル検索へ。人気のサーバーなので多くの情報が見られ、解決が容易です。
ーーーーーーーーーー 広告 ーーーーーーーーーー
ではまたお会いしましょう。
40代からの転職フリーランスKotaでした。
良かったら↓↓↓もみていってね！
YouTube
私のYouTubeチャンネルでは「ざっくりなWordPressテーマ自作の流れ」をUPしてありますので、順番に見てもらえたら流れが把握できるかなと思います。
Kotanote
ただし、自作テーマの手順や方法には絶対にこれ！といったものは無さそうです。ので、あくまでも私のやり方という事で参考になればと思います。
これじゃわからんよ！という方、ごもっともです。徐々にブログでの解説をアップしていきます。
なんでざっくりなのか？
説明やその他の部分の長い動画が多かったからです。完結に短く表せないだろうか？と思い作っています。（長時間の動画は作れませんでした笑）
YouTubeでざっくり把握し、その後ブログで詳細を把握する。そんな流れがわかりやすいのでは？と思っております。
良かったらチャンネル登録と高評価ボタンをお願いします。
Twitterもやっていますので良かったらフォロー下さい。
kota_lalala
余談
さて、今回は続けて記事が書けました！ホッ。
アマゾンに注文してあった荷物が届きました。クロネコヤマトさんが届けてくれたのですが、受け取り印無しで玄関ドアの近くに置いていってもらいました。今までと違う方法を受け入れていく事も必要ですよね。
夕飯作りのお手伝いをしました。子供の作るお料理のお手伝い！音楽を聴きながら二人でクッキング♪こんな時間も必要だね。何だかんだ忙しくて、そんな時間も作らない日々ですが、必要だなぁと改めて感じましたよ。
それではまた次の記事でお会いしましょう。
ではでは(^^)/
まとめ
- bootstrapで簡単にレスポンシブレイアウト
- breakpointを上手に活用してレスポンシブレイアウト
