FooGalleryのカスタムリンク機能でカードタイプのトップページを実現する。 – WordPressプラグイン

Hiron
こんにちは、ブログを書いていますHironと申します。(Twitter / Youtube)

目標:タイルギャラリーのようなカード表示のトップページを実現したい。

ワードプレスプラグインでギャラリーを拡張して、カード表示のトップページを作る方法を書きました。下記の3項目ができれば実現できるという見通しをたてて・・・

・タイルギャラリー表示
・ランダム表示
・画像にリンクをつける

目標はタイルギャラリーのような表示から→記事にジャンプできるというもの。いわゆるカード式とかポートフォリオ表示とか呼ばれてる感じ。「画像をきれいに並べて、ライトボックスでポップアップ」するよくあるギャラリーをつくるだけならたくさんプラグインがあるのだけど・・・。

トップページだけならテーマで可能なものもあるが、フロントページ(ランディングページ)に限らず、固定ページを使ってサブトップページなどでも自由に実現したかった。

また、今回は写真を見てほしいという目的があったので「ランダム」表示ができる必要があった。こちらは不要な場合は外すことも可能。

で、今回いくつかの方法を試行錯誤しましたのでそれを紹介したいと思います。備忘録もかねて。
方法1は試行錯誤でこういう方法もあるという感じですので、今回採用したFooGallryによる方法は、方法2だけ見てもらえば大丈夫です

方法1. 標準ギャラリー+カスタムリンクプラグイン

ギャラリーの画像に自由にリンクが付けられれば、カード表示から記事に飛ぶことができる。そのために標準のギャラリーにリンクを付けると言う方法。そこで見つけたのが、

WP Gallery Custom Links

「メディアを追加」の左メニューから「ギャラリー作成」を選ぶ。画像選択画面に「Gallery Link URL」という項目が出てくるので、そこに飛びたい記事のリンクを追加する。
あとは通常のギャラリー作成の要領ですすめます。3カラムのサムネイルにして、いろんな画像を見てもらいたいので「ランダム」にチェック。
下記がギャラリーの表示サンプル。画像に記事へのリンクが付いています(下記画像はプリントスクリーンなのでリンクは付いていません)。

難点:機能は満たしているが、隙間が空いてしまいギャラリーの表示が目的通りではない。
画像サイズをあらかじめPhotoshopなどでトリミングして揃えればきれいに並ぶが、かなりの手間になる・・・。

Justfied Galleryで標準ギャラリーのデザイン拡張

自分でのトリミングの手間を省き、自動で「タイルギャラリー」にしてくれるプラグイン。Googleフォトのように自動でグリッドに整理してくれる。

Justified Gallery

有効化するだけで、標準のギャラリーが下記のように表示される。
難点:スマホ表示がイマイチ…。
リスポンシブなのだが、画像サイズがPCに合わせるとスマホでは大きすぎて、スマホに合わせるとPCで小さすぎるという状態。惜しい。

ギャラリーとしてはこちらの方が優れている

2018年12月追記。
このページではあくまで「画像→リンク」という用途で探していましたが、ギャラリーとしてはこの方法1の方が優れています。理由は2点あって、ひとつはサムネイルを作らないので解像度が高いこと。もうひとつは、スマホのスライドに対応していることです。フィルム作例・レビューページではこの方法を採用しましたので参考にしてください。

≫ FUJICOLOR 業務用 100 【フィルム作例・レビュー】

方法2. 全部できる!すごいぞFooGallery!

実はこのプラグインは「ギャラリープラグイン」検索すると上位に出てくるものだった。ただ、こちらとしては、画像+リンクが必要だったのだけど、この説明をしてるサイトがなく、できないと思っていた。ほかのプラグインをいろいろ試してみて、そういった機能はアップグレードして有料版にしないといけないものがほとんど…。ダメ元で最後に試したのがこのFoogallery。

FooGallery – Image Gallery WordPress Plugin

無料版でぜんぶできた…。

・タイルギャラリー表示
・ランダム表示
・画像にリンクをつける
・さらに、スマホ表示もきれい。

使い方の流れとしては、(i)FooGalleryのページでギャラリー作成して、(ii)[ショートコード]を適用したい投稿ページ・固定ページにペーストする。→完成!

(i) まずはFooGalleryページで新規ギャラリーを作成する。そのさいに「Custom URL」にジャンプ先のURLを入力する。設定はこのようにしました。Custom URLにチェック。あと、ランダムは右に選択項目があるのでこちらも忘れずにチェック(ランダムにしたい場合)。

(ii) Foogalleryを作成すると、[ショートコード]が生成されるので、これを投稿ページ・固定ページに貼れば完成です。

オールドレンズのトップページ(固定ページ)に適用しています。
ロールオーバーすると「キャプション」の文字が表示されるのでデザイン的にもかっこいい!(PC表示時のみ)

もちろんLightBox表示のギャラリーも可能!

FooBoxプラグインを追加すればLightBox表示のきれいなギャラリーもできます。

FooBox Image Lightbox WordPress Plugin

旅行記のトップページに適用してます。

おわりに

今回はワードプレスプラグインFoogalleryで、ギャラリーを拡張することでカード表示のトップページを作成する方法を記事にしました。こんなことができれば、デザインのために「Wordpressテーマ」を変える必要もなさそうです!

「Wordpressテーマ」に迷っていましたら、当ブログで使用している「ハミングバード」はおすすめです。こちらに便利な理由を書きましたので良かったらご覧ください。