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

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

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

 

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

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8

 

WordPressとは　基本のおさらい

WordPressとは

 

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

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

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

 

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

 

 

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

 

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」の２ファイルになります。

 

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

 

事前に用意する環境

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

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

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

環境は以下の通りです。

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

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

 
 

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

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

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

 

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

 

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

 

■index.htmlのソースコード

 

■mystyle.cssのソースコード

 

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

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

 

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

 
 

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」を有効化します。

 

 

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

 

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

▲▲目次に戻る▲▲

 

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

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

■トップページ　スタイルが崩れていて、画像が表示されていない

 

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

 

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

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

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

 

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

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

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

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

 

 

設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。

 

 

▲▲目次に戻る▲▲

 

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

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

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

 

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

 

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

 

 

▲▲目次に戻る▲▲

 

(補足)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が読み込まれるようになったことが確認できます。

 

また、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日本語版
 

 

▲▲目次に戻る▲▲

 

テンプレートを分割する

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

 

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

 

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

 

▲▲目次に戻る▲▲

 

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が適用されます。
 

 

投稿ページの優先順位

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

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

 

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

 
 

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

さて、現時点では、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にリネームして下さい。
 

 

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

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

 

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

 

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

 

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

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

 

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

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

■page.phpのソースコード

 

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

項目	内容
whileループ	WordPressの投稿の中身を表示するために使われるワードプレス用の構文です。 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる <?php endwhile; endif; ?> 1 2 3 4 5 6 7 8 9 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる <?php endwhile; endif; ?> 参考：ループ | 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」がある前提で、これをワードプレスの固定ページとして読み込む方法を説明します。

固定ページを作成する

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

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

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

 

 

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

 
 

ファイル名を変更する

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

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

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

 

 

以上で完了です。
 

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

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

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

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

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

 

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

 

■上記の解説

• ファイル名の先頭にコメントアウトで、このテンプレートの名前を記述します。テンプレートの名前は「Template Name:」の後に続く形で記述します。また、「Description」の後に、テンプレートファイルの説明文を記載することも可能です。
  
  <?php /** * Template Name: 1カラムテンプレート * Description: 1カラムレイアウト用のテンプレート */ ?> ...

  1 2 3 4 5 6 7

  <?php /** * Template Name: 1カラムテンプレート * Description: 1カラムレイアウト用のテンプレート */ ?> ...

• ワンカラム用のテンプレートにするので、サイドバーの以下セクションを削除します。
  
  <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> </div>

  1 2 3

  <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> </div>

• また、メインカラムのdivのクラスcol-md-9をcol-md-12に変更します。
  
  <div id="main" class="col-md-10 col-md-offset-1">

  1	<div id="main" class="col-md-10 col-md-offset-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にリネームして下さい。
 

 

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

 

投稿に書いた内容が表示されていることがわかります。

 

ワードプレスの仕様により、先ほどの構文を投稿用テンプレート「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を作成してください。

 

つぎに、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

 

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

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

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

 

 

 

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

 

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

 

 
 

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

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

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

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

 

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

 

 

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

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

 
 

メニューバーを作成する

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

 

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

 

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

 

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

 

 

これで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以下の要素を出力していることがわかります。

 

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

 

 

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の投稿の中身を表示するために使われるワードプレス用の構文です。 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる <?php endwhile; endif; ?> 1 2 3 4 5 6 7 8 9 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる <?php endwhile; endif; ?> 参考：ループ | 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チャンネル開設しました！

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

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