もしあなたがクライアントのために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が表示されるので、そこで値を入力するだけです。
このチュートリアルで使用したコードはプラグインとしてダウンロードできます。
CSSも同梱していますので、勉強のために使うこともできますし、より簡単なユーザーインターフェースを使ってWordPressに独自のコールトゥアクションボタンを追加するために使うこともできます。自由にソースを変更して遊んでみてください。
この投稿が、Shortcakeを使ってWordPressにショートコードのユーザーインターフェースを追加する方法を学ぶのにお役に立てば幸いです。WordPressでショートコードを使用するための7つの重要なヒントもご覧ください。
この投稿が気に入った場合は、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。
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!
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.
WPBeginner Support says
Take a look at our list of WordPress search plugins to improve your site search
管理者