33 Shares

WordPress Theme Gush4のデザインと新機能のご紹介

WordPress Theme Gush4

「いずれ近いうちにリリースします!」と言っておきながら、しばらく放置してしまった WordPress 無料テーマ Gush シリーズ最新作。

ようやく ver.0.8 ぐらいになったので Gush2 からの変更点などを覚書として残しておきたいと思います。カスタマイズ前提というのが本テーマのコンセプトですが、そのわりに汚いコードを書いていたのでスッキリ整頓しました。

見た目も前作よりスッキリしましたね。現在 Betz というブログでテスト&微調整していますのでご覧ください。配色などはいじっておらずデフォルトのままです。前テーマで使っていたショートコードもそのまま見えちゃってます ^^;

Gush4の新機能

ん、そういえば “ Gush3 ” はドコいったんだよという感じですが、これは Betz でもともと使っていたテーマを Gush3 としていまして、配布はしていません。

Gush2 をちょこっと改造してフロントページの記事一覧をタイル状に並べたり、記事・固定ページをすべてワンカラムにしていたのですが、あまり需要がなさそうだったのでこのままお蔵入りにしようかと。

たまに『固定ページをワンカラムにしたいんです!』というメールがくるので、そのときに簡単な手順を教えて、あとは「Betz のソース見てパクってください」と参考サイトとして見てもらっていました。

Gush4 はワンカラムテンプレートもつけたので、そんなお問い合わせも減りそうです。その他 Gush2 から新たに追加されたのは…

  • フロントページをカテゴリー別の新着記事一覧に(時系列順も可)
  • 記事下にプロフィール欄を設置
  • 記事下のシェアボタンの背景にアイキャッチ画像
  • スライドメニューを含むカスタムメニュー 3 箇所
  • SNS Count Cache 連携による高速化
  • カスタマイズしやすい CSS 設定
  • 記事ごとの CSS 入力フィールドを設置
  • 関連記事の日付を相対表示に変更

あと、テキストやボックスの CSS もいくつか書いてあります。

トップページをカテゴリー別新着表示に

当ブログでも採用していますが、フロントページ(トップページ)をカテゴリー別の新着記事一覧に設定することができます。もちろん従来の時系列順でも表示できます。

Gush4 カテゴリー別新着表示

カテゴリー別のようにブロックで並べると、記事タイトルの長さの関係でどうしても高さが変わってしまいます。自分で使うなら CSS で高さを固定すれば事足りますが、いろいろな人が使うことを考えて jQuery を使ってみました。スマホ表示は縦並びのため、高さが変動します。

アウトラインだけで見ればカテゴリー別のほうが良いのかなーと思います。ざっくりこんな感じで出力されます。

これが時系列順だとこうなります。

前者のほうが SEO 的にはるかに優れているとか、時系列順が悪いというわけではありません。たんなる好みの問題です。

親カテゴリーのみ出力しているので、現在ブログがどのような構成になっているかで最適解は変わるでしょうね。子カテゴリーまで出力すると逆に見づらくなりそうで、なにか良い方法はないか模索中です。

記事下の著者プロフィール欄

「こんな人が書いています」という簡単なプロフィール欄をつけました。プラグインで表示しているブログをけっこう見かけるようになったので、その代わりです。

Gush4 プロフィール欄

特別難しいことをしているわけではなく、WordPress のプロフィールをそのまま使っています。そのため、複数人で運営しているなら記事ごとにそれぞれのプロフィールが表示されます。

使っているコードはこちら。

ちなみに、プロフィール設定画面に各 SNS のアカウント項目を追加してあります。これはプロフィール欄やサイドバーのフォローボタンに反映しています。

Gush4 SNSアカウント入力欄

アイキャッチを背景画像にしたシェアボタン群

個別記事のタイトル下には、ファーストビューの表示スピードを考えて SNS Count Cache を使ったオリジナルボタンを配置しました。

同プラグインがインストールされていない場合は、管理画面に「必須プラグイン」である旨が表示されます。

Gush4 SNSオリジナルボタン

記事下もオリジナルボタンにしようか悩みましたが、あまりにデザインセンスがなくてカッコいいボタンが作れず、各サービスのデフォルトボタンにしました。たぶんカスタマイズ好きな人はオリジナルにしちゃうだろうし。

ただ、背景画像を敷きたいなーと思って、どうせならということでアイキャッチ画像にしてみました。ちょっとフィルターかけています。

Gush4 アイキャッチ画像を背景に

インラインで直接指定しているのであまりスマートなやり方ではありませんが、このぐらいはいいですよね…

条件分岐で、アイキャッチ画像が設定されていないときはダミー画像が出てきます。

レスポンシブデザインに最適なメニュー

正直なところ、モバイルメニューはなにが “最適” なのかずっと考えていてまだ答えが見つかりません。

悩んでもハゲるだけなので、たんに前作と違うメニューにしようとスライドメニューを採用しました。Sidr をデザインそのままで使っています。

Gush4 カスタムメニュー

Twitter でもちらっと聞きましたが、ハンバーガーアイコンがメニューであると認識している人はおそらく多くないでしょう。そのため、そのメニューが見逃されてもさほど影響のないつくりが大切だと思います。

というわけで、スライドメニューにはあれもこれもいれてもらうとして、本当に見せたい重要なコンテンツはヘッダー下の別メニューで対応できるようにしました。

Gush4 ヘッダーメニュー

タップサイズを考えると、多くても 4 つまでですね。画面幅の広いタブレット・PC では違うメニューに切り替えることが可能なので、もう少し増やせます。

スライドメニューは PC で展開しようかと思いましたが、あまりにヘッダーにごちゃごちゃ並んでも見づらいのでそのままボタンとして残しました。

固定ページはワンカラムテンプレートつき

先述のとおり、カスタマイズ関連でワンカラム化を希望する方が多く、Gush4 では固定ページテンプレートとして作成しました。

Gush4 固定ページワンカラム

この問い合わせページは横幅 728 px の「幅狭バージョン」です。なんとなく AdSense のバナーサイズに合わせました。「幅広バージョン」もあって、こちらは横幅が 980px です。

どちらも CSS で簡単に調整できます。

サイドバーを削っただけのワンカラム化なので、ヘッダーやフッターはそのまま残ります。サイドバーのウィジェットをフッターにもっていきたいとか、ヘッダーもいらないとか、要望を聞きながら新しいテンプレートを作るかもしれません。

まとめ

テーマカスタマイザーは入れていないので、CSS がわからない方には使いづらいかもしれません。簡単に変えられるのは背景色ぐらいです。でも逆に、子テーマを作ってガシガシやりたいならかなりいじりやすいのではと思います。

WordPress 無料テーマ Gush4 は、先日より募集(仮予約)をはじめたサロンメンバーとコンサルサービス利用者に特典としてご提供いたします。

コンサルプランはすでに締め切りましたが、サロンプランもあまりの予約の多さから 9 月 13 日(日)でいったん締め切ります。その後はキャンセル待ちとなりますが、再募集・テーマ一般公開に関しては未定です。

それでは、また。