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

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

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

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

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

Best WordPress Gallery Plugin

FooGallery is the best WordPress gallery plugin. 100% free and built by the FooPlugins team who brought you FooBox and FooBar.

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

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

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

【jQuery】『シンプルなライトボックス』を実装するとてもシンプルな方法

シンプルなライトボックスをjQueryで実装する方法をまとめました。

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

※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。

WordPress

• Tweet
• LINE
• Read Later