WordPressプラグイン「Shortcodes Ultimate」がおもしろい!

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

まさに「究極のショートコード」「ショートコードの極み」というイメージでしょうか。このプラグインすごいです。

実際に使用する場面は限られるかもしれませんが、いじってみてください。おもしろいんですの。

ショートコードというのは、EXCELのマクロみたいに自分で作ることもできるみたいなんですが、この「Shortcodes Ultimate」を使えば、面倒ないろいろを簡単に片づけることができます。とにかく、簡単なコードを記述するだけでhtmlやcssをごにょごにょしなくてもうまい具合に表示されるようになるのです。おお!スバラシイ!

「Shortcords Ultimate」をインストールする

まずは、プラグインを新規追加でインストールして有効化しましょう。

blog-shortcode

ダッシュボードのメニューに「< >ショートコード」メニューができたと思います。クリックすると下層メニューとして以下のメニューが表示されます。

設定 about 詳しいページは基本英語でっす。
設定 デフォルトのままでよいです。
カスタムCSS

CSSをいじれるなら、ここでさらに自分好みに設定することができます。

基本的な例 代表的なボタンやメニューのサンプル的なものが見れるようになってます。
高度な例 入れ子の方法や、投稿との絡め方のサンプルがあります。
チートシート

ショートコード、属性、サンプルコードが一覧になっていて印刷にも対応してます。

アドオン

新しいショートコードやショートコードメーカーなど販売しております。

とくにいじるところはありませんので、すぐに実践へ!

ショートコードを投稿ページで使う

投稿の新規追加ページを開くと、入力欄の上に「ショートコードを挿入」メニューが現れました。ここからいろんなショートコードを挿入していきます。ぽちっと押してみましょう。

blog-shortcode3

挿入できるショートコード一覧が表示されます。なんとその数55個!!!

使う場面がよくわからないものもありますが、ほとんどはちょっと便利に使える機能だと思われます。

blog-shortcode2

挿入はめっちゃ簡単

例えば、記事内でここ重要!という「Point」をお知らせしたいとき、

Point

かくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじか。

このように、サイト内で共通のラベルを付けると見やすくなります。この、「Point」というマークを付けるにも、色や形、大きさなど様々なCSS設定が必要ですが、ショートコードを使えば、たった1行入れるだけです。プラグインで挿入するとエディタにはこの1行が追加されるだけです。

[su_label type="important"]Point[/su_label]

たったこれだけ。しかも、プラグインを使えば、状態をプレビューしながら簡単に設定できます。

まずは、記事内の挿入したい位置でショートコードを挿入ボタンを押す。一覧を表示させて、「ラベル」をクリック。

blog-shortcode4

  • 全てのショートコード・・・ショートコード一覧に戻る
  • タイプ・・・デフォルト、成功、警告、重要、黒、情報の6タイプから選択。色が変化する。
  • クラス・・・大きさ、色など、自分でカスタマイズしたいときはここにクラスを追加してCSSで設定します。
  • コンテンツ・・・ラベルのテキスト

以上設定したら、「プレビュー」ボタンを押します。

blog-shortcode5

このように、簡単に確認することができます。希望のができたら、「ショートコードを挿入」ボタンで確定します。

あらっ!簡単!

ショートコードは入れ子にもできますので、他のショートコードと組み合わせてこのようにもできます。これは、「ノート」と組み合わせています。

Point

かくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじかかくかくしかじか。

まとめ

自分で一から設定しようとすると、面倒な設定も、プラグインを使うと簡単にできちゃうのですねー。

特にこのプラグインは、プレビューがすぐに見れるので、いろいろ試しやすいし、入れ子にできるっていうのもバリエーションが広がるのでポイント高いです。

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク