Gallery設置のための覚え書き
あちらこちらで、丁寧な説明をされている方がいらっしゃるので今更感満載ですが、自分の覚え書きを兼ねて。
使ったプラグイン
1．Compress JPEG & PNG images
画像圧縮プラグイン。
APIキーを取得する必要がありますが、設置しておけばアップロードで勝手に画像を小さくしてくれるらしいです。
すでにアップしてあるものも、後から圧縮できます。
2．Media Library Assistant
画像をカテゴリ分けしてくれるプラグイン。どうしても画像数が多くなってしまうので必須。
フォルダは移動しないので、アップロード済みファイルのリンク貼り直しなどは必要ありません。
3．FooGallery
多機能なGalleryプラグイン。
昨日も書きましたが、デザインを Justified Gallery にすると枚数が増えたときにIEが表示してくれません。
結果、デフォルトのギャラリーで十分かもという気持ちになる Responsive Image Gallery しか使えなくなってしまいましたが、MouseHover 時の表示方法が色々と選べたりするあたりが継続使用のポイントとなりました。
でも、ちょっと重い。
4．Responsive Lightbox & Gallery
Lightbox系プラグイン。名前の通りレスポンシブ対応ですが、jquery3系では動きませんでした。
本当は、FooGallery には、FooBOX のがいいらしいですが、昨日も書いたとおりデザインがあまり好みではなかったので（個人的感想です）。
本当はLightcase.jsとかが良かった。
有料オプションならつけられるようですが、そこまでたいしたサイトではないので有料を使うほどでは……。
5．Unveil Lazy Load
スクロールと同時に画像を読み込んでくれるプラグイン。
枚数多いと重くなるので、あった方がいいです。
続きは細かな設定とかです。
まずは、各プラグインを導入。
設置方法などは、余所様の方がよほど詳しく丁寧なのでそちらを見ていただくとして、まずは2.のMedia Library Assistantでアップした画像をカテゴライズします。
アップロードする画像には、タイトルとキャプションを設定しておきましょう。
代替テキストというのはaltのことらしいです。
4.のResponsive Lightbox & Gallery の設定は以下の通り。
こちらの日本語化ファイルに助けていただきました。本当にありがとうございます。
【一般設定】
・デフォルトの lightbox → TosRUs
・セレクタはlightboxのまま、「WordPress画像リンクに lightbox を有効にします。」にチェック。
・個別画像のタイトル → 画像のタイトル
・「ギャラリーとしての個別画像」と「ギャラリー」にもチェック。
※その後の項目は、設定が必要かわかりませんが「ギャラリーの画像サイズ」に「原寸大」、読み込む場所には「フッター」を選択しておきます。
【Lightbox】
先ほど選んだ TosRUs の設定となります。
・遷移の効果 → スライド
・最初に戻る → チェックを外す（ループ設定が嫌いなので）
・キーボードで操作 → チェック
・自動再生 → しません。チェックを外します。
・終了 → チェックを入れます。モバイルだと背景クリックで終了させる方が使いにくいかも？ このあたりはお好みで。
【FooGallery】
Add New Gallery から、Add From Media Library ボタンを押して画像を選択。
先ほど作ったカテゴリでフィルターをかけると、効率が良いかと。
ManegeItemsで入れ忘れた画像を、後から追加することもできます。
設定するときは、GalleryPreview を見ながらやった方が感じがつかみやすいです。
以下、各種設定。
・Gallery Settings → Responsive Image Gallery
・General
「Thumbnail Size」 はデフォルトのまま、「Link To」は、Full Size Image (Lightbox)
「Lightbox」→ Responsive Image Gallery
「Spacing」→ none
「Alignment」→ Center（Responsive Image Galleryの場合、これを選ばないと全体的に中央寄りになりません）
・Appearance
「Theme」→ Light（私の設定だと、Dark でも変わりません）
「Border Size」「Rounded Corners」「Drop Shadow」→ 全てnone
「Inner Shadow」→ Medium（多分あってもなくてもたいした違いはないです）
「Loading Icon」→ 好みで
「Loaded Effect」→ Fade In
・Hover Effects
「Color Effect」「Scaling Effect」→ none
「Caption Visibility」→ On Hover
「Icon」→ これも好みで
・Captions
「Title」→ none
「Description」→ Attachment Title
「Limit Caption Length」→ No
後は弄っていません。本当は右側にあるGallery Sorting をDate created - newest first にしておきたかったのですが、画像の順番を適当にアップしてしまったため、手動で入れ替えてます。
設定後、公開するとGallery Shortcode が作成されます。
これを固定ページに貼り付ければ完成です。
Original と Fan art で二つ作りました。
実際は、もう少し細かくカテゴリ分けしているので後でページを増やすかもしれません。
イラストページ用の固定ページテンプレートは、こんな感じで作りました。
<?php /** Template Name: illust **/ ?> <?php get_header(); ?> <body <?php body_class(); ?> data-current-nav="gallery"> <div class="gtco-loader"></div> <div id="page"> <?php require($_SERVER['DOCUMENT_ROOT'] . '/navi.php'); ?> <div id="site-title"> <h1> <a href="<?php echo esc_url( home_url( '/memo/illust' ) ); ?>" title="Illust" rel="home">ILLUST</a> </h1> </div> <div class="container-fluid"> <div class="row"> <div class="col"> <main id="content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="header"> <div class="cat-link"> <a href="<?php echo esc_url( home_url( '/memo/illust' ) ); ?>" title="Original" rel="home" class="illust">Original</a> <a href="<?php echo esc_url( home_url( '/memo/illust/2' ) ); ?>" title="Fan Art" rel="home" class="illust">Fan Art</a> </div> </header> <div class="entry-content animate-box illust_main"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <?php the_content(); ?> </div> </article> <?php if ( comments_open() && ! post_password_required() ) { comments_template( '', true ); } ?> <?php endwhile; endif; ?> </main> </div> </div> </div> <?php get_footer(); ?>
※ナビゲーション部分などを別ファイルにしているので、このままコピペしても使えません。
ファイルの名前を「page-illust.php」にしてテーマフォルダに入れると、ページ属性からテンプレートを変更できるようになります。
一行目の /** Template Name: illust **/ を忘れずに。
固定ページの新規作成で開いた画面には、
<h2>Original</h2> ［foogallery id="＊＊＊"］ <!--nextpage--> <h2>Fan art</h2> ［foogallery id="＊＊＊"］
と入れてます。
※［ ］は、半角にするとコード認識されていますので、上の例では全角にしています。
nextpage を間に入れるとページ分けが可能です。
ページネーションは、必要性を感じなかったので入れませんでした。
できあがったページは上の、Galleryリンクからどうぞ。
以上、非常に長い上に、あまり参考にもならないGallery設置でした。