WordPress ギャラリーを印象的に見せるレスポンシブスライダー(複数設置対応)プラグイン

ギャラリーの画像は thumbnail サイズが用いた一覧表示を行っている場合が多いので、意外と画像の印象が弱い感じがします

ギャラリーの画像をもっと印象的に表示できるようにスライダーを用いたプラグインを作成してみました。スライダーは、トップページのヘッダー等で多くの場合使われていますが、標準のギャラリー機能を使って指定できるようにすれば簡単に記事中で扱うことが出来ます

Celtis Gallery Slider プラグイン

スライダーを使うとこんな感じのクールで印象的なギャラリー表示ができます (^^)

特徴

  1. ギャラリーの作成は標準ギャラリーと同じ方法なので設定が簡単
  2. レスポンシブ対応
  3. ページ内に複数ギャラリーを設置可能
  4. 画像のタイトル、キャプション、説明表示の有無を指定可能
  5. 画像下のナビゲーション表示の有無を指定可能
  6. 各画像にはリンク先の設定が可能
  7. スライダーは JavaScript を使用せずに CSSによる実装

Gutenberg ブロックエディタ使用時は、標準ギャラリーからスライダースタイルを指定することが出来ます

デモ

サンプルとしてギャラリースライダーを設置してみます

このプラグインのCSSは、Celtis Speedy テーマに合わせて記述してあります
公式テーマでは問題ありませんでしたが、テーマによってはうまく表示がされない場合があるかもしれません

インストール

この機能は、celtispack プラグインをインストールして Gallery Slider モジュールを有効化すると使用できるようになります

WordPress Plugin : Celtispack
WordPressでブログをしているなら絶対おすすめの Celtispack プラグインパックの紹介です。画像最適化やちょっと気の利いた機能が満載です。AMPに対応している機能も沢山あります (^^)
WordPress Plugin : Celtispack

Gutenberg ブロックエディタでの設置方法

標準のギャラリーブロックからスライダースタイルを指定します

ギャラリーブロックを使ってギャラリーを作成

一般ブロックからギャラリーをクリックして選択します

ギャラリー画像のアップロード

下記のような表示がされたら、ギャラリー画像を新たにアップロードするか、メディアライブラリから既存の画像をギャラリー用に選択します(標準のギャラリー作成の手順どおりです)

ギャラリー画像をアップロード/メディアライブラリから選択してギャラリーを作成します

ギャラリーを作成

ここから各画像のタイトルやキャプションも設定できるので必要に応じて入力します

すると編集画面上に次のようなギャラリーが表示されます

ギャラリーブロックのサイドバーにあるスタイルタブにスライダーが追加されているのでスライダーを選択して、その下にある Celtispack 拡張ギャラリーから表示するナビゲーションタイプやキャプションの表示等を指定します

