WordPress

ショートコードで多種の装飾ができるプラグイン:Shortcodes Ultimate

投稿日:2016-10-24 更新日:

ショップのページを作成する時に、商品の詳細画像や商品説明、スペックなどを書いていくときに全部つなげると縦長にずらずらと長くなってしまって何かいい方法はないかと考えたのが始まりです。

例題で見てみます

下記は商品詳細ページとして出来上がっている参考ページです

http://www.plustouch.shop/ds-05/2016/10/05/shop_item-1719811-2/

この商品の場合、詳細画像&商品説明&スペックで書くとなると下図左側のように長くなってしまいます。これを詳細画像と商品説明&スペックにタブで分けて書くと右側のようになります。多少なんですけどね(;’∀’) ちょっとは短くなるのかなと・・・

sankou01

このタブの切替をしてくれるプラグインが「Shortcodes Ultimate」プラグインなんです。PHP弄ったりしなくてもすむのでお手軽にできます。たった下記のショートコードだけです。

main_cap-0278

[su_tabs active=”1″] [su_tab title=”詳細 / 拡大画像”] ここに詳細画像が入ります。[/su_tab] [su_tab title=”商品説明 / スペック”] ここに商品説明&スペックが入ります。[/su_tab][/su_tabs]

Shortcodes Ultimateについて

「Shortcodes Ultimate」プラグインについてはタブの切替ではなく、画像着替えのスライダーやカルーセルなど50種類以上できそうです。私もまだ全部は試してませんので全部解説するとなると大変です(;^_^A プラグインをインストールすると投稿記事のエディターの上に””ショートコードを挿入””ボタンが表示されます。下図の中から選択して簡単な設定をするだけですのでいろいろ遊び感覚でお試ししてみてはいかがでしょうか。

main_cap-0280

main_cap-0279

参考にさせていただいたサイト

Shortcodes Ultimate – 50以上の装飾機能を利用できるWordPressプラグイン

https://triggermind.com/shortcodes-ultimate/

Shortcodes Ultimateでできるコト | Shortcodes Ultimateで使える50種以上のショートコード一覧

「Shortcodes Ultimate」で検索するとたくさんヒットします。いろいろ試してみると簡単に出来過ぎて楽しいですよ。

試した参考例(随時追加していきます。)

タブ

[su_tabs active=”1″] [su_tab title=”詳細 / 拡大画像”] ここに詳細画像が入ります。[/su_tab] [su_tab title=”商品説明 / スペック”] ここに商品説明&スペックが入ります。[/su_tab][/su_tabs]

カルーセル

サイドバー向き

[su_carousel source=”media: 3002,3003,3004,3005,3006,3007,3008,3009″ link=”custom” width=”300″ height=”247″ responsive=”no” items=”1″]

記事の中向き

[su_carousel source=”category: 117″ limit=”10″ link=”post” width=”840″ height=”240″ items=”2″]

スライダー

[su_slider source=”category: 101″ link=”post” width=”840″ height=”460″ pages=”no”]

仕切り

[su_divider]

ボックス

[su_box style=”soft”]ボックスのコンテンツ[/su_box]

 

 

 

  • この記事を書いた人
  • 最新記事
TWS-ch

TWS-ch

2018年01月07日の運営開始から1年経過しました。誠にありがとうございます。今後も困っている人をサポートできるようなコンテンツ作りを目指して頑張ってまいりたいと思います。よろしくお願いいたします。

-WordPress
-,

Copyright© TWS-ch , 2019 All Rights Reserved.