こんにちは、ゆーすけ(@yusuke_plmrstn)です。
今回は久しぶりにワードプレスのプラグインのお話。
記事の中にかんたんにおしゃれなボタンを追加できるお手軽プラグイン “Shortcodes Ultimate” を使ってみました。
カスタマイズ性が高く便利なプラグインですよ。
この記事の目次一覧
プラグイン導入の経緯
僕のブログはもう少しで開設からまる1年を迎えるわけですが、スタートした当初は本当に右も左もわからずCSS（スタイルシート）も適当にいじっていました。
おそらくそれが原因になり、ちょっとここカスタマイズしたいなぁと思ってCSSに変更を加えてもなぜか反映されないことが多くなりました。
見た目にもキレイなボタンを追加してクリック率を上げたいところなんですがこれじゃあカスタマイズできない！
というわけで今回の “Shortcodes Ultimates” というプラグインを見つけたわけです。
Shortcodes Ultimatesでボタンを追加
このプラグインを使うとこんな感じでボタンを追加することができます。
ボタンクリックでこのページの一番上に移動します。
複雑なコードやCSSの変更の必要もなく簡単に仕上げることができます。
もちろん色や見た目のカスタマイズもできるため、ブログテーマに沿った形に仕上げることができます。
Shortcodes Ultimatesの使い方
まずはプラグインを追加しましょう。
ワードプレスのプラグイン検索から “Shortcodes Ultimates”を検索してインストール→有効化まで進めます。
するとワードプレス投稿画面に「ショートコードを挿入」ボタンが増えていることがわかりますね。
そこから進むとこのプラグインでできるカスタマイズ一覧がズラズラっと表示されますが、この中から「ボタン」をクリックします。
とにかく多機能なプラグインですが、今回はボタン挿入のみ紹介しますね。
ボタンをクリックするとどういうスタイルに仕上げるか細かくカスタマイズすることができます。
リンク先の設定、ボタンの見た目、色、文字の色、アイコンの追加など自由に設定することができます。
見た目は次の9種類から選ぶことができます。
カーソルをボタンに乗せた時の動き方が違うことがわかります。
デフォルト
デフォルト
フラット
フラット
ゴースト
ゴースト
ソフト
ソフト
ガラス
ガラス
泡
泡
ノイズ
ノイズ
撫でる
撫でる
3D
3D
色々あって使い勝手がよさそうです。
設定の一番下にはプレビューで確認できる機能があるので嬉しいですね。
ショートコードを貼り付けるだけ
全ての設定を終えて「ショートコードを挿入」をクリックすると次のような文字が入力されていることがわかります。
「su_button url=”http://#” style=”3d” background=”#f59a0b” color=”#ffffff” size=”6″ icon=”icon: forward” text_shadow=”1px 3px 5px #000000”」3D「/su_button」
うぉっ！？バグった！？と一瞬思うかもしれませんがこれで大丈夫です。ワードプレスのプレビュー画面を見るとちゃんとボタンに反映されています。
全文をコピペすれば文中の好きな箇所にボタンを挿入できるので試してみて下さい。
便利なプリセット機能
さっきの設定画面右下にプリセットという項目があります。
自分が設定したボタンスタイルや色、文字の大きさなどを登録してプリセットとして使うことができる便利機能です。
プリセット数は複数OKなので用途に応じて作っておけば簡単にプリセットを切り替えることも可能！
CSSを使ってボタンを作成
でもこれ、本当はCSSでボタンを作ることもできます。
というか本来だとCSSでやるほうがいいんです。
プラグイン使うと動作が重たくなることがあるし、他のプラグインと干渉して不具合が起きる可能性も高くなりますし。
でも今の僕にはごちゃごちゃになってしまったCSSを修復するだけの力はないのでプラグインに頼るしかありません。
もっと勉強しないと・・・
まとめ
お手軽にオシャレボタンを追加できる “Shortcodes Ultimates”はおすすめです。
難しい知識も必要なく項目を埋めるだけでサクサク進めることができます。
無料プラグインということもあるのでぜひ導入してみましょう！