WordPress用テーマ「Luxeritas」の導入とカスタマイズ

WordPress

さて、当ブログをとりあえずはWordPressに引っ越したものの、テーマ(テンプレート)は何を導入すべきかと、ずっと悩んでおりました。

と、言いますのも…

毎日何十ページ、毎月何百ページと他人様のブログを拝見する日々の中で、(テーマが何であれ)ワードプレスで書かれたブログの表示速度を「速い!」と感じた事が殆ど無いからであります。

もちろん、

「SEOと内部構造に強いのはSTINGERシリーズ」(現在ならAFFINGER4)
「雑記系と特化型、両方に使えるオールラウンダーならSimplicity」

という前評判は存じていましたが、どちらも「表示の速さ」に重きを置いた構造ではありません。


前回の記事にも書きましたが、ワタクシが当ブログをWordPressに引っ越す事を決意したのは、あくまでも「独自ドメインのSSL化」の為だけであって、依然としてワタクシの中では、

「やっぱり、BloggerがSimple&Fasterで最高なんやねぇ…」

という認識なのであります。


↑Google御大自身、ワードプレスの表示速度の遅さを認めている。

まぁ、そうは言っても、これからの競争を勝ち抜いていく中で、WordPressの中でも表示速度が比較的に速いテンプレートを探さなければライバル達に置いて行かれますので、ピンからキリまで星の数ほどあるワードプレス用テーマの中でも、唯一、「速さ」を念頭に置いて設計されたテンプレートである「Luxeritas」(ルクセリタス)を導入した次第です。

SEO最適化済み、多機能なのに高速、しかも無料!!


なんと、このテーマの開発・提供者である「るな」氏は、NTTグループやGMOグループに在籍していた(現在は独立)、バリバリのSE・プログラマーです!

改訂履歴も、実に細かく更新されています。たとえ有料であっても、ここまで細かくバージョンアップ対応しているテーマは見た事ないですよ??

つまり、このルクセリタスというテーマは、本来であれば有料で販売されていてもおかしくない程の高機能を、更に相応の工数を掛けて改善しているという事です。

ブログ運営を始めて間もない初心者や、WordPressに引っ越したばかりで有料テーマを購入して細かく造り込むまでの段階には達していないブロガーにとっては、まさに「神のテーマ」と呼ぶべき頼もしい存在です。

Luxeritasの特徴

もちろん、他のホスト型のブログサービスと違い、「プラグイン」という仕組みでソーシャルボタンを始めとする各種ウィジェット類を自由に脱着できる事に、WordPressというブログメディアの最大のメリットがあるワケですが、プラグインを増やせば増やすほど、それに反比例して表示速度が遅くなるという本質的な欠点を抱えています。

しかし、このルクセリタスは、それらのプラグインに頼らずとも最初から必要にして十分な機能を備えており、なおかつ表示速度を犠牲にせずに個性的なレイアウトを組めるのが最大の特徴です。

①通常型

現在、当ブログに適用しているのが「通常型」と呼ばれるカラムレイアウトです。

Luxeritas -通常型-

各エントリーカードの横幅を広く取り、余白(padding)も大きく設けて抜粋文を読みやすくしているのが特徴です。

②グリッド型

昨今のブログシーンに於ける一つの流行に、各エントリーカードを正方形に近い形にして横に2列(あるいは、それ以上)並べるスタイルである「グリッド型」が挙げられます。

Luxeritas -グリッド型-
https://moni0623.net/

グリッドとは、一般に車のレースなどで使われるサーキット場に於けるスタート位置の「配列」を指す言葉として定着していますが、その形に似ている事からウェブ用語としても浸透してきたのではないかと思われます。

このグリッド型の特徴は、先述の通常型とは違いアイキャッチ画像の方を目立たせるのが主目的であり、旅行日記や食レポなど、画像そのものがメインのコンテンツであるブログに向いています。

③カード型

Luxeritas -カード型-
https://makiriri.com/

各エントリーカードを横に細長く設定するカード型は、ニュースサイトなどで多く見られるレイアウトであり、上記の例のように抜粋文すら省略するケースも珍しくありません。

