WordPressのショートコードは、最低限の労力で素敵なことが実装できてしまう、強力な機能。ショートコードを使用すれば、インタラクティブな要素の埋め込みや複雑なページレイアウトの作成であっても、1行のコードを挿入するのと同じくらい簡単になります。

ギャラリーを追加するには、次のコードを入力するだけでOKです。

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

これにより、記載した画像IDのギャラリーが出力されます。4つの列になり、最大サイズは「中」(WordPressの定義に依拠)となります。

ぐちゃぐちゃとHTMLコードを書く必要はありません。

ギャラリーショートコードの例

ギャラリーショートコードの例

ショートコードにより、複雑なスクリプトが不要になります。プログラミングスキルがほとんどない場合でも、動的コンテンツを簡単に追加できます。

コンテンツの自動化とデザインの作成に非常に役立つため、WordPress開発者の間で非常に人気があります。ショートコードはWordPress開発者の、マクロはデータアナリストの、キーボードショートカットはプロのグラフィックデザイナーの相棒のようなもの。

このガイドでは、ショートコードについて知っておくべきすべてを網羅します。独自のショートコードを作成し、ショートコードAPIの使用方法も学びましょう。最後に、ショートコードの将来と、これとWordPressの新しいブロックエディターとの調和について説明します。

準備はいいですか?それでは参りましょう!

ショートコードとは?

簡単に言えば、ショートコード = 「ショートカット」+「コード」です。

通常、ショートコードは角括弧 [] で定義します。各ショートコードは、サイト内で特定の機能を実行します。コンテンツのフォーマットのような簡単な場合もあれば、ウェブサイト全体の構造を定義するような複雑なこともできます。

たとえば、ショートコードを使用して、スライダー、 フォーム、または価格表などを埋め込むことができます。また、使い回せるページデザインのテンプレートを作成することもできます。

簡単なショートコードの変遷

ショートコードは、Ultimate Bulletin Board(UBB)というオンラインフォーラムソフトウェアにより普及しました。1998年、彼らはBBコード (Bulletin Board Code)を導入。これは、言うなれば、ユーザーによる投稿の書式設定を簡単にする、使いやすいタグのコレクションです。

シンプルなBBコードで簡単にフォーマットを調整

シンプルなBBコードで簡単にフォーマットを調整

軽量マークアップ言語であるBBコードは、HTMLと同じ原理で動作しますが、使いこなすのは、はるかに簡単です。

ユーザーがHTMLコードを挿入しセキュリティの脆弱性をもたらす可能性を排除でき、定義済みのタグを使用する方がはるかに安全です。たとえば、悪意のあるユーザーが<script>タグを使用してJavaScriptコードを実行し、サイトの機能を破壊する可能性があります。

そして、すぐ後に、phpBBXMB ForumvBulletinなどの他のオンラインフォーラムソフトウェアが、掲示板にBBコード機能を追加しました。

ショートコードにより、管理者はユーザーができることとできないことをより細かく制御できるようになります。さらに、ユーザーは単純なタグを使用してコンテンツをフォーマットできます。

同じセキュリティ上の理由により、WordPressはPHPコードがサイトコンテンツ内で実行されるのを防ぎます。この制限を克服するために、WordPress 2.5は、 ショートコードAPIのリリースとともに、2008年にショートコード機能を採用することになりました。それ以来、ショートコードは、多くのWordPressプラグイン、テーマ開発者が使用する最も人気の機能の1つとして君臨しています。

WordPressにおけるショートコードとは?

WordPressショートコードとは、フロントエンドで魅力的な何かに魔法のように変身する角括弧 [] です。複雑なHTMLや埋め込みコードの心配をすることなく、複雑なコンテンツを簡単に作成、変更できます。

WordPressのショートコードはシンプルで簡単に使える

WordPressのショートコードはシンプルで簡単に使える

二種類のショートコード

WordPressには、基本的に二種類のショートコードがあります。

自己完結タイプと囲みタイプは属性あり/なしで利用できる

自己完結タイプと囲みタイプは属性あり/なしで利用できる

例:ギャラリーショートコードには、終了タグは必要ありません。必要なものは属性から追加します。

例:キャプションショートコードは、コンテンツのキャプションをラップするために使用します。主に画像にキャプションを追加するために使いますが、どのHTML要素でも機能します。

一部のショートコードは、属性の有無にかかわらず機能します。これについては、どのように定義されているかによります。

デフォルトのWordPressショートコード

WordPressには、デフォルトで6つのショートコードが付属します。

デフォルトのショートコードの使用方法と、これがサポートする属性の詳細については、Codexのドキュメントをご参照ください。

WordPressショートコードの使い方

WordPressショートコードは簡単なプロセスで使用できます。ただし、サイトのどこに追加するかによって、その中身は異なります。ショートコードのドキュメントに目を通して、その仕組みを理解してください。対応する属性を学べば、狙い通りの結果を得ることができます。

ページと投稿でWordPressショートコードを使用する

まずは、ショートコードを挿入するページ/投稿のエディターに移動します。

Gutenbergエディターを使用している場合、スタンドアロンのショートコードブロックにショートコードタグを追加できます。ちなみにこれは「ウィジェット」セクションの中にあります。

Gutenbergでショートコードブロックを追加する

Gutenbergでショートコードブロックを追加する

Gutenbergのショートコード専用ブロック

Gutenbergのショートコード専用ブロック

まだクラシックエディター(またはプラグイン)をお使いでしょうか? ショートコードタグは、もちろん従来の方法でも入力できます。ショートコードによっては、簡単に挿入するためのボタンが、エディター画面に統合されていることもあります。

クラシックエディターでショートコードを追加する

クラシックエディターでショートコードを追加する

サイドバーウィジェットでのWordPressショートコードの使用

ショートコードは、 サイドバーウィジェットにも挿入できます。これを追加するには、「外観」 > 「ウィジェット」に移動し、ショートコードを記載したいセクションに「テキスト」ウィジェットを追加します。

テキストウィジェットでサイドバーにショートコードを追加

テキストウィジェットでサイドバーにショートコードを追加

ショートコードを「テキスト」ウィジェット内に貼り付け、「保存」します。サイトのフロントエンドにアクセスして、サイドバーでショートコードが出力されているか確認しましょう。

ショートコードの出力(ギャラリー)がサイドバーで確認可能

ショートコードの出力(ギャラリー)がサイドバーで確認可能

補足:WordPress 4.8以前のバージョンは、サイドバーウィジェットのショートコードをサポートしていません。詳細については、 WordPress 4.9でのウィジェットの改善をご参照ください。

ヘッダーとフッターでのWordPressショートコードの使用

WordPressショートコードは一般に、ページ、投稿、ウィジェットを対象としています。 しかし、サイトのどこにでもショートコードを挿入する簡単な方法があります。

すべての投稿で、フッター、またはコメントセクションの前の位置に、コールトゥーアクション(行動を促す)ボタンを追加したいとします。そんな時には、 do_shortcode() コールバック関数が便利です。

テーマのheader.php、footer.php、またはそのテンプレートファイルのいずれかに次のコードを追加する必要があります。

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

これにより、コードを挿入した場所にショートコードが出力されます。

ショートコードを呼び出すには、引用符の間に角括弧を記述します。名前を入力するだけでは機能しません。

同様に、 do_shortcode() コールバック関数を使用して、コメントセクションなど、WordPressの好みの場所にショートコードを利用することができます。

ショートコードAPIの簡単な説明

WordPressショートコードAPIは、ショートコードを使用してサイトの機能をカスタマイズ、拡張する方法を定義します。開発者は、関連するショートコードを貼り付けることで、サイトに追加できる独自のコンテンツ(フォーム、カルーセル、スライダーなど)を作成できます。

