WordPressでShortcakeを使ってショートコードのUIを追加する方法

クライアントのためにWordPressサイトを開発している場合、クライアントが使用するためのショートコードがある可能性が高いです。問題は、多くの初心者はショートコードの追加方法を知らず、複雑なパラメータが関わる場合はさらに難しいということです。Shortcakeは、ショートコード用のユーザーインターフェースを追加することでソリューションを提供します。この記事では、Shortcakeを使用してWordPressでショートコード用のユーザーインターフェースを追加する方法を説明します。

Shortcakeとは？

WordPress では、投稿や固定ページ内に実行可能なコードを、ショートコードを使用して簡単に追加できます。多くの WordPress テーマやプラグインでは、ショートコードを使用して追加機能を追加できます。ただし、ユーザーがカスタマイズのためにパラメータを入力する必要がある場合、これらのショートコードは複雑になることがあります。

例えば、一般的な WordPress テーマでボタンを入力するためのショートコードがある場合、ユーザーは少なくとも 2 つから 5 つのパラメータを追加する必要があるでしょう。次のようになります。

[themebutton url="http://example.com" title="今すぐダウンロード" color="purple" target="newwindow"]

ShortcakeはWordPressプラグインであり、将来のWordPress機能としても提案されています。これは、これらの値を入力するためのユーザーインターフェイスを提供することで、この問題を解決することを目指しています。これにより、ショートコードの使用がはるかに簡単になります。

開始する

このチュートリアルは、WordPress開発に初めて取り組むユーザーを対象としています。WordPressテーマを微調整したい初心者ユーザーにも役立つチュートリアルです。

それでは、始めましょう。

まず最初に行う必要があるのは、Shortcake (Shortcode UI)プラグインをインストールして有効化することです。

次に、ユーザー入力のいくつかのパラメータを受け入れるショートコードが必要になります。少し復習が必要な場合は、WordPressにショートコードを追加する方法をご覧ください。

このチュートリアルのために、ユーザーがWordPressの投稿やページにボタンを挿入できるようにする簡単なショートコードを使用します。ここにショートコードのサンプルコードを示します。これをテーマのfunctionsファイルまたはサイト固有のプラグインに追加して使用できます。

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

ボタンをスタイル設定するために、CSSを追加する必要もあります。このCSSは、テーマのスタイルシートで使用できます。

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

ユーザーが投稿やページでショートコードを使用する方法は次のとおりです。

[cta-button title="今すぐダウンロード" url="http://example.com"]

パラメータを受け入れるショートコードができたので、それ用のUIを作成しましょう。

Shortcode UIのShortcakeへの登録

Shortcake APIを使用すると、ショートコードのユーザーインターフェイスを登録できます。ショートコードが受け入れる属性、入力フィールドの種類、およびショートコードUIが表示される投稿の種類を記述する必要があります。

ここに、ショートコードのUIを登録するために使用するサンプルコードスニペットを示します。各ステップはインラインコメントで説明するように努めました。これをテーマのfunctionsファイルまたはサイト固有のプラグインに貼り付けることができます。

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

これで完了です。投稿を編集すれば、ショートコードのユーザーインターフェイスが実際に動作しているのを確認できます。投稿エディターの上にある「メディアを追加」ボタンをクリックするだけです。これによりメディアアップローダーが表示され、左側の列に新しい項目「投稿要素を挿入」が表示されます。それをクリックすると、コードを挿入するためのボタンが表示されます。

電球アイコンとショートケーキラベルを含むサムネイルをクリックすると、ショートコードUIが表示されます。

複数の入力を持つショートコードの追加

最初の例では、非常に基本的なショートコードを使用しました。次に、もう少し複雑で、はるかに便利なものにしてみましょう。ユーザーがボタンの色を選択できるショートコードを追加してみましょう。

まずショートコードを追加します。これはほぼ同じショートコードですが、色に対するユーザー入力を受け付ける点が異なります。

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

ショートコードはさまざまな色のボタンを表示するため、CSSも更新する必要があります。このCSSは、テーマのスタイルシートで使用できます。

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

ボタンは次のように表示されます。

ショートコードの準備ができたので、次のステップはショートコードUIを登録することです。今回は色用の別のパラメータがあり、ユーザーに青、オレンジ、または緑のボタンから選択できるように提供しますが、基本的に同じコードを使用します。

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

これで完了です。投稿または固定ページを編集し、「メディアを追加」ボタンをクリックしてください。「投稿要素を挿入」の下に新しく追加されたショートコードが表示されます。