最小構成のWordPressテーマを作る方法【WordPressテーマ制作ログ】

今回は、最小構成のWordPressテーマを作りましたので、やり方についてまとめていきます。

最小構成のWordPressテーマいうのは、「テーマに必須のphpファイルとstyle.cssファイルを用意し、WordPressにアップロードすること」として進めていきます。

その手順を踏めば、WordPressの管理画面上にテーマが新しく追加されます。

やり方は以下の通りです。

1. 静的ページ index.html を用意する
2. WordPressをインストールする（今回は練習用のため、ローカル環境にインストールする方法を紹介します）
3. index.phpとstyle.cssを用意する
4. ファイルパスの修正を行う
5. テーマをWordPressにアップロードする

HTMLの静的ページを用意する

WordPressをインストール

練習用なので、サーバーは借りずにローカル環境にWordPressをインストールします。

MAMPというツールを使う必要があります。

やり方については、こちらにまとめています。

【初心者OK】MAMPを使ってローカル環境にWordPressをインストールする方法

index.phpとstyle.cssを用意する

WordPressテーマはテンプレートファイルと言われるphpファイルの集まりです。

今回は、最低限必要となるindex.phpとWordPressにテーマと認識させるために必要なstyle.cssファイルを作っていきます。

index.phpを準備する

上記で準備していたindex.htmlファイルをindex.phpにファイル名を変更します。

後ほど、画像やstylesheet.cssなどのファイルパスを修正しますが、先にstyle.cssを準備します。

style.cssの準備と書き方

style.cssは、WordPressにテーマとして認識させるために必須のファイルです。

書き方のテンプレートがあるので、それに沿って書く必要があります。

コードは、コメントアウトで書きましょう。

書き方のテンプレート

↓

今回書いた例

index.php内のファイルパスを修正

次にindex.phpファイル内のファイルパスを修正していきます。

ファイルパスの修正が必要な理由は、これからWordPressのthemeフォルダにアップロードしていきますので、ファイルパスが変わってくるためです。

今回で言えば、WP-TESTフォルダ内のファイルにパスが指定されているもの全てを修正していきます。

便利なコードがあるので紹介します。

このコードは、テーマのディレクトリまでのURLを表示する関数です。

このコードを追加しておくことで、WordPressにアップロードした際にも問題なくファイルパスが有効になります。

例として、cssファイルをファイルパスを修正します。

修正前↓

 

修正後↓

 

同様に、imgファイルの前にも上記のコードを追加していきましょう。

テーマをWordPressにアップロードする

アップロードするフォルダは「themes」です。

今回はローカル環境で実施していますので、

アプリケーション>MAMP>htdocs>wordpress>wp-content>themes

となります。

アップロードが終えたら、実際にWordPressの管理画面でテーマが作られているかみていきましょう。

管理画面の左の項目（メインナビゲーションメニュー）から外観>テーマを選びましょう。

うまくいっていれば、style.cssに書いたTheme Nameが反映されているかと思います。今回で僕の例で言えば、「WP-TEST」ですね。

まとめ

これで最小構成のWordPressテーマができました。

とは言え、今回作ったのは本当に最低限のファイルしかいれていません。

今後、今回作ったindex.phpというテンプレートファイルを複数のテンプレートファイルに分割し、汎用性のある実用的なテーマに近づけていきます。

という訳で今回はここまでです。お疲れ様でした。

 

現在僕は、WordPressテーマ作成までの過程をまとめていっていますので、興味のある方はこちらをご覧ください👇

【WordPressテーマ制作ログ】WordPressテーマの制作全行程【随時更新】

 

ちなみに僕がWordPressテーマを作るにあたって参考にしている教材はこちらです。

この本はかなりわかりやすく、実践的なのでおすすめです。初心者の方もぜひどうぞ。