WordPress

WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

workstation 405768 1920 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

WordPressにはたくさんのテンプレートが用意されています。

けれど、「テンプレートファイルって何?」「そもそもテーマと何が違うの?」と思っている方も多いのではないでしょうか?

今回は「テンプレートファイルとはそもそも何なのか」、「テンプレートの使い方」などについてお伝えします。

WordPressのテンプレートとは?

notebook 2478555 640 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

テンプレートは、WordPress上で基本的には「テンプレートファイル」のことを指しています。

テンプレートファイルとは?

テンプレートファイルとは、WordPressサイトの構成要素です。サイト上のどのWebページを生成するときにも、パズルのピースのように組み合わせることができます。(WORDPRESS Codex日本語版

言葉だけではイメージできないと思いますので、実際のテーマフォルダの中を見てみましょう。

下の画像はデフォルトで用意されている「twentytwelve」のテーマフォルダの中にあるファイルの一覧です。

template files - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

見ていただくとわかるように多くのPHPファイルが用意されています。これらのPHPファイルを「テンプレートファイル」と呼んでいます。

WordPressのテンプレートファイルの作成方法

code 2558220 640 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

WordPressのテーマはWordPress上で用意されているテーマだけでなく、自作したオリジナルテーマを使うことも可能です。

そこで、自作テーマの作成方法にお伝えします。

デフォルトで用意されている「twentytwelve」のテーマフォルダには、多くのテンプレートファイルが作成されています。

けれど、これだけ多くのテンプレートファイルを作成する必要はありません。サイトで必要になるテンプレートファイルだけあれば問題ありません。

つまり、「index.php」というテンプレートファイルと「style.css」というスタイルシートだけでもあれば良いのです。(これだけ少なくするのは難しいと思いますが…)

自作テーマを作成する際に必ず必要なもの

自作テーマを作成するために必ず必要なものを紹介します。

  • サイトのスクリーンショット(画像)
  • style.css(スタイルシート)
  • テンプレートファイル

最低限、この3つが揃っていれば問題ありません。自作テーマを作るのは難しいと思うかもしれませんが、やってみると意外とそうではありません。

HTMLとCSS、PHPの知識がある方ならすぐにできるわけではありませんが、作成することは可能です。

WordPressのテンプレートファイル作成のステップ

テンプレートファイルの作成方法は以下の3つのステップに分けられます。

  1. テーマフォルダを作成する
  2. テンプレートファイルを作成する
  3. スタイルシートを作成する

1.テーマフォルダを作成する

まずはテーマフォルダを作成しましょう。

テーマフォルダの中にテンプレートファイルやスタイルシートなど、テーマに必要なファイルはすべて1つのフォルダにまとめます。

自分でテンプレートファイルを1から作る場合はフォルダの名前は何でもよいです。ですが、あとで探しやすいようにわかりやすい名前にしておくと良いでしょう。

2.テンプレートファイルを作成する

次にテンプレートファイルを作成します。

テンプレートファイルといってもたくさんありますが、まずは一番基本となる「index.php」を作成しましょう。

「index.php」は、サイトのTopページにアクセスされたときに表示されるページです。「index.php」には以下の要素を記述する必要があります。(保存するときの文字コードは「UTF-8」にしておきましょう。)

このようにHTMLを構成する要素をあらかじめ記述しておくとコーディングしやすくなります。この中に表示したいテキストなどを記述していくことになります。

コーディングはテキストエディタを用いて記述しましょう。「index.php」ができたら、あなたのサイト構成に合わせてテンプレートファイルをいくつか作ってみましょう。

3.スタイルシートを作成する

次に、デザインやレイアウトを記述するスタイルシート(「style.css」)を作成します。こちらもテキストエディタを用いて作成してください。

(「index.php」と同じように文字コードは「UTF-8」にしましょう。)

CSSファイルの最初には以下の4項目を記述してください。

上の4項目は以下の内容を指しています。必須なのは「Theme Name」だけなので、テーマの名称だけ記述しても問題ありません。

  • Theme Name: テーマの名称(必須)
  • Author: テーマの作成者(任意)
  • Author URI: サイトのURL(任意)
  • Description: テーマの説明(任意)

WordPressのテンプレートの使い方

Template Hierarchy - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

WORDPRESS.ORGより)

続いて、テンプレートファイルの使い方を紹介しますが、Wordpressには上記のテンプレートファイルが用意されています。

