DigiPress

Highly Flexible WordPress Theme

メニュー

サムネイルナビ付きスライダーを表示する超軽量CSSスライダーショートコードを追加しました

提供中の DigiPress テーマ専用 WordPress プラグイン「DigiPress Ex – Shortcodes」にて利用可能なショートコードに CSS スライダーショートコードが追加されました。
WordPressのダッシュボードから、プラグインを最新バージョン(1.2.4.3)にアップデートすることで利用いただけます。

このショートコードで表示されるイメージスライダーは、動作に JavaScript を利用せず、CSS のみで表現しているため、スクリプトを利用するよりも非常に軽量であるのが特徴です。

例えば、商品詳細ページにて商品画像を並べたスライダーを表示させる、などの使い方がショートコードで実現できます。

表示サンプル

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

このショートコード

[cssslider fx='fade' navitemsatonce=5 navwidth=22% height='32vw']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg'
 title='スライドタイトル #1'
 caption='スライド #1 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg'
 title='スライドタイトル #2'
 titlepos=right
 caption='スライド #2 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg'
 title='スライドタイトル #3'
 titlepos=center
 caption='スライド #3 のキャプションをここに表示します。'
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg'
 title='スライドタイトル #4'
 caption='スライド #4 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-35.jpg'
 title='スライドタイトル #5'
 titlepos=right
 caption='スライド #5 のキャプションをここに表示します。'
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg'
 title='スライドタイトル #6'
 titlepos=center
 caption='スライド #6 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg'
 title='スライドタイトル #7'
 caption='スライド #7 のキャプションをここに表示します。'
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393']
[/cssslider]

また、投稿画面から起動できるショートコードジェネレータにも項目を追加済みです。
フォームからショートコードのパラメータを GUI 経由でカスタマイズし、事前にプレビューによるチェックも可能です。

ショートコードジェネレータからの作成

その他のサンプルと実際のコードは、デモサイトをご覧ください。

CSS スライダーショートコード

本ショートコードのオンラインドキュメントも公開しましたので、既存ユーザー様は以下より使い方やパラメータの詳細について以下よりご覧いただけます。

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