は、はやい～～！！作った甲斐があったってもんです。
このサイト立ち上げ前に見つけた「White Tiger」というテーマ。きれいだし、新着画像スライダーなんていうのもついててオシャレ！！で使用させていただいておりましたが、テーマファイルの構成や記述を見るにしたがって、そろそろ自分でもオリジナルのテーマ作れるんじゃないか？？と思うようになりました。
それからおおよそ１か月。時間のある時にコツコツコツコツベーステーマに必要なものだけを追加していってついに完成？？程度のレベルになりましたので、テーマを入れ替えることにしました。
これをベースにしていろいろと簡素化する部分は簡素化し、必要な機能は足すという形で表示速度の維持をしながら良いテーマに仕上げていこうと思ってます。
テーマを作る道程については
で詳しく（というかまとまりなく）紹介してますので興味のある方はどうぞ！！
といいつつこのテーマで目指したものを一応紹介させてください
独自テーマでやりたかったこと
目的の大半は表示速度の改善です。無料・有料問わず配布されているWordPress向けのテーマは誰でも簡単に使えるようになっています。
でも自身のサイトで使用するテーマなのですから汎用性は必要ないですよね？
簡単に言うと汎用のテーマは100%ある機能からの引き算でページを表示しています。それに対してオリジナルテーマは最低限表示に必要なものに自身で必要なものだけを足し算して表示します。
つまり汎用テーマであるが故に「あるけど使わないから動かさないで！！」という流れがすごく複雑に処理されてページが表示されるので時間がかかるのです。それを足し算にすれば・・・当然処理にかかる時間が短縮され、表示が速くなるのです。
とはいっても最低限表示させるための機能？を一から作る知識はありませんでしたのでPlusersさんのサイトで紹介されているベーステーマ作りの方法を参考（ほぼ１００％そのまま）にさせていただきました。
あとは必要なものを追加すればいいので、そのために以下の行いました。
なるべく必要な機能はプラグインを使わないようにする
高機能なテーマには必然的に入っている機能も含め、プラグインなしで実装したのは以下の機能です。
関連記事表示
単純に同一カテゴリーの記事をランダムに表示させているだけですが、それで事足りるのでは？で追加しました。
人気記事表示
カスタムフィールドに記事の閲覧数をカウント＆記録させ、それを順番に表示するウィジェットを追加しました。
ウィジェットエリアの追加
ベーステーマではサイドバーウィジェットのみでしたので本文上下へ新たにウィジェットエリアを追加しました。
SEO用のタグを追加
有名なプラグインにAll In One SEO Packというプラグインがありますが、こちらもカスタムフィールドにあらかじめメタデータの入力欄を設けてそれをページに出力するようにしました。このデータをOGPにも反映させているので２重に作業が発生することを回避できています。
コードのハイライト表示
私の場合はブログ内でコードの紹介をする機会が多いのでPrism.jsを使ってハイライト表示させるようにしました。
視差効果のあるヘッダー画像
最近流行り？の画像がググっと動くヘッダー画像。視差効果というらしいです。これを表示できるようにしています。しかも全幅表示。個人的には格好いいと思ってますが、さいてかに・・・。
XMLサイトマップの出力
多くのプラグインのように自動ではなく、投稿や固定ページの「更新」や「公開」ボタンがクリックされたときにマニュアルで発動する検索エンジン向けのサイトマップが出力されるようにしました。
などなど、テーマになかったらプラグインで・・というものをプラグインなしで実装できました。
逆にどうしようもなかった（というかプラグインの方が秀逸）こととしては
内部・外部リンクのカード化
プラグインなしで実装するという紹介サイトの多くは「はてなブログカード」のapiを外部リンクとして使用するもの。それでもいいのですが、リンク経由でリンク先サイトに行ったものがすべて「hatena-blog-parts」となってしまうのが嫌でいろいろ画策したものの私の能力での実装を断念、プラグインに頼ることにしました。
コメント欄のカスタマイズ
通常のコメント欄は表示できるようにしてますが何か素っ気ない感じがするので、いろいろな機能がある
を使用しています。
クイックタグ
これは自身で実装可能ではあるものの、追加・削除・別サイトへの移設もできて非常に便利なので
を使用しました。
テーマ内での複雑な読み込みを極力防ぐ
１ページ作るのにどれだけの条件分岐があるの？どれだけの別ファイルを読み込むの？高機能なテーマになればなるほどこれらが増えていきます。当然それによってコンマ何秒でもロスがでますので、このテーマでは必要なものを最小限にして、直接１ファイル内へ記述するようにしています。
不要な機能は機能させないのではなく実装しない
冒頭にも書きましたが、オリジナルテーマのいいところは足し算できること。今必要なものを必要なだけ実装することで不要なスクリプトが読み込まれたり、そのスクリプトを実行する準備としてあらかじめ読み込んでおくといったことが少なくなり、速度改善に役立っています。
どうしようもない部分
外部とのデータのやり取りが発生すると当然その分表示速度は低下します。これは仕方ないことですね。
速さをウリにする有料テーマでもこれをすることで一気に速度が下がっていきます。
このサイトで速度低下の要因となるのは・・・
- 日本ブログ村のランキングパーツ
- グーグルアドセンスの自動広告
- Amazonや楽天などの商品表示
の３つ。特に速度に問題あり？と感じるのが１のパーツです。2019年4月に完全リニューアルして以前よりは速くなりましたがそれでも・・・という印象です。
これらのない状態でページ表示をすると・・・なんと１秒以下ですべてのページが開くくらいの速度が出ました。
GTmetrixでの計測でも一応画像の縮小表示部分だけ指摘されるのみであとは全部A、いい感じに仕上がったと思っています。
何となくで始めたテーマ作り、それを使ってサイトが表示できるとちょっと感動しますね。
これから新しい記事を追加しつつ、過去記事の修正をしていきます。しばらくの間見づらい記事もあるかと思いますがご容赦ください。
