Written by Manabu Bannai

【秒速:プラグイン不要】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標準のギャラリー機能は素晴らしいのですが、残念な点が1つ。
それは、ポップアップで浮き上がらせる&スライド機能がないこと。テキストだと分かりづらいので、下記参考画像です。

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

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


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

プラグインなjQueryで実装する方法

プラグインをボコボコいれるのが嫌な人は下記の方法がおすすめです。

今回は以上です。
記事が参考になれば幸いです。

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社