[試] WordPressテーマ STINGER3の時代が来た。だからこそその先へ！一歩先行く+αカスタマイズ術 #Stinger-WP

2013/12/22

2014/01/03

約13分

SEO対策, サイト表示速度高速化, ユーザビリティ向上

WordPress

WordPressテーマ STINGERユーザーによる連載ブログ企画「Stinger Advent Calendar 2013」の参加記事です。

WordPressテーマ STINGERの時代がやってきました。だからこそその先も見てみたい。このエントリでは、STINGERを更なる高みにいざなうカスタマイズ術を紹介します。

どちらかというとWeb界隈の基礎知識を持っている中級から上級者向けの内容になっています。

アウトライン

Contents

1 アウトライン
2 プロローグ
- 2.1 WordPressテーマ STINGERとの出会いと別れ
- 2.2 全体概要 – このエントリで取り扱うトピック
3 SEO対策強化
4 サイト表示速度高速化
5 ユーザビリティの向上
6 セキュリティの強化
- 6.1 URL等のエスケープ処理
7 おまけ
8 まとめ

プロローグ

WordPressテーマ STINGERとの出会いと別れ

私がWordPressテーマ STINGER（以下）に出会ったのは2013年4月、独自ドメインを取得し、WordPressでブログを始めた時でした。そのとがった姿に一目惚れ、早速運用し始めました。

出典: STINGERに公式キャラクター！

そして、改善点を開発責任者であるENJIさんにフィードバックしていた時期もありました。ENJIさん宛のメールに「Stingerの利用者が増えるとよいですね」なんて書いていたのが今となっては懐かしい思い出です。それが現在Stinger3公式サイトのTHANKSに当サイトが掲載されている所以です。

その後ですが、個人的に色々と試したい事があり、Stingerのコンセプトにインスパイアされながら、私なりの工夫を組み込んで一から設計・コーディングしなおしたのが、以下WordPressテーマ Organizerです。

[試] WordPressテーマの自作をしました | WordPressテーマ Organizer

このエントリでは、この取り組みの中からSTINGERのカスタマイズに役に立ちそうな情報を紹介したいと思います。とはいっても、色々ありすぎて全ては無理です。公開済みの物も併せて可能な範囲で共有します。

尚、functions.php等を修正するカスタマイズが多いです。不正なコードの場合、画面が真っ白になって操作できなくなったなんてことが普通に発生するので、編集する前に必ず対象のバックアップを取得するようにして下さい。

若干煽りを入れて、「STINGERとの別れ」なんて書きましたが、アップデート含めてSTINGERのコード内容はウォッチしています。ここまで利用者が多くなってしまうと、自由に大きな改修ができなくなるのですが、現実的な改善点があれば引き続きENJIさんに連携したいと考えています。

全体概要 – このエントリで取り扱うトピック

さて本題に入る前に当エントリの全体感をを説明しておきます。

大きく分けて「SEO対策強化」、「サイト表示速度高速化」、「ユーザビリティ向上」、「セキュリティ強化」のカスタマイズ術から構成しています。

SEO対策強化

SEO対策を強化するための施策を紹介します。と一言で言えるのですが、より正確に言うと、作者が伝えたいこと、重要だと考えていることを検索エンジン、ひいては読者に伝えやすくする工夫を紹介します。

サイト表示速度高速化

自分のサイトの表示速度をあきらめていませんか？少しずつでも改善のために始められることがあります。

以下は、当サイトのサイト表示速度の計測結果です。GTmetrix、pingdom、Web担のブックマークレットのレポートになります。

もちろんインフラ側での対応も含めた結果ではあるのですが、テーマその物や付随するレイヤーでも様々な工夫を行っています。その一端としてテーマカスタマイズ時の工夫とWordPressプラグインを使用した改善方法を紹介します。

method-customize-wordpress-theme-stinger-03

method-customize-wordpress-theme-stinger-04

method-customize-wordpress-theme-stinger-05

ユーザビリティ向上

ユーザのサイトの使いやすさを改善するためのカスタマイズ方法を紹介します。当サイトのグローバルメニューとスライダーに関する工夫の紹介です。

セキュリティ強化

WordPressテーマをカスタマイズする上でセキュリティを向上させるために注意すべき点を紹介します。

SEO対策強化

カテゴリページをまとめ記事として有効活用する方法

カテゴリページをコンテンツとしてもっと有効活用できたらと悩んでませんか？おまたせしました。一般的にあまり意識されていないカテゴリページを最大限に活かす方法を教えます。

具体的には、カテゴリの正規化や記事の表示順序最適化や低品質ページのnoindex化等を行い、検索エンジンに好かれるカテゴリページの作り方を紹介しています。

[試] 衝撃！カテゴリをまとめ記事として洗練する方法 | カテゴリ構造化によるSEO対策強化

meta descriptionを有効活用する方法 + SNS対応強化

