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つのショートコードが付属します。

  • オーディオ: ウェブサイトに音声ファイルを埋め込みます。再生や一時停止などのシンプルな操作が含まれています。
  • キャプションコンテンツをキャプションでラップします。主に画像キャプションの追加に使用されますが、任意のHTML要素に使用できます。
  • 挿入 : デフォルトのoEmbed機能の展開です。このショートコードを使用すると、最大サイズの設定など、さまざまな属性を埋め込みに設定できます。
  • ギャラリー : サイトにシンプルな画像ギャラリーを挿入します。属性を使用して、使用する画像を定義し、ギャラリーの外観をカスタマイズできます。
  • プレイリスト : この自己完結ショートコードを使用して、オーディオファイルまたはビデオファイルのコレクションを表示します。スタイル属性を使用して、お洒落な「ダーク」モードにすることも可能です。
  • ビデオ: ビデオファイルを埋め込み、簡単なビデオプレーヤーを使用し再生できる機能です。このショートコードは、mp4、webm、m4v、webm、ogv、wmv、flvの形式での動画の埋め込みに対応しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すべての投稿で、フッター、またはコメントセクションの前の位置に、コールトゥアクション(CTA)ボタンを追加したいとします。そんな時には、 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' );
  • shortcode_name: 投稿コンテンツの解析中にWordPressが探すタグです。ショートコードAPIでは、小文字、数字、アンダースコアのみを使用して値を定義することが推奨されます(ダッシュは避けること)。
  • shortcode_handler_function: WordPressが登録済みショートコードの存在を確認した後に実行されるコールバック関数です。

shortcode_handler_functionは次のように定義します。

function shortcode_handler_function( $atts, $content, $tag ){ }
  • $atts: 属性の連想配列(つまり、キーと値のペアの配列)です。属性を定義しないと、デフォルトでは空の文字列になります。
  • $content: 囲みショートコードを定義する場合の、間に挟まれるコンテンツです。$content値が出力に返されるようにするのは、ハンドラー関数の役割です。
  • $tag: ショートコードのタグ(上記の例のshortcode_name)です。2つ以上のショートコードが同じコールバック関数(有効な関数)を共有する場合、$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ファイルに追加して同じ結果を得ることもできますが、お勧めはしません。ただし、テストや学習の目的であれば問題ありません!

プラグインを作成するところから始めましょう。/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 */
?>
  • PHPコメントの@returnタグは、返される出力のタイプを定義します。その後に、簡単な説明が続きます。
  • current_yearは、ショートコードのタグまたは名前です。これは、コンテンツに追加することになる自己完結タグを定義します。この場合、タグは[current_year]になります。
  • salcodes_yearは、出力として文字列を返すショートコードハンドラー関数の名前です。次の行でこのコールバック関数を定義します。単純な自己完結ショートコードを作成しているため、$attributes、$content、$tagなどの変数を渡す必要はありません。
  • salcodes_initは、「init」にフックされるラッパー関数であり、これにより、WordPressの読み込みが完了した後にのみショートコードが登録および実行されるようになります。WordPressに組み込まれているadd_action()関数がこれを可能にします。
  • getdate()は、現在のタイムスタンプからの日付情報の配列を返すPHP関数です。年のキーには、現在の年を意味する値(4桁の文字列)が保持されます。したがって、 getdate()[‘year’]は現在の年を返します。この出力こそが、まさに私たちが望むものです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * [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;
}

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

  • add_shortcode() 関数について、これがどのように機能するのか、前のセクションで扱いました。
  • shortcode_atts() は、ユーザーのショートコード属性と既知の属性を組み合わせるWordPress関数です。必要とあれば(あなた自身で設定可能)、これが、デフォルトの値を規定します。結果は、既知の属性のすべてのキーを含む配列になり、ユーザーの定義したショートコード属性の値とマージされます。
  • ショートコードハンドラー関数内で、変数($a)を定義し、shortcode_atts()によって返される配列に割り当てます。次の構文を使用して、属性にデフォルト値を割り当てます。属性’ => ‘デフォルトの値。たとえば、上のコードでは、‘label’ => ‘Button’の構文で属性ラベルのデフォルト値をボタンに設定しています。
  • 配列のPHP構文$a[‘attribute’]を使用して、各属性キーの値を抽出できます。
  • $output変数には、ボタン要素のHTMLコード(「button」クラスを持つ<a>タグ)が格納されます。関数によって最終的に返されるのは文字列です。

デフォルトのリンクをサイトのホームページ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つの条件を確認します。

  • is_a(): $postWP_Postオブジェクトのインスタンスであるかどうかをチェックします。WordPress内の全ての種類の投稿を参照します。
  • has_shortcode(): 投稿コンテンツに[cta_button]ショートコードが含まれているかどうかをチェックします。

そして、両方の条件が真(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;
}
  • $content = null : これを使うことで、ショートコードを囲みタイプとして登録することができます。ハンドラー関数内で$content変数を使って、あなたの望むように出力を変えられます。
  • $tag =  : ショートコードの$tag変数を定義します。この例では、これを使うことは必須ではありませんが、活用してみるといい練習にはなります。

今回の例では、インライン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');
  • $has_shortcode: ショートコードのいずれかがページ/投稿に存在するかどうかをチェックするユーザー定義の変数です。|| (OR演算子)がこれを可能にします。

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

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

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

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

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

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

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

良い点

  • ショートコードは、WordPressサイトでの複雑な機能の追加を簡素化してくれます。コードを1行入力するだけで、ほとんど何でも追加できます。
  • ショートコードは開発ワークフローを自動化します。特定の機能を挿入するたびに複雑なスクリプトを記述する必要がなくなります。
  • ショートコードは、HTMLコードやPHPスクリプトを追加するよりもユーザーフレンドリーです。
  • ショートコードはプラグイン内でバンドル
  • ショートコードは(特にページで多く使用されると)、エンドユーザーにとって直感的だとは言えません。そのようなケースは、開発者により適しているでしょう。
  • ショートコードを見るだけでは、それがどんな役割を果たしているのかわかりません。そんなわけで、WordPressコアチームはこれを「ミステリーミート埋め込みコード」と命名しています。
  • テーマにバンドルされているショートコードは、テーマを変更すると機能しなくなります。
  • ショートコードは、その構文に関してあいまいです。たとえば、任意のクロージングに対応しているものもあるため、自己完結または囲みのいずれか、またはネストすれば、その両方として使用できます。これが、どれだけの混乱を招くか、想像に難くありません。
  • ショートコードは、タグのコンフリクト(競合)や相互運用性の問題によりHTMLを破壊する可能性があります。サイトのフロントエンドに表示される結果は、素敵なものとは言えません。
  • ショートコードはサーバーに余分な負荷を追加します。ページ/投稿のショートコードの数が増えると、読み込みが増えます。ショートコードが多すぎると、サイトが遅くなります(たとえば、ほとんどのページビルダーによる出力など)。

ショートコードと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〚〛💪 クリックでつぶやく

まとめ

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

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

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

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


手間と費用を節約しながら、サイトパフォーマンスを最大化しませんか?

  • 24時間年中無休で、WordPressに精通したエンジニアが親切丁寧にサポート
  • Cloudflare Enterpriseとの統合
  • 東京、大阪をはじめとする世界35箇所にあるデータセンターから選択可能
  • アプリケーションのパフォーマンス監視機能を使って最適化を徹底

長期契約による縛りはございません。サーバー移行のサポート、30日間の返金保証など、さまざまなサービスが付帯します。お客様にぴったりのプランをご提案いたしますので、営業までお気軽にお問い合わせください。また、プラン一覧はこちらからご確認いただけます