スライドショー用ショートコード

このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です

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

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]

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

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コンテンツを表示

画像上に任意のHTMLコンテンツを指定できます。
スライドイメージ上に別の画像リンクを合成しています。
ページナビゲーションは非表示にしています。
HTMLコンテンツをここに記述します。

Code

[dpslideshow showtime=3200 transitiontime=1400 showpagenavi=false hoverpause=true]
[dpslide imgurl=&quot;http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg&quot;]
<p class=&quot;ft22px b white mg30px-top mg20px-l al-c&quot;>画像上に任意のHTMLコンテンツを指定できます。</p>
[/dpslide]
[dpslide imgurl=&quot;http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg&quot;]
<a href=&quot;https://arise-detailing.com/wp-content/uploads/2014/06/iphone-holding.png&quot;>
<img src=&quot;https://arise-detailing.com/wp-content/uploads/2014/06/iphone-holding.png&quot; alt=&quot;iphone-holding&quot; width=&quot;55%&quot; style=&quot;position:absolute;bottom:0;right:0;&quot; />
</a>
<div class=&quot;ft14px b mg30px-top mg20px-l&quot;>
スライドイメージ上に別の画像リンクを合成しています。

ページナビゲーションは非表示にしています。
</div>
[/dpslide]
[dpslide imgurl=&quot;http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg&quot; caption=&quot;キャプションと同時にHTMLコンテンツを表示することもできます。&quot;]
<div class=&quot;ft18px white pd20px bg-black-op40&quot;>HTMLコンテンツをここに記述します。</div>
[/dpslide]
[/dpslideshow]