このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。

表示サンプル

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

[dpslideshow]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye1.jpg"]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye17.jpg"]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye18.jpg"]
[/dpslideshow]

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

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

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

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

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

[dpslideshow
  showtime=3200
  transitiontime=1400
  showpagenavi=false
  hoverpause=true
  showpagenavi=false
  hoverpause=true
  captionblack=true
  controlcircle=true
  class="white b ft15px"
]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye1.jpg"]
  <h3>画像上に任意のHTMLコンテンツを表示できます。</h3>
[/dpslide]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye16.jpg"]
  <img src="https://demo.dptheme.net/dp9/wp-content/uploads/sites/7/iphone-holding.png" alt="iphone-holding" width="45%" style="position: absolute; bottom: 0; right: 0;" />
  <div class="bg-black-op40 pd20px" style="position:relative;">スライドイメージ上に別の画像を合成しています。<br />ページナビゲーションは非表示にしています。</div>
[/dpslide]
[dpslide
  imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye18.jpg"
  caption="キャプションと同時にHTMLコンテンツを表示することもできます。"]
    <div class="ft18px pd20px bg-black-op40">HTMLコンテンツをここに記述します。</div>
[/dpslide]
[/dpslideshow]

幅を指定して中央に表示する場合

[dpslideshow style="width:400px;margin:auto;"]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye1.jpg"]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye17.jpg"]
[dpslide imgurl="https://digipress.info/_wp/wp-content/uploads/2021/04/eye18.jpg"]
[/dpslideshow]

全幅指定でヒーローヘッダーとして表示

スライダーを全幅で表示するには、「DigiPressショートコード」ブロックのツールバーにある配置オプションから「全幅」を指定します。

[dpslideshow
  fx='fade'
  covermode='1'
  vw='30'
  minheight='340px'
  maxheight='580px'
  autoplay='1'
  showtime='4200'
  transitiontime='2800'
  hoverpause='0'
]
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye19.jpg']
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye20.jpg']
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye22.jpg']
[/dpslideshow]

表示する各画像の比率に関係なく、スライダーの高さを指定したサイズでレスポンシブ表示をするには、カバーモードを有効(covermode=true)にし、ビューポートの幅(vw)を基準とした割合(1〜100)を指定します。

前面にタイトルと文章を表示したヒーローヘッダー

[dpslideshow
  fx='fade'
  covermode='1'
  vw='33'
  minheight='340px'
  maxheight='600px'
  autoplay='1'
  showtime='4200'
  transitiontime='2800'
  hoverpause='0'
  pagenavicircle=true
  controlcircle=true
]
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye19.jpg']
    <div class="white al-c pd10px">
      <h3>Hero Header Title</h3>
      <p>Diam magna lorem eos ipsum aliquyam. Invidunt sea voluptua sanctus lorem consetetur eos dolor no. <br />Takimata rebum lorem takimata diam sed sanctus. </p>
    </div>
  [/dpslide]
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye20.jpg']
    <div class="white al-c pd10px">
      <h3>DigiPress</h3>
      <p>Highly Flexible WordPress Theme</p>
    </div>
  [/dpslide]
  [dpslide imgurl='https://digipress.info/_wp/wp-content/uploads/2021/04/eye22.jpg']
    <div class="white al-c pd10px">
      <h3>DigiPress Ex - Shortcodes</h3>
      <p>A WordPress plugin suitable for DigiPress themes.</p>
    </div>
  [/dpslide]
[/dpslideshow]

---

指定可能なパラメータ(dpslideshow ※親)

このショートコードは 親用のコード(slideshow)と子用のコード(slide)でネスト(入れ子)にする必要があり、子(slide)で括ったコンテンツが1スライド分のコンテンツとなります。

指定可能なパラメータ(dpslide ※子)