WP UI – Tabs, Accordions, Sliders

WP UI – Tabs, Accordions, Sliders
機能が満載。
コンテンツ内にTABコンテンツを搭載する機能。普通に文章を書くだけでなく、他のPOSTや固定ページを引っ張ってくることもできる。

[ wptabs style=”wpui-achu” ]


TAB


TAB機能。
[ Wrap tabs ]ボタンで概要を作成し、[ Add tab ]ボタンでタブを追加していく。
styleを40種類ぐらいから選択することができる。
ここで使っているのは「wpui-achu」。

Accordion


[ wptabs ]に「type=”accordion”」を指定することでアコーディオン形式にすることができる。

Spoiler


[ wptabs ]とは別に[ wpspoiler ]がある。
[ wpspoiler name=”Spoiler Test1″ ]Spoiler Test 1[ /wpspoiler ]
のようにwpspoilerで囲むことでアコーディオンの単発版を出すことができる。
openオプションにtrue/falseを指定することで初期状態を開いている/閉じている、それぞれを指定することができる。
デフォルトはfalse。

Spoiler Title 1

Spoiler Content 1

Spoiler Title 2

Spoiler Content 2


Dialog


[ wptabs ]とは別に[ wpdialog ]もある。
これをコンテンツのどこかに書いておくことでページを開いた時に画面中央にダイアログを出すことができる。
出せるのはJavaScriptでいうところのAlert。Confirmではない。
このページを開いた時に出てきたアラートのshortcodeは

[ wpdialog title="alert" show="drop" hide="explode" ] wpdialogを使用することでアラートを出すことができます。 [ /wpdialog ]


Feeds


[ wptabs ]とは別に[ wpuifeeds ]もある。
[ wpuifeeds url=”http://feeds.reuters.com/reuters/JPTopNews?format=xml” number=”1″ ]
このように書くことで指定URLからのfeedをnumber分だけ受けることができる。

その他注意事項


[ wptabs ]を多重化して設置することはできない。
Crayon Syntax Highlighterとの相性があまり良くない。
SyntaxHighlighter Evolvedは今のところ問題なさそう。

[ wptabs type=”accordion” style=”wpui-achu” effect=”fade” mode=”virtical” ]


Accordion Test 1

Accordion Test 1

Accordion Test 2

Accordion Test 2

Reuters News Feed


wpdialogを使用することで
アラートを出すことができます。