読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
WordPress

WordPressをうまく使いこなすためのテンプレートって?

workstation 405768 1920 - WordPressをうまく使いこなすためのテンプレートって?

WordPressにはたくさんのテンプレートが用意されています。けれど、「テンプレートファイルって何?」「そもそもテーマと何が違うの?」と思っている方も多いのではないでしょうか?

 

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

 

テンプレートとは?

 

notebook 2478555 640 - WordPressをうまく使いこなすためのテンプレートって?

 

まずはテンプレートという言葉について抑えておきましょう。テンプレートは、WordPress上で基本的には「テンプレートファイル」のことを指しています。

 

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

 

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

 

言葉だけではイメージできないと思いますので、実際のテーマフォルダの中を見てみましょう。下の画像はデフォルトで用意されている「twentytwelve」のテーマフォルダの中にあるファイルの一覧です。

 

template files - WordPressをうまく使いこなすためのテンプレートって?

 

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

 

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

 

code 2558220 640 - WordPressをうまく使いこなすためのテンプレートって?

 

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

 

デフォルトで用意されている「twentytwelve」のテーマフォルダには、多くのテンプレートファイルが作成されています。けれど、これだけ多くのテンプレートファイルを作成する必要はありません。サイトで必要になるテンプレートファイルだけあれば問題ありません。

 

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

 

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

 

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

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

最低限、この3つが揃っていれば問題ありません。

 

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

 

自作テーマを作るのは難しいと思うかもしれませんが、やってみると意外とそうではありません。HTMLとCSS、PHPの知識がある方ならすぐにできるわけではありませんが、作成することは可能です。

 

テンプレートファイルの作成方法は以下の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: テーマの説明(任意)

 

テンプレートの使い方

 

テンプレートファイルの使い方を紹介します。以下のテンプレートファイルが用意されています。

 

Template Hierarchy - WordPressをうまく使いこなすためのテンプレートって?

WORDPRESS.ORGより)

 

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

この3つのテンプレートファイルは、「ヘッダー」、「フッター」、「サイドバー」に分けたことになります。WordPressの場合、テンプレートファイルから別のテンプレートファイルを読み込むことが可能です。

 

つまり、今回の場合は初めに作成するであろう「index.php」というテンプレートファイルに「header.php」、「footer.php」、「sidebar.php」を読み込んでいます。そして、最終的に一つのWebページを表示していることになります。

 

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

 

テンプレートの追加方法

 

puzzle 693870 640 - WordPressをうまく使いこなすためのテンプレートって?

 

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

 

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

 

あとは用意したテンプレートファイルをサーバー上のテーマフォルダの中にアップロードすればよいだけです。(サーバー上にアップロードする際は「CyberDuck」や「FFFTP」などのFTPクライアントソフトを用いて行ってください。)

 

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

 

business 2717066 640 - WordPressをうまく使いこなすためのテンプレートって?

 

次にテンプレートのカスタマイズ方法を紹介します。

 

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

 

カスタマイズする場所によって変更するテンプレートが異なるので、注意してください。後でログインできなくなると困るので、あらかじめバックアップを取っておくとより良いです。

 

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

 

2017 10 04 - WordPressをうまく使いこなすためのテンプレートって?

 

おすすめの無料・有料テンプレート

 

最後におすすめのテーマを紹介しておきます。過去におすすめのテーマをまとめた記事があるので、そちらをご覧ください。

 

SEO対策済みのテーマやブログに向いているテーマ、アフィリエイトに向いているテーマなどがありますので、あなたの用途に合わせて使ってみると良いでしょう。

 

あわせて読みたい
wordpress 581849 1920 - WordPressをうまく使いこなすためのテンプレートって?
WordPressのオススメテーマまとめWordPressのオススメテーマについてまとめ記事をつくりました。 案件によって、使うテーマが偏っていたり、当時使いやすいなと感...

 

まとめ

 

いかがでしたか?

 

今回はWordPressのテンプレートファイルについてお伝えしました。テンプレートファイルがうまく使いこなせるようになると、オリジナルテーマの作成や、カスタマイズができるようになります。

 

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

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら