初心者向けワードプレス オリジナルテーマの作り方と基本

ワードプレス 最小構成 オリジナルテーマ 作り方と基本
ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

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


 

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

もくじ

 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

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

 

WordPressとは 基本のおさらい

WordPressとは

ワードプレスのロゴ
 

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

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

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

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

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

 

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

WordPress テーマ 追加画面

WordPress テーマ 追加画面

 

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

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

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

【PR】ワードプレスで人気の有料テーマはこちら

 

WordPressの概要構成

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

ワードプレスの構成
 

通常のホームページの場合は、HTMLファイルや画像ファイルなどのファイル類で構成されますが、
 

ワードプレスはこれらのフォルダ・ファイル類に加えて、PHPというプログラム言語とMySQLと言われるデータベース(データの蓄積される場所)を利用しています。
 

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

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
 

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

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

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

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

項目内容
webst8htmlファイル類を格納しているフォルダ。あとでワードプレスのthemesフォルダに移動します。
index.html今回ワードプレス化するウェブページ
mystyle.cssindex.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 :テーマの説明
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を読み込む処理をしてくれます。
 

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


 

【PR】ワードプレスを始めるなら!オススメのレンタルサーバー

 

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

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

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

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

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

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

 
 

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

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

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

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

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

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

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

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

 
 

固定ページの優先順位

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

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

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

 
 

投稿ページの優先順位

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

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

優先順位テンプレートファイル名概要
1single-{post-type}.phpカスタム投稿タイプ。投稿タイプがnewsの場合はsingle-news.php
2single.php
3index.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カスタムテンプレート
2page-{スラッグ名}.php
3page-{ID}.php
4page.php
5index.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のように変更する
 

以上で完了です。
 

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

投稿(single.php)の作り方

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

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

投稿ページの優先順位

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

順位テンプレートファイル名概要
1date.php
2archive.php
3index.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に下記のループ文を記述すると、投稿一覧が表示されるようになります。
 

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

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

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

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

カテゴリー用の優先順位

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

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

 

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

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

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

 

まとめ

まとめです。
 

今回はワードプレスでオリジナルのテーマ作成にチャレンジしたいという方向けに、静的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ループ内で使用します。

 

なお、ここで紹介した方法は、ある程度簡略化しています。
 

ワードプレスの機能をもっと使うために、functions.phpを作成するなど、いろいろなやり方があるので、より本格的に勉強したい方は本などを購入して勉強してみると良いかと思います。
 

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

 

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

1 個のコメント

  • ABOUTこの記事をかいた人

    松本慶

    【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

    1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

    「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
    ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

    メルマガ登録はこちら

    個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