[WordPress.org] サムネイル画像付きで iPhone 等にも対応しているスライドショーをプラグイン「JetPack by WordPress.com 」と併用して使えるプラグイン「GPP Slideshow」

レンタルサーバ等にインストールして使うタイプの WordPress では、プラグインを使うことでいろいろな機能を追加することができますが、ここでは、サムネイル画像付きで iPhone 等にも対応しているレスポンシブデザイン設計のスライドショーを表示させることができる「GPP Slideshow」というプラグインについて覚書をしたいと思います。

このプラグインは以下の記事の中で紹介されていたものです。

私の認識ですと、スライドショーを表示させることのできるプラグインはたくさんあって、その中でサムネイル画像付きのものもいくつかあります。しかしながら、WordPress.comの主だった機能を追加することのできるプラグイン「JetPack by WordPress.com 」とバッティングしてしまったり、なかなか私自身が満足できるプラグインはこれまで見つけることができていませんでした。

私自身は、以下のモザイク表示が気に入っていて、

AccessMenuBarApps-17

この機能を使えつつ、かつ、サムネイル画像つきのスライドショーを表示させることのできるプラグインはないものかと以前から探していました。

プラグイン「GPP Slideshow」の場合は、投稿記事や固定ページと同列の位置づけで「Galleries」という投稿タイプが生成され、

AccessMenuBarApps-18

サムネイル画像つきのスライドショーを表示させることができます。

なお、記事「GPP Slideshow plugin for WordPress」でおすすめしているテーマでは最適化されているようですが、それ以外のテーマだと CSS での手直しが必要だそうで?、私自身の場合ですと、以下のような CSS を追加しました。

/* スライドショーの高さ制限 */
.flexslider .slides img {
	max-height: 500px;
}

.flexslider .slides > li {
	height: 500px;
}

/* スライドショータイトルの装飾 */
.single-gallery h2,
.tax-gallery_collections h1 {
	clear: both;
	color: #222222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}

.singular .type-gallery.hentry,
.tax-gallery_collections .content {
	padding: 1.875em 30px 0;
}

/* サムネイル画像を常時表示させる */
.gpp_slideshow_thumbnails {
	display: block !important;
}

.show_thumbnails {
	display: none;
}

.gpp_slideshow_menu {
	width: 80px;
}

.gpp_slideshow_menu .slideshow_options {
	margin-right: 0;
	width: 24px;
}

タイル状のスライドショーのリストもカテゴリー(このプラグインでは「Collection」という名称になっています)毎に表示できるようになっているので、私だったら、写真集専用に使ってみたいですね。

AccessMenuBarApps-19

「Collection」の管理画面はこんな感じです。

AccessMenuBarApps-20

オプション画面はこんな感じです。

AccessMenuBarApps-21

「Slideshow on all pages」のところにチェックを入れ、

AccessMenuBarApps-22

「設定」→「メディア」のところの「タイルギャラリー」のチェックを外すと

AccessMenuBarApps-24

投稿記事のスライドショーもプラグイン「GPP Slideshow」のものに切り替わりました。

AccessMenuBarApps-23

rect3015

AccessMenuBarApps-25

カスタムメニュー機能の方にもちゃんと項目が追加されますので、

AccessMenuBarApps-26

スライドショーやスライドショー一覧のメニュー追加も簡単にできます。

AccessMenuBarApps-27

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。