WordPressで写真などの画像をスライドショーで魅せる4つの方法

WordPressで写真などの画像をスライドショーで魅せる4つの方法 WordPress

こんにちは、mickです。

WordPressで画像をスライドショーさせたい
プログラミング不要で簡単に使いたい

こんな要望に応えます。

画像をスライドショーする4つの方法

WordPressで写真などの画像をスライドショーでユーザーに見せる4つ方法を紹介です。

  1. ブロックエディタのギャラリー機能+Cocoon
  2. JavaScriptでコーディング
  3. CSSでコーディング
  4. プラグインを利用する

スライドショーのサンプル

WordPressの標準機能ブロックエディタのギャラリー機能とWordPressテーマCocoonを使ったスライドショーのサンプルはコチラ↓

ここから4つのやり方をそれぞれ見ていきます。

ブロックエディタのギャラリー機能+Cocoon

プラグイン不要で一番手軽にできるのは、テーマにCocoonを使っているとき

WordPressの標準機能ブロックエディタにあるギャラリー機能を使えば、それがそのままスライドショーとして機能するようになります。
(↑のサンプルを参照)

このとき、ギャラリー機能の設定でリンク先は メディアファイル にしておかないとスライドショーが機能しません。

リンク先を「メディアファイル」にするとスライドショーが機能する
リンク先を「メディアファイル」にするとスライドショーが機能する

さらに、Cocoonの設定は次のようにしておきます。

「Cocoon設定」>「画像」

baguetteBoxにしておくとギャラリー機能がスライドショーっぽくなる
baguetteBoxにしておくとギャラリー機能がスライドショーっぽくなる

ここにある「画像の拡大効果」を baguetteBox(軽量・スマホ向け) にしておけばOK。

JavaScriptでコーディング

JavaScriptで画像のスライドショーをする場合、JQueryのライブラリを使うのが一般的。
JavaScriptのコーディングは、初心者向けのシンプルなやり方として次のWebサイトが参考になります。

⇒ かっこよく見せたい!jQueryでスライドショーを設置する方法【初心者向け】

初心者向け、とはいえプログラミングの知識が必要な点に注意が必要ですね。

CSSでコーディング

CSSで画像をスライドショーっぽくすることもできます。

スライドショーを使うたびに、CSSのコーディングが必要なので、投稿には向かないです。
固定ページに使うのがいいと考えてます。

詳細は、コチラの記事に書いてあります。

プラグインを利用する

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others
Galleries on steroids! A stylish lightbox & gallery plugin for WP, Flickr, SmugMug, Google Photos, Zenfolio & Instagram photos and videos.

WordPressでプログラミング不要で画像をスライドショーするならやっぱりプラグイン。

ここでは、使い方がシンプルな  Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others プラグインを紹介です。

使い方:Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others

このプラグインの使い方はシンプル。

  1. プラグインをインストールして有効化する
  2. ブロックエディタで Photonic Gallery を選択する
  3. ギャラリーソースは WordPressを選ぶ
  4. スライドショーの設定をする

順番に説明していきます。

プラグインをインストールして有効化する

まずはプラグインをインストールして有効化。

WordPressにInstagramの写真を貼り付ける方法を紹介した記事があります。
ここでプラグインのインストールについて書いています。

ブロックエディタで Photonic Gallery を選択する
ブロックエディタでPhotonic Galleryを使う
ブロックエディタでPhotonic Galleryを使う

WordPressのブロックエディタでPhotonic Galleryのブロックを使います。

アイコンをクリックして設定画面へ
アイコンをクリックして設定画面へ
ギャラリーソースは WordPressを選ぶ
ギャラリーソースはWordPressを選ぶ
ギャラリーソースはWordPressを選ぶ

ギャラリーソースでは WordPress を選択。
Next > をクリックしてスライドショーの設定にいきます。

スライドショーの設定をする
画像はメディアライブラリから選ぶようにする
画像はメディアライブラリから選ぶようにする

画像はWordPressのメディアアライブラリから選ぶようにします。
Next > をクリックして次へ。

メディアライブラリから画像を選ぶ
メディアライブラリから画像を選ぶ

メディアライブラリから画像を選びます。
Select をクリックして次へ。

レイアウトはSlideshowを選ぶ
レイアウトはSlideshowを選ぶ

レイアウトはSlideshowを選びます。
Next > をクリックして次へ。

スライドショーのレイアウトを設定します
スライドショーのレイアウトを設定します

スライドショーのレイアウトを設定します。
Next > をクリックして次へ。

スライドショーの設定がおわった画面
スライドショーの準備ができた

スライドショーの準備ができました。
Insert Gallery > をクリックすればおわりです。

スライドショーの準備ができた
スライドショーの設定がおわった画面

スライドショーの設定がおわると上の画像のような表示になります。

実際のスライドショーの画面
実際のスライドショーの画面

まとめ。

WordPressで写真などの画像をスライドショーで魅せる4つの方法を紹介しました。

やっぱりWordPressならプラグインを使うのが一番簡単。
WebサイトでInstagramの写真も扱うならプラグイン Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others を試して欲しいと思います。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/17

タイトルとURLをコピーしました