DigiPress

Highly Flexible WordPress Theme

メニュー

待望のスライドショー用ショートコードを搭載しました!

2014/07/14

slideshow-shortcode
DigiPress専用のショートコード集プラグインとして別途提供しております「Shortcodes for DigiPress」に、ついに待望の「スライドショー用ショートコード」が追加されました!

記事本文かウィジェットエリアならテキストウィジェットを利用してどこにでも多機能なスライドショーをいくつでも表示できます。

本プラグインは自由度が高く、カスタマイズ性がありながらもなるべく簡単に定義でき、さらに軽量であることを念頭において開発しておりますが、サイズが大きくなりがちなスライドショー用のリソース(CSS, プログラム)も機能性を維持しながらも極力最小限に抑えました。

もちろんレスポンシブ対応!

フォトログ、商品ページ、不動産ページの物件カタログなど、自由にご活用ください!

最もシンプルな例(画像指定のみ)

  • Slide image
  • Slide image
  • Slide image

Code

[dpslideshow]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg"][/dpslide]
[/dpslideshow]

スライド効果、キャプション指定、ホバー時停止、画像をリンク化

Code

[dpslideshow fx="slide" hoverpause=true]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg" url="#" caption="画像にキャプションを表示しています。ホバー時は一時停止もできます。"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg" url="#" caption="このキャプションのベースカラーはホワイトとブラックを選べます。"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="アニメーションはフェード、スライドから指定できます。表示時間とトランジション間隔を指定できます。"][/dpslide]
[/dpslideshow]

ナビゲーション位置指定、ブラックキャプション背景、前後テキスト変更

  • Slide image
  • Slide image
  • Slide image

Code

[dpslideshow controlpos="right" pagenavipos="left" captionblack=true nexttext="次へ" prevtext="前へ"]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg" caption="画像にキャプションを表示しています。ホバー時は一時停止もできます。"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg" caption="このキャプションのベースカラーはホワイトとブラックを選べます。"][/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="アニメーションはフェード、スライドから指定できます。"][/dpslide]
[/dpslideshow]

表示時間指定、スライド上に任意のHTMLコンテンツを表示

  • Slide image

    画像上に任意のHTMLコンテンツを指定できます。

  • Slide image
    iphone-holding
    スライドイメージ上に別の画像リンクを合成しています。
    ページナビゲーションは非表示にしています。
  • Slide image
    HTMLコンテンツをここに記述します。

Code

[dpslideshow showtime=3200 transitiontime=1400 showpagenavi=false hoverpause=true]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg"]
<p class="ft22px b white mg30px-top mg20px-l al-c">画像上に任意のHTMLコンテンツを指定できます。</p>
[/dpslide]
[dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg"]
<a href="http://demo.dptheme.net/dp9/wp-content/uploads/sites/7/iphone-holding.png">
<img src="http://demo.dptheme.net/dp9/wp-content/uploads/sites/7/iphone-holding.png" alt="iphone-holding" width="55%" style="position:absolute;bottom:0;right:0;" />
</a>
<div class="ft14px b mg30px-top mg20px-l">
スライドイメージ上に別の画像リンクを合成しています。
ページナビゲーションは非表示にしています。 </div> [/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="キャプションと同時にHTMLコンテンツを表示することもできます。"] <div class="ft18px white pd20px bg-black-op40">HTMLコンテンツをここに記述します。</div> [/dpslide] [/dpslideshow]

既に本プラグインをお持ちのユーザーの方はテーマと併せて最新版にアップデートしてご利用ください!

DigiPressテーマおよび本プラグインで利用可能なショートコード一覧はこちら。
利用可能なショートコード一覧

Shortcodes for DigiPress

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE