WordPressテーマ「ハミングバード」を使ってリニューアルしました – 実用した上での感想と備忘

有料WordPressテーマ「ハミングバード」を使用して、ウェブサイトをリニューアルしましたので、実際に使ってみての感想・備忘を書いてみます。

PR記事ではありません。あくまで利用ユーザーとしての感想・備忘につき、良いところだけでなくイマイチと感じたところも記しています。

弊社のウェブサイトでは、子テーマを設置した上で PHPテンプレート30項目以上の独自カスタマイズや修正をしています。また、WordPressテーマ（ハミングバード）はAMP（Accelerated Mobile Pages）ページに適用されないため別実装となります。PHPテンプレート/CSS/JavaScript等、ハミングバードの標準状態とはかなり異なりますので、その点はご注意ください。

ハミングバードを選んだ理由

無数にあるワードプレス・テーマの中から、なぜハミングバードを選んだかについて手短に。

まずリニューアルの目的

2016年8月末に記事主体のコーポレートサイトにリニューアルしました。投稿頻度は少なめで、お堅い記事ばかりながらも、少しずつ読んでいただける機会が増えてきました。そこで「記事をもっと読みやすいデザインにしよう！」というのがリニューアルの目的です。

外せない3つの条件

デザイン面での改善が目的ですが、ウェブサイトである以上「記事が必要な人に届くようにする」つまりSEOは欠かせません。もうひとつ「工数をかけない。片手間で１週間以内に完了」が絶対条件でした。最後の1つは不純な動機ですが「今まで使ったことのないWordPressテーマを使う」でした。

記事を読みやすいデザインにする
記事が必要な人に届くようにする（SEO面を考慮）
片手間で１週間以内に完了する
使ったことのないWordPressテーマを使う

以上を満たしたのが「ハミングバード」でした。デザイン面の完成度が高く、片手間で１週間以内に完了できそうだったことが一番の決め手です。

なお、同じ販売元（株式会社bridge）のテンプレート「アルバトロス」に決定しようとしていましたが、アルバトロスは投稿ページのワンカラムレイアウトに非対応のため、最終的にハミングバードにしました。

固定ページにて「ワンカラムテンプレート」を選択することが可能です。
ハミングバードでは投稿ページでもワンカラムにすることが可能です。（※アルバトロスは投稿ページではワンカラムにすることはできません。今後も対応の予定はありません。）

よくある質問（全般） | OPENCAGE　より引用

WordPressテーマ「ハミングバード」とは？

株式会社bridgeの販売している有料WordPressテーマで、この記事を書いている時点での販売価格は7,980円（税込）となっています。

ハミングバードは「誰が使っても簡単に美しいブログサイトを！」をコンセプトとして開発されたWordPress用テーマです。シンプルなデザインながら、アニメーション効果でさり気なくパワフルにコンテンツを目立たせます。
もちろんモバイルファーストで設計されているのでスマホでの見た目が抜群です。

WordPressテーマ「ハミングバード」　より引用

2017年からGoogleはモバイル・ファースト・インデックス（MFI）を実施します。モバイル最適化されていないテーマはSEO観点で選考外ですが、この点も満たされています。

本ウェブサイトのリニューアルにあたって、実際に Google のモバイルフレンドリーテストにも合格することを確認しています。

実際に使ってみての感想と備忘

どんなに優れたWordPressテーマであっても得意・不得意があります。また、特定のウェブサイトに対して作られているわけではないので、“最大公約数的な作り”にならざるを得ません。そのため弊社では有料・無料を問わずワードプレス・テーマをそのまま使うことはまずありません。管理画面 / PHPテンプレート（HTML） / CSS / JavaScript のあらゆる点で、プロジェクトの目的に沿ってカスタマイズ・最適化します。以下はフル・カスタマイズ前提での評価・感想となります。

実際に使ってみてよかった点

管理画面で基本カスタマイズが可能

アニメーションのオン/オフ、カラー設定（配色）、レイアウト、ウィジェット等、管理画面から簡単にカスタマイズできます。WordPress の基礎や専門用語の知識は最低限必要ですが、PHP / HTML / CSS / JavaScript といった専門技術の知識までは必要なく、基本的なところがカスタマイズできます。

