WordPressオリジナルテーマ制作手順-①PHPファイルの準備-

2022-07-252022-07-29

WordPressでのWebサイト制作を行なう上で、テーマ選びはとても重要です。

WordPressで配布しているテンプレートテーマでWebサイトを制作したら、「こんな感じに修正したい」などカスタマイズでの悩みが出ると思います。
コーポレートサイトのような作り込みたいWebサイトをWordpressで作る場合には、カスタマイズやWebサイト運用上でもオリジナルテーマを作ることが必須。

しかし、「テーマの制作方法は難しそう」「オリジナルテーマ制作は時間かかりそう」など、Wordpressオリジナルテーマ制作に対してこんな不安はありませんか？

そこで今回は、WordPressオリジナルテーマの制作手順を解説していきます。
今回の記事を見ながら制作を進めていけば、WordPressオリジナルテーマが完成するので最後までご覧ください。

WordPressオリジナルテーマを自作するメリット

具体的なWordpressオリジナルテーマの制作手順を解説する前に、Wordpressオリジナルテーマを自作するメリットについて解説しておきます。

今まで以上にWordPrssへの理解が深まる
既存テーマにはないデザインや機能が搭載されたWebサイトが制作できる
不要かつ緊急性がない機能が搭載されずWebページの表示スピードや動作が早くなる
テーマ構造が理解できるのでさまざまなカスタマイズが簡単にできる
基礎となるベースができるので応用の幅が広がり多彩なデザインでテーマが制作できる
完全オリジナルの自分だけのオリジナルテーマで他と被らないWebサイトが完成する

WordPressオリジナルテーマを一つ制作することで、拡張性やカスタマイズも簡単になり、今まで以上のことが自由にできるのです。

既存のテンプレートを編集してカスタマイズすると結果的に複雑化しますし、「アップデートで不具合が生じた」「公開したらデザインが大きく崩れて見づらくなってしまった」などの不具合が発生するリスクもあります。

最初は大変ですが、Wordpressオリジナルテーマの制作手順を理解することで、WordPress上で自由かつ拡張性が高いWebサイトが制作できます。

ローカル環境構築

まずはローカル環境構築から行いましょう。
オリジナルテーマ制作はご自身のパソコンでローカル環境を構築する場合が多いのではないでしょうか。

具体的な手順は以下の通りです。

ローカル環境構築
テスト用サーバーにアップ
本番用サーバーにアップ

ローカル環境構築は下記の記事をご参照ください。

テーマフォルダの作成

最初にローカル環境の場所を確認しておきましょう。
themesフォルダがこれから制作するテーマフォルダの格納場所です。
格納場所はOSによって違うのでご注意ください。

Windows
Cドライブ⇒ユーザー⇒（ユーザー名）⇒Local Sites⇒（サイト名） ⇒app⇒public⇒ wp-content⇒themes
Mac
Macintosh HD⇒ユーザ⇒user⇒Local Sites⇒（サイト名） ⇒app⇒public⇒ wp-content⇒themes

themesフォルダを開くと「twenty～」などの名前がありますが、これらはWordpressにプリインストールされているテーマです。

制作に欠かせないWordPress使用テーマなどのファイル

ここではオリジナルテーマ制作時に覚えたいファイルを解説します。
Webサイトの種類にもよりますが、Wordpressオリジナルテーマ制作に必要なページは以下の通りです。

トップページ
固定ページ
投稿一覧ページ
投稿個別ページ
カテゴリー一覧ページ
カスタム投稿一覧ページ
カスタム投稿個別ページ
カスタム投稿カテゴリーページ
投稿者別一覧ページ
タグ一覧ページ
検索結果ページ
日付別一覧ページ
404ページ
Webサイト横コンテンツ表示用ページ

トップページや固定ページ、404ページ以外は全て投稿ページです。

カスタム投稿がないケースもありますし、タグ一覧や投稿者一覧はほぼ使いません。
そのため、これらを全て作成する訳ではないのでご安心ください。