ショートコードを使用して、想像できるほとんどすべての機能をサイトに追加できます。

APIは、自己完結ショートコードと囲みショートコードの両方に対応しています。あらゆる複雑な解析を処理し、デフォルトの属性を設定、取得するヘルパー関数もこれに含まれています。

APIを活用すれば、作成するすべてのショートコードに対して正規表現を定義して貴重な時間を無駄にすることなく、ショートコードの開発とカスタマイズをすぐさま始めることができます。

ショートコードAPIの基本を理解する

WordPressでページや投稿を開くたびに、サイトのコンテンツ処理中に登録済みのショートコードが検索されます。

登録済みのショートコードが見つかったら、ショートコードAPIが引き継ぎ、ショートコードの出力を返します。そして、返された文字列が、追加場所のショートコードタグと置き換えられます。

add_shortcode()関数を使用して、ショートコードをWordPressに登録します。方法は次のとおりです。

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

ショートコードのハンドラー関数は次のように定義します。

function shortcode_handler_function( $atts, $content, $tag ){ }

APIは、ショートコードのタグ、属性、そして、内側に挟まれたコンテンツ(もし該当する場合)を解析し、値をハンドラー関数に渡します。ハンドラー関数がそれを処理し、出力される文字列を返します。

この出力される文字列が、フロントエンドのショートコードマクロを置き換えることになります。最終的にブラウザに表示されるのは、この出力です。

カスタムショートコードスクリプトを追加する場所

カスタムショートコードスクリプトは、テーマのfunctions.phpファイルに追加するか、プラグインに加えることができます。

テーマファイルに追加する場合は、add_shortcode() 関数をそのまま実行できます。

一方で、プラグインに追加する場合は、WordPressが完全に読み込まれた後にのみ初期化することをお勧めします。別の関数内でadd_shortcode() 関数をラップすることにより、これを保証できます。ちなみに、これはラッパー関数と呼ばれます。

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

add_action() 関数は、shortcodes_init 関数をフックして、WordPressの読み込みが完了した後にのみ作動します(これは「init」フックと呼ばれています)。

WordPressでカスタムショートコードを作成する方法(初心者レベル)

基本を総ざらいしましたので、カスタムショートコードを作成してみましょう。

以下の手順を実行するためには前提として、PHPコードの操作とWordPressテーマファイルの編集に精通している必要があります。チュートリアルを終える頃には、最初のカスタムWordPressショートコードを実行する準備ができているはずです!

可能な限り単純なショートコードから始めて、より複雑なショートコードに向かって進みます。ショートコードの達人になるまでの最短距離をお楽しみください!

例1: [current_year]を使ったショートコード

ウェブサイトの現在の年を出力する[current_year]というショートコードを作成しましょう。

このショートコードは、毎年更新する必要があるコンテンツをウェブサイトに追加する場合に役立ちます。たとえば、サイトのフッターにコピーライトを追加など。

ここでは、ベアボーンのプラグインを使用して、ショートコード関数を追加します。テーマのfunctions.phpファイルに追加して同じ結果を得ることもできますが、お勧めはしません。ただし、テストや学習の目的であれば問題ありません!

Info

サイトに変更を加える前にバックアップを取りましょう。ちなみにKinstaは、 すべての顧客に対して自動バックアップを提供しています

プラグインを作成するところから始めましょう。/wp-content/plugins/ ディレクトリに新しいフォルダーを作成します。

プラグインディレクトリの場所に注目

プラグインディレクトリの場所に注目

今回はプラグインに「salcodes」という名前を付けていますが、好きな名前を付けることができます。

salcodesプラグインディレクトリで、同じ名前のPHPファイル(salcodes.php)を作成します。完了したら、プラグインのファイルに次のヘッダーを追加します。

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

