【2020年】WordPress新規テーマを自作する方法と手順

WordPressの基本的な仕組みが理解できたところで、テーマを作成したりカスタマイズしたくなります。このページではこの新規テーマの作成において、どんな仕組みでまた、どのような手順で作成していくか見ていきましょう。

ここは、初心者の方は、すこし難しい内容になっています。HTMLやCSSに馴れていて、これから自分で、ワードプレスのテーマを作って行きたいという方に読んでいただきたいです。

【目次】

まずは、WordPressの仕組み

コンテンツ投稿には、投稿したコンテンツはDB（データベース）に保存

管理画面から記事投稿の画面では、「下書き」ボタンや「公開」ボタンをクリックすると、入力した内容は、すべてデータベースに保存されます。ひとつひとつの記事を保存する度に次のようなデータが保存されます。

記事投稿タイトル
投稿本文
カテゴリー
タグ

また、投稿本文中の画像やアイキャッチ画像は、特定のフォルダにアップロード、保存されます。同時に、そのファイルの場所を示すURLがデータベースに保存されます。

さらに、管理画面で行う各種設定もデータベースに保存されます。テーマやプラグインの情報もデータベースに保存されます。

WordPressのテーマの概要

このテーマとは、Webサイトの外観デザインを提供するために作られたファイルセットです。無料、有料問わずたくさんのテーマが公開されていて、それをダウンロードして使用することもできますし、独自に開発を行うこともできます。

ここでは、自分のお店で集客するために、独自に開発する知識をご紹介します。

テーマを使用するには。

公式テーマをダウンロードしてそのまま使う
1. 管理画面から公式に登録されているテーマをダウンロードして利用可能です。ダウンロードして有効化するだけなので、手軽にテーマを試すことができます。またファイルの編集やコードの追加をすることもないので、プログラミングの知識がなくても簡単に始められます。
2. さらに、公式テーマをダウンロードして、そのまま使っても良いですし、見た目を変更する事もできます。見た目を変更するには、「テーマのカスタマイズ」機能を使います。※ただし、カスタマイズできる項目はテーマによって異なります。
  1. サイトのロゴ画像を変更する
  2. ページの背景色やテキスト色を変更する（テーマによってはカラーバリエーションを変更可能な場合もあります）
  3. ヘッダーなどに表示されるヒーロー画像（※）を変更する
  4. CSSを利用して、ページのスタイルを調整することができます。
テーマファイルを編集する（応用）
1. 上記のテーマカスタマイザーを使っても編集できない場合などは、テーマファイルを編集してカスタマイズすることになります。既存のテーマを編集してカスタマイズするケースは多くあり、新規にWebサイトを構築する際にだけでなく、公開されているサイトの修正などでも、テーマファイルを編集することがあります。この場合は、コードの知識は必須になります。
新規に開発する（応用2）
1. ゼロベースからの開発になります。コンテンツの設計、デザインが決まり、そこからWordPressのテーマにする場合は、この新規開発になります。
テーマ編集には、どんな知識が必要でしょうか
1. HTML、CSS、PHP、Javascript、さらにデータベースの知識もあるとよりよいでしょう。

テーマを自作する制作ワークフロー

独自のテーマを作成する際には、事前に静的HTMLとCSSが必要になります。コンテンツの設計、デザインが出来上がってそして、HTMLとCSSで組まれたファイルを用意します。

その後に、このHTMLとCSSをもとにして、テーマに必要なテンプレートファイルを作り、PHPのプログラムを組み込んでいきます。

これが、基本的なテーマ制作のワークフローです。

独自テーマ作成の基本的なワークフロー

コンテンツ設計
デザインファイル作成
静的なHTMLとCSSを作成（※SASSを使ってCSSを作成しても可）
テーマフォルダを作り、必要最低限なファイルを追加
HTMLソースコードをテンプレートファイル（index.phpなど）にまるごとコピー
style.cssにコメントヘッダーを追加
style.cssにCSSソースコードをまるごとコピー
テンプレートファイルに、PHPプログラムを組み込む
テーマフォルダごと、WordPressのテーマフォルダにアップロードする

ここで、Javascriptファイルは、「js」もしくは、「script」フォルダを作成して保存するようにしましょう。