これは、ブログ運営を始めて間もない初心者の方からすると、あまりにもシンプル過ぎてユーザビリティーが下がるのではないかと思われるかもしれません。

しかし、検索から飛んで来る訪問者の場合、アイキャッチ画像などには目もくれずに記事タイトルのみに注目している場合が多いので、画面をスクロールさせない範囲でのエントリー数を多く設定できるカード型の方が、逆にユーザビリティーが上がる(滞在時間が長くなる)傾向があります。

記事数が多いブログに向いているレイアウトです。

高速化設定

さすが、本業のSE・プログラマーの方が開発・提供しているだけあって、Luxeritasの高速化への取り組みに関する説明は、どれもこれも説得力が強いものばかりです。

高速化に関する取り組み
https://thk.kanzae.net/wp/point/t159/

高速化に関する具体的な技術論は上記の説明を読んで頂くとして、ここでは、当ブログに採用している高速化設定を下記に挙げていきます。

圧縮・最適化

高速化設定 -圧縮・最適化-
・HTMLの圧縮→圧縮率・高を選択

・CSSの最適化→親と子のCSSを結合して圧縮するを選択

・Javascriptの最適化→必要ない(読み込まない)を選択

CSS

高速化設定 -CSS-
・モード選択→Luxeritas Modeをチェックオンして選択

・外部CSSの直接出力→テーマのCSSをHTMLに埋め込むをチェックオン

・子テーマのCSS→子テーマのCSSを読み込むをチェックオン

・アイコンフォントのCSS
アイコンフォント(Font Awesome)の読み込み方法→非同期(レンダリング高速)を選択
アイコンフォントのCSS→Luxeritasで必用最小限のCSSのみをチェックオンして選択

・ウィジェット用のCSS
検索フォームウィジェット
アドセンス (Luxeritas オリジナル)
SNS フォローボタン (Luxeritas オリジナル)の三点をチェックオンして選択

Javascript

高速化設定 -Javascript-
・jQuery
jQueryの読み込み方法→Google CDN – jQuery v3(高速/IE8以下未対応)を選択
jQueryを非同期にする(高速化するが注意が必要)をチェックオン

・Bootstrapプラグイン
bootstrap.jsの読み込み方法→必要ない(読み込まない)を選択

・その他のJavascript設定
子テーマのJavascript(luxech.js)を読み込まない
WordPressの絵文字用スクリプトを読み込まないようにする
WordPressのEmbed機能をOFFにするの三点をチェックオンして選択

高速化用 htaccess

高速化設定 -htaccess-
上記の画像は、Luxeritasのカスタマイズウィザード(カスタマイザー)にテンプレートとして付記されている「.htaccess」の設定例です。

.htaccessとは、サーバーにインストールされているWordPress自体ではなく、サーバーそのものを制御する為の設定ファイル(Windowsのレジストリファイルのようなもの)ですので、これを上手く設定すれば劇的な表示速度の向上が望めます。

しかし、実際には自分が借りているレンタルサーバーの種類(これはApacheと呼ばれるサーバー専用)や、そのバージョン、更にはレンタルサーバー会社が独自に設定している制約などによっては、上記のテンプレートをそのままコピー&ペーストして適用してもエラーになる(もしくは無視される)場合がありますので、他のブログサービスからワードプレスへ引っ越したばかりの人はイジらない方が無難です。

以下に挙げるソースは、ワタクシがお名前.comで借りているレンタルサーバー(SD-12プラン)で実際に設定している.htaccessファイルですので、同じくお名前.comでサーバーを借りている方はそのままコピー&ペーストして頂いて構いませんが、他社のレンタルサーバーを借りている方は、各社のサポートページやQ&Aページを参照して下さい。


# ETags(Configure entity tags) を無視する設定
<IfModule mod_headers.c>
	Header unset ETag
</IfModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
	Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
	AddType text/cache-manifest .appcache
	AddType image/x-icon .ico
	AddType image/svg+xml .svg
	AddType application/x-font-ttf .ttf
	AddType application/x-font-woff .woff
	AddType application/x-font-woff2 .woff2
	AddType application/x-font-opentype .otf
	AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定 (画像とフォントをキャッシュ)
