【WordPress】オリジナルテーマ作成（入門編）

2024.10.05

UnsplashのLuba Ertelが撮影した写真

1 はじめに
2 この記事の前提
3 オリジナルテーマ作成の流れ
4 オリジナルテーマの作成

はじめに

最近WordPressのオリジナルテーマ開発の勉強をしていまして、そのメモ書きです。

必要なものまですべて削ぎ落し、
とにかく自分で作成した最低限のファイルをWordPressで表示させることを目的としています。

ブラウザに表示さえできれば、
その後の勉強もスムーズに進められるかと思うので、

WordPressのテーマ開発を勉強し始めたばかりの方にはぜひ見ていただきたいです。

この記事の前提

WordPressの開発環境がすでにあること

オリジナルテーマ作成の流れ

以下の流れでオリジナルテーマを作成します。

１．テーマ用のフォルダを作成する
２．最低限必要なファイルを作成する
３．WordPress管理画面からテーマを適用する

オリジナルテーマの作成

さっそく、オリジナルテーマを作成し、ブラウザに表示させてみます。

１．テーマ用のフォルダを作成する

WordPressでは「/wp-content/themes」配下に各種テーマがインストールされます。

オリジナルテーマを作成する場合は「/wp-content/themes」配下にテーマ用のフォルダを作成し、そのフォルダにテーマに必要な各種ファイルをまとめます。

今回は「sample」のフォルダ名で作成します。
　↓作成するフォルダ↓

/wp-content/themes/sample

２．最低限必要なファイルを作成する

次に作成した「sample」フォルダに必要最低限のフォルダを作成します。

以下のようにindex.php、style.cssの2ファイルを作成します。

    /wp-content/
        └ themes/
            └ sample/
                ├ index.php
                └ style.css

この２つさえあればテーマとして機能します。
　

index.phpには以下のコードを記述してください。
（style.cssは空のファイルのままでOKです。）

対象ファイル：/wp-content/themes/sample/index.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sample</title>
    </head>
    <body>
        <h1>はじめてのオリジナルテーマ</h1>
    </body>
</html>