さらに、画像ファイルについては、Webサイトで使われる画像の役割について分ける方法があります。

ロゴ、各種アイコン、背景画像などページのデザインの一部として使われるファイル - images
記事に含まれる写真や図など、コンテンツの一部としてつかわれるファイル - images-content

1，新規テーマを作成する

新規テーマを作成する際に必要なファイルは、

index.php
style.css

となります。また、style.cssにはコメントヘッダーが必要となります。

/*
Theme Name: テーマ名
Theme URI: テーマをダウンロードできるURL
Author: 著者
Author URI: 著者URL
Description: テーマの概要
Version: 1.0（テーマのヴァージョン）
*/

また、index.phpには

<?php

phpプログラムが組み込まれていることを示すコードを書いておくようにしましょう。

2，front-page.php（トップページ）を作成する

通常、トップページとして作ったHTMLファイルを、トップページのテンプレートファイルを作る際は、front-page.phpというファイルを作る必要があります。

静的ページ、index.htmlのソースファイルを、front-page.phpにまるごとコピー＆ペーストしましょう。

ここまでできたら、テンプレートタグを組み込まず一旦動作確認で、FTPを使ってテーマフォルダをWordPressのテーマフォルダにアップロードしてうまく表示できているか確認します。

3，functions.phpを作成する

テンプレートファイルで使われる、functions.phpについてご紹介します。

このファイルは、テーマに機能を追加したり、独自の関数を追加するためのテンプレートファイルです。functions.phpはテーマを作成する際に、最低限必要なファイルに含まれませんが、CSSファイルを読み込む処理を記述するのに必要なことから、どのテーマファイルにも含まれています。

function.phpは、一般的に、/theme/フォルダに入れて、WordPressがページを表示するための処理を実行する際に、自動的に読み込まれます。

functions.phpの特徴

style.cssを含むCSSファイルを読み込む処理
Javascriptファイルを読み込む処理
アクション、フィルターに追加する処理
- 両方合わせて「フック」と呼ばれます。
- フックとは、WordPressがページがリクエストされてからページのHTMLを返すまでに、たくさんの処理を実行します。この一連の処理と処理の間には、ところどころフック（アクションやフィルター）が設けられています。
- 数あるフックのどれかに関数を登録しておくと、その関数が実行されます。
- 関数が実行されることによって、もともと機能がなかったものに、機能を追加したり、処理の流れを変えたりすることができるのです。
- アクションフックに処理を追加する基本的な方法
- function 関数名(){ ここに追加したい機能 }
- add_action('アクション名', '関数名');
デフォルトでは動作しないような設定を動作させる処理を有効化
アップロードされる画像のサイズ変更のように、デフォルトの設定とは違う処理を追加
その他の独自の機能をテーマに組み込む

などがあげられます。

4，テンプレートタグとは

WordPress本体が用意しているPHPの関数のうち、投稿のタイトルや本文、カテゴリーやタグなど、何らかのコンテンツを取得する、もしくは表示する機能を持ったものです。

テンプレートタグは、これから作るテーマをつくる、テンプレートファイルで使用します。代表的なテンプレートタグは以下の通りです。

投稿タイトルを表示
投稿本文
投稿の日付、カテゴリー、タグ、作者名など関連する情報
投稿のID番号
投稿のパーマリンクを取得または、表示
投稿に付けられたコメントを表示
ヘッダーファイルやフッターファイルを読み込む

などなどです。

詳しくはテンプレートタグが書かれた公式サイトをご覧ください。

WordPress公式サイト - テンプレートタグ

style.cssの読み込みをさせる

functions.phpに記述します