テンプレートファイル一覧

以下に先程紹介したページに該当するテンプレートをまとめました。

index.php（テーマの必須ファイル）
style.css（スタイルシート・必須ファイル）
functions.php（テーマで使う関数を書くファイル）
front-page.php（トップページ）
header.php（ヘッダー）
footer.php（フッター）
page-〇〇.php（固定ページ）
home.php（今回は記事一覧ページとして使用）
single.php（個別記事ページ）
category.php（カテゴリー一覧ページ）
archive-〇〇.php（カスタム投稿一覧ページ）
single-〇〇.php（カスタム投稿個別ページ）
taxonomy-〇〇.php（カスタム投稿カテゴリー一覧ページ）
author.php（投稿者別一覧ページ）
tag.php（タグ一覧ページ）
searchform.php（検索フォーム）
search.php（検索結果ページ）
date.php（日付別一覧ページ）
404.php（404ページ）
sidebar.php(Webサイト横コンテンツ表示用ページ)

さまざまなテンプレートがありますが、ページではないテンプレートやファイルも存在します。
併せて使用頻度が低いファイルも存在するので、まとめた全てのファイルを使うことはほぼありません。

今回はファイルの準備に絞って解説していますし、それぞれのテンプレートファイルに記述するコードは次回以降順番に解説していきます。

index.php(テーマの必須ファイル)

index.phpは、WordPressで制作したオリジナルテーマのトップページを表示させるためのファイル。
※この画像はテーマフォルダ制作前

記事などのコンテンツ制作にはなくてはならないファイルなのです。
「.php」で終わるファイルはphpプログラムを記載したファイルです。

index.htmlでも良いと感じる方もいると思いますが、phpファイルでトップページを制作することで別ページのコンテンツ情報が引用できたり、他のページの更新情報が動的に反映されるメリットもあるのです。

style.css(スタイルシート・必須ファイル)

style.cssは、WordPressのテーマ制作以外にもwebサイトに重要なデザインシート。
どのようなwebサイトでもHTMLに直接styleを書き込むと修正で不便だったり、HTMLが認識しづらくなります。
出来る限り外部ファイル化し読み込めるようにしましょう。

functions.php(テーマ上で使用する関数用ファイル)

functions.phpは、WordPressサイトの動作制御や機能を追加できるファイル。

functions.phpには、WordPressの動作を制御する関数も記述できるのでとても便利です。
具体的には、テーマ内で使う関数を定義するなどを記述すれば完了です。
functions.phpの設定にミスがでると重大なエラーを起こしてしまい、最悪の場合Webサイト自体が表示されないこともあります。

万が一のトラブルを防ぐためにも、編集時はバックアップを取る・FTPクライアントなどサーバー内ファイルが操作できる環境を予め用意しておくなどの準備が必要です。

ご自身でオリジナルテーマを制作した場合、最初は記述することがないと思います。
ただ、カスタム投稿タイプの追加やショートコード制作など、WordPressオリジナルテーマ制作には欠かせないファイルなのです。

front-page.php(トップページ)

トップページ用テンプレートで使われるファイルは、index.phpやhome.phpもあります。
これらのファイルが全て揃っている場合はfront-page.phpをトップページとして使うので、front-page.phpをトップページとして使うことをお勧めします。

ちなみに、front-page.phpがない場合のトップページはhome.php、さらにhome.phpがない場合のトップページはindex.phpです。

トップページを表示するテンプレートにも優先順位が存在することを覚えておくと便利です。

header.php(ヘッダー)

header.phpはWordPressのテーマファイルで、Webページの「head」「body」部分の上部を構成するファイル。

index.phpやsingle.phpなどに「head」「body」を直接記述する方法もありますが、解析タグやメタタグの挿入などそれぞれのページで挿入すると手間になります。

