昨年末から作成していた WordPress テーマが一通りできたので、このブログに使用してみました！

直すところはたくさんありますが、狙っていた高速表示が実現できたことでブログをもっと読んでもらいやすくなったと思います！

このブログに合わせてハードコーディング (カスタマイザではなく PHP コードを直接編集) してしまったところがありました。
例えば、広告コード・アクセス解析タグの挿入や一部カスタマイズ項目の設定値です。

このあたりの細かい修正などを加えたらプレリリースしたいと思います。
最初のバージョン (Ver.0.**) は全機能搭載のフル版も無償で配布していきますので興味のある方はぜひ動向を見守って下さい (笑)

主な機能や特徴

主な機能や特徴を簡単にまとめておきます。

今後実装予定のものも列挙します。

ホームページのビジュアルスライダー

ホームページ (TOPページ) には全画面サイズの画像や動画 (動画は実装中…) を用いたビジュアルスライダーを搭載しています。
画像とテキストボックス、リンクボタンを順番に表示する機能です。 これにより印象強い TOP ページとなります。

通常、 複数の大きな画像を利用したスライダーはその読み込みに長い時間が掛かってしまうのですが、テーマ設計時点から最適化することで殆ど一瞬で TOP ページが表示できるようになっています。

作成したテーマではページを表示した瞬間は超低解像度の画像を利用して一旦表示させてしまいます。
この時、低解像度の画像でも違和感の少ないように CSS フィルターでボカしています。

低解像度の画像はアップロード時に自動的に生成するので、すでにアップロードしてしまっている画像にはないサイズと圧縮率になります。
本テーマではこのアップロード済みの画像を現在の設定で再圧縮・リサイズできるような機能も実装しています。
(動作が重いので Ajax を利用して少しずつ変換していきます)

続いて、スライダー用の高解像度画像を順次読み込みことで差し替えていきます。
画像を順次読み込ませることで一枚目の画像が早く表示できるようになっています。(残りはスライダーが遷移するまでに徐々に読み込まれます)

Instagram Graph API を使ったインスタグラムタイムライン表示

ホームページには Instagram のタイムラインを表示できる機能を組み込んでいます。

もちろん、今年でサポート終了する Instagram API ではなく Facebook の提供する Graph API を利用しているので今後も安心して利用できます。

また、ウィジェットとしても表示できる機能を実装しています。
こちらも同じく Graph API を使っています。(テーマ内部でキャッシュを共有しています)

Instagram のタイムラインを表示するには無期限のアクセストークン取得という手間が掛かります。
詳しい取得方法は技術ブログの方にまとめていますので、そちらをご確認下さい。(有料記事：税込560円)

人気記事を表示するウィジェット

人気記事を表示させるウィジェットも標準で搭載しています。

プラグインで良くある機能と似ていますが、保持するデータを調整しているのでデータベースを圧迫したりアクセスが増えてくると遅くなる心配もありません。
集計期間ごと (当日、過去7日、過去30日、今年など) のデータを保存するので後から集計期間を変更することは可能です。
※過去の指定期間のアクセス数などの詳細な情報は残していません。データベースへのアクセス速度、処理負荷を最適化するため。

表示形式はカード形式、リスト形式、テキスト形式から選べます。
いずれの表示形式でもページの読込速度が遅くならないように各画像サイズは最適化&遅延読込化されています。

高速表示を実現する様々な最適化

高速表示されることは SEO においても重要です。
すぐに表示される Web サイトはユーザに歓迎され、Google からも優遇されます。

本テーマでは読み込み速度を早くするために画像サイズの最適化はもちろん、様々な対策を行っています。

画像の遅延読込 (Lazy Load)

Web サイトでの読み込みが遅い大きな要因は容量の大きな画像に依ります。

この対策としてスクロールするまで表示されない画像を読み込まないようにして、必要な時に読み込む遅延読込 (Lazy Load) を採用しています。

Google Chrome で少し前から対応した HTML の loading 属性に “lazy” を付与することで簡単に遅延読込が実現できます。
loading 属性は HTML 標準として仕様に組み込まれましたが、まだまだ対応したブラウザは Chrome だけです。

そこで、従来通り、Javascript による遅延読込も組み込んでいます。この処理は loading 属性が無効の場合にのみ行います。

また、遅延読込は jQuery を使ったライブラリが多いですが、jQuery も読み込みを遅くする要因になるので本テーマでは jQuery を使っていません。

WordPress コアコードを使った最適化

画像の読み込みと同様に実は WordPess が HTML を生成するまでの時間の短縮も最適化しています。

本テーマでは、WordPess のコアコードからより最適な関数を利用したりして WordPress がする仕事を減らし、データベースへのアクセスも減らして高速化を図っています。

そのお陰でプラグインなどを全て削除すれば 100ms ほどの処理時間で HTML を生成することができるようになっています。
これだけ短い時間で HTML が生成できれば体感的にはほぼ無視できるレベルでしょう。

インデントされた読みやすいHTMLを生成

開発者が HTML コードを解析しやすいように可能な限りインデントで整形した HTML コードを生成します。

改行もなくインデントもされないコードでもコンピュータは問題ありませんが、我々開発者はどうしてもインデントで整形したコードの方が助かります。

これにより、カスタマイズの際に役立つと期待しています。

国際化対応

日本語だけでなく様々な言語で使用できるようにテーマが出力する決まった文字列は、翻訳ファイルで各言語に対応できるようにしてあります。

現在は作成中なので一部英語表記になっているのはそのためです。

まとめ

以上、プレプレリリースした WordPress テーマの簡単な紹介でした。

今後も情報を追加していきたいと思っています。

欲しい機能やこんなことをやってほしい、などのご要望があればぜひコメント下さい。
可否を検討して前向きに検討していきたいです。