<?php
function enqueue_scripts(){
wp_enqueue_style('main-css', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

front-page.phpからhead内の<link rel...は削除し、<?php wp_head() ?>を記述します。

ここは、コードエディタのスニペットに登録しましょう。

5，テーマフォルダ内にあるJavascriptファイルを読み込む

CSSファイルを読み込むのと同様に、functions.phpファイルに記述します。

例えば、テーマフォルダ内の「js/script.js」ファイルを読み込む場合は、

<?php
function enqueue_scripts(){
wp_enqueue_script( 'jquery-min-js', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), '3.3.1', true );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/script.js', array('jquery-min-js'), '', true );
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

フッター部分にjsファイルが読み込まれます。

6，ヘッダー部分の分離

headerの共通部分をテンプレート化します。

header.phpファイルを作り、ヘッダーテンプレートとして分離します。この際に気をつけなければいけないのが、<!DOCTYPE...　からこのテンプレートに含めるように教えられている方がいますが、できれば、<head>...</head>の内部のソースコードのみをheader.phpテンプレートにしましょう

なので、

front-page.phpでは

<!DOCTYPE html>
<html lang="ja">
<head>
<?php get_header(); ?>
</head>...

header.phpでは、

というような記述にするようにしましょう。

というのもの、突発的に、テンプレートにCSSやJSソースを付け加えたいときは、header.phpを弄らなくても、例えば、特定のカテゴリIDのテンプレートを作成し、そのテンプレートだけに適用させるというような事が可能になります。

7，フッター部分の分離

同様に、footerの共通部分をテンプレート化します。

一般的に

<?php get_footer(); ?>

のfooter部分を最後のタグ、</html>まで、全部テンプレート化するように教えられている方がいらっしゃいますが、それだと融通が利かないことがあるので、

<?php get_footer(); ?>

</body>
</html>

footer.phpに記述する内容は例えば、

<footer class="page-footer">
<div class="container">
<nav class="footer-nav">
<ul>
<li><a href="">ホーム</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
<div class="copyright"><small>©2020 WordPress Design.</small></div>
</div>
</footer>

というようにしましょう。

8，サイドバーの分離

同様に、サイドバーのソース部分をテンプレートタグにて分離させましょう

<?php get_sidebar(); ?>

9，インクルードテンプレートの挿入

いままで分離したテンプレートのほかにも、インクルードタグを使ってパーツ化、テンプレート化することができます。

これは、各テンプレートの中に、特定のソースコードを記載したphpファイルをパーツ化して、テンプレートの中に仕込むことができるのです。

たとえば、sidebar.phpのファイルの中に、広告部分をパーツ化してインクルードファイルを作り、広告内容変更の場合は一括して、この広告部分を修正できるようになります。

<?php include("includes/test.php"); ?>

テンプレートファイルを作る際は、/includes/ ファイルを作って、その中に格納するようにしましょう。

10，その他のテンプレート、テンプレート階層について

ここで、オフィシャルページの、テンプレート階層について知っておく必要があります。

テンプレート階層

このページでは、各テンプレートがどの機能を持っているかわかる階層図になっています。

ホームページ表示には、

home.php（ブログ一覧ページに使われます）
index.php（記載が無くても大丈夫です）

フロントページ表示

front-page.php（設定からトップページに設定）

個別投稿表示

single.php
singular.php
single-{post-type}.php（投稿タイプがmenuなら、single-menu.php）

固定ページ表示

page-{slug}.php（固定ページのスラッグがnews（ニュースに関するページ）ならば、page-news.php）
page-{id}.php
page.php

カテゴリー表示

category-{slug}.php（カテゴリのスラッグがitems（製品に関するページ）ならば、category-items.php）
category-{id}.php
category.php

タグ表示

tag-{slug}.php（カテゴリのスラッグがitems（製品に関するページ）ならば、category-items.php）
tag-{id}.php
tag.php

カスタム分類表示

taxonomy-{taxonomy}-{term}.php
taxonomy-{taxonomy}.php
taxonomy.php
archive.php

カスタム投稿タイプ

archive-{post-type}.php
archive.php

作成者表示

author-{nicename}.php
author-{id}.php
author.php
archive.php

日付別表示

date.php
arichive.php

検索結果表示

searchi.php

404（not found）表示

404.php

添付ファイル表示

{MIME_type}.php - 任意の MIME タイプ (image.php, video.php, application.php)
- text.php
- plain.php
- textplain.php
attachment.php
single-attachment.php
single.php
index.php

個別ファイル表示に、attachment.phpファイルを使って、noindex設定させて表示させる方法です。

また、attachment.phpでメディアファイルを直接表示させます。

まとめ

上記のテンプレート階層を確認しながら、WordPressのサイトを作っていきましょう。

個別にWordPressのダッシュボード内の設定を弄りながら作成する箇所もありますので、注意しましょう。