こんな単純なプラグインヘッダーは、この目的を果たすには十分です。プラグインヘッダーの要件については、WordPress Codexから詳しく確認できます。このファイルを保存してから、WordPressダッシュボードに移動してプラグインを有効化します。

それでは、ショートコードとそのハンドラー関数を登録しましょう。そのためには、プラグインファイルに次のコードを追加してください。

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

プラグインファイルを保存します。この段階で、ショートコードが意図したとおりに機能するかどうかをテストしましょう。

サイトの任意の場所(ページ、投稿、サイドバーウィジェットなど)にショートコードを追加します。下の例では、サイドバーのテキストウィジェットに追加しています。

サイトに追加してカスタムショートコードをテスト

サイトに追加してカスタムショートコードをテスト

そして予想通り、問題なく機能しています。

「年」ショートコードの出力

「年」ショートコードの出力

最初の仕事が完了しました、おめでとうございます!

作成したショートコードには、それに関連付けられた$attributes$content変数がありません。次の例でこれらの使用方法を学びます。

例2: CTAボタンのショートコード

カスタマイズできるCTA(コールトゥーアクション)ボタンショートコードを作りましょう。これも、自己完結タイプになります。($contentは、この次の例まで、辛抱強くお待ちください!)

ユーザーがショートコードの属性を使用してCTAボタンのサイズと色をカスタマイズできるようにしましょう。

最終的に出力されるのはボタン要素なので、「href」、「id」、「class」、「target」&「label」などのHTML属性を使用して簡単にカスタマイズできます。

idclass属性も(共通のCSSセレクタなので)利用することができます。

WordPressサイトのホスティング会社が遅いことにうんざりしていませんか?WordPressの専門家による超高速サーバーと24時間年中無休の世界クラスのサポートを提供しています。当社のプラン一覧をご確認ください。

説明を簡単にするために、ここではハンドラー関数をラップしていません。

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

ご覧の通り、なかなかのボリュームです。簡単に理解できるように、行ごとに説明しましょう。

デフォルトのリンクをサイトのホームページURLに設定するには、 home_url() WordPress関数が使用できます。

属性を定義せずに、ショートコードをそのまま使用してみて、何が出力されるか見てみましょう。

サイドバーのテキストウィジェットにショートコードを追加してテスト

サイドバーのテキストウィジェットにショートコードを追加してテスト

I’m adding the shortcode to a sidebar text widget to test it.

二重角括弧が何のためにあるのか、そんな疑問をお持ちでしょうか([[cta_button]])。これはショートコードのエスケープと呼ばれます。以下の図のように、サイトに登録されているショートコードを通常のテキストとして出力するのに役立ちます。

CTAボタンショートコードの出力:期待通りの結果を表示

CTAボタンショートコードの出力:期待通りの結果を表示

属性なしのCTAボタンのHTML出力

属性なしのCTAボタンのHTML出力

ユーザーは、ショートコードを使用してボタンのサイズと色をカスタマイズできます。ハンドラー関数で既にデフォルト値を設定していますが、利用可能なリソースのリストにスタイルシートを登録、エンキューする必要があります。このスタイルシートには、ショートコードで定義したすべてのクラスが含まれている必要があります。

テーマのグローバルスタイルシートでこのクラスを設定することもできますが、個別に読み込むことをお勧めします。こうすることで、もしWordPressのテーマを更新したり、変更したりしても、このクラスがショートコードと共にちゃんと読み込まれます。

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

salcodes_enqueue_scripts()関数は、$postグローバル変数を定義し、以下のように2つの条件を確認します。

そして、両方の条件が真(true)である時、関数が、CSSフォルダー内にあるstyle.cssスタイルシートを登録、エンキューします。plugin_dir_url( $file )関数を使うと、プラグインのディレクトリのURLを取得するのが簡単になります。

ここではCSSコードは紹介しませんが、本セクションの最後にリンク付きで掲載されているソースコードから確認できます。

