[icon name="coffee" class="" unprefixed_class=""] 超便利で多機能なプラグイン
WordPressには、便利なプラグインがたくさんあります。例えば、AddQuicktagというプラグインを使うと、あらゆるタグをテキストエディタのメニュー画面にボタンとして設定することができます。これは超便利です。例えば、登録したボタン一発で、おしゃれな見出しやボックスを生成することができます。これは、プロのブロガーが絶賛するMarseditのショートカットキーと同じ機能といってもいいでしょう。私は、Marseditはあまり好きではないので、もっぱらAddQuicktagとテキストエディタを愛用しています。
今回紹介するのは、AddQuicktagと同じくらい便利な「ショートコード」生成プラグインの「Shortcodes Ultimate」です。WordPressでは、phpを使って、さまざまなショートコードをつくることができますが、このプラグインは、phpの知識がないユーザでも、多様なショートコードを使うことを可能にしてくれる超便利なツールです。
それでは、このプラグインでできることを、できるだけたくさん紹介していきたいと思います。
[phoe-icon name="fa-file-code-o fa-red"] 複数カラムの設置
ふつうのワープロでは、複数カラムの文書を作るのは容易ですが、WordPressでは、段落表示はあまり得意ではありませんでした。しかし、このプラグインを使えば、簡単に2段、3段のカラム表示ができるのです。
エディタ画面の「ショートコードを挿入」ボタンを押すと、次のようなメニュー画面が表示されます。これを見てもわかるように、実にたくさんのことができるのです。
複数カラムをつくるには、このメニューの中で、「Colums」アイコンを押します。すると、次のようなダイアログボックスが表示されるので、ここでカラム数やカラムの幅の指定を行うことができます。ここでは、デフォルトの指定通り、等幅の2段記事をつくってみたいと思います。
「ショートコードを挿入」ボタンを押すと、WordPessのエディタ画面にコードキーが挿入されます。そこで、「列のコンテンツ」の部分に文章を流し込めば、2段組みの文章が表示されます。夏目漱石の文章を2段組で示してみましょう。
私がその掛茶屋で先生を見た時は、先生がちょうど着物を脱いでこれから海へ入ろうとするところであった。私はその時反対に濡ぬれた身体を風に吹かして水から上がって来た。二人の間あいだには目を遮ぎる幾多の黒い頭が動いていた。特別の事情のない限り、私はついに先生を見逃したかも知れなかった。それほど浜辺が混雑し、それほど私の頭が放漫であったにもかかわらず、私がすぐ先生を見付け出したのは、先生が一人の西洋人を伴つれていたからである。
その西洋人の優れて白い皮膚の色が、掛茶屋へ入るや否いなや、すぐ私の注意を惹いた。純粋の日本の浴衣ゆかたを着ていた彼は、それを床几しょうぎの上にすぽりと放ほうり出したまま、腕組みをして海の方を向いて立っていた。彼は我々の穿く猿股一つの外ほか何物も肌に着けていなかった。私にはそれが第一不思議だった。[/su_column]
[su_column size="1/2" center="no" class=""]
私はその二日前に由井が浜はままで行って、砂の上にしゃがみながら、長い間西洋人の海へ入る様子を眺めていた。私の尻をおろした所は少し小高い丘の上で、そのすぐ傍がホテルの裏口になっていたので、私の凝っとしている間あいだに、大分だいぶ多くの男が塩を浴びに出て来たが、いずれも胴と腕と股は出していなかった。女は殊更ことさら肉を隠しがちであった。大抵は頭に護謨製ゴムせいの頭巾を被かぶって、海老茶や紺や藍の色を波間に浮かしていた。そういう有様を目撃したばかりの私の眼には、猿股一つで済まして皆の前に立っているこの西洋人がいかにも珍しく見えた。 (夏目漱石『こころ』より)[/su_column][/su_row]
このように、Shortcodes ultimateをつかえば、簡単に2段組、3段組の文章を画面に表示させることができます。この段組ショートコードは、ボックスの中で複数の縦の列を整序して表示させる場合などにも応用することができます。
例えば、次のような例です。これは、ドイツ語の受動態の時制による変化をまとめたものです。
現在
過去
現在完了
過去完了
未来
未来完了[/su_column]
[su_column size="5/10" center="no" class=""]
Die Tür wird geschlossen.
Die Tür wurde geschlossen.
Die Tür ist geschlossen worden.
Die Tür war gesclossen worden.
Die Tür wild geschlossen werden.
Die Tür wird geschlossen worden sein.
[/su_column]
[su_column size="3.5/10" center="no" class=""]
ドアは閉じられる。
ドアは閉じられた。
ドアは閉じられてしまった。
ドアは閉じられてしまっていた。
ドアは閉じられるだろう。
ドアは閉じられてしまっているだろう。
(森泉著『しっかり身につくドイツ語』より)
[/su_row]
3段組のショートコードを使って、縦の表示をそろえています。
[phoe-icon name="fa-file-code-o fa-red"] タブ
これは、画面にタブをつくって、複数のコンテンツをワンタッチで見せる機能です。ショートコードは、次のようなものです。
[su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab] [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab] [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
このコードを挿入すると、次のようなタブが表示されます。
[su_tabs active="3"][su_tab title="上 先生と私" disabled="no" anchor="" url="" target="blank" class=""] 私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。
私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。[/su_tab]
[su_tab title="中 両親と私" disabled="no" anchor="" url="" target="blank" class=""]
宅うちへ帰って案外に思ったのは、父の元気がこの前見た時と大して変っていない事であった。
「ああ帰ったかい。そうか、それでも卒業ができてまあ結構だった。ちょっとお待ち、今顔を洗って来るから」
父は庭へ出て何かしていたところであった。古い麦藁帽むぎわらぼうの後ろへ、日除ひよけのために括くくり付けた薄汚うすぎたないハンケチをひらひらさせながら、井戸のある裏手の方へ廻まわって行った。
学校を卒業するのを普通の人間として当然のように考えていた私わたくしは、それを予期以上に喜んでくれる父の前に恐縮した。
「卒業ができてまあ結構だ」
父はこの言葉を何遍なんべんも繰り返した。私は心のうちでこの父の喜びと、卒業式のあった晩先生の家うちの食卓で、「お目出とう」といわれた時の先生の顔付かおつきとを比較した。私には口で祝ってくれながら、腹の底でけなしている先生の方が、それほどにもないものを珍しそうに嬉うれしがる父よりも、かえって高尚に見えた。私はしまいに父の無知から出る田舎臭いなかくさいところに不快を感じ出した。[/su_tab]
[su_tab title="下 先生と遺書" disabled="no" anchor="" url="" target="blank" class=""]
私は新聞で乃木大将の死ぬ前に書き残して行ったものを読みました。西南戦争せいなんせんそうの時敵に旗を奪とられて以来、申し訳のために死のう死のうと思って、つい今日こんにちまで生きていたという意味の句を見た時、私は思わず指を折って、乃木さんが死ぬ覚悟をしながら生きながらえて来た年月としつきを勘定して見ました。西南戦争は明治十年ですから、明治四十五年までには三十五年の距離があります。乃木さんはこの三十五年の間あいだ死のう死のうと思って、死ぬ機会を待っていたらしいのです。私はそういう人に取って、生きていた三十五年が苦しいか、また刀を腹へ突き立てた一刹那いっせつなが苦しいか、どっちが苦しいだろうと考えました。
それから二、三日して、私はとうとう自殺する決心をしたのです。私に乃木さんの死んだ理由がよく解わからないように、あなたにも私の自殺する訳が明らかに呑のみ込めないかも知れませんが、もしそうだとすると、それは時勢の推移から来る人間の相違だから仕方がありません。あるいは箇人こじんのもって生れた性格の相違といった方が確たしかかも知れません。私は私のできる限りこの不可思議な私というものを、あなたに解らせるように、今までの叙述で己おのれを尽つくしたつもりです。
私は妻さいを残して行きます。私がいなくなっても妻に衣食住の心配がないのは仕合しあわせです。私は妻に残酷な驚怖きょうふを与える事を好みません。私は妻に血の色を見せないで死ぬつもりです。妻の知らない間まに、こっそりこの世からいなくなるようにします。私は死んだ後で、妻から頓死とんししたと思われたいのです。気が狂ったと思われても満足なのです。
(夏目漱石『こころ』より抜粋)
[/su_tab][/su_tabs]
タブによって、長い文章を整理して表示することができます。また、メニューとコンテンツをテーマ別に分けて示すことなどもできるでしょう。いろんな形で応用が利くと思います。隠れたタブに関連する写真や地図などを埋め込むこともできるでしょう。
[phoe-icon name="fa-photo fa-red"] スライドショー
次は、スライドショーを手軽につくる方法です。もちろんスライドショーをつくるには、ほかにもっと高機能なプラグインがありますが、Shortcode Ultimateは、簡単なショートコードを埋め込むだけで、あっという間にスライドショーがつくれるので便利です。
[su_carousel source="media: 1185,1172,835,762,678,427,277,244,251,249" width="700" height="260" items="2" title="no"]
[phoe-icon name="fa-apple"] ボタンの作成
Shortcodes Ultimateを使えば、アイコン入りのボタンも簡単に作ることができます。
[su_button url="https://webledge-blog.com/shortcodes-ultimate-use/" style="soft" background="#008b8b" size="5" wide="yes" icon="icon: fax" text_shadow="1px 1px 1px #000000"]このサイトもおすすめです![/su_button]
このようなボタンを簡単につくることができます。ボタンにリンクを張ることも簡単にできます。試しにボタンをクリックしてみて下さい。
ラベルとハイライト
文章中に、気の利いたカラーのラベルを挿入することは、文章にアクセントと彩りを与え、効果的です。しかし、WordPressでは、こうしたラベルをつくるのは必ずしも容易ではありませんでした。けれども、Shortcode Ultimateを使えば、簡単にカラーのラベルをつくることができます。下には、5色のラベルをつくってみました。カラーの数が限られているのはちょっと残念ですが、うまく使い分ければ、じゅうぶんに実用に耐えることでしょう。
[su_label type="success"] [phoe-icon name="fa-android"] 成功! [/su_label][su_label type="warning"]警告![/su_label][su_label type="important"]重要![/su_label][su_label type="black"]注目[/su_label][su_label type="info"]関連情報[/su_label]
文字列にもっと多様な色彩の背景をつけることもできます。それが「ハイライト」ショートコードです。
[su_highlight]強調表示するテキストの背景色[/su_highlight]
[su_highlight background="#f6b4e6"]ピンクのハイライトをつけてみました[/su_highlight]
HTMLやCSSを書かなくても、簡単に好きな色の背景をすばやくつけられるので、大変便利です。
ハイライトをショートコードでつくると、改行されなくなるという現象がみられるようです。これは、Shrtcode Ultimate全般にいえることです。その場合は、次のCSSを作るほうがいいかもしれません。
.marker_aqua { background: linear-gradient(transparent 10%, #00ffff 0%); }
HTMLは次のようになります。
空色の蛍光ペンを引きます
結果:
空色の蛍光ペンを引きます
[phoe-icon name="fa-exclamation-circle fa-lg"] ドロップキャップ
[su_dropcap]お[/su_dropcap]しゃれな文をつくるには、ドロップキャップの文字を入れるのも有効です。
[su_dropcap style="light"]た[/su_dropcap]まには、インパクトのある文章をつくるのもいいですね。
これらのドロップキャップも、ショートコード一発で簡単に生成することができます。
この他にも、GoogleマップやYouTubeを挿入するためのコードなどもありますが、これらは、とくにショートコードを使わなくてもできるので、ここでは省略します。いずれにしても、Shortcode ultimateのショートコードを使うことによって、WordPressの表現の幅は大きく向上するものと期待されます。本サイトでも、このプラグインを大いに活用させていただきたいと思っています。
[su_label type="info"]参考サイト[/su_label]
https://www.lga-logis.com/