WordPress テーマ作成をはじめる

連載

WordPressテーマを作ってみよう Vol.1

WordPressテーマを作っていきながら、その様子を公開していきます。

自分でテーマを作りたい方、いっしょに勉強していきましょう。

最初からたくさんのことを一気にするとキツイので少しずつ進めましょう。今回は、自作テーマをWordPressに認識してもらい、そのテーマに切り替えるところまで。

すぐ終わります。

（WordPressがインストール済みのところから始めるので、そこまでの準備の内容は割愛）

テーマのファイル構成

DocumentRoot
  └ wp-content
      └ themes

WordPressをインストールすると上のような構成になっているはずです。

テーマファイルはthemesディレクトリに配置します。ここに新しいディレクトリを作成しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine

とりあえずmineにしました。このディレクトリの下にどんどんファイルを追加して作っていきます。

ファイルを用意する

WordPressには最低限必要なPHPファイルがあります。それを用意するところからはじめましょう。

style.css

WordPressのテーマは管理画面で切り替えます。そのテーマのリストに自分の作ったテーマが表示されないといけません。

そのテーマ情報を設定するのがstyle.cssです。

テーマのホームディレクトリにstyle.cssファイルを作成しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine
              └ style.css

そして、style.cssにコメントを追加します。

/*
Theme Name: Mine
Theme URI: https://sample.com/
Author: my theme create project
Author URI: https://sample.com/
Description: Themes created by myself
Version: 1.0.0
Text Domain: mine
*/

WordPressがテーマとして認識してくれる程度の項目だけ書いてます。

（ほんとうはもっと少なくてもいい。くわしくは省略。）

なんでcssなんだ？

と思いますが、しょうがないです。そういう仕様だから。

index.php

もうひとつ、WordPressがテーマを認識するのに必要なファイルがあります。

index.phpです。

このファイルは、すべてのページを作るPHPファイルの親元です。普通はページのホーム表示するのに使います。これがないとWordPressはテーマエラーになります。

<?php
echo '<h1>index.php</h1>';

とりあえずこれだけ書いて保存しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine
              ├ style.css
              └ index.php

テーマ確認

自作テーマに変更してみます。

管理画面の外観 -> テーマを開いて、自作テーマが一覧に表示されればOKです。

いらないテーマ削除

Twenty ***のテーマはWordPress公式の標準テーマです。ひとつは参考に残してもいいですが、いらないものは消しましょう。

themes下のディレクトリを消すだけです。ボクは最新版のTwenty Twentyだけ残しました。

自作テーマのホームを表示してみよう

テーマを自作テーマに変えて、サイトのホームを表示してみます。

さっきの外観 -> テーマで自作テーマを有効化してサイトを表示してください。

自作テーマが使えるようになりました。ショボすぎるけど。

これにどんどん肉づけしてWordPressサイトらしくしていきます。

今回はここまで。