ワードプレス 最小構成 オリジナルテーマ 作り方と基本

WordPress

【テーマ自作】WordPress オリジナルテーマの作り方と基本

今回はWordPress(ワードプレス)でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明していきます。
 

■今回WordPress化する静的サイトの例

 

ここでは、まずワードプレスの基本のおさらいをしてから、前半に最小構成のテーマの作り方を説明、後半に投稿・固定ページなどの各種テンプレートの追加の仕方を説明していきます。
 

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 

WordPressとは 基本のおさらい

WordPressとは

ワードプレスのロゴ
 

はじめに、ワードプレスの仕組みについて簡単に説明します。もともとWordPress(ワードプレス)は、2003年にブログを作成するシステムとして登場しました。
 

その後、徐々に進化・発展していき、今ではブログ以外にも企業のホームページ・ウェブサイトとして多く利用されています。
 

そして、現在ではホームページ作成するためのシステム(CMS)のなかでは世界・日本共にNo1の非常に有名なシステムとなりました。
 

2015年時点 日本のワードプレスシェア

2015年時点 日本のワードプレスシェア


 

その特徴として、豊富なテーマ(デザインテンプレート)やプラグイン(スマホのアプリのようなもの)があり、オリジナルのデザインで会員サイトやネットショップなどを作ることも可能です。
 

WordPress テーマ 追加画面

WordPress テーマ 追加画面


 

ワードプレス プラグイン追加画面

ワードプレス プラグイン追加画面


 

また、ワードプレス自体は無料で誰でも利用でき商用利用も可能ですので、勉強すればだれでもワードプレスでホームページを作ることができます。
 

合わせて読みたい記事

WordPressの基本的な使い方を勉強・おさらいしたい方は「【2019年版WordPress(ワードプレス)の使い方総まとめ】」をあわせてご覧ください。

 

WordPressの概要構成

以下はワードプレスの構成、いわゆるシステムの実体の概要図です。

ワードプレスの構成
 

通常のホームページの場合は、HTMLファイルや画像ファイルなどのファイル類で構成されますが、WordPressはこれらのフォルダ・ファイル類に加えて、PHPというプログラム言語とMySQLと言われるデータベース(データの蓄積される場所)を利用しています。
 

実はブログ情報(文章)などもデータベースに蓄積されていて、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、ワードプレスのシステムを提供しています。
 
 

WordPressのフォルダ・ディレクトリ構成

つぎに、WordPressのフォルダ・ディレクトリ構成(下図の赤枠の部分)について説明していきます。

ワードプレスのディレクトリ構成
 

以下はワードプレスのインストールフォルダの中身です。
ワードプレスのインストールフォルダの中身
 

たくさんありますので、ここではピックアップして説明していきます。

フォルダ・ファイル名 内容
wp-content ワードプレスのテーマやプラグイン、画像データなどが入ったフォルダ。ワードプレスをカスタマイズする際には、主にこのフォルダの中のファイル類に対して作業していきます。
wp-admin ワードプレスの管理画面用のファイル類が格納されているフォルダ
wp-includes ワードプレスのシステム全般に関するファイル類が格納されているフォルダ。
wp-config.php ワードプレスの設定ファイル。データベースとの通信に必要な情報なども記述されており、とても重要なファイル
wp-login.php ワードプレスのログイン画面に関するファイル
wp-load.php ワードプレスの動作に必要なプログラム類を読み込むファイル
index.php サイトにアクセスがあった時に最初に読み込まれるファイル

 

wp-contentは、ワードプレスのテーマやプラグイン、画像データなどが入ったフォルダです。ワードプレスをカスタマイズする際には主にこのフォルダの中のファイル類に対して作業していきます。
 

下記はwp-contentの中身です。この中の「themes」にワードプレスのテーマが格納されています。
テーマを作成・カスタマイズ する時に触るフォルダ
 

「themes」フォルダの中です。デフォルトのワードプレステーマがあるほか、このフォルダに独自テーマを追加することでそのテーマを利用できるようになります。

ワードプレスのテーマフォルダの中身
 

下記は管理画面の外観>テーマから見たワードプレスのテーマ画面です。themesフォルダの中にあるテーマがここに表示されて選択することができます。

ワードプレス テーマ選択画面

ワードプレス テーマ選択画面


 

▲▲目次に戻る▲▲


 

WordPressの最小構成テーマを作成する

必要最小の構成

ワードプレステーマの最小構成は「index.php」と「style.css」の2ファイルになります。

ワードプレステーマの最小構成。style.cssとindex.php
 

今回は、themesフォルダの中にテーマフォルダ「webst8」を作成して、index.phpとstyle.cssを作ってワードプレスのテーマを表示させる最小構成で説明していきます。
 

今回説明する最小構成

  • webst8:themesに格納するテーマフォルダ名
  • index.php:テーマの基本テンプレート
  • style.css:テーマの名前などを記述する

 

