どうも。お久しぶりです。
仕事が多忙になり、しばらくブログが放置状態となっていました。
更新できない状況でしたが、それでも多くの人からアクセスがありとてもありがたいと思っています。
[talk words=”コメントやお問合せをされた方、返信出来なくてすいみません。” avatarimg=”https://wdplu.com/wp-content/uploads/2015/02/wdpluavatar1.png”]
さて、しばらく放置している間に、WordPressテーマ「DigiPress」専用のショートコードプラグイン「Shortcodes for DigiPress」がバージョンアップされ様々な機能が追加されています。
主に以下の二つの機能が追加されています。
- 料金表(Pricing Table)ショートコード
- スキルバーショートコード
目 次
料金表(Pricing Table)ショートコード
[ptable hoverfx=1]
[ptableitem
title=’Macchiato’
titlesize=18
titlecaption=’パララックスコンテンツ’
titlecaptionsize=12
price=’¥8,580′
priceper=’円’
pricesize=40
pricecaption=’消費税込み’
row1=’WordPress 1ライセンス価格’
row2=’ウィジェットエリア 17箇所’
row3=’モバイル対応’
row4=’Lightバージョンもあり’
button=’デモサイトを見る’
buttonurl=’https://digipress.digi-state.com/macchiato?wpam_id=59″ title=”DigiPress Macchiato”‘
buttonsize=18
buttonbdsize=24
buttonext=1
border=1
bdcolor=’#82DACA’
keycolor=’#82DACA’]
[ptableitem
title=’Fancie NOTE’
titlesize=18
titlecaption=’グリッドレイアウトデザイン’
titlecaptionsize=12
price=’¥7,280′
priceper=’円’
pricesize=40
pricecaption=’消費税込み’
row1=’WordPress 1ライセンス価格’
row2=’ウィジェットエリア 17箇所’
row3=’モバイル対応’
row4=’Business Editionもあり’
button=’デモサイトを見る’
buttonurl=’https://digipress.digi-state.com/fancie-note/?wpam_id=59′
buttonsize=18
buttonbdsize=30
buttonext=1
border=1
bdcolor=’#49D1FF’
keycolor=’#49D1FF’]
[ptableitem
title=’Clarity’
titlesize=18
titlecaption=’マルチメディアコンテンツ’
titlecaptionsize=12
price=”¥7,280″
priceper=”円”
pricesize=40
pricecaption=’消費税込み’
row1=’WordPress 1ライセンス価格’
row2=’ウィジェットエリア 17箇所’
row3=’モバイル対応’
row4=’Business Editionもあり’
button=’デモサイトを見る’
buttonurl=’https://digipress.digi-state.com/buy/?wpam_id=59′
buttonbdsize=24
buttonext=1
keycolor=’#FF76A1′
border=1
bdcolor=’#FF76A1′]
[/ptable]
料金表 ショートコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
[ptable hoverfx=1] [ptableitem title='<i class="icon-user"></i>ベーシック' titlesize=18 titlecaption='スタータープラン' titlecaptionsize=12 price='¥980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 1サイト利用可能' row2='<i class="icon-users"></i>最大25,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 300GB/月' row4='<i class="icon-database"></i>最大50GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=24 buttonext=1 border=1 bdcolor='#82DACA' keycolor='#82DACA'] [ptableitem title='<i class="icon-warmedal"></i>スタンダード' titlesize=18 titlecaption='もっともポピュラーなプラン' titlecaptionsize=12 price='¥1,980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 3サイト利用可能' row2='<i class="icon-users"></i>最大100,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 600GB/月' row4='<i class="icon-database"></i>最大500GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=30 buttonext=1 border=1 bdcolor='#49D1FF' keycolor='#49D1FF'] [ptableitem title='<i class="icon-crown"></i>プレミアム' titlesize=18 titlecaption='商用利用に最適なプラン' titlecaptionsize=12 price="¥39,800" priceper="/ 月" pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPressサイト数無制限' row2='<i class="icon-users"></i>最大500,000アクセス/月' row3='<i class="icon-retweet"></i>転送量無制限' row4='<i class="icon-database"></i>最大3TBのローカルストレージ' button='お申し込み' buttonurl='#' buttonbdsize=24 buttonext=1 keycolor='#FF76A1' border=1 bdcolor='#FF76A1'] [/ptable] |
Webページ上で販売中の商品やサービスごとの料金一覧とその比較表を簡単に作成することができるショートコードです。ショートコードを使うだけで美しい料金一覧表などを作成することができます。
パソコン表示だけでなくモバイル端末(レスポンシブ)表示にも対応しています。
上記のようにWordPressテーマの比較などに使ってみるといいかも!
「デモサイトを見る」をクリックするとリンク先へうながすことなどもできます。
あらゆる料金表の要件とデザインを容易に実現にするため、非常に多くのパラメータが用意されていますので、サイトのデザインや商品、サービスのイメージに合わせた料金表を誰でも簡単に作成できます。
ショートコードの例から自分好みに文字を変えたりして利用すれば、初心者でも簡単に利用できると思います。
スキルバー&カウントアップショートコード
[skillbars]
[sbar title=’HTML’ rate=82]
[sbar title=’CSS’ rate=70]
[sbar title=’Javascript’ rate=48]
[/skillbars]
[skillbars]
[sbar
title=’WordPress’
titlesize=15
rate=78
ratetext=’一番得意’
ratesize=14
height=60]
[sbar
title=’Photoshop’
titlecolor=#1F434C
titlesize=13
ratebarcolor=#49D1FF
rate=58
ratetext=’基本だけ’
ratecolor=#fff
ratesize=12
bgcolor=#5E96BD
height=50]
[sbar
title=’Illustrator’
titlesize=14
ratebarcolor=#FF76A1
rate=64
ratetext=’それなり’
ratesize=13
height=40]
[sbar
title=’PHP’
titlebold=0
ratebarcolor=#E58C42
rate=42
ratetext=’日々精進’
height=30]
[/skillbars]
ショートコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
[skillbars] [sbar title='<i class="wordpress"></i>WordPress' titlesize=15 rate=78 ratetext='一番得意' ratesize=14 height=60] [sbar title='Photoshop' titlecolor=#1F434C titlesize=13 ratebarcolor=#49D1FF rate=58 ratetext='基本だけ' ratecolor=#fff ratesize=12 bgcolor=#5E96BD height=50] [sbar title='Illustrator' titlesize=14 ratebarcolor=#FF76A1 rate=64 ratetext='それなり' ratesize=13 height=40] [sbar title='PHP' titlebold=0 ratebarcolor=#E58C42 rate=42 ratetext='日々精進' height=30] [/skillbars] |
商品やサービスの性能比較や能力比較などをパーセンテージに応じてアニメーションしながら棒グラフ、または円グラフで表すことができるコンテンツを作成することができるショートコードです。
ショートコードを利用するだけで美しいスキルバーを記事に挿入することができます。
こちらもパソコン表示だけでなくモバイル端末(レスポンシブ)表示にも対応しています。
円形スキルバーショートコード
[skillcircles]
[scircle rate=46]
[scircle rate=75 caption=’従来比より’ barcolor=’#ff559f’]
[scircle rate=52 ratetext=’Calorie’ ratesize=15 size=150 barcolor=’#8BC131′ caption=’52% OFF!’ duration=2800 startangle=360]
[scircle
rate=84
ratesize=45
ratebold=1
barcolor=’#0681c4′
barcolor2=’#07c6c1′
barwidth=20
size=200
blankcolor=’rgba(0,0,0,0.24)’
caption=’WordPress Share’
captionsize=15
captionbold=1
duration=4200
startrate=10
startangle=180
reverse=’false’]
[/skillcircles]
ショートコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
[skillcircles] [scircle rate=46] [scircle rate=75 caption='従来比より' barcolor='#ff559f'] [scircle rate=52 ratetext='Calorie' ratesize=15 size=150 barcolor='#8BC131' caption='52% OFF!' duration=2800 startangle=360] [scircle rate=84 ratesize=45 ratebold=1 barcolor='#0681c4' barcolor2='#07c6c1' barwidth=20 size=200 blankcolor='rgba(0,0,0,0.24)' caption='<i class="icon-wordpress"></i>WordPress Share' captionsize=15 captionbold=1 duration=4200 startrate=10 startangle=180 reverse='false'] [/skillcircles] |
円形も表示することが可能です。円形のアニメーションがかっこいいですね。
カウントアップショートコード
[countup]
[counter to=3214 caption=’数値とキャプションのみ’]
[counter
to=980
tocolor=#888
caption=’円/月’
captionsize=15
captionpos=right
duration=2]
[counter
to=95.9
tocolor=#A8C85D
tosize=50
caption=’満足度:’
captionpos=left
decimal=1]
[counter
to=1254
tocolor=#fff
tobold=0
caption=’Users’
captionsize=14
captioncolor=#fff
captionbold=0
captionpos=top
bgcolor=#46B1D2
bdwidth=4
bdcolor=#50CEF6
bdradius=5
duration=3]
[/countup]
ショートコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
[countup] [counter to=3214 caption='数値とキャプションのみ'] [counter to=980 tocolor=#888 caption='円/月' captionsize=15 captionpos=right duration=2] [counter to=95.9 tocolor=#A8C85D tosize=50 caption='<i class="icon-star"></i>満足度:' captionpos=left decimal=1] [counter to=1254 tocolor=#fff tobold=0 caption='Users' captionsize=14 captioncolor=#fff captionbold=0 captionpos=top bgcolor=#46B1D2 bdwidth=4 bdcolor=#50CEF6 bdradius=5 duration=3] [/countup] |
こちらはカウントアップショートコードです。こんなことが簡単にショートコードでできるんですね〜。
ショートコードプラグイン「Shortcodes for DigiPress」
このショートコードはDigiPressテーマ専用のショートコードプラグインです。追加でプラグインを購入することがで利用することができます。
※DigiPressテーマ購入者しか利用することができないプラグインです。
上記以外にも多彩なショートコードが利用できるようになる他、常に進化をしており新たな機能が追加されています。
WordPressテーマ : DigiPressのショートコード販売先についてはこちら
ショートコードの使い方やこの他のショートコード
「DigiPress」専用ショートコードプラグイン「Shortcodes for DigiPress」についてより詳しく知りたい方は下記の記事も同時に読んでみて下さい。
どんなショートコードプラグインなのかがわかると思います。
さいごに
一つのプラグインでここまで多彩にショートコードが利用できるようになるとイイですね〜。
ただ日々進化し開発費がかかっているのか、発売当初からしたら値段が割りと上がったような気がしますね。
それでもショートコードだけで簡単に美しいデザインや機能を利用できるので利用価値はあると思います。
今回のスキルバー&カウントアップショートコードは使い方によってはおもしろいと思います。
個人的にはショートコードで簡単にアフィリエイトリンクが作成できるようになるような機能が追加されるといいんですけどね〜。
もし開発者様がこのブログを見てくれているとしたら、ぜひ実装してほしい機能です。宜しくお願いします。
それではまた〜・・・・・っといいつつ放置になることが多いのでできるだけ更新して行きたいと思います。
それではまた〜