WordPressで独自テーマを作った話

※このページはWordpressテーマの作り方を記したものではありません

1.独自テーマ作ってみた

僕は普段の仕事でWordpressを使ったサイトを運営しています。ついでに言うとこのサイトもそうです。

最近、仕事で運営している方のサイト（以下仕事サイト）で独自テーマを作ったので、その結果として数値に現れた変化などを記していきます。

2.独自テーマ作ってみた理由

仕事サイトではもともと”Lightning”というテーマを使用していたのですが、以下の理由から独自テーマを作り、そちらに変更することにしました。

デザインの自由度が低い
PageSpeed Insightsのパフォーマンススコアが低い
”Lightning”では搭載されていない機能が必要になった

これらの理由は”Lightning”を批判するものではなく、サイトのページ数が増えたり、サイトの運営方針とテーマの用途が少しかみ合ってなかったから起きたことです。

とにかく、今のテーマを使い続けるよりは独自テーマを作っちゃった方が早いな、と思ったので作りました。

3.独自テーマ作ってみた内容

ということで、具体的に作った時の話をしていきたいと思います。

テーマを作るにあたって、主に参考にさせていただいたのはこちらのページです。

WordPressのテーマを自作する方法【オリジナルテーマ開発】

ここで紹介されているスクリプトの構造を基に、当時使っていた”Lightning”から必要なものを引き継いだり、不要なものを省いていきました。

具体的に省いたものは、大体以下の通りです。

ヘッダーのカスタマイズ機能（ロゴ、メニュー）
サイドバーのカスタマイズ機能
フッターのカスタマイズ機能
”Lightning”であるようなトップページスライド機能

1つのサイトに使う専用テーマであればこういった汎用性の高い機能は捨て、クエリから静的なスクリプトに変更してしまった方が軽くなりそうだと思いました。

画像もwp-content/uploads/……..みたいな感じで直接指定しちゃいます。

追加、変更したのはこんな感じです。

子ページ一覧を表示する機能を追加
投稿一覧のレイアウト、デザインを変更
その他細かい部分のデザインを変更

今回はテーマを作成すること自体が目的だったので、大きなデザイン変更は行いませんでした。

独自テーマ作ってみて

無事にテーマを作り終え、会社サイトに実装した後に起きた数値的な変化をいくつか紹介しようと思います。

まずは、Wordpress上のプラグイン、”Query Monitor”上の数値です。

1枚目がトップページ、2枚目が一番処理が大きい固定ページのものです。数回測定して中央値に近いものをピックアップしました。

画質が悪いのはご容赦。

テーマ変更前（Lightning）

テーマ変更後（独自テーマ）

0.数秒の差ではありますが、少しは読み込みが早くなっていますね。

でもクエリ数は増えてたりもするから何が要因なのかはわからないです。。。

お次はサーチコンソール上の数値です。

独自テーマに変更したのは2024/11/15なので、変更後しばらくしてから数値が改善していますね。

ちなみに黄色になっていたのはCLSの問題でした。

最後にSEO的観点での変化ですが、こちらは有意性のある変化はないように感じました。

まとめ

いかがでしたか？

僕的には思ったよりもテーマを作るのは簡単だった気がします。

専用テーマとして設計したこと、もともとあるデザインを基に作ったことが理由で簡単に感じただけだと思います。汎用的なテーマを作ったらこうはいかないと思う。

今度はプラグインとかも作ってみたいです。

このサイトのテーマも作らなきゃね

がらくたボックス