<IfModule mod_headers.c>
	<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
		Header set Cache-Control "max-age=604800, public"
	</FilesMatch>
	# プロキシサーバーが間違ったコンテンツを配布しないようにする
	Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_expires.c>
	ExpiresActive On

	# キャッシュ初期化 (1秒に設定)
	ExpiresDefault "access plus 1 seconds"

	# MIME Type ごとの設定
	ExpiresByType text/css "access plus 1 weeks"
	ExpiresByType text/js "access plus 1 weeks"
	ExpiresByType text/javascript "access plus 1 weeks"
	ExpiresByType image/gif "access plus 1 weeks"
	ExpiresByType image/jpeg "access plus 1 weeks"
	ExpiresByType image/png "access plus 1 weeks"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType application/pdf "access plus 1 weeks"
	ExpiresByType application/javascript "access plus 1 weeks"
	ExpiresByType application/x-javascript "access plus 1 weeks"
	ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/x-font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
	SetOutputFilter DEFLATE

	# 古いブラウザでは無効
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	# 画像など圧縮済みのコンテンツは再圧縮しない
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE application/x-font-ttf
	#AddOutputFilterByType DEFLATE application/x-font-woff
	#AddOutputFilterByType DEFLATE application/x-font-woff2
	AddOutputFilterByType DEFLATE application/x-font-opentype
	#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

.htaccessをイジらずに、キャッシュ系のプラグインで解決したい場合は下記記事を参照。

導入したプラグイン

さて、当然の事ではありますが、「速さ」を最重要の指針として開発されているルクセリタスに、アレもコレもと欲張ってプラグインを突っ込むのは本末転倒です。

当ブログでは、プラグインを厳選して以下の4点のみ導入しています。

キャッシュ系

ワタクシ自身、ウェブサイトとブラウザの関係に於けるキャッシュという概念そのもの、つまり、「どんな情報を」「何処に」保持して、「どんな時に」参照するのか?という事については、未だ完全には理解していません。

しかし、基本的に入れれば入れるほど重くなるプラグインという仕組みの中でも、唯一、表示の高速化を助けるのがキャッシュ系のプラグインであり、適切に導入すれば他のシステムで作られたブログやサイトに対して大きく差をつける事が可能です。

当ブログでは、Luxeritasの開発者が推奨している「Cache Enabler」(キャッシュ・エンネイブラーと読むのか?)を導入しています。

サイトマップ出力

今回のワタクシのように、BloggerからWordPressへと引越した場合に起こってくる問題の一つに「Bloggerでは標準装備だったのに、WordPressではプラグインを入れないと利用できない機能」というのが幾つかあります。

その中の一つが、XMLによるサイトマップの出力です。

Bloggerの時には、トップページのURLの後ろに「/sitemap.xml」と付加すれば簡単にサイトマップを出力してくれたのに、ワードプレス本体には標準装備されていないという…
ちょっと呆れてしまいましたが、さりとてこれを導入しなければ、記事を大量に削除した時や記事タイトルを変更した場合などに、検索に反映されるのが大幅に遅れてしまいます。

よって、「仕方なく」ではありますが、このプラグインの導入を推奨します。
設定等はデフォルトのままでも特に問題はなさそうです。

セキュリティー系

そもそも、このWordPressというシステム自体が今以て改良の途上であり、攻撃者の標的になりそうな脆弱性を残しているという事なのだと思いますが、管理画面への不正ログインによってサイト内容が書き換えられたり、企業サイトのデータベース(SQL)に登録されている顧客情報が盗まれるといった事件が過去に何度もありました。

この世に泥棒さえいなければ、家の玄関に鍵をかける必要もなくなるのと同じで、こういったセキュリティー関連のプラグインも、管理画面の軽快な操作を考えるのであれば「入れたくない」というのが本音です。

しかし、自分のサイトが悪意ある第三者に乗っ取られるという事は、金銭的な損失よりもむしろ、レイアウトのデザインや記事の執筆に費やしてきた私達の「人生の時間」が全て水の泡と化すという事であり、これもまた「仕方なく」導入せざるを得ません。

その他

広告