ShortcakeでWordPressにショートコードのユーザーインターフェースを追加する方法

もしあなたがクライアントのためにWordPressサイトを開発しているのであれば、クライアントが使用するショートコードを用意することになるでしょう。問題は、多くの初心者がショートコードの追加方法を知らないことであり、複雑なパラメータが関係している場合はさらに難しくなります。Shortcakeは、ショートコード用のユーザーインターフェースを追加することで、解決策を提供します。この投稿では、Shortcakeを使ってWordPressにショートコードのユーザーインターフェースを追加する方法を紹介します。

Shortcakeとは？

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

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

[SKX1］

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

はじめに

このチュートリアルは、WordPressの開発を始めたばかりのユーザーを対象としています。WordPress テーマを調整するのが好きな初心者レベルのユーザーも、このチュートリアルが役に立つでしょう。

それではさっそく始めましょう。

まず最初に、Shortcake（Shortcode UI）プラグインをインストールして有効化します。

ユーザー入力のいくつかのパラメータを受け付けるショートコードが必要です。WordPressでショートコードを追加する方法については、こちらを参照してください。

このチュートリアルでは、ユーザーがWordPressの投稿やページにボタンを挿入できるシンプルなショートコードを使用します。以下はショートコードのサンプルコードで、テーマの関数ファイルや サイト固有のプラグインに追加して使用することができます。

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はテーマのスタイルシートで使用できます。

[cbk2］

ユーザーが投稿やページでショートコードを使用する方法です：

[SKX2］

パラメータを受け付けるショートコードができたので、そのUIを作ってみましょう。

ショートコードのユーザーインターフェースをShortcakeに登録する

Shortcake APIでは、ショートコードのユーザーインターフェースを登録することができます。あなたのショートコードが受け付ける属性、入力フィールドタイプ、どの投稿タイプがショートコードのUIを表示するかを記述する必要があります。

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

[cbk3］

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

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

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

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

まず、ショートコードを追加します。ほぼ同じショートコードですが、色のユーザー入力を除きます。

[cbk4］

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

[cbk5］

このようにボタンが表示されます：

ショートコードの準備ができたので、次はショートコードの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' ), 
)
);

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

新しく作成したショートコードをクリックすると、ショートコードのUIが表示されるので、そこで値を入力するだけです。

このチュートリアルで使用したコードはプラグインとしてダウンロードできます。

wpb-ショートケーキチュートリアル

CSSも同梱していますので、勉強のために使うこともできますし、より簡単なユーザーインターフェースを使ってWordPressに独自のコールトゥアクションボタンを追加するために使うこともできます。自由にソースを変更して遊んでみてください。

この投稿が、Shortcakeを使ってWordPressにショートコードのユーザーインターフェースを追加する方法を学ぶのにお役に立てば幸いです。WordPressでショートコードを使用するための7つの重要なヒントもご覧ください。

この投稿が気に入った場合は、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。