事前に用意する環境

今回は、下記のような環境を例に説明を進めていきます。
 

ワードプレスが動作するローカル環境

ローカル環境のMAMP上にワードプレスをインストールした状態で進めていきます。
 

環境は以下の通りです。

■ワードプレスインストールディレクトリ
http://localhost/wpkm
(MAMPのhtdocsにwpkmフォルダを作成してインストール)
 

■ワードプレスバージョン
4.9.1
 

合わせて読みたい記事

ローカル開発環境MAMPの導入からWordPressのインストールまでの手順は「【ローカル開発環境】MAMPでWordPressをインストールする方法」を合わせてご覧ください。

 
 

事前に準備する静的HTMLページ

ここでは、事前に下記のようなページと、HTML・CSS・画像ファイル準備して説明していきます。
 

■サンプルウェブページ(index.html)
レッスントップページ
 

■事前準備するHTMLフォルダとファイル類
事前準備するwebst8フォルダとファイル類
 

項目 内容
webst8 htmlファイル類を格納しているフォルダ。あとでワードプレスのthemesフォルダに移動します。
index.html 今回ワードプレス化するウェブページ
mystyle.css index.htmlを整形するスタイルシート
images 画像を格納しているフォルダ

 

■index.htmlのソースコード

 

■mystyle.cssのソースコード

 

(※)画像をはじめHTMLファイルなどは各自ご自身の好きなものを準備して読み替えて進めてみてください。
 

上記のデモサイトはこちら

 

まずは、事前準備した上記の「webst8」フォルダをワードプレスthemesフォルダにコピーしましょう。

WordPressのthemesフォルダにwebst8フォルダをコピーする
 
 

style.cssの作成

つづいてwebst8フォルダのなかに、必須ファイルであるstyle.cssを新規作成します。

ワードプレスに格納したwebst8フォルダにstyle.cssを追加する
 

style.cssにはテーマの名前など必須の情報を入力します。ここではstyle.cssに以下のように記載します。

 

Theme Nameはワードプレスのテーマの名前(必須)です。他にも必要に応じて下記のような項目などを記載することができます。

項目 名称
Theme Name : テーマの名前(必須)
Theme URL : テーマのURL
Description : テーマの説明
Author: テーマ制作者の名前
Version : テーマのバージョン

 
 

index.phpの作成

つぎにindex.phpを作成します。
 

ここでは、トップページとして用意していたindex.htmlのファイル名を「index.php」に変更します。

ワードプレスのテーマ「webst8」のindex.htmlをindex.phpに変更する
 
 

テーマの適用

これでテーマが適用できるようになります。
 

ワードプレスの外観>テーマで「webst8」を有効化します。
webst8を有効化する
 

補足 テーマのサムネイルを表示する

880x660pxの「screenshot.png」という画像をwebst8フォルダに格納すると、テーマ選択画面でサムネイルが表示できます。
880x660pxの「screenshot.png」という画像をlessonフォルダに格納する
 

テーマ選択画面でサムネイルが表示された。
テーマのサムネイルが表示された

 

テーマ適用後に、トップページを表示します。設定したテーマが表示されていればいったん完了です。

ワードプレス化したindex.phpのトップページ
 

(※)この状態ではまだCSSファイルのスタイルが適用されていなかったり、画像が表示されいないので、さらに修正していきます。
 

▲▲目次に戻る▲▲


 

相対パスをワードプレス独自の関数に修正

さきほど、ワードプレスの最小構成のテーマを作成することができましたが、CSSファイルが適用されていなかったり、画像が表示されなくなっていました。
 

■トップページ スタイルが崩れていて、画像が表示されていない
ワードプレス化したindex.phpのトップページ。スタイルが崩れていて、画像が表示されていない
 

本来画像がある場所は「ワードプレスインストールフォルダ(ここではlocalhost/wpkm)/wp-content/themes/webst8/images/xxx.jpg」なのですが、下記のように「localhost/wpkm/webst8/images/xxx.jpg」となっていてファイルが見つからず画像が表示されなくなっています。
 

指定している相対パスにファイルが存在せず、エラーが発生しているため、正しいパスに修正する必要がある
 

そこで、相対パスで記述している箇所は設定をワードプレス独自の関数を入れて修正していきます。(CDNを利用している場合など、絶対パスで指定している箇所は修正不要です。)
 

ここでは下記のようにCSSの設定を変更してください。
 

CSSファイルの相対パスの修正

 

javascriptなども相対パスで設定している場合は、必要に応じて上記の方式で変更してあげましょう。
 
 

画像ファイルのパスの修正

また、画像ファイルのパスも以下のように修正します。
 

