WordPressのショートコードは、ウェブサイトの投稿やページに特定の機能やコンテンツを簡単に組み込むための強力なツールです。この記事では、ショートコードの作成方法と活用のコツを解説します。
ショートコードとは？
ショートコードは、短いコードを使ってWordPressの投稿やページに特定の機能を追加する方法です。ギャラリー、フォーム、カスタムHTMLなどをシンプルなタグで簡単に追加できます。
シンプルなショートコードの作成方法
ショートコードの関数を定義する
最初に、ショートコードが何を行うのかを定義します。以下は、シンプルな挨拶メッセージを表示するショートコードの例です。
function hello_shortcode($atts) {
return "こんにちは、世界！";
}
add_shortcode('hello', 'hello_shortcode');
ショートコードを使用する
上記のショートコードを投稿やページに追加すると、訪問者に「こんにちは、世界！」と表示されます。
[hello]
ショートコードに属性を追加する方法
属性の設定
ショートコードは属性（parameters）を受け取ることができます。これにより、動的なコンテンツを簡単に生成できます。
function personalized_hello_shortcode($atts) {
$atts = shortcode_atts(
array(
'name' => '世界'
),
$atts,
'personalized_hello'
);
return "こんにちは、" . $atts['name'] . "！";
}
add_shortcode('personalized_hello', 'personalized_hello_shortcode');
このショートコードは、nameという属性をオプションとして受け取り、訪問者の名前に挨拶します。
属性付きショートコードの使用例
以下のようにショートコードを使用すると、指定した名前に挨拶します。
[personalized_hello name="John"]
出力: 「こんにちは、John！」
ショートコードの応用例
ショートコードは、その機能を自在にカスタマイズできるため、WordPressサイトの様々な部分で利用可能です。例えば、特定のカテゴリの投稿リストを表示するショートコードや、ユーザーによって異なるコンテンツを表示するショートコードなど、可能性は無限です。
よくある質問（FAQ）
Q. WordPressでショートコードを作成するにはどうすればよいですか？
A. add_shortcode()で登録します：
add_shortcode("my_button", function($atts, $content){ $atts = shortcode_atts(["color"=>"blue", "url"=>"#"], $atts); return "<a href=\"" . esc_url($atts["url"]) . "\" class=\"btn-" . esc_attr($atts["color"]) . "\">" . esc_html($content) . "</a>"; });。使い方：[my_button color=”red” url=”/page”]テキスト[/my_button]Q. ショートコードで受け取ったパラメータのデフォルト値を設定するにはどうすればよいですか？
A. shortcode_atts()の第1引数にデフォルト値の配列を渡します。ユーザーが指定した値がデフォルトを上書きします。未知のパラメータは無視されます：
$atts = shortcode_atts(["size"=>"medium", "style"=>"default"], $atts, "my_shortcode");Q. ショートコードのXSS対策はどうすればよいですか？
A. ユーザーからの入力（$atts・$content）は必ずエスケープします。URL属性にはesc_url()・HTML属性にはesc_attr()・HTML内テキストにはesc_html()を使います。esc_textarea()はtextarea内のテキスト用です。wp_kses()で許可するHTMLタグを制限することもできます。
まとめ
WordPressのショートコードは、サイトのカスタマイズに非常に便利なツールです。基本的なショートコードから、属性を活用した高度なショートコードまで、独自のニーズに合わせて利用することができます。この機能を活用して、より魅力的で機能豊富なWordPressサイトを構築しましょう。