中国語翻訳勉強会の記事を、どうやったら見やすくレイアウトできるかなと考えつつ、アコーディオンやタブを作れるプラグインを探していたところ、「Shortcodes Ultimate」を見つけました。
他にもいろいろ試してみたのですが、このプラグインは日本語化もされている上、使いやすさも抜群だったので、簡単にご紹介します。
ショートコードプラグイン
ショートコードというのは[このカッコで囲まれたコード]のことですね。
問い合わせフォームを記事に追加したときに見たことがある人も多いのではないかと思います。
WordPress特有のコードで、本来は長々と記述しなければならないものを、サクッと1行ですましちゃおう、という「ショートカットできるコード」です。
自分が必要なものを自作できるのですが、簡単に実装できるプラグインがたくさん公開されているので、そちらを使います。
私が試してみたのは、
[su_list icon_color=”#07bdbc”]
- Arconix Shortcode
- Olevmedia Shortcodes
- Squelch Tabs and Accordions Shortcodes
- Shortcodes Ultimate
[/su_list]
このあたりですが、抜群にShortcodes Ultimateが使いやすかったです。
ちなみにこのリストもShortcodes Ultimateを使いました。ふつうにタグでもリスト作れますが、☆アイコン、かわいいです！
次に気に入ったのはArconix Shortcodeでしたが、私の使い方がよくなかったのか、記事内でエラーが出てしまったので今回は使用せず。デザインはステキなので、気になる方はぜひ試してみてください。
編集画面から簡単に入力できる
プラグインを有効化すると、編集画面の上の方に「ショートコードを挿入」というボタンが出てきます。
これを押すと、ずらりとできることが並びます。
できないことなんてないんじゃないかと思えるくらい、至れり尽くせりのラインナップです。
今回やりたいことは、アコーディオンやタブを簡単に実装というところでしたが、ほかにもいろいろ試したくなります。
使うときに気を付けないといけないのは、プラグインを削除してしまうと、ショートコードの効果も失われてしまうという点です。
アコーディオン
翻訳会の記事にも使っています。
[su_accordion][su_spoiler title=”スポイラーのタイトル１” open=”no” style=”default” icon=”plus” anchor=”” class=””]こんなふうに[/su_spoiler]
[su_spoiler title=”スポイラーのタイトル２” open=”no” style=”default” icon=”plus” anchor=”” class=””]クリックすると[/su_spoiler]
[su_spoiler title=”スポイラーのタイトル３” open=”no” style=”default” icon=”plus” anchor=”” class=””]隠れていたものが現れる。[/su_spoiler]
[su_spoiler title=”スポイラーのタイトル４” open=”no” style=”default” icon=”plus” anchor=”” class=””]画像もここに入れられます。[/su_spoiler][/su_accordion]
「アコーディオン」というボタンを押しただけで、コードがワンセットできあがります。すごい。
Q&Aのページをつくるのに便利ですね。
タブ
タブはこんな感じです。
[su_tabs vertical=”yes”][su_tab title=”タブ1″ disabled=”no” anchor=”” url=”” target=”blank” class=””]こちらに内容が表示されます[/su_tab]
[su_tab title=”タブ2″ disabled=”no” anchor=”” url=”” target=”blank” class=””]タブで切り替えるので[/su_tab]
[su_tab title=”タブ3″ disabled=”no” anchor=”” url=”” target=”blank” class=””]記事がコンパクトにおさまります[/su_tab][/su_tabs]
縦にもできます。いろいろ使えそう。
[su_tabs][su_tab title=”タブ1″ disabled=”no” anchor=”” url=”” target=”blank” class=””]こちらに内容が表示されます[/su_tab]
[su_tab title=”タブ2″ disabled=”no” anchor=”” url=”” target=”blank” class=””]タブで切り替えるので[/su_tab]
[su_tab title=”タブ3″ disabled=”no” anchor=”” url=”” target=”blank” class=””]記事がコンパクトにおさまります[/su_tab][/su_tabs]
タブの数が多すぎたり、コンテンツの内容が長すぎたりすると、スマホで見たときに不格好になるので、使うときには注意が必要です。
ボタン・ボックス
リンクボタンも作れます。こんな感じ。
[su_button url=”https://mandarinnote.com/archives/20450″ target=”blank” icon=”icon: pencil”]翻訳会はこちら！[/su_button]
目立たせたいテキストがあれば、
[su_note note_color=”#a3f0ed”]こんなボックスとかも簡単に作れます。[/su_note]
文章ばかりのブログは殺風景になってしまいますが、こんなふうに簡単に装飾できるプラグインを使って、長文でも緩急つけて最後まで読んでもらえる工夫ができそうだなと思います。
プラグインに依存しすぎると、あとからの手直しが大変なので、できるだけ依存しない方法をとるタイプなのですが、このプラグインはあまりにも便利なので、継続して使ってみたいなと思います。
ぜひ試してみてください！