最後に、投稿に追加して、[cta_button]ショートコードをテストしてみましょう。

カスタムリンク、色、サイズ、ラベル属性に注目

カスタムリンク、色、サイズ、ラベル属性に注目

以下の画像は、フロントエンドでのCTAボタンの様子です。

CTAボタンに新たなURL、色、サイズ、ラベルが追加されました

CTAボタンに新たなURL、色、サイズ、ラベルが追加されました

ここまででカスタム属性を定義し、スタイルを追加する方法を学んだので、他の様々な機能をCTAボタンショートコードに追加することができます。例えば、ユーザーに、アニメーション、ホバーエフェクト、その他のボタンスタイルを追加するオプションが提供できます。

例3: $contentを使用したショートコード

最後の例では、[boxed]という囲みショートコードを作成して、タグ間のコンテンツを、カラフルなタイトルの付されたボックス内に出力しましょう。

ショートコードを登録し、そのハンドラー関数を定義することから始めます。

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

今回の例では、インラインCSSスタイルを使って、コンテンツの修正を行います。

ショートコード内で使用されるクラスのスタイルは、前のの例と同じように登録、エンキューされます。

ただし、2つのショートコードが同じスタイルシートを使用するというケースでは、どちらかが使用される時に、これが読み込まれる必要があります。それでは、 salcodes_enqueue_scripts()関数を更新しましょう。

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

さあ、[boxed]ショートコードを実際にチェックしてみましょう。

title、title_color、color属性と共に囲みショートコードを追加

title、title_color、color属性と共に囲みショートコードを追加

以下のスクリーンショットが出力の結果です。

こんなボックスが簡単に表示できます!

こんなボックスが簡単に表示できます!

ここまでで、独自のショートコードを作成する方法を学習しました。[ボックス]にハマらない想像力で、オリジナルのデザインを考えてみてください。そしてあなたの作った作品を、是非とも私たちに教えてください!

ショートコードプラグインのソースコードをお求めであれば、こちらからご覧ください。

WordPressショートコードの良い点と悪い点

良い点

ショートコードとGutenbergブロック

Gutenbergの導入により、ショートコードの必要性が減りました。ユーザーは、どんなに簡単であっても、ショートコードマークアップを処理するのではなく、エディターインターフェースから直接ブロックを追加できます。

また、ショートコードを追加したい場合には、Gutenbergにはショートコードを追加専用ブロックがあります。つまり「ブロック」が「新しいショートコード」として機能しているのです。

「ショートコードでできることは、ブロックとして実行できる」—James Huff(AutomatticのHappiness Engineer)

すべての人気のショートコードがブロックに変換されている理由はこれです。多くのWordPress開発者は、製品とサービスがブロックエディター(Gutenberg)のみで動作する方向へと移行しています。

しかし、これはショートコードの世界の終わりを意味するわけではありません。WordPressコアチームは、ブロックエディターの多くの改善を約束しています。これはTwenty Twentyで明らかになることでしょう。少なくともそれまでは、ショートコードは、そのままです。

Doing more with less, you say? That's possible with WordPress shortcodes! Learn what they are and how to create your own with this in-depth guide. Life's too short to not use shortcodes〚〛💪Click to Tweet

まとめ

WordPressサイトのどこであっても、ショートコードで簡単に、複雑な機能を追加することができます。入力しやすいタグ(複雑なコードを扱う心配がない)をユーザーに提供するにはうってつけです。

人生にショートカットはありませんが、WordPressには時間を節約できるショートコードがたくさん。そのまま使えるものもあり、私の個人的なお気に入りは、Shortcodes UltimateShortcodes by Angie Makesです。

理想なオプションが見つからない場合は、自分で作成するのがいいでしょう。

Shortcoderプラグインを使用して、もっと気楽にカスタムショートコードを作成することもできます。これが基本的な全てをカバーしてくれます。人生は短いもの–だからこそショートコードをフル活用したいものです。


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。