カスタムショートコードの書き方入門

ショートコードは、多くのプラグインやテーマに搭載されている人気の機能です。

ありがたいことに、WordPress の Shortcode API を使用すると、独自のショートコードをかなり簡単に作成することができます。

ありがたいことに、WordPress のショートコード API を使用すると、独自のショートコードをかなり簡単に作成できます。

この記事では、ショートコードがどのように機能するかについて、もう少し詳しく説明します。

この記事では、ショートコードの仕組みについてもう少し詳しく説明し、3 つのステップで簡単にプログラミングできることをお見せします。

ショートコードと Shortcode API の紹介

The WordPress Shortcode API は開発者のための便利なツールです。

ショートコードは、次のように角括弧内の小さなテキスト片のように見えます: . それぞれが、必要に応じてトリガーされる、定義済みのコードのユニークな実行を表します。

ほとんどのショートコードはテーマやプラグインによって追加されますが、WordPress のコアには、使用できるいくつかのデフォルトのショートコードがあります。 その例として、audio、gallery、caption があります。

たとえば、キャプション付きの画像を追加すると、WordPress は特定のショートコードを生成します

フロントエンドでこれを表示すると、キャプション付きの画像が表示されます。

幸い、Shortcode API により、自分の WordPress プロジェクト用にカスタム ショートコードを比較的簡単に作成できます。

カスタム ショートコードの書き方 (簡単な 3 つのステップ)

ショートコードの仕組みを理解したところで、自分のテーマやプラグインにショートコードを追加する方法を学んでいきましょう! もちろん、ショートコードで何をするかはあなた次第です。

ショートコード関数を書く

まず、テキスト エディターで新しいファイルを開きます。

function torque_hello_world_shortcode() { return 'Hello world!';}

この関数を通常使用する場合、Hello world! を HTML に出力できる文字列として返します。 この関数は、カスタムパラメータを受け取ることもできます。 例えば、Hello Bob! と表示させたい場合は、nameパラメータを追加します。

ここでは、ショートコードの $atts 関数を使用して、WordPress でショートコードの属性を適切に処理する方法を例示します。

function torque_hello_world_shortcode( $atts ) { $a = shortcode_atts( array( 'name' => 'world' ), $atts ); return 'Hello ' . $a . !';}

これは、他の名前がない場合、name 属性を world にデフォルト設定します。 名前が提供されている場合、この関数は代わりにそれを出力します。

完成したら、このショートコードを含むプラグインまたはテーマがインストールされている WordPress サイトのテキスト ベースの領域全体で使用できます。

ファイルを保存してプロジェクトに追加する

ショートコードの準備ができたら、カスタム テーマまたはプラグイン内に新しいファイルを作成して関数を保存できます。 説明的な名前は、後でこのファイルを見つけるのに役立ちます (例: shortcode-function-hello-world.php).

さて、この新しいファイルについて、プロジェクトの残りの部分に伝えるときが来ました。 テーマで作業している場合、functions.php ファイルにそれを含めたいと思うでしょう。

以下は、get_stylesheet_directory() を使用してテーマにファイルをロードする方法の例です。

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

一方、plugin_dir_url() を使用して、ファイルをプラグインに読み込むと、このようになります。

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

この時点で、あなたの関数は使用できるようになりました!

ショートコードの登録

最後のステップは、Shortcode API に新しいショートコードを登録することです。 これは、add_shortcode 関数で行います。

  1. テキストエディタで使用するショートコード タグ
  2. ショートコードの実行を処理する関数の名前

ショートコード関数の下に、次のコード行を含め、独自の値と一致するように更新します:

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

最初の値はテキストエディタで角かっこ内に置かれます。 2 番目の値は、前の 2 つのステップで記述した関数名と一致します。 両方とも、WordPress コア、テーマ、またはプラグインによって含まれる他のショートコードと干渉しないように、十分にユニークでなければなりません。 WordPress の管理画面にログインし、ショートコードを投稿に追加してみましょう:

これですべてです! この力を使って何を作るかはあなた次第です! さまざまな状況に応じて出力を微調整したい高度な状況では、新しいショートコードを処理するために独自の PHP クラスを書く価値があるかもしれません。

結論

WordPress の投稿とページに複雑な機能を追加することは、ショートコードで簡単にできます。

この記事では、ショートコードを作成するには、次の 3 つの簡単なステップしかないことを学びました。

コメントする