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

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

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

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

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

ということで第一弾!

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

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

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

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

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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

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

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

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

自作テーマに必要なファイル
  1. index.php(テンプレートファイルがない場合に最後に使われるテンプレート)
  2. style.css(CSSを記述するファイル)

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

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

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

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

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

細かい手順は省きますが、アカウントを作成して、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テーマ検索用のキーワード。詳細
VersionXX または 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
*/

参考

テーマ情報の確認

あとは記述したStyle.cssをアップロードして更新します。※FTPを使いました。

自作テーマを選択すると詳細情報が追記されています。

自作WordPressテーマのサムネイル登録

テーマ画像が透明なままなので、以下の仕様の画像を追加してあげます。

画像サイズ幅 880px × 高さ660px
ファイル名screenshot.png
ファイル形式png
自作WordPressテーマのサムネイル

FTPを使ってscreenshot.pngをアップロードします。

テーマのサムネイルが登録されました!

まとめ

初めてのWordPress自作テーマということで、超最小構成で構築してみした。

真っ白とはいえ、テーマとして認識・表示できていますので、あとは必要な要素を調べて肉付けしていくだけです。

本ブログでは、これからも自作テーマについて調べたことをまとめる予定です。

最終的には自前のスターターテーマ(自作テーマを作るためのベースの自作テーマ)としてブラッシュアップしていこうと思います。

目次