94.独自テーマの作成をしよう① ～何から手を付けるのか～

本日は実際に独自テーマの作成に入っていきます。

HTML、CSSも書くのですが今までとは仕組みが違うのは以前の記事で書いたとおりです。

では早速やっていきましょう。

WordPressに独自テーマを認識させる

適当にthemeフォルダにファイルを置いても、WordPressはテーマとして認識してくれません。

テンプレート階層にいくらしたがってファイルを用意しても、認識してくれません。

詰んだ。

そんなことはありません。

WordPressに認識してもらうには独自テーマのフォルダ直下に配置した

style.cssに必要な記述を追加します。

@charset "utf-8";

/*
Theme Name: 独自テーマ名
*/

加えてfunction.phpファイルにテーマのセットアップの為の記述を追加します。

コード自体は割愛しますが、function.phpの中ではWordPressの独自関数(PHP)を使ったりします。一部抜粋すると

add_theme_support( )

add_action()

などなど

当然のようにわからないので調べます

関数リファレンス/add action - WordPress Codex 日本語版 (osdn.jp)

WordPressCodexで検索すると説明があります。

ですが、ここでわからない連鎖が出てきます。

フックって何だろうとか

エイリアス？

WordPRessコア？

アクションフック？

プラグインAPI？

と、いつものように総当りで調べるので途端にスピードダウンします。

話を戻して、

style.cssとfunction.phpを設定すると

Wordpressの管理画面から独自テーマが確認できます。

先程の独自テーマ名としたところが、そのままテーマ名として表示されます。

この状態で有効化してみても、何も表示されません。真っ白です。

なぜなら、昨日もお伝えしたように必要なテンプレートが用意されていないからですね。

index.phpやらテンプレート階層にもとづいて作って行く必要があるわけです。

ファイルは分割せよ

今までHTMLはファイルに全てのセクション等を記述していました。

ですが、せっかくPHPを使うので

共通部分はそもそもphpファイルとして切り出して

分割管理するのが便利だよね。

ということです。

header.php

footer.phpなんかはおおよそ全てのページで共通ですので、分割して作ります。

こうして分けることのメリットは保守性が上がる所だそうです。

headerに変更があった場合にheader.phpだけ修正すれば全てのページのheaderに反映されます。

もしheaderを各々のテンプレートファイルに個別に書いていたら、

一箇所修正があっただけで全てのテンプレートのheaderを修正しないといけないわけです。

これは天と地ほどの差がありますよね。

CSSのクラス設計でも似たようなことがあったような…。

今日のまとめ

• 独自テーマをthemeフォルダに配置しただけでは、WordPressに無視される
• 認識させるにはstyle.cssとfunction.phpに記述をする必要がある
• テンプレート作成の注意点として、各ページ内のHTMLの共通部分は分割してPHPファイルとして管理する

本日から独自テーマ作成に入りました。

わからない言葉が多いので、より一層遅くなりそうですが、しっかり咀嚼していきます。

では、また。