CSSを使える人だと管理画面のカラー設定は逆に手間が掛かってしまうでしょう。コードベースでカスタマイズした方が細かい調整や管理ができます。

プラグインへの配慮

導入後に驚いたのが定番プラグインへのデザイン対応がされていたことです。具体的には下記の4プラグインのCSSやテンプレートファイルがあります（もしかすると他にもあるかもしれません）。

Table of Contents Plus（TOC+）
WordPress Popular Posts
MW WP FORM
Yet Another Related Posts Plugin (YARPP)

プラグインまでカバーしているテーマはとても珍しく、プラグイン箇所は独自でCSSをあてないといけませんが、この点は良い意味でとても驚きました！
「工数をかけない。片手間で１週間以内に完了」という目標を120%達成できました。

広告スペースの設置

サイドバー、記事タイトル下、記事下といった広告表示の定番箇所にウィジェットが用意されています。テンプレートファイルを汚さずに定番箇所に設置できるのは便利ですね。

途中固定型サイドバーの設置

PC版（デスクトップ版）Yahoo!のトップページ、Facebookでもお馴染みのスクロールすると途中で止まって固定されるサイドバーを設置することができます。記事ページのようにメインカラムのコンテンツ量が多いサイトでは嬉しい機能です。

Google Adsense を途中固定位置に置き、追尾させるのは規約違反なので注意しましょう。

サイドバーの固定機能を使った場合、1100px以上の画面幅からブラウザの横幅を縮めていくと、特定のブレイクポイントでサイドバー（サイドカラム）がメインカラムにめり込み、デザイン崩壊が起こります。通常利用の範囲では問題ないのですが、企業の品質基準によっては検証基準に引っかかるかもしれません。
※2016年12月現在

実際に使ってみてイマイチだった点

SEO面の不安 – 複数のh1タグ

WordPressテーマ「ハミングバード」では、記事一覧で各記事の見出しに<h1>タグをしています。そのため（トップページや一覧ページで）1ページ内に10個もしくはそれ以上の<h1>タグが含まれてしまいます。

１ページに <h1>タグを複数設置するか否かは議論の分かれるところです。HTML5の規格上は許容されていますが、<h1>タグは１ページに１つ（程度）にするのが SEO 上はコンサバティブな判断です。SEO専門会社に依頼すると、内部施策として、そうするよう指導される方もいらっしゃるでしょう。

SEO面のリスクを考慮して、記事一覧関連のPHPテンプレートファイルと該当のCSSをすべてカスタマイズしました。

参考

AMP（Accelerated Mobile Pages）対応

良かった点であげたように Yet Another Related Posts Plugin (YARPP) プラグイン用のテンプレートが用意されているのは嬉しい驚きでした。ただ、ハミングバードで用意されている YARPP のテンプレートをそのまま適用すると、AMP ページで大量のエラーが出てしまいます。

AMP自体が新しいものなので、未対応なのも当然といえば当然なのですが、PHP テンプレートレベルでの修正をするか、YARPPの標準テンプレートを行う等の対応が必要となります。

本サイトのAMP化にあっては、WordPressサイトをAMP対応するときのデファクトスタンダード「AMP – WordPress Plugins」を使っています。

ソーシャル対応 – 「LINEで送る」がない

「LINEで送る」がサポートされていないため、独自追加する必要があります。
ちなみにハミングバードがサポートしているソーシャルボタンは Facebook、 Twitter、はてなブックマーク、 Google+、 Pocket、 feedly の6つとなっています。国内の利用者数からするとLINEがサポートされても良さそうですが・・・。

あとがき

PHP / HTML / CSS / JavaScript の実務経験があり、子テーマを設置した上で、ある程度いじれる方には 8,000円で工数を大幅に削減できる素晴らしいテンプレートだと思います。逆に、まったく知識がない方だと「ああしたい！こうしたい！」と思っても、おそらく挫折してしまうでしょう。（ハミングバードに限ったはなしでなく、WordPress テーマ全般に当てはまることですが… ）

以上、有料WordPressテーマ「ハミングバード」を実際に使っての感想・備忘でした。