2017/11/13 (更新日: 2019/04/04)

【秒速：プラグイン不要】WordPressでギャラリー機能を実装する方法

PROGRAMMING WordPress

Webb制作者「WordPressのギャラリープラグインを探している。シンプルなギャラリーを簡単に実装するプラグインはあるかな？」

こういった疑問に答えます。

結論からいうと、WordPressには標準でギャラリー機能があります。プラグイン不要で超簡単に実装できるので、本記事では使い方を詳しく解説します。

なお、物事には良い面があれば悪い面もあります。
WordPressの標準ギャラリー機能のデメリットも記事後半でまとめまして、その解決策も提示します。

プラグイン不要：WordPress標準であるギャラリー機能の使い方

画像付きで解説します。

メディアを追加をクリック

記事に画像挿入するときと同じです。

WordPressのギャラリー機能の使い方

基本的な使い方は画像のとおり。WordPress操作に慣れていたら誰でも簡単かなと。

カラム数を選択してたら、もう完成

なんと、以上で完成です。

実際に作成したギャラリーがこちら

実際に利用しているコード

これで完成でもいいのですが、今のままだとPCとスマホで見え方が同じです。現代ならレスポンシブ必須なので、スマホ対応方法も解説しておきます。

WordPress標準のギャラリー機能をスマホ対応する方法

まずは簡易的なカスタマイズ方法から説明します。
結論からいうと、下記CSSをコピペすればOKです。

@media only screen and (max-width: 479px) {

	/* スマホで2カラムにしたい場合 */
	dl.gallery-item {
		width: 50%!important;
	}

	/* スマホで3カラムにしたい場合 */
	dl.gallery-item {
		width: 33%!important;
	}

	/* スマホで4カラムにしたい場合 */
	dl.gallery-item {
		width: 25%!important;
	}

	/* スマホで5カラムにしたい場合 */
	dl.gallery-item {
		width: 20%!important;
	}

}

お好きなカラム数を選んでご利用ください。

ガッツリとデザイン変更したい中級者向け

CSSの!importantが嫌な人はWordPressが標準で生成するCSSを無効化すると良いです。下記コードをfunctions.phpに記入すればOK。

add_filter( 'use_default_gallery_style', '__return_false' );

WordPressの標準ギャラリー機能のデメリット

WordPress標準のギャラリー機能は素晴らしいのですが、残念な点が１つ。
それは、ポップアップで浮き上がらせる&スライド機能がないこと。テキストだと分かりづらいので、下記参考画像です。

画像をクリックすると、ふわっと浮かんでくる感じです。

高性能なギャラリー機能を実装できるプラグイン

FooGalleryというWordPressプラグインです。
こちらを使うと簡単に高性能なギャラリー機能を実装できます。無料版と有料版がありますが、無料版は下記よりダウンロードできます。
» FooGallery – Image Gallery WordPress Plugin — WordPress Plugins
» デモ：Best WordPress Gallery Plugin – FooGallery