写真、画像のスライドショーを簡単に実現出来るWordPressプラグイン、JetpackのCarousel(カルーセル)

2013年11月7日現在、Internet Explorer 11でカルーセルがうまく機能しない為、カルーセル機能を停止中です。詳細は以下の記事に掲載しています。

2014年3月21日、Jetpack by WordPress.com2.9.2では不具合が解消されています。
Internet Explorer11でJetpack by WordPress.com 2.5のcarousel(カルーセル)不具合

WordPressにて簡単なアクセス解析、ソーシャルブックマークやTwitter、Facebook、Google+等との共有、コンタクトフォーム、コメント機能拡張、ショートコード、サイドバーウィジェットへの機能追加を簡単に行えるプラグインがJetpack by WordPress.com(以下Jetpack)です。


Jetpackのバージョン1.5から、新機能Carousel(カルーセル)が加わりました。カルーセルとは、簡単に言えば画像をフルスクリーンで表示させ、スライドショーも可能にする機能です。

Jetpackのバージョンを1.5にし、設定をすればすぐにスライドショー機能が実行可能。設定と言っても非常に簡単。背景色をどうするか、可能な場合、Exifデータをカルーセルにて表示するか否かだけ。

ダウンロード場所へのリンク:Jetpack by WordPress.com

カルーセル表示機能の説明と例:フォト・カルーセル機能の強化 WordPress.com日本語ブログ

設定は非常に簡単なので説明は省略し、ここでは画像ファイルをどう使うかの説明をいたします。

まずは画像、写真のアップロード

まずは記事内で画像ギャラリーとして表示させたい画像、写真のアップロードから。

色々な手順がありますが、基本的なやり方として投稿編集画面のメディアアップロードボタンを利用してみます。

今回は3枚の画像をアップロードして、カルーセルを試してみることにします。

画像をアップロードする際、「投稿に挿入」ボタンではなく、「すべての変更を保存」ボタンを押し、まずはギャラリー内に保存しておきます。キャプションなどは適宜必要に応じて記入しておいて下さい。

ギャラリー設定

これを行わないと、カルーセルの機能を利用出来ません。記事内へ単に画像を挿入するだけではNG。

ギャラリーを挿入ボタンを押し、記事内へギャラリーを挿入するとカルーセル表示機能を利用出来ます。

カルーセル表示機能がどのように動くかは、下の画像3枚をクリックし、確認して下さい。(2013年12月現在、カルーセル機能は不使用にしてあります)

カルーセル表示から除外したい画像がある場合

WordPress3.5から、ギャラリー作成時の動作が変わった為、以下の方法では画像IDが分からないと思います。IDを調べたい場合には、WordPress管理メニューのメディアから除外したい画像IDを調べてみて下さい。

ギャラリー、カルーセル表示機能の欠点として、記事内で使った画像すべてがカルーセル表示されてしまう点があります。例えば本記事では以下の2画像はギャラリーに表示させたくありません
http://ara-yuru.com/wp/wp-content/uploads/2012/07/jetpack-carousel-img.png
http://ara-yuru.com/wp/wp-content/uploads/2012/07/imgexclude.png

この画像をギャラリーから除外したい、表示させない為には、ギャラリー表示のショートコード内にexclude=’画像ID’またはexclude=’wp-image-画像ID’を追加します。

画像IDを調べるには、以下のように画像アップロード画面を開き、除外したい画像のサムネイルにカーソルを乗せれば番号が出てきます。

その番号をexclude=’xxx’またはexclude=’wp-image-xxx’のxxxに挿入します。複数の画像を除外したい場合には、

exclude=’画像ID,画像ID’または、exclude=’wp-image-xxx,wp-image-yyy’のようにカンマで区切ります。

本記事の場合、除外したい画像が2つありますので、以下のように記述しました。

[gallery exclude='wp-image-955,wp-image-962']

参考にしたページ:WordPress.com日本語フォーラム 画像ギャラリーの選択

追伸:ショートコードを記事内で実行させず、そのまま表示したい場合には[[]]とカッコを二重に記載すればOK。単純なことですが、無知な故、はまりました。

参考記事:ショートコードをそのまま表示したい | shimashima.com


スポンサーリンク

シェアする

フォローする

コメント

  1. […] ーセル表示に関する追加記事公開しました。写真、画像のスライドショーを簡単に実現出来るWordPressプラグイン、JetpackのCarousel(カルーセル) シェア:  Posted by admin at 10:58 PM   […]

  2. […] 写真、画像のスライドショーを簡単に実現出来るWordPressプラグイン、JetpackのCarousel(カルーセル) […]