記事について「伝えたいことはしっかり伝える」ための方法です。

記事の概要は、タイトルと共に内容を端的に伝えるために大変重要です。よって、先頭からXX文字というように機械的に抜粋したものを使用するのではなく、作者が伝えたいことがわかるように情報を提供すべきだと考えています。

ここでは作者が伝えたい記事の概要をmeta descriptionとして設定し、それをトップページ、カテゴリページの記事の概要、及びFacebookのいいね！等でシェアされた時の概要に活用する方法を紹介します。

method-customize-wordpress-theme-stinger-06

[試] meta description（メタデスクリプション）の有効活用 | トップページ各記事の説明文に使用する方法

[試] meta description有効活用によるSNS対応強化 | 手間をかけずに質の高い概要を伝える方法

表示カテゴリ選択式リッチスニペット対応パンくずリストの活用

リッチスニペットに対応したパンくずリストは、サイト内部リンク構造、Google検索結果におけるサイト構造のアピールに少なからず影響を与えます。だからこそ自分の意図したカテゴリを表示することが重要にになります。それを実現するための方法を紹介します。

method-customize-wordpress-theme-stinger-07

[試] パンくずリスト表示カテゴリの悩み解決！カテゴリ選択式パンくずリストの設置方法

HTML5 + 構造化データマークアップの適用とIn-depth articles対応

当サイトでは、HTML5化した上で以下ウェブマスターツールが示すように構造化データマークアップ（schema.org）の適用を行っています。

method-customize-wordpress-theme-stinger-11

現在のところSEO効果があるとは言われていませんが、Googleによる構造化データマークアップ支援ツールの提供や海外でのIn-depth articlesの導入等、動きは活発です。将来のSEOを見据えて対応はしておいて損はないでしょう。

ということで、HTML5とschema.orgを適用する上でのノウハウを紹介します。

ここに記事のリンクが入るはずだったんですが。はい執筆途中で間に合いませんでしたよ(´・ω・｀)

今後のお楽しみということで。

サイト表示速度高速化

jQuery読み込み位置の最適化

JavaScriptの読み込み位置を気を付けている方は多いのですが、WordPressにおけるjQuery本体やプラグインのjQueryライブラリの位置を気にされていますか？このエントリでは、それらの読み込み位置を最適化し表示速度を改善する方法を紹介します。

[試] サイト表示速度を高速化する方法 | WordPress jQuery読み込み位置の最適化

画像の最適化

「表示速度を改善するのに画像圧縮した方が良いのはわかるけど、毎回そんなことは面倒でできないよ」とあきらめていませんか？

ここではWordPressのテーマカスタマイズとプラグインの組み合わせにより、画像最適化作業を自動化し、対応負荷を大幅に軽減する方法を紹介します。

[試] サイト表示速度を高速化する方法 | 画像最適化による表示速度改善

CSSスプライトの適用

これはカスタマイズでアイコン等の画像を追加されている方向けの記事です。複数の画像を結合することで、HTTPリクエスト数を削減し表示速度を改善します。

表示時は、CSSを用いて結合された画像から必要な部分を切り出して使用します。

[試] サイト表示速度を高速化する方法 | CSS Sprite（CSSスプライト）による表示速度改善

Webフォントの適用

これもカスタマイズでアイコン等の画像を追加されている方向けの記事です。このエントリではWebフォントを活用する方法を紹介します。ただWebフォントを適用するのではなく、読み込み容量を最低限に抑えるための工夫も併せて紹介しています。

Webフォントを適用する理由は以下の通りです。

使用するアイコンの種類やサイズ、色等が少ない内はCSS Spriteの方が読み込み容量を抑えられるのですが、パターンが増加すると増えた画像の数だけ容量が増えるため表示速度改善という意味では不利になってきます。

そんな時に有益なのがWebフォントの適用です。サイズや色をCSSで制御できるためパターンが多い場合でも容量を抑えられるメリットがあります。

[試] サイト表示速度を高速化する方法 | アイコンフォント（Webフォント）による表示速度改善

画像の遅延ロード

サイト上にある画像を一度に読み込んでしまうと時間がかかる。そこで画像のスクロールにあわせて順次読み込む方式にするのが画像の遅延ロードです。初回読み込み時の読み込むデータ容量とHTTPリクエスト数を削減することで、表示速度の改善をはかります。

画像の遅延ロードプラグインといえば、Lazy LoadやBJ Lazy Loadが有名ですが、読み込みデータ容量とHTTPリクエスト数の点で改善をはかったUnveil Lazy Loadというプラグインを自作しました。

以下は、代表的なWordPressプラグイン Lazy LoadやBJ Lazy LoadとのjQueryプラグインの読み込みデータ量の比較です。以前書いた記事の抜粋なので比較対象のバージョンが古いかもしれませんが、Unveil Lazy Loadは、読み込みデータ量を最大で80%削減（BJ Lazy Load比）できています。