使うテンプレートファイルはサイトの構成によって異なるかもしれませんが、以下のテンプレートファイルは必ずと言ってもいいくらい使うでしょう。

この3つのテンプレートファイルは、「ヘッダー」、「フッター」、「サイドバー」に分けたことになります。

WordPressの場合、テンプレートファイルから別のテンプレートファイルを読み込むことが可能です。

つまり、今回の場合は初めに作成するであろう「index.php」というテンプレートファイルに「header.php」、「footer.php」、「sidebar.php」を読み込んでいます。

そして、最終的に一つのWebページを表示していることになります。

このようにテンプレートを部品化しておくことで、変更しやすくなります。例えば、フッター部分のレイアウトを変更したい場合は、「footer.php」のみを編集すればよいのです。

WordPressのテンプレートの追加方法

puzzle 693870 640 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説

次に、自分で作成したテンプレートファイルの追加方法を紹介します。

先ほど「テンプレートファイルを作成する」でお伝えした手順で作成したテンプレートファイルを用意しておきましょう。

あとは用意したテンプレートファイルをサーバー上のテーマフォルダの中にアップロードすればよいだけです。

なお、サーバー上にアップロードする際は「CyberDuck」や「FFFTP」などのFTPクライアントソフトを用いて行ってください。

WordPressのテンプレートのカスタマイズ方法

2017 10 04 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説次に、テンプレートのカスタマイズ方法を紹介します。

基本的に、カスタマイズをする場合は、WordPressの左側のメニューにある「外観」→「カスタマイズ」からレイアウトなどのカスタマイズができます。

「デフォルトのデザインを変更したい」、「非表示にしたい場所がある」という場合にはテンプレートのカスタマイズをしていきましょう。

なお、カスタマイズする場所によって変更するテンプレートが異なるので、注意してください。

後でログインできなくなると困るので、あらかじめバックアップを取っておくとより良いです。

WordPressのテーマをカスタマイズする際の注意点

なお、Wordpressをカスタマイズする上ではいくつかの注意点があります。

その注意点を2つにまとめてみました。

子テーマを作る

テーマによってバージョンアップされることがあります。テーマをそのままバージョンアップしてしまうと、新しいバージョンのテーマで上書きされてしまいます。

そのため、新たに追加した機能やデザインのデータが消えてしまいます。

それを防ぐために子テーマを使ってカスタマイズしましょう。子テーマの作り方は以下のサイトをご覧ください。

あわせて読みたい
wordpress 1288020 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説
wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめwordpressで「子テーマ」という用語を聞いたことはありませんか? まだwordpressを使い始めた初心者の方にとっては、聞...

バックアップを取る

また、テーマをカスタマイズする前に必ずバックアップを取っておきましょう。

特に「functions.php」を変更する場合は注意が必要です。「functions.php」にエラーがあると管理画面にログインできなくなることがあります。

バックアップのやり方は以下の記事を参考にしてみてください。

あわせて読みたい
laptop 1835029 1920 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説
初心者でも簡単!WordPressのバックアップと復元方法まとめWordPressに関わらず、パソコンなどを使っているときに「データが消えてしまった…」という経験はありませんか? バックアップを...

WordPressでのオリジナルテーマの作成方法

また、ネット上で公開されているテーマを使うだけでなく、自分でテーマを作る手段もあります。自作テーマの作り方は以下の記事を参考にしてみてください。

あわせて読みたい
wordpress - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説
初心者がWordPressテーマを自作するのに必要な知識や方法を6ステップで解説初心者だけど、WordPressのテーマを自作してみたい。オリジナルの機能を追加したくて、WordPressのテーマを作る必要がある… ...

WordPressのテンプレートに関するまとめ

いかがでしたか?

今回はWordPressのテンプレートについてお伝えしました。

テンプレートファイルがうまく使いこなせるようになると、オリジナルテーマの作成や、カスタマイズができるようになります。

また、Wordpressには多くのテーマが用意されていますが、目的に合ったテーマを選ぶのがおすすめです。

あわせて読みたい
noble 789501 - WordPressのテンプレートとは?作り方・使い方・カスタマイズなどを完全解説
wordpressテーマは有料と無料どっちがおすすめ?初心者が迷った時の選び方wordpress(ワードプレス)のテーマやテンプレート選びに悩んでいる…無料テーマを色々見てみたものの、どれが一番良いのか分からない…...

目的に合っているテーマを使うと、それに合った機能も用意されているので、使いこなせるようになると非常に便利です。

最後まで読んでいただきありがとうございました。