画像が多い場合はエディタ上で「command+F」(ウインドウズの場合は、cntl+F」を押して下記のように入力して一括置換すると手間が削減できます。
Atomでcommand+F(cntl+F)で置換ツールを出して、一括置換します

 

 

設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。
ワードプレス index.phpでCSSファイルと画像が適用された
 

「get_template_directory_uri();」について

get_template_directory_uri()は、現在利用しているテーマ(親テーマ)のパスを戻り値として返すワードプレス独自の関数です。
 

HTMLとして出力する場合は「<?php echo get_template_directory_uri(); ?>」のように記述します。
 

本例では、get_template-directory_uri()が、http://localhost/wpkm/wp-content/themes/webst8を出力しています。
get_template-directory_uri()が、http://localhost/wpkm/wp-content/themes/webst8を出力している
 

■参考サイト
関数リファレンス/get template directory uri

 

▲▲目次に戻る▲▲


 

ワードプレス関数(wp_head()とwp_footer())を追加する

つぎにワードプレスで実質必須の関数であるwp_head()とwp_footer()を追加します。
 

下記のように<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入してください。

 

上記設定後にログインしてトップページを表示すると、画面上部に管理バーが表示されるようになっています。
ログイン状態でトップページを表示すると、画面上部に管理バーが表示されている
 

トップページのソースコードを確認するとワードプレスのオリジナルのコードやプラグインのコードがheadタグの直前に出力されていることを確認できます。
ワードプレスのオリジナルのコードや プラグインのコードが</head>タグ の直前に出力されるようになりました
 

<?php wp_head(); ?>と<?php wp_footer(); ?>は必須の関数

<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入することで、それぞれの関数を経由してワードプレスの基本機能やプラグイン機能のコードが出力されて使うことができるようになります。
これらの基本機能やプラグインを使わない運用は通常ありえないので必須の関数として忘れずに挿入しておきましょう。

 

▲▲目次に戻る▲▲


 

(補足)jqueryのワードプレス独自の使い方について

ワードプレスでjQueryを使う場合において、少し通常と異なった使い方をするため補足します。
 

現状では、下記のように<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>と記述してjqueryを読み込む設定をしています。

しかし、ワードプレスにはもともと標準でjQueryを読み込んでいるため競合してしまう場合があります。重複読み込みしても一見問題なく動くケースもありますが、予期せぬ不具合やパフォーマンス劣化を起こす場合があります。
 

(※)ワードプレス標準で読み込まれるjqueryファイルの場所
<ワードプレスインストールフォルダ>/wp-includes/js/jquery/jquery.js
 

異なる二つのjQueryファイルを読み込んで競合するのを防ぐため、一般的にはもともとワードプレスに備わっているjQueryを利用します。
 

ワードプレスではwp_enqueue_script関数が用意されていて、これを使って読み込みの順番の制御を行うことができます。
 

今回はindex.phpのwp_head()の前の行に、<?php wp_enqueue_script('jquery'); ?>を追加します。
 

代わりに、<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>が不要になったのでこの一行をコメントアウト(または削除)しておきます。
 

■修正ステップ1

 

(新たにfunctions.phpというファイルを作ってそこに記述して制御する方法もありますが、簡略化のためここでは割愛します。)
 

上記の設定後にトップページのソースコードを見るともともとワードプレスに備わっているjqueryが読み込まれるようになったことが確認できます。
もともとワードプレスに備わっているjqueryが読み込まれるようになった
 

また、bootstrap用のjavascriptファイル「<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>」はjqueryを利用しているため、jqueryを読み込んだ後で読み込ませる必要があります。
 

そこで、<?php wp_enqueue_script('jquery'); ?>の後の行に下記のコードを追加します。
 

 

(上記のざっくりの意味は、’bootstrap-js’というハンドル名(わかりやすくて一意な名称であればなんでも良い)をつけて、’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js’のファイルを’jquery’の後に読み込ませるという意味です。
 

■詳細の説明はこちらをご覧ください。
関数リファレンス/wp enqueue script | WordPress Codex日本語版
 

代わりにもとの「<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>」は不要になったため、コメントアウト(または削除)します。
 

■修正後のindex.php

 

上記のようにjqueryを利用する読み込むJavascriptは、jqueryを読み込んだ後に設定するようにしましょう。
 

ここでは、割愛しますが、他のCSSファイルやJavascriptファイルの読み込み順番も同様にして制御することができます。
 

■詳細の説明はこちらをご覧ください。
関数リファレンス/wp enqueue script | WordPress Codex日本語版
 

(補足)通常jQueryで使っている「$」が使えない件

jQueryを利用した書き方で「$」を使った書き方をすることも多いと思いますが、実はこれもそのまま使えません。ワードプレス標準で読み込まれるjqueryファイルは、標準のjQueryとは少し異なっています。
 

ワードプレスに備わっているjQueryはno-conflictモードになっていて「$」が使えなくなっています。ワードプレスの他のライブラリで「$」の文字が使われいた時に不具合がおきないようにこのような仕様になっています。
 

従ってネットで探したjQueryのコードをそのままコピー&ペーストしても「$」が原因で動かないケースがよくあります。簡単にできる対処方法としては「$」を「jQuery」に全て変換する方法があります。
 

あるいは「$(function(){・・・})」を「jQuery(function($) {・・・})」のようにカプセル化した書き方をしても解決できます。

jQuery.noConflict() | jQuery API Documentation

 

▲▲目次に戻る▲▲


 

テンプレートを分割する

つぎに、下記のようにindex.phpをheader.phpとfooter.phpとsidebar.phpに分割していきます。分割することで、ファイルを共通化して効率よくメンテナンス・更新ができるようになります。
 

index.phpをheader.php・footer.php・sidebar.php・index.phpに分割する
 

まずは、空のheader.phpとfooter.phpとsidebar.phpを新規作成してください。

空のheader.phpとfooter.phpとsidebar.phpを新規作成する
 

上記のテンプレートはindex.php側(呼び出し側のファイル)で、以下の関数で呼び出すことができます。

各テンプレートの呼び出し方

  • header.phpは「get_header();」で呼び出すことができます。
  • footer.phpは「get_footer();」で呼び出すことができます。
  • sidebar.phpは「get_sidebar();」で呼び出すことができます。

 

▲▲目次に戻る▲▲


 

header.phpの作成

まずはheader.phpを作っていきます。ここではヘッダー画像までを共通化したいので、index.phpの下記の部分を切り取り、header.phpにコピーします。
 

■header.php (index.phpから切り取ってheader.phpに貼り付けするコード)

 

(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
 

次に、index.php上部(切り取りした部分)に<?php get_header(); ?>を追記して分割したheader.phpを読み込む設定をします。

■index.phpに追記するコード<?php get_header(); ?>

 

(※)get_header()はワードプレス独自の関数で、header.phpを読み込む処理をしてくれます。
 
 

footer.phpの作成

つづけて、footer.phpを作成します。ここでは、<footer>から</html>までを切り取って、footer.phpに貼り付けます。
 

■footer.php(index.phpから切り取ってfooter.phpに貼り付けするコード)

 

(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
 

次に、index.phpの最終行(切り取りした部分)に<?php get_footer(); ?>を追記して分割したfooter.phpを読み込む設定をします。
 

■index.phpに追記するコード <?php get_footer(); ?>

 

(※)get_footer()はワードプレス独自の関数で、footer.phpを読み込む処理をしてくれます。
 
 

sidebar.phpの作成

最後にsidebar.phpを作成します。ここでは、<div id="sidebar" class="col-md-3">タグの中身を切り取って、sidebar.phpに貼り付けます。
 

■sidebar.php(index.phpから切り取ってsidebar.phpに貼り付けするコード )

(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
 

つぎに、index.phpの<div id="sidebar" class="col-md-3">タグの中に(切り取りした部分)に<?php get_sidebar(); ?>を追記して分割したsidebar.phpを読み込む設定をします。
 

■index.phpに追記するコード <?php get_sidebar(); ?>

 

(※)get_sidebar()はワードプレス独自の関数で、sidebar.phpを読み込む処理をしてくれます。
 

最後に表示がうまくいっているかを確認しましょう。トップページを表示してこれまで通り画面が正常に表示されていれば完了です。


 

 

他のテンプレートを作成するには

今までは、静的な一つのHTMLファイルをワードプレス化する方法を紹介しましたが、ここではもう少しステップアップして固定ページや投稿ページ、アーカイブページなどを作成する方法も紹介していきます。

ワードプレスでは役割に応じて下記のようなテンプレートファイルを作ることができます(他にもたくさんありますがここでは割愛します)。
 

主要なテンプレートファイル

ワードプレスでよく利用する主要なテンプレートファイルをいくつかピックアップして記載します。

テンプレートファイル名 概要
index.php ワードプレス必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。
single.php 投稿用のテンプレート
page.php 固定ページ用のテンプレート
archive.php アーカイブ用のテンプレート
category.php カテゴリーページのテンプレート
404.php ページが見つからないエラー(404エラー)用のテンプレート
search.php 検索結果用のテンプレート

 
 

テンプレートの主な優先順位

これらのテンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われます。
 

初めに作った、index.phpは他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。
 

ここでは、トップページと固定ページと投稿ページの優先順位について説明していきます。
 

トップページ用テンプレートの優先順位

トップページ用テンプレートの優先順位です。
 

優先順位 テンプレートファイル名 概要
1 front-page.php トップページ用のテンプレート
2 フロントページに設定した固定ページ.php 表示設定から、フロントページの表示で指定した固定ページ
3 home.php -
4 index.php -

 
今回紹介している例では、index.php以外のテンプレートが存在しないため、トップページにindex.phpが適用されています。
 
 

固定ページの優先順位

固定ページ用テンプレートの優先順位です。
 

優先順位 テンプレートファイル名 備考
1 カスタムテンプレート
2 page-{スラッグ名}.php
3 page-{ID}.php
4 page.php
5 index.php -

 

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの固定ページを表示してもindex.phpが適用されます。
 

このままだとWordPressの管理画面で固定ページを作成できないので、後ほど固定ページ用のテンプレート「page.php」の作り方を説明していきます。

 

投稿ページの優先順位

投稿ページ用テンプレートの優先順位です。
 

優先順位 テンプレートファイル名 概要
1 single-{post-type}.php カスタム投稿タイプ。投稿タイプがnewsの場合はsingle-news.php
2 single.php -
3 index.php -

 

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの投稿ページを表示してもindex.phpが適用されます。
 

このままだとWordPressの管理画面で投稿ページを作成できないので、後ほど投稿ページ用のテンプレート「single.php」の作り方を説明していきます。

 
 

今回は簡単な紹介になりましたが、優先順位の全体像は下記にありますので、ご興味のある方は確認してみてください。
 
テンプレート階層 | WordPress Codex日本語版
 
テンプレート階層(画像) | WordPress Codex日本語版
 
 

さて、現時点では、index.phpしか表示できるテンプレートがないので、ワードプレスの投稿や固定ページを新規作成してもこの時点ではindex.phpの内容が表示されます。
 

ワードプレス管理画面で投稿や固定ページを作成してプレビューを見てもindex.phpが表示される
 

index.phpの内容が表示される
 

ここで、index.phpより優先順位の高い固定ページ用のテンプレート「page.php」を作れば、index.phpより優先度が高いので、固定ページではこちらが自動的に使用されます。
 

以下に、固定ページ(page.php)を作るサンプルを紹介して行きます。
 
 

固定ページ(page.php)の作り方

ここでは、固定ページ(page.php)の作り方を説明します。
 

固定ページのテンプレートが適用される順番は下記のようになっています。page.phpを作成すればindex.phpよりも優先されるのでpage.phpを作成して行きます。
 

固定ページのテンプレート優先順位

優先順位 テンプレートファイル名 備考
1 カスタムテンプレート
2 page-{スラッグ名}.php
3 page-{ID}.php
4 page.php
5 index.php -

 

固定ページ(page.php)の作り方

index.phpを流用して作りたいと思います。index.phpをコピーしてpage.phpにリネームして下さい。
 

index.phpをコピーしてpage.phpにリネーム
 

まずはこのpage.phpが固定ページに適用されるかを確認して見ましょう。

ここでは、、<div id="main" class="col-md-9">〜</div>の中を削除して代わりに以下のようにh1タグを追記します。

 

この状態で、ワードプレスの管理画面から何か適当な固定ページを作成してみてください。作成後に公開→プレビューを表示してみてください。
 

ワードプレスのダッシュボードで固定ページを作成・公開後にプレビューボタンを押下
 

先ほど作成したpage.phpのテンプレートが適用されていることがわかります。
固定ページをプレビューすると、page.phpのテンプレートが適用されていることがわかります。
 

上記では管理画面で固定ページに記述したタイトルや本文が反映されていなかったので、管理画面で書いた内容が反映されるようにpage.phpを編集して行きます。
 

以下はワードプレスの記事の中身を出力する基本構文です。
ワードプレスのループ文
 

(h1,sectionタグはこちらで任意に決めたHTMLタグなので、h2タグでもdivを使っても構いません。)
 

詳しい内容は割愛しますが、ここでは、そのまま固定ページ用のテンプレート「page.php」に以下のように追記すると、固定ページの中身を出力してくれます。

■page.phpのソースコード

 

■whileループで利用するワードプレス関数の説明

項目 内容
whileループ WordPressの投稿の中身を表示するために使われるワードプレス用の構文です。


参考:ループ | WordPress Codex 日本語版
the_title() 投稿や固定ページのタイトルを表示します。whileループの中で使用します。
参考:テンプレートタグ the title | WordPress Codex 日本語版
the_content() 投稿や固定ページの本文を出力します。 whileループの中で使用します。
参考:テンプレートタグ the content | WordPress codex 日本語版

 

これで、管理画面で作成した固定ページの内容を出力する準備が整いました。再度、さきほどの固定ページをプレビューして確認してみると、管理画面で記述した内容が表示されていることを確認できます。

ワードプレスの管理画面で記述した固定ページの内容が表示されていることがわかる
 

このように、HTMLで作成したテンプレートの中にWordPressが用意している関数を組み込むことでワードプレスの機能を利用できるようになります。
 

ここでは、タイトルと本文を出力していますが、他にも投稿日時やカテゴリーなど色々なものを出力できるので、ご興味のある方は下記を参照してみてください。
 

■参考サイト
ループ | WordPress Codex 日本語版
 
 

スラッグ付き固定ページ(page-{スラッグ名}.php)の作り方

さらに独自のレイアウトの固定ページを作りたい場合は、page-{該当ページのスラッグ名}.phpを作れば、page.phpより優先度が高くなり、こちらが自動的に使われます。
 

下記のように静的サイトでもともと「contact.html」と「profile.html」がある前提で、これをワードプレスの固定ページとして読み込む方法を説明します。
webst8フォルダに各htmlファイルを格納する

固定ページを作成する

まず固定ページを作成していきます。
 

固定ページ>新規作成より「お問い合わせ」と「プロファイル」作成します。本文は空で構いませんので、ここではスラッグ名をそれぞれ「contact」と「profile」と入力して公開して下さい。
 

■固定ページ「お問い合わせ」を作成。スラッグを「contact」に変更して公開
固定ページでスラッグ名「contact」にして公開
 

固定ページでスラッグ名「contact」にして公開
 

■固定ページ「プロファイル」を作成。スラッグを「profile」に変更して公開
固定ページでスラッグ名「profile」にして公開
 
 

ファイル名を変更する

つぎに、テーマフォルダ内のhtmlファイルをリネームします。

ここでは下記のように変更します。

  • contact.html → page-contact.php
  • profile.html → page-profile.php

 

htmlのファイル名をpage-xxxx.phpのように変更する
 

以上で完了です。
 

サイトを確認してページが反映されていることを確認しましょう。
 
 

別の固定ページテンプレートを作成する

固定ページは、「page.php」というテンプレートファイルで作成することはすでに解説した通りです。このひとつのテンプレートファイルで事足りればよいのですが、ページによっては、1カラムのテンプレートを利用したい場合など、複数のレイアウトがあった方が便利な場合があります。
 

ここでは複数のテンプレートファイルを作成・管理する方法について説明します。例題として、1カラムレイアウト(サイドバーがないテンプレート)を作成してみましょう。
 

■ここで作成するファイル名(名前はなんでも構いません。管理しやすい名前がおすすめです。)は、「pagetemplate-onecolumn.php」にします。元になるテンプレートファイルの「page.php」をコピーして、「pagetemplate-onecolumn.php」を作成します。
 
page.phpをコピーして、pagetemplate-onecolumnを作成
 

ここでは、pagetemplate-onecolumn.phpを下記のように書き換えます。

 

■上記の解説

  • ファイル名の先頭にコメントアウトで、このテンプレートの名前を記述します。テンプレートの名前は「Template Name:」の後に続く形で記述します。また、「Description」の後に、テンプレートファイルの説明文を記載することも可能です。
  • ワンカラム用のテンプレートにするので、サイドバーの以下セクションを削除します。
  • また、メインカラムのdivのクラスcol-md-9をcol-md-12に変更します。

 
 

これで、1カラムのテンプレートが作成できました。管理画面の固定ページで1カラムテンプレートを選択できるようになったので、タイトルと文章を適当に記述してみましょう。
 

テンプレートに「1カラムテンプレート」を選択して、公開→プレビューをしてみましょう。
テンプレートに「1カラムテンプレート」を選択して、公開→プレビューをしてみましょう。
 

プレビューで1カラムのページができていることがわかります。
プレビューで1カラムのページができていることがわかります。
 

以上で、固定ページの別テンプレートの作成方法は完了です。このテンプレートは固定ページの中で最も高い優先順位になります。
 
 

投稿(single.php)の作り方

つづいて、投稿を出力する方法を紹介します。
 

投稿ページのテンプレートが適用される順番は下記のようになっています。single.phpを作成すればindex.phpよりも優先されるので、ここではsingle.phpを作成して行きます。
 

投稿ページの優先順位

投稿ページのテンプレートの優先順位は下記の通りです。
 

優先順位 テンプレートファイル名 概要
1 single-{post-type}.php カスタム投稿タイプ。投稿タイプがnewsの場合はsingle-news.php
2 single.php -
3 index.php -

 

基本的にpage.phpを作成した時と同じ手順で作成することができます。
 

ここでは、page.phpを流用して作りましょう。page.phpをコピーしてsingle.phpにリネームして下さい。
 

page.phpをコピーしてsingle.phpにリネーム
 

では、このまま管理画面の投稿から何か記事をかいて公開→プレビューを表示してみて下さい。
ワードプレスの管理画面から投稿で記事を書いて、公開→プレビューを押下
 

投稿に書いた内容が表示されていることがわかります。
ワードプレスの管理画面で記述した投稿ページの内容が表示されていることがわかる
 

ワードプレスの仕様により、先ほどの構文を投稿用テンプレート「single.php」に書くと、ワードプレスが投稿用の中身を探してくれて表示してくれています。

ワードプレスのループぶん
 
 

日付別表示(archive.php)の作り方

つづいて、日付別の投稿一覧を表示するテンプレートを作成します。
 

日付別アーカイブインデックスページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。
 

archive.phpを作成すればindex.phpよりも優先されるので、ここでは、archive.phpを作成します。
 

日付別表示のテンプレート優先順位

順位 テンプレートファイル名 概要
1 date.php -
2 archive.php -
3 index.php -

 

日付別表示ページ(archive.php)の作り方

まずこれまでと同様に、single.phpをコピーしてarchive.phpを作成してください。

single.phpをコピーしてarchive.phpを作成する
 

つぎに、archive.phpを下記のように編集します。

 

■各関数の意味

関数名 意味
get_permalink(); 記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。
the_title(); 記事タイトルを出力する関数。whileループ内で使用します。
the_excerpt() 記事本文の抜粋を出力する関数。whileループ内で使用します。
the_time('Y年n月j日'); 日付を出力する関数。whileループ内で使用します。

 

記事の一覧が表示されます。表示件数はワードプレスの設定で変更することも、独自に設定することもできます。
 

「ワードプレスインストールドメイン/yyyy(西暦を入れる)」のようにアクセスすると、その年月日の一覧が表示されます。
ワードプレスの記事一覧
 

また、ページネーションをつけて表示件数以上を表示させる方法もありますが、ここでは割愛します。ご興味のある方は調べて見てください。
 
 

index.phpに最新記事一覧を表示する

先ほどのarchive.phpのループの中の記述を利用して、index.phpに最新記事一覧を表示してみましょう。

index.phpに下記のように<div id="posts">〜</div>の最新記事一覧のパートを追記してください。

 

トップページを表示して、下記のように最新の記事が表示されていれば完了です。

最新の記事一覧がトップページに表示された
 

index.phpに下記のループ文を記述すると、投稿一覧が表示されるようになります。
 

ワードプレスのループ文
 

また、ここでは割愛しますが、ループ文に変更を加えることで、カスタム投稿タイプの一覧も表示することもできます。
 

カテゴリー用テンプレートの作成

つづいて、投稿のカテゴリー一覧を出力する方法を紹介します。
 

カテゴリー用の優先順位

カテゴリーアーカイブインデックスページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。

順位 テンプレートファイル名 概要
1 category-{slug}.php カテゴリーのスラッグが news ならば WordPress は category-news.php を探す。
2 category-{id}.php カテゴリー ID が 6 ならば WordPress は category-6.php を探す。
3 category.php -
4 archive.php -
5 index.php -

 

archive.phpとレイアウトが同じで良い場合は、新たにcategory.phpを作らなくても、archive.phpが適用されるので新規作成する必要はありません。
 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 

テーマにfunctions.phpを作成する

functions.phpとは、WordPressサイトの動作を制御したり、機能を追加することができるファイルです。必須ではありませんが、このfunctions.phpにWordPressの動作を制御する関数を記述できて便利なので、通常はfunctions.phpを作成することが多いです。
 

WordPressでは、Webページを表示する際に、毎回自動でfunctions.phpを読み込んでいます。
 

非常に便利なファイルですが、毎回自動で読み込んでいるので、記述方法が間違っているとエラーでWebページが表示されなくなるので注意しましょう。

 

PHPのエラー画面
 

こういうエラー画面見ると怖いですね!気をつけないといけませんね!

 

それでは、早速テーマフォルダ(ここでは、webst8)の直下にfunctions.phpを新規作成しましょう。
functions.phpを新規作成する
 

functions.phpには、テーマをサポートするための関数を作成します。ここではわかりやすいように、テーマ名を冠した「webst8_setup」と命名した例で下記のように記述します。
 

 

(補足)フック、アクションとフィルタ

WordPressでは、任意の機能をWordPress本体に引っ張り込む (hook into)ための「フック」という機能を提供しており、特定のタイミングで任意の関数を呼び出して作動させることができます。
 

つまり、「〇〇の動作のタイミングに合わせて、〇〇の関数(機能)を実行させる。」ということができます。
 

フックには「アクションフック」と「フィルターフック」の2つが用意されています。アクションフックの場合にはadd_action()、フィルターフックの場合にはadd_filter()を呼び出して、特定のフックに作成した関数を登録します。
 

先ほど説明したfunctions.phpのコードの一部「add_action( "after_setup_theme", "webst8_setup" );」は、after_setup_theme(テーマ初期化のタイミング)にwebst8_setupという関数を実行しなさいという記述になります。
 

フックについて、説明しようとするとそれだけでとても長くなるのでここでは割愛します。詳しくは「プラグインAPI - WordPress Codex」や「WordPress フック」などで検索して調べてみてください。

 
 

functions.phpでアイキャッチ機能を有効化する

では、早速functions.phpを利用してアイキャッチ画像の設定をしてみましょう。
 

初期状態ではアイキャッチ機能は有効化されておらず、アイキャッチの設定ができない状態になっています。
 

■functions.php設定前。アイキャッチ画像の設定欄がない
functions.php設定前。アイキャッチ画像の設定欄がない
 

WordPressでアイキャッチ画像を使用するには、functions.phpに、記述する必要があります。下記のように、add_theme_support()関数に引数として、post-thumbnailsを指定します。
 

 

(※)add_theme_support()とは

add_theme_supportは、テーマがパラメータで指定した機能を有効化するようにする関数です。
本例では、add_theme_support( "post-thumbnails" ); でアイキャッチ画像を有効化しています。

 

ワードプレスの編集画面でアイキャッチが設定できるようになっていればOKです。
 

■functions.php設定後。アイキャッチ画像の設定欄が表示された
functions.php設定後。アイキャッチ画像の設定欄が表示された
 
 

メニューバーを作成する

WordPressの管理画面には自由にメニューを編集できる「ナビゲーションメニュー」という機能が用意されています。外観>メニューから設定できますが、アイキャッチ画像の設定と同様に、初期状態はOFF状態で表示されていません。

外観>メニューがない
 

functions.phpに、下記のようにwebst8_setup()関数の中に、add_theme_support( ‘menus’)で、メニュー機能を有効化します。
 

 

カスタムメニューが有効になると、管理画面の「外観」の中にメニューという項目が表示されるようになります。
外観>メニューが表示された
 

早速、外観>メニューから「main-manu」という名称でメニューを新規作成しましょう。
menu-mainを作成
 

合わせて読みたい

メニューバーの設定方法についてはこちらをご参照ください。

 

これでWordPressの管理画面から設定できるようになりましたが、まだ設定した内容が表示されない状態なので、テンプレート側にメニューバーを表示する設定をしていきます。
 

メニューバーの表示があるのはheader.phpなので、header.phpのグローバルナビゲーションの箇所を修正していきます。下記のようにheader.phpを修正しましょう。
 

■header.phpのnav要素部分。修正前の状態

 

<ul class="nav navbar-nav">...</ul>のセクションを削除して、代わりにメニュー用の関数wp_nav_menu()を追記します。
 

■header.phpのnav要素部分。修正後の状態

 

外観>メニューで設定したメニューが正しく表示されていればOKです。外観>メニューで設定した内容が表示されている
 

ソースコードを見ると、wp_nav_menu()がul以下の要素を出力していることがわかります。
nav部分のソースコード。wp_nav_menuがul以下のメニュー項目を出力している
 

$argsで指定している配列は、メニューバーにどんなクラスを付与するかなど、出力の仕方をオプションで指定しています。

 

menu_classは、メニューを構成する ul要素に適用するクラス名を指定するオプション。containerは、ulをラップするか、ラップする場合は何でラップするかを指定するオプションです。

 

wp_nav_menu()の詳細については「テンプレートタグ/wp_nav_menu - WordPressCodex」をご参考ください。
 
 

まとめ

まとめです。
 

今回はワードプレスでオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明しました。
 

ワードプレスの基本説明からはじまり、最小構成のテーマの作り方、投稿・固定ページなどの各種テンプレートの追加の仕方を説明していきました。
 

ワードプレスでテーマを作るためには、どの名前のテンプレートがどんな役割を持っているか・どんな優先順位になっているかや、主要な関数や使い方を覚えたうえで、HTMLに組み込んでいけば作ることができます。
 

たくさんのテンプレートや関数がありますが、とはいえ必要最低限はindex.phpとstyle.cssですので、まず最小構成から徐々に作り始めていけば良いかと思います。
 

以下に本記事で紹介したテンプレートと関数を再掲しますのでご参考ください。

■主要なワードプレスのテンプレートメイト役割

テンプレートファイル名 概要
index.php ワードプレス必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。
single.php 投稿用のテンプレート
page.php 固定ページ用のテンプレート
archive.php アーカイブ用のテンプレート
category.php カテゴリーページのテンプレート
404.php ページが見つからないエラー(404エラー)用のテンプレート
search.php 検索結果用のテンプレート

 

■ワードプレス独自の関数

項目 内容
whileループ WordPressの投稿の中身を表示するために使われるワードプレス用の構文です。


参考:ループ | WordPress Codex 日本語版
the_title() 投稿や固定ページのタイトルを表示します。whileループの中で使用します。
参考:テンプレートタグ the title | WordPress Codex 日本語版
the_content() 投稿や固定ページの本文を出力します。 whileループの中で使用します。
参考:テンプレートタグ the content | WordPress codex 日本語版
get_permalink(); 記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。
the_excerpt() 記事本文の抜粋を出力する関数。whileループ内で使用します。
the_time('Y年n月j日'); 日付を出力する関数。whileループ内で使用します。

 

これまで紹介した方法は、初学習用にある程度簡略化していますワードプレスの機能をもっと使うためには、いろいろなやり方があるので、より本格的に勉強したい方は本などを購入して勉強してみると良いかと思います。
 

今回は以上になります。最後までお読みいただきありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 


 

おすすめ記事3選

【おすすめレンタルサーバー比較】WordPress対応サーバー5選+

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress
-