スライダースタイルを選択しても、編集画面上のギャラリー表示はデフォルトのスタイルのままです。スライダー表示形式はフロントエンド側のみとなります(いろいろ都合があり断念… m(_ _)m

上記手順で簡単にスライダーの設置ができます。標準ギャラリーを利用しているので手順はそのままで、ギャラリー毎にデフォルトスタイルを使ったり、スライダースタイルを使ったりが自由に選べます

この後は、記事を完成させて公開という手順となります

公開は、標準フォーマットでも問題ありませんが、ギャラリーフォーマットを選択すれば、テーマによってはギャラリー用のテンプレートによる表示を行ったり、アーカイブでギャラリー一覧を表示できたりするので、ギャラリーフォーマットを選択するのがお勧めです (^^)

Celtispack Gallery Slider が無効の場合には、ギャラリースタイルは デフォルト表示に戻ります

TinyMCE (ショートコード)の設置方法

使い方は、通常のギャラリー作成と同じです

ここでは、新規投稿作成時を例に手順を紹介します

記事作成のタイトル下にある メディアを追加 ボタンをクリック

gallery-メディアを追加

ギャラリーを作成 を選択

gallery-ギャラリーを作成

ここで新たにギャラリーに登録する画像ファイルをアップロードするか、メディアライブラリ中にある既存の画像を選択肢ます

ギャラリーを作成

gallery-ギャラリー画像選択

今回はメディアライブラリから既存の画像を選択してギャラリーを作成してみます

登録する画像を選択して、必要に応じてその画像のタイトル、キャプション、説明文を入力します

選択した画像は画面下部に一覧表示されるので、選択が終了したら ギャラリーを作成 ボタンをクリックします

ギャラリーの設定

Type

ギャラリーの設定にある Type から Celtis Slider を選択します

リンク先

通常のギャラリーと同様に、画像をクリックした時のリンク先の設定も行えます

  1. 添付ファイルのページ  –  テーマファイルの image テンプレートページへのリンク
  2. メディアファイル  –  画像の元ファイルへリンク
  3. なし  –  リンクファイルなし

デフォルトは添付ファイルのページになっているので、クリックを無効にする場合は、なし を選択して下さい

挿入されたギャラリー

gallery-挿入されたギャラリー

ギャラリーの挿入 をクリックするとエディタ内に設定したギャラリ画像が表示されます

挿入されている gallery ショートコードのオプション設定値は、ビジュアルモードからテキストモードにすれば確認出来ます

Slider タイプのショートコードオプション

gallery ショートコードにオプションを指定する場合に使用します

オプションデフォルト設定項目内容
sizelargethumbnail / medium / large / fullスライダーの画像サイズ
titletruefalse / trueタイトル表示
captiontruefalse / trueキャプション表示
descriptiontruefalse / true説明(コンテンツ)表示
controlnavthumbnailsfalse / true / thumbnailsナビの表示

※標準ギャラリーと同じく link, include, exclude のオプションも有効です
※未指定時はデフォルトのオプション値が使われます

例えば、ナビ表示をドットにして、説明文を表示しない場合を設定してみます
設定値は “” で囲んで指定です

テキストウィジェットからの実行について

テキストウィンドウのビジュアルモードで ”メディアを追加” からギャラリーを作成して Type を Celtis Slider にすればOKです。

テキストモードからなら gallery ショートコードにより実行できます

テーマのテンプレートファイルからの実行

http://codex.wordpress.org/Gallery_Shortcode で紹介されているように、テンプレートファイル内に直接プログラムコードを追加して gallery ショートコードを実行できます

<?php echo do_shortcode( ... ); ?>

AMP対応について

このスライダーは JavaScript を使用していませんので、AMP でもカスタムCSSを出力すれば 通常のHTMLと同様に動作します

Automattic AMP プラグイン使用時の表示例

Celtis Speedy テーマの AMP対応版、もしくは、Automattic の AMP プラグインをご使用ならば設置されているAMP用のアクションフックを使いカスタムCSSを出力するので自動的にAMPページへ対応しています

AMPのカスタムCSS用のアクションフックがない場合は、自動的にAMPへ対応することはできません

自作のAMP対応テーマをご利用の場合は、下記記事等を参考にAMPテンプレートファイルに amp_post_template_css, pre_amp_render_post 等のアクションフックを設置していただくことで対応することが可能です

WordPress AMP対応テーマやプラグイン作成に重要なAMP判定と4つのアクションフック
WordPressプラグインでAMPページかどうかを判定する方法とAMP対応時に重要となる4つのアクションフックについて紹介します (^^)
WordPress AMP対応テーマやプラグイン作成に重要なAMP判定と4つのアクションフック

Googleフォト用ギャラリーのご紹介

このギャラリーはメディアライブラリに登録した画像をギャラリースライダーとして表示するプラグインとして紹介しましたが、別途、Googleフォトを使ったギャラリー表示の為のフォトエンベッドメーカーというWebサービスを作成しましたので、興味ある方はこちらも試してみて下さい (^^)

フォトエンベッドメーカー:Google フォトのWordPress埋込用コード生成
Googleフォトで共有した画像やアルバムをWordPressの記事へ埋め込むためのコードを生成するWebサービスです。アルバムを簡単にタイルギャラリーやスライダー等の形式で表示することが出来ます (^^)
フォトエンベッドメーカー:Google フォトのWordPress埋込用コード生成

ギャラリーやスライダーのプラグインは、既に沢山あります、逆にありすぎてどれを使用してよいか迷いますが、シンプルなものをお探しであれば、このプラグインは、標準ギャラリーと同じ使い方で、ギャラリーを簡単にスライダー表示にできるしAMPページでも使用できるのでお勧めです (^^)


まとめ記事紹介

go-to-top