header.phpを制作すると大幅に制作時間が短縮できます。
また、「header-top.php」など違う名前のファイルを読み込みたい場合には、「get_header(‘top’)」のようにテンプレートを指定すると読み込めます。

footer.php(フッター)

footer.phpはWordPressテーマファイルで、Webページの<body>下部を構成するファイルです。

footer.phpに記述するのは「footer」「copyright」などで、header.php同様にそれぞれのページが大して違わないのです。
リマーケティングタグなどは「body」の最後に挿入する機会が多いのですが、footer.phpがあれば1回で大半のWebページに反映させられるのでとても便利です。

home.php(今回は記事一覧ページとして使用)

home.phpを「今回は」と紹介した理由は、先ほども解説しましたがfront-page.phpがない場合にはトップページにもなる可能性があるため。

状況によって使うファイルが異なることを理解いただければ幸いです。

page-○○.php(固定ページ)

page.phpは、自動的に固定ページのテンプレートファイルを認識させる効果があるファイルです。

固定ページでもそれぞれのページで異なるテンプレートを読み込みたい場合に、「page-任意の値.php」というファイルを制作します。その後で冒頭部分に以下のように記述することで、WordPressの固定ページを新規制作時にテンプレートが変更できます。

<?php
/**
 * Template Name: 任意の名前を設定してください
 */
?>

SEOの観点では考慮すべき記事の親子関係も、固定ページではデフォルトで設定できます。
更新頻度はそこまで高くありませんが、デザインもSEOも意識したいページがあれば固定ページを上手に活用すれば問題ありません。

ページによって幾つかテンプレートを分けたい場合は、冒頭にテンプレート名を指定したファイルを新たに制作すると記事投稿時にテンプレートとして選択できます。

<?php
/*Template Name: テンプレート名
Template Post Type: page
*/
?>

single.php(個別記事ページ)

single.phpは投稿ページのテンプレート。

デフォルトでは1つのテンプレートしかないと思うかもしれませんが、カテゴリー名でテンプレートを切り分けられます。single.phpよりも「single-カテゴリー名.php」で優先的に読み込めるので、カテゴリーでテンプレートを切り分けたい時に上手に活用しましょう。

category.php(カテゴリーページ)

category.phpはある特定のカテゴリーのみを表示する一覧ページです。

ページレイアウトは記事一覧ページと同じなのが大半で、中身もほぼ同じです。
ただ、一覧ページは特定のカテゴリーだけを表示する為のコードが違うので注意しましょう。

archive.-○○php(カスタム投稿一覧ページ)

archive.phpは、タグページやカテゴリーページなど記事を一覧表示させるようなページのテンプレートファイル。

企業向けのWebサイトにはあまり必要性を感じないと思いますが、ブログやコンテンツマーケティングを行うWebサイトを制作する時のテーマには欠かせません。

そのため、目的や状況に合わせて制作すると安心です。

single-〇〇.php(カスタム投稿個別ページ)

single-〇〇.phpの考え方もarchive-◯◯.phpと同じです。
詳しくは別の機会に解説する予定です。

taxonomy-〇〇.php(カスタム投稿カテゴリー一覧ページ)

taxonomy-〇〇.phpの考え方もarchive-◯◯.phpと近いですが、こちらは◯◯部分がタクソノミースラッグになります。
taxonomy-〇〇.phpは最初に制作する必要はないので、今回は割愛します。

author.php(投稿者別一覧ページ)

author.phpは投稿者別一覧ページです。

通常記事一覧ページは全投稿者の記事が表示されますが、基本的にページレイアウトは記事一覧ページと同じです。
そのため投稿者が複数いないと意味がないテンプレートですし、小規模Webサイトではほぼ使用しません。

tag.php(タグ一覧ページ)

tag.phpはタグ一覧ページです。
基本的にページレイアウトは記事一覧ページと同じですが、ほぼ使用しないので詳しい解説は今回は割愛します。

searchform.php(検索フォーム)

