wordpress

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

投稿日:

フォトギャラリー

 

プラグインを使って簡単にフォトギャラリー

 

WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡単にできます。

ギャラリー系のプラグインはたくさんありますが、今回は使い方も簡単できれいに見せることができる『FooGallery』を使うことにしました。

 

1.Media Library Assistant

まず初めに、WordPressに写真をアップロードした内容は、管理画面のメニューにある『メディア』で確認することができます。

ただ、アップロードした全ての写真や画像が表示されるため、整理整頓ができていません。

写真や画像が多ければ多いほど、あとでわかりにくくなります。

これをパソコンのフォルダのように分けて管理できるのがこのプラグインの良いところです。

例えば、『○○の記念日』というカテゴリーを作成して、そこに関連した写真や画像を入れておけば、あとで見やすく管理もしやすいです。

カテゴリーは複数作れますのでわかりやすい名前を付けてください。

カテゴリーを作成するには、管理画面のメニューにある「メディア」→「Att.Category」です。

メディアのカテゴリー

同じく、タブも作成するには、管理画面のメニューにある「メディア」→「Att.Tag」です。

フォトギャラリー用の写真をアップロードする前に設定しておいた方がわかりやすくて楽かな?(アップロードと同時でも可能ですが)

 

2.FooGallery

設定は基本的にデフォルトのままでよいと思います。

ギャラリーを作成するには、管理画面メニューの「FooGallery」→「Add Gallery」から作成します。

フォトギャラリーFoo

 

「Add From Media Library」のボタンから写真を選択するときに、

FooBox

『FooBox』を選択することで、LightBox系の表示がされます。

いろいろ設定が可能ですので試してみるといいです。

あと、「Paging」のところから1ページに表示する写真の数も設定できます。

 

3.FooBox Image Lightbox

最後に、上2つのプラグインをインストールするときに合わせてインストールしておきたいプラグインです。

プラグイン自体の設定はデフォルトのままで大丈夫です。

よく見かける、写真をクリックすと背景が暗くなって、浮き出てくるように見えるタイプです。

 

まとめ

フォトギャラリー系のプラグインで『FooGallery』は有名でよく利用されています。

そこにプラスして写真もわかりやすく整理したいため、メディアのカテゴリー分けをしました。

これをセットで使ってみると便利です。

各プラグインの使い方はそこまで難しくないと思います。

 





-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …

メンバー一覧選手一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②

  1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …