WordPress ショートコードを追加できる「Arconix shortcodes」プラグイン

【この記事を読むのに必要な時間は約 14 分です。】

様々なショートコードを利用できるWordPressプラグインが便利だ。どのプラグインもだいたいコンパチプルモード(互換性を確保)も用意されている。現在、「Arconix shortcodes」プラグインと「Shortcodes Ultimate」プラグインの二つを試運転を兼ねながら併用している。
今回は、「Arconix shortcodes」プラグインを紹介したい。

ショートコードの利用

最近まで知らなかったが、ワードプレスでは様々なショートコードが利用できる。自分で作ったショートコードを利用している人も多いと思う。
既に出来上がったショートコードを活用できるプラグインも数多くある。

ショートコードプラグインを利用するにあたっては、

  • 実際にどのように表示されるか
  • どのようにショートコードを挿入すれば良いのか
  • 自分でカスタマイズができるか

の3点がしっかりしていないと意味がないと思う。
その点、今回紹介する「Arconix shortcodes」プラグインは、

  • 表示はどれもシンプルかつ見栄えがする
  • 投稿画面にショートコート一覧が表示される
  • カスタマイズが割と簡単にできる

「Shortcodes Ultimate」プラグインはショートコードの挿入も簡単操作で実行できる。
「Arconix shortcodes」プラグインは、自分でショートコードを記入する必要がある。
しかし、実際に利用する際は、全てのショートコードを利用するわけではないので、よく利用するショートコードを「Add quicktag」プラグインなどを利用してあらかじめ登録しておけばよい。
また、ショートコードの一覧も投稿画面に表示されており、迷ったらドキュメンテーションで確認できるようになっている。
カスタマイズによるフォントサイズなどの調整は、「custom css and js」プラグインを利用して、その記事にあわせて挿入するのが良いかもしれない。とはいえ、実際に利用するショートコードは限られているだろうから、事前にcssファイルに追記しておけば更に簡単だ。

Arconix shortcodesプラグイン

ホームページ

こちらが、Arconix shortcodesのホームページだ。主に、ショートコードの活用方法を説明している。
インストールは、WordPress管理画面>プラグイン>新規追加>「Arconix shortcodes」で検索してインストールするとよい。

/wp-content/uploads/1-2arconix.jpg" rel="lightbox[3425]">1arconix

デモ

実際どのようにショートコードを記入して、どのように表示されるのか紹介する。

アコーディオン

挿入したい部分に以下のように記載する。

[accordions]
[accordion title="ホームページ"]
http://jump-up.info
[/accordion]
[accordion title="管理者"]
jump-up
[/accordion]
[accordion title="内容" last="last"]
WordPressその他
[/accordion]
[/accordions]

以下のように表示される。

ホームページ
管理者
jump-up
内容
WordPressその他

ボックス

挿入したい部分に以下のように記載する。

[box style="info"]これはstyle="info"と指定。これだけ文字を大きくした。[/box]
[box style="alert"]これはstyle="alert"と指定[/box]
[box style="comment"]これはstyle="comment"と指定[/box]
[box style="download"]これはstyle="download"と指定[/box]
[box style="tip"]これはstyle="tip"と指定[/box]
[box style="blue"]これはstyle="blue"と指定[/box]
[box style="green"]これはstyle="green"と指定[/box]
[box style="grey"]これはstyle="grey"と指定[/box]
[box style="red"]これはstyle="red"と指定[/box]
[box style="tan"]これはstyle="tan"と指定[/box]
[box style="yellow"]これはstyle="yellow"と指定[/box]

以下のように表示される。

これはstyle=”info”と指定。これだけ文字を大きくした。
これはstyle=”alert”と指定
これはstyle=”comment”と指定
これはstyle=”download”と指定
これはstyle=”tip”と指定
これはstyle=”blue”と指定
これはstyle=”green”と指定
これはstyle=”grey”と指定
これはstyle=”red”と指定
これはstyle=”tan”と指定
これはstyle=”yellow”と指定

なお、上記style=”info”Boxは以下のようにcssファイルに追記してカスタマイズしている。