searchform.phpは検索フォームのテンプレートファイルです。
ほぼ使う機会はありません、今後検索フォームを作る必要がある時に思い出してもらうと良いかと思います。

search.php(検索結果ページ)

search.phpは検索結果を表示するページです。

searchform.phpと名前が似ていますが、search.phpはページのテンプレートファイルです。
そのため、基本的にはページのレイアウトは記事一覧ページと同じになります。

date.php(日付別一覧ページ)

date.phpは日付別一覧ページです。
ページレイアウトは記事一覧ページと同じですが、滅多に使う機会はないので詳しくは割愛します。

404.php(404ページ)

404.phpは、Webサイトに訪れたユーザーが存在しないURLに飛んだ時に設定をしなくても404.phpで書かれたソースを自動吐き出ししてくれるファイル。

そうした効果があるので、SEOの観点でもnoindexタグを404.phpに挿入するとクロールエラーを出来る限り抑えられるのです。

サイドバーをつけたい場合にはサイドバーの中身を記載するテンプレートとなります。

sidebar.php(Webサイト横コンテンツ表示用ページ)

sidebar.phpはWebサイトやブログなどでサイドバーを設置したい場合に使います。

Webサイトが2カラムや3カラムの状態で表示される本体横のコンテンツで、1カラムのwebサイトでは不要だと思います。
ただ、「見た目上サイドバーが欲しい」「さまざまなコンテンツを見て欲しい」時にsidebar.phpはお勧めです。

オリジナルテーマ制作に必要なファイル制作方法

ここでは、オリジナルテーマ制作に必要な使用頻度が高いファイルの制作方法を解説していきます。

index.php

index.phpはテーマ認識には欠かせないファイル。

index.htmlとは中身も全く違っていて、index.phpの中身は空のまま(コード無し)で問題ありません。index.phpが無い状態ではテーマとして認識されないので注意が必要です。

index.phpの構造はindex.htmlと同様です。
ここでindex.htmlの記述を再確認しておきます。

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

ここではhead部分やコンテンツ部分は記述していませんが、このような記述になります。
ただ、index.htmlをindex.phpに設定しても動的コンテンツが吐き出されませんし、WordPressオリジナルテーマでサイト制作に使用するメリットはないのです。

そのため、WordPressのindex.php構造は以下のように記述されます。

<?php get_header(); ?>
・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。
・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、
have_posts()やget_posts()
を使用し該当投稿の情報が引用できるよう記述しましょう。
<?php get_footer(); ?>

WordPressのindex.phpはこのような形式になっていて、bodyの開始がheader.phpに含まれています。
body終わりがfooter.phpに含まれていますが、リマーケティングタグやanalyticsタグの設定にbody直後やbody終わりを指定することが多いのでこのような記述が一般的です。

header.php

header.phpは、index.html開始からbodyの始まりを記述する場合が大半です。

<!DOCTYPE html>
<html>
 <head>
  <?php wp_head(); ?>
 </head>
 <body>
  <header>
  </header>

一般的なindex.htmlと違って、WordPressオリジナルテーマを制作する場合はhead部分には必ず「wp_head()」を記述しましょう。

「wp_head()」を記述しないと、それぞれのプラグインが正常に動作しないなどエラーが起きるので記述を忘れないようにすると安心です。

footer.php

WordPressのfooter.phpは、bodyとhtmlの閉じタグまでを忘れずに記述しましょう。

<footer>
  </footer>
  <?php wp_footer(); ?>
 </body>
</html>

header.phpと同じく、WordPressでオリジナルテーマを制作する場合は「wp_footer()」を必ず記述しましょう。記述を忘れてしまうとheader.phpと同じくプラグインが動作しないので、正しく記述されているか確認しておくと安心です。

また、footerやタグなど共通化できそうな部分は記述して、その他のページで効率的に制作を進めましょう。
header.phpの内容は「get_header()」に、footer.phpの内容は「get_footer()」に入ります。

