Shortcodes UltimateのShortcode Creatorでオリジナルショートコードを作る方法

この記事では、Shortcodes UltimateのShortcode Creatorを使ってオリジナルのショートコードを作成する方法を説明していきます。

Shortcode Creator（Shortcodes Ultimate）の使い方

まず、WordPressの管理画面からCustom Shortcodeを選択します。

続いて画面上部のCreate Shortcodeをクリックします。

すると以下のような新規ショートコードの作成画面が開かれます。

ひとつづつ見ていきましょう。

Shortcode titleショートコードの名前を入力します
Shortcode descriptionショートコードの説明を入力します
Shortcode tag nameショートコードのタグ名を入力します
Default contentデフォルトで表示されるコンテンツを入力します
Iconショートコードのアイコンを選びます
Attributesショートコードに含まれる属性を追加していきます
Editor modeショートコードの内容をHTMLで編集するか、PHPで編集するかを選択することができます。
Shortcode codeショートコードを構成するコードを入力します
Custom CSSショートコードのCSSを入力します

Shortcode Creatorでショートコードを作成するためには上記の各項目を入力していく必要があります。

以下はShortcodes Ultimateの各ショートコードの挿入画面ですが、Iconで選択したアイコンが下記の画面でShortcode titleと一緒に表示されます。

Shortcode Creator（Shortcodes Ultimate）で実際にショーコードを作成するケース

ここでは、実際にShortcode Creatorを使って以下のようなボックスのショートコード作成する例を見ていきましょう。

◆作成するボックスのショートコード

 サンプルショートコード1
コンテンツを入力
 サンプルショートコード2
コンテンツを入力

まず、先ほどの新規ショートコード入力画面を開きひとつづつ入力していきます。

タイトルや説明などを上から順に入力していくだけです。

少し難しいのが「Attributes」です。「Attributes」には、ショートコードの中で変数、つまり、ショートコード挿入時に変更することができる要素を追加していきます。いくつか例を見ていきましょう。

◆Attributesの具体例①　ボックスカラー

ここでは、ボックスカラーを変数として変更できるように「Attributes」に追加しています。

◆Attributesの具体例②　ボックス半径

ここでは、ボックス半径を変数として変更できるように「Attributes」に追加しています。

◆Attributesの具体例③　タイトル

ここでは、タイトルを変数として変更できるように「Attributes」に追加しています。

以上、３つのタイプの「Attributes」を紹介しました。変数をテキストにしたいのか、数字にしたいのか、カラーにしたいのか、といった点は上記の「Field type」から選択することができます。

また、「Attributes name」は、実際にコード内に入力する変数で、 {{Attributes name}}のようにカッコ2つで囲んで変数としてコード内に入力することができます。

例えば、タイトルであれば、以下のようにコード内に入力します。

<div class="simple_box_title"> {{title}}</div>

ボックスカラーであれば、以下のようにコード内に入力します。

<div class="simple_box" style="border: solid 2px {{box_color}};">
ボックスコンテンツ
</div>

CSSの内容を変数として扱うときは、Custom CSSではなくShortcode codeのHTML内にCSSの内容を記入することがポイントです。

Shortcode Creatorで作成したオリジナルショートコードの使い方

Shortcodes UltimateのShortcode Creatorで作成したオリジナルショートコードの使い方は、通常のShortcodes Ultimateのショートコードの使い方同様です。

まず、投稿画面で「ショートコードを挿入」をクリックしてショートコード選択画面を開きます。

すると、作成したショートコードを選択することができるようになっています。

作成したショートコードをクリックすると他のショートコードと同様にショートコード挿入画面が開きます。

内容などを編集し終えたら「ショートコードを挿入」をクリックします。すると投稿内に以下のようなショートコードが挿入されます。

この内容をプレビューで確認すると簡単にボックスを表示することができます。

まとめ

この記事では、Shortcodes UltimateのShortcode Creatorの使い方について説明してきましたがいかがだったでしょうか？

オリジナルショートコードを作成して簡単にそのオリジナルショートコードを記事内に挿入できるShortcode Creatorは、使いこなせば記事作成においてかなり便利な機能のひとつです。

Shortcodes Ultimateの有料版にしかない機能ですが、本格的にデザインにこだわりたいユーザーの方にはぜひ取り入れていただきたいプラグインです。

 

この記事の執筆者

きつね
きつね