.arconix-box-info {
    font: 14px 'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;
}

ボタン

挿入したい部分に以下のように記載する。

[button size="small" color="black" url="http://jump-up.info"]jump-up.info[/button]
[button size="medium" color="blue" url="http://jump-up.info"]jump-up.info[/button]
[button size="large" color="green" url="http://jump-up.info"]jump-up.info[/button]
[button size="large" color="grey" url="http://jump-up.info"]jump-up.info[/button]
[button size="small" color="orange" url="http://jump-up.info" target="_blank"]jump-up.info[/button]
[button size="medium" color="pink" url="http://jump-up.info" target="_blank"]jump-up.info[/button]
[button size="large" color="red" url="http://jump-up.info" target="_blank"]jump-up.info[/button]
[button size="large" color="white" url="http://jump-up.info" target="_blank"]jump-up.info[/button]

以下のように表示される。

jump-up.info jump-up.info jump-up.info jump-up.info    
jump-up.info jump-up.info jump-up.info jump-up.info

タブ

挿入したい部分に以下のように記載する。

[tabs]
[tab title="ホームページ"]http://jump-up.info
[/tab]
[tab title="管理者"]
jump-up
[/tab]
[tab title="内容"]
WordPress他
[/tab]
[/tabs]

以下のように表示される。

jump-up
WordPress他

トグル

挿入したい部分に以下のように記載する。

[toggle heading="h5" title="クリックして下さい!" ]
jump-upです。よろしくお願いします。
[/toggle]

以下のように表示される。

クリックして下さい!
jump-upです。よろしくお願いします。

カラム

挿入したい部分に以下のように記載する。

[one-third]
jump-upです。よろしくお願いします。
[/one-third]
[one-third]
WordPress他について記事にしています。
[/one-third]
[one-third last="y"]
内容に統一感がありませんがよろしくお願いします。
[/one-third]

以下のように表示される。

jump-upです。よろしくお願いします。
WordPress他について記事にしています。
内容に統一感がありませんがよろしくお願いします。

リストのマーク

挿入したい部分に以下のように記載する。

<br />
[list style="check"]
<ul>
	<li>style="check"</li>
</ul>
[/list]
[list style="close"]
<ul>
	<li>style="close"</li>
</ul>
[/list]
[list style="star"]
<ul>
	<li>style="star"</li>
</ul>
[/list]
[list style="arrow-blue"]
<ul>
	<li>style="arrow-blue"</li>
</ul>
[/list]
[list style="arrow-black"]
<ul>
	<li>style="arrow-black"</li>
</ul>
[/list]
[list style="arrow-orange"]
<ul>
	<li>style="arrow-orange"</li>
</ul>
[/list]
[list style="arrow-green"]
<ul>
	<li>style="arrow-green"</li>
</ul>
[/list]
[list style="arrow-grey"]
<ul>
	<li>style="arrow-grey"</li>
</ul>
[/list]
[list style="arrow-white"]
<ul>
	<li>style="arrow-white"</li>
</ul>
[/list]

以下のように表示される。

  • style=”check”
  • style=”close”
  • style=”star”
  • style=”arrow-blue”
  • style=”arrow-black”
  • style=”arrow-orange”
  • style=”arrow-green”
  • style=”arrow-grey”
  • style=”arrow-white”

ハイライト

挿入したい部分に以下のように記載する。

[highlight]ハイライトしたい部分。[/highlight]

以下のように表示される。

ハイライトしたい部分。

その他のショートコード

Miscellaneous Shortcodesとしてその他に以下のショートコードが用意されている。

  • 略語(Abbreviation)
  • ログイン/ログアウト
  • Google Map
  • サイトリンク
  • The Year
  • WordPressリンク

以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

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

良かったらフォローお願いします。

コメント

  1. […] 【概要】:枠、トグル、ボタン等のショートカット表示 【備考】ショートコード種類 応援お願いいたします! 足跡、一言お待ちしてます。 いつもありがとうございます! […]

  2. […] 【概要】:枠、トグル、ボタン等のショートカット表示 【備考】ショートコード種類 […]