WordPress自作テーマ制作①│超最小構成で自作テーマを作る方法

2021.02.212024.03.04

WordPressには優れたテーマがたくさんあります。

無料であればCoconn、有料であればSWELLが個人的には推しています。

これまで既存のテーマをベースにしたカスタマイズはたくさん行ってきましたが、もっと深いところでの理解とカスタマイズを行いたい！

ということで時間を見つけて、自作テーマ（自前のスターターテーマ）を作ることにしました。

ということで第一弾！

WordPressの基礎知識や環境構築、スターターテーマなど事前に学ぶことは色々あるのですが…

まずは最小構成で自作テーマを作って表示することから始めようと思います。

体形的な知識も無しにいきなり作るのは非効率！という方もいるかもしれませんが、

初めから何かの参考書を頼るのではなく、手を動かしながら、わからないことは調べてというスタイルの方が本当の意味で自力が付くと思います。

スターターテーマを使わずに
WordPress自作テーマを制作する

最小構成のWordPress自作テーマの作り方

最小構成、最小手順でWordPressの自作テーマを作成して表示させてみます。

拍子抜けするくらい簡単に自作テーマが作成＆表示できます。

以下の2つのファイルを作成すれば、ある意味自作テーマが表示できます。

自作テーマに必要なファイル

index.php（テンプレートファイルがない場合に最後に使われるテンプレート）
style.css（CSSを記述するファイル）

以下、やり方を解説します。

STEP

環境構築│サーバーにWordPressをインストールする

本来はLocalなどを使ってローカル環境でWordPressを構築するみたいな手順が主流ですが、

いきなりレンタルサーバーでWordPressを構築したいと思います。

無料で試したい場合はエックスサーバーの無料レンタルサーバー「Xfree」がおすすめです。

̵????󥿥륵???С??֥??󡦥??饦?? for Fre…

̵????󥿥륵???С??֥??󡦥??饦?? for Free?? ?֥??󡦥??饦?? for Free?פϺǿ??ε??Ѥ??Ѷ?Ū?˼?????׿?????Ż뤷??̵????󥿥륵???С??Ǥ???

細かい手順は省きますが、アカウントを作成して、WordPressをインストール。

管理画面に入るところまで進めましょう。

STEP

index.phpの作成

テキストファイルを作成して、index.phpという名前のファイルを作成しましょう。

中身は空はで大丈夫です。

index.phpはテンプレートファイルがない場合に最後に使われるテンプレート（HTMLファイル）です。

STEP

style.cssの作成

同様にテキストファイルを作成して、style.cssという名前のファイルを作成しましょう。

style.cssはCSSを記述するファイルです。

このファイルは空の状態だとWordPressテーマとして認識されませんので、

以下のようなコメントを記載する必要があります。

/*
    Theme Name: SUIMIN
*/

※テーマ名の記載が必須です。今回はSUIMINと名付けました。

STEP

テーマのアップロード

index.phpとstyle.cssを格納したフォルダを作成。

それをZIPファイルに圧縮します。

あとは①で構築したWordPressの管理画面から、外観 > テーマ＞新規追加＞テーマのアップロードへアクセス。

ZIPで圧縮したテーマ（suimin.zip）を選択しましょう。

今すぐインストールボタンを押すとテーマのインストールが完了します。

まずは自作テーマを有効化してみましょう。

テーマ名だけ表示されています。

サイトのトップページを表示してみましょう。

index.phpには何も記述していないので、真っ白な画面が表示されます。

以上で、最小構成のWordPress自作テーマの完成です。

ここから色々、足して自作テーマを改造していきましょう！

テーマ情報を記載するStyle.cssのヘッダーコメントの記述方法

テーマ名だけStyle.cssのヘッダーに記載しました。

Style.cssのヘッダー部分について調べて、テーマ情報とテーマのサムネイルの設定方法をちゃんとしていこうと思います。

/*
    Theme Name: SUIMIN
*/

しかし本来であれば、もう少し詳細の記述が必要になります。

項目	必須	備考
Theme Name	〇	テーマ名
Theme URI	–	テーマに関連するWebページのURL
Author	〇	制作者名または組織名
Author URI	–	制作者名または組織名に関連するWebページのURL
Description	〇	テーマに関する説明
Tags	–	テーマ検索用のキーワード。詳細
Version	〇	XX または XXX 形式で書かれたテーマのバージョン
Requires at least	〇	テーマが動作する最も古いメインの WordPress バージョン
Tested up to	〇	テーマがテストされた最後のメインの WordPress バージョン
Requires PHP	〇	サポートされている最も古い PHP バージョン
License: GNU	〇	テーマのライセンス
License URI	〇	テーマライセンスの URL
Text Domain	〇	ドメインに使用される文字列
Domain Path	–	テーマ検索用の翻訳を見つける場所
Template	〇	子テーマにいれるStyle.cssは親テーマのテンプレート名を記載する

Style.cssのコメントに記載する内容

/*
    Theme Name: SUIMIN
    Theme URI: https://suimin-theme.com/
    Author: MOTOKI LLC.
    Author URI: https://motoki-design.co.jp/wordpress/
    Description: SEO-optimised starter theme in line with Google's standards.
    Tags: blog, block-styles
    Version: 1.0.0
    Requires at least: 5.6
    Tested up to: 5.6
    Requires PHP: 7.3.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: suimin
    Domain Path: /languages
*/

ちなみに子テーマに入れるstyle.cssの記述は以下の通り。

子テーマの場合はテンプレート名（Template）の記述が必要

/*
    Template: suimin
    Theme Name: SUIMIN Child
    Theme URI: https://suimin-theme.com/
    Author: MOTOKI LLC.
    Author URI: https://motoki-design.co.jp/wordpress/
    Description: SUIMIN Child Theme
    Tags: blog, block-styles
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: suiminchild
    Domain Path: /languages
*/

参考

WordPress Developer Resources

Main Stylesheet (style.css) – Theme Handbook | Developer.WordPress.org The style.css is a stylesheet (CSS) file required for every WordPress theme. It controls the presentation (visual design and layout) of the…