プラグイン不要！簡単にwordpressに写真ギャラリーを作る方法

wordpressのギャラリーとは

このようにページ内で複数の画像を一覧に出来る機能です。

また、レスポンシブで画像幅が可変するようなカスタマイズ方法もご紹介します！

プラグインを使わないというメリット

プラグインを使わないでギャラリーを実装するメリットをまとめます。

1. サイトが重くならない。
2. 悪意のあるプラグインをインストールしてしまうリスクが減る。
3. プラグイン同士のコンフリクト(処理が被り競合してしまう)のリスクが減る。
4. プラグインのアップデートによる不具合に遭遇するリスクが減る。

と言ったようなメリットがあります。

ただ何よりも、「プラグイン使わなくても出来るなら使わなくて良いんじゃない！」という方にぴったりの方法です。

wordpressのデフォルト機能なので、本当に簡単です！

では早速設置していきましょう！

 

wordpressのデフォルト機能！ギャラリー機能の使い方

1.投稿もしくは固定ページの新規作成画面を開き、「メディアを追加」をクリック。

2.左メニューの「ギャラリーを作成」をクリック

3.メディアライブラリの中からギャラリーに入れる写真を選択。

もしくはローカルのアルバムなどから画像ファイルをまとめてアップロードすればよりクイックです！

 

4.選択出来たら「ギャラリーを作成」をクリック

5.ギャラリーの設定を行う

リンク先

※後でLightboxを実装したいので「メディアファイル」を選択しておくと良いです。

カラム数

横幅の中にいくつ並べるか指定でき、1~9まであります。

ランダム

ランダムな順番にする場合はチェックを入れてください。

サイズ

通常のメディアを追加する際同様、サイズを選べます。

6.「ギャラリーを作成」をクリックし編集画面に戻る。

問題なければ「ギャラリーを作成」をクリックし投稿の編集画面に戻り、公開ボタンを押せば完了です！

 

ちょっと一手間で、良い感じにカスタマイズ

とは言っても、デフォルトの機能だけではちょっと寂しいところも…

最低限これはカスタマイズした方が良いのでは！というポイントを2点ご紹介します。

1.定番のLightboxを実装。インストールするだけで設置OK!?

プラグインのWP Featherlightをインストールし、有効化にするだけで、なんとギャラリーがLightbox対応になります！
※ギャラリー作成の際リンク先を「メディアファイル」にする必要があります。

2.スマホで見た時のカラム数を変えてレスポンシブ対応にする方法

デフォルトのままだと、例えばカラム数を「4」に設定したギャラリーは、スマホで見ても4カラムのままなので、見づらいです。

そこでデバイスの幅によってカラム数が変わり、画像幅も変化するようなレスポンシブ対応を実装します。

デフォルトのギャラリーCSSを停止

まずはデフォルトのcssを停止する為にfunction.phpに下記記述してください。

add_filter( 'use_default_gallery_style', '__return_false' );

レスポンシブするようcssを記述

下記cssを上書きしてください。

/*--ギャラリー
------------------------------*/
.gallery {
    display: flow-root;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: left;
}
.gallery-item {
    box-sizing: border-box;
    margin: 5px 1% 5px 0;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item {
    width: 49%;
}
.gallery-columns-3 .gallery-item {
    width: 32%;
}
.gallery-columns-4 .gallery-item {
    width: 24%;
}
.gallery-columns-5 .gallery-item {
    width: 19%;
}
.gallery-columns-6 .gallery-item {
    width: 15.66%;
}
.gallery-columns-7 .gallery-item {
    width: 13.28%;
}
.gallery-columns-8 .gallery-item {
    width: 11.5%;
}
.gallery-columns-9 .gallery-item {
    width: 10.11%;
}
@media screen and (max-width: 768px) and (min-width: 481px){
    .gallery-item,
    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item{
        width: 49%;
        max-width: 49%;}
}
@media screen and (max-width: 480px){
    .gallery-item,
    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item{
        width: 100%;
        max-width: 100%;}
}

まとめ

wordpressのギャラリー機能を使う方法について簡単ですが、まとめました。

ギャラリー自体をプラグインで実装する方法や、

更新命！常に旬の情報をお届けしたいという店舗様はSNSと連動させ写真を表示させるなど…

他にも方法はたくさんありますので、順次まとめていければと思います！