そのため、先程制作したindex.phpにget_header()やget_footer()を適用させると以下のコードになります。こうすることで、結果として1つのHTMLが完成するのです。

<!DOCTYPE html>
<html>
 <head>
  <?php wp_head(); ?>
 </head>
 <body>
  <header>
  </header>
　　　　・TOPページのコンテンツを静的にしたい場合はhtmlのbody以下としてここに記述してください。
　　　　・TOPページに載せるコンテンツの一部は下層ページから引用したい場合は、
　　　　have_posts()やget_posts()
　　　　を使用し該当投稿の情報が引用できるよう記述しましょう。
　　　　<footer>
  </footer>
  <?php wp_footer(); ?>
 </body>
</html>

「footerやheaderなど一部のページのみ共通化させたくない」場合は、「is_page()」「is_single()」などWordPressオリジナルのpage指定方法を使えば問題ありません。

if文で条件分岐を設定することで、特定のページだけ読み込ませることもできます。

page-○○.php

page.phpはWordpressにおける固定ページのテンプレートを指しています。
以下のような記述が一般的です。

<?php get_header(); ?>
<?php if (have_posts()):
              while (have_posts()) :
                 the_post();
                 the_content();
              endwhile;
           endif; ?>
<?php get_footer(); ?>

記述内容は投稿があるかを確認し、投稿があれば投稿内容を取得するよう指定しています。併せて、固定ページにテンプレートを追加したい場合は以下のような記述です。

<?php
/**
 * Template Name: 任意の名前を設定してください
 */
get_header(); ?>
<?php if (have_posts()):
              while (have_posts()) :
                 the_post();
                 the_content();
              endwhile;
           endif; ?>
<?php get_footer(); ?>

この状態で「page-sample.php」というファイル名でアップすると、「任意の名前を設定してください」というテンプレートが選択できるようになっています。

single.php

single.phpは投稿ページのテンプレートで、基本的にpage.phpと同じです。

<?php get_header(); ?>
<?php if (have_posts()):
              while (have_posts()) :
                 the_post();
                 the_content();
              endwhile;
           endif; ?>
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
<?php get_footer(); ?>

404.php

404は「404 Not Found. ファイルが見つかりません。」という意味で、404.phpは記事が見つからない時などに表示されるテンプレート。

404.phpもindex.phpなどと同様です。

<?php get_header(); ?>
記事が見つかりません。
<?php get_footer(); ?>

style.css

style.cssは、以下のようなコメントでテーマ情報を追記する必要があります。

/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/
/* この下に通常のcssを書いていく */

「この下に通常のcssを書いていく」直下にcssを書いていきます。ちなみに、WordPress特有の記述はありません。

制作ファイルをFTP上でアップロード

ファイル制作が完了したら、sample_themeフォルダを制作し直下に制作したファイルをアップしましょう。

(WordPressをインストールしたディレクトリ)
└──wp-content
    └──themes
        ├──sample_theme
        │ ├──404.php
        │ ├──footer.php
        │ ├──header.php
        │ ├──index.php
        │ ├──page.php
        │ ├──single.php
        │ └──style.css
        ├──twentyfifteen
        ├──twentyseventeen
        └──twentysixteen

「sample_theme」はテーマ名「サンプルテーマ」から取ったディレクトリ名。
仮に別テーマを作ってアップする場合は、
テーマ名を英語(ハイフン・半角英数・アンダーバーなど)で表したディレクトリ名がおすすめです。

FTPでサーバーにアップするには下記の記事をご参照ください。

https://toshi-traveler.com/ftp-filezilla/

まとめ

今回はWordpressオリジナルテーマの制作手順を解説しました。
難しそうなWordpressオリジナルテーマですが、「やってみたら意外と簡単」と感じたかもしれません。

WordPressオリジナルテーマ制作で必要なファイルを理解して、順番に制作していけばあなただけのWordpressオリジナルテーマが完成します。

次回はトップページの制作手順について解説します。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！