Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

Shortcakeとは?

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

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

[SKX1]

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

Shortcake Bakery Plugin

はじめに

このチュートリアルは、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 ボタンをクリックするだけです。するとメディアアップローダーが表示され、左側の列に「投稿要素の挿入」という項目が追加されていることに気づくでしょう。それをクリックすると、コードを挿入するためのボタンが表示されます。

Inserting your shortcode in a post or page

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

User interface for a simple shortcode

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

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

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

[cbk4]

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

[cbk5]

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

Call to action buttons created with shortcode

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

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

Selecting post element or shortcode to insert

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

Shortcode UI with a select field

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

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

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

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

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

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Waqar says

    hello, i want to modify my wordpress theme’s search box. because theme’s search box don’t search all over the place in website except title of post/product. please help me to get rid of this problem.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。