WordPressのショートコードを活用しよう！ 基本的な使用方法を紹介

WordPressでは、1つのショートコードを何度でも簡単に呼び出すことが可能です。

シリーズ記事に共通の目次を挿入したり、「お問い合わせ」フォームを必要なページにだけ配置したりといった、Webサイト内で繰り返し使用する処理に役立つでしょう。

この「繰り返し使用する」という用途は、WordPressのブロックエディタが備えている「再利用ブロック」にも似ています。

しかし、ショートコードなら、内容が完全に同じではないパーツも表現可能です。

たとえば、複数のページに同じデザインで「お問い合わせ」フォームを配置したいけれど、フォーム内に添えるメッセージはページごとに変えたいという場合にも使えます。

ショートコードの呼び出しは、「コード」と呼ばれる特別なテキストを書くことによっておこないます。

コードの具体的な書き方は、ショートコードごとに異なります。

といっても、コードの基本的な文法はすべてのショートコードに共通です。

はじめて使うときは書き方から理解する必要がありますが、一度覚えてしまえばほかのショートコードも比較的簡単に使えるようになるでしょう。

ショートコードは、単なるテンプレートではありません。

それぞれのショートコードは、Webサーバー上で実行可能なプログラムに変換されるためです。

プログラム内では、込み入ったレイアウトの出力やデータベースの読み書きといった高度な処理もこなせます。

一方、どれほど高度な処理をおこなうショートコードでも、呼び出す際の文法は変わりません。

Webサイト内の複雑な箇所をショートコードで作っておけば、短い記述で呼び出せるため大変便利です。

ショートコードの使い方は一度覚えてしまえば難しくはありませんが、独自のショートコードを作るとなると、ある程度の専門知識が求められます。

ショートコードの処理をおこなうプログラムは、「PHP」というプログラミング言語で記述する必要があるためです。

また、ショートコードのプログラムは、Webページの一部を出力するためのものです。

プログラムを記述する際にはHTMLの基本的な知識のほか、目的によってはCSSやJavaScriptのスキルが必要になることもあるでしょう。

ショートコードのプログラムは、「functions.php」というファイルを直接編集することで作成するのが一般的です。

このファイルはWebサイト全体に影響するものなので、記述ミスがあるとWordPress自体が正しく動かなくなり、すべてのページが真っ白になってしまうこともあります。

そのため、編集作業は慎重におこなわなければなりません。

「自己完結（self-closing）ショートコード」は、呼び出し時に次のような書き方をするショートコードです。

このように、「[」と「]」で囲むのがショートコードの基本的な書き方です。

「name」の部分はショートコード名であり、ショートコードごとに異なるテキストが入ります。

自己完結であることを明示するために、このようにスラッシュ（「/」）を入れても構いません。

ショートコードは、「属性」と呼ばれる形式でパラメータ（任意のデータ）を受け渡すこともできます。

その場合は、次のように記述します。

「arg」の部分は属性の名前であり、ショートコードによって変わります。

ダブルクオート（「"」）で囲まれた部分が、ショートコードに渡されるパラメータの内容です。

このように、2つ以上のパラメータを記述することもできます。

「囲み（enclosing）ショートコード」は、呼び出し時に次のような書き方をするショートコードです。

このように、開始部分と終了部分でテキストを囲みます。

テキストは改行や段落を含む長い文章になっていても構いません。

囲まれたテキストは、ショートコードのプログラムに受け渡されます。

自己完結ショートコードと同様、属性を追加することも可能です。

これにより、プログラムには「属性」と「囲み」の2つの方法でパラメータを与えることができます。

自己完結ショートコードと囲みショートコードの書き方を比べてみると、基本的な文法はそっくりだということがわかるでしょう。

囲みショートコードで囲むべきテキストがないため、終了部分を省略したものが自己完結ショートコードだといえます。

「caption」は、コンテンツにキャプション（注釈）をつけるためのショートコードです。

おもに画像とともに使用します。

このように、HTMLの「img」タグとキャプションを並べて記述し、ショートコードで囲む使い方が一般的です。

なお、ブロックエディタを使用している場合は、投稿や固定ページの編集画面で「画像」ブロックを挿入したときにもキャプションの入力欄が現れます。

これにより、「caption」ショートコードを使わなくても画像にキャプションをつけることができます。

「audio」は、ページ内に音声ファイルを埋め込むためのショートコードです。

このような書式で、「src」属性に音声ファイルのURLを記述します。

メディアライブラリにアップロードしたMP3ファイルなどを再生したいときに便利でしょう。

なお、ブロックエディタを使用している場合は、「音声」ブロックでも音声ファイルを埋め込むことができます。

「embed」は、URLを指定してコンテンツを埋め込むためのショートコードです。

このように、埋め込みたいコンテンツのURLをショートコードで囲みます。

このショートコードは、外部サイトのコンテンツを埋め込みたいときに便利です。

X（旧Twitter）やYouTube、TikTokなど、メジャーなサービスのURLがサポートされています。

ブロックエディタでは、各種サービスに対応した「埋め込み」ブロックを使用してもよいでしょう。

この場合は、ショートコードで囲まずにURLのみを入力します。

「gallery」は、複数の画像を並べてギャラリーとして表示するためのショートコードです。

このような書式で、ギャラリー表示したい画像のIDをカンマ区切りで並べて指定します。

画像のIDは、管理画面内のメディアライブラリで調べることができます。

「添付ファイルの詳細」が表示された状態で、ブラウザのアドレスバーを確認してください。

URLの末尾に見える数字が、表示中の画像のIDです。

なお、ブロックエディタを使用している場合は、「ギャラリー」ブロックでもギャラリーを作成できます。

「playlist」は、音声や動画のファイルを複数指定してプレイリストを作成するためのショートコードです。

「type」属性には、次のいずれかを指定します。

「ids」属性は、プレイリストに含めたい音声または動画ファイルのIDです。

「gallery」ショートコードと同様の方法でIDを調べ、カンマ区切りで指定します。

ブロックエディタでは、「ショートコード」ブロックを使えば入力できます。

「video」は、ページ内に動画ファイルを埋め込むためのショートコードです。

このような書式で、「src」属性に動画ファイルのURLを記述します。

メディアライブラリにアップロードした動画ファイルを埋め込みたいときに便利でしょう。

なお、ブロックエディタを使用している場合は、「動画」ブロックでも動画ファイルを埋め込むことが可能です。

WordPressに組み込み済みの6つのショートコードは、ページ内のどこからでも使用できます。

ここでは、ページを「投稿」と「サイドバー」、「ヘッダーやフッター」の3つのエリアに分けて、それぞれの場所からショートコードを呼び出す方法について説明します。

ある程度の専門知識があれば、WordPressのショートコードは自分で作ることも可能です。

ここでは、ショートコードを作成してから呼び出すまでの方法について説明します。

「functions.php」は、編集をはじめる前にバックアップしておきましょう。

バックアップがあれば、記述ミスでWordPressが動かなくなるといった万が一の場合の備えになります。

また、本記事では「header.php」や「footer.php」などのテンプレートファイルにもショートコードを挿入できることを説明しました。

テンプレートファイルも編集する場合は、テーマをディレクトリごとバックアップしておけばよいでしょう。

自作ショートコードの追加には、「子テーマ」の使用をおすすめします。

現在使用中のテーマを「親テーマ」とし、その機能を引き継いだ新しいテーマを作るのです。

子テーマにより、親テーマを直接編集することなく独自のカスタマイズを進められるようになります。

また、アップデートの影響を受けにくいことも子テーマのメリットです。

テーマ内のファイルに対しておこなった編集は、テーマをアップデート（バージョンアップ）するたびに失われてしまう恐れがあります。

子テーマを使用していれば、親テーマをアップデートしてもカスタマイズした内容が消えてしまうことはありません。

WordPressの子テーマについては、こちらの記事にくわしく解説しています。

「functions.php」などのPHPファイルを編集する際には、記述ミスに気を付ける必要があります。

以下は、PHPにありがちな記述ミスの一例です。

ページが真っ白になるなどのエラーを減らすには、このような単純なミスに注意するとよいでしょう。

通常、PHPのプログラムを記述する際は「<?php」で開始して、「?>」で終了します。

しかし、「functions.php」のようにファイル全体がPHPのプログラムになる場合は、ファイルの先頭に「<?php」とだけ書くのがおすすめです。

ファイルの末尾に「?>」と書く必要はありません。

これは、ファイルの途中に「?>」と書くと、その直後に改行を入れたくなってしまうためです。

PHPのプログラムの外側はHTMLとみなされるため、改行はそのままブラウザに渡され、意図しない空白部分が生じてしまうことがあります。

PHPに限った話ではありませんが、プログラムにはコメントを添えるのがおすすめです。

あとで見たときに何のためのプログラムなのかを思い出せるように、目的や説明を記載しておきます。

自作したショートコードの関数には、呼び出し時の記述例なども書いておくとよいでしょう。

PHPでは、2つのスラッシュ（「//」）のあとから、その行の終わりまでがコメントになります。

コメントは日本語で書いても問題ありません。

「functions.php」の編集後は、必ずブラウザで動作確認をおこないましょう。

「functions.php」はWebサイト全体に影響するファイルなので、思いもよらない部分に異常が発生していることも考えられます。

カスタマイズした覚えがない箇所も含め、表示が正常かどうかチェックすることが大切です。

「WordPress Shortcodes Plugin」は、投稿やサイドバーのほか、ヘッダーやフッターのテンプレートファイル中からも使用できる50種類以上のショートコードを搭載したプラグインです。

美しいボタンやボックス、各種アイコンやQRコードなどを表示できます。

「Shortcode Creator」という有料のアドオン（追加機能）を導入できる点も本プラグインの特徴です。

このアドオンでは、ショートコードエディタを使用してパラメータ付きのショートコードを自作し、Webサイト間でインポート・エクスポートすることができます。

「Arconix Shortcodes」は、ボタンやボックスなどのUI要素を表示するショートコードが利用できるようになるプラグインです。

タブやアコーディオンといった、インタラクティブな要素をページ内に追加することも可能です。

Webサイトでアイコンを表示するサービスとして有名な「Font Awesome」に対応しており、全体的にポップな印象に仕上がっています。

細かい便利機能が搭載されている点も、本プラグインの特徴です。

トップページやログインページへのリンクを表示したり、4桁の「年」付きで著作権表示を挿入したりできるショートコードは、使い所によっては便利でしょう。

「Post Snippets」は、「スニペット」を作成・管理するためのプラグインです。

スニペットとは「断片」という意味をもつ言葉で、ここではWebサイト内で繰り返し利用できるパーツのことを指しています。

本プラグインを利用すれば、管理画面上での操作のみでショートコードを好きなだけ作成し、自分専用のライブラリを構築することができます。

作成したショートコードは、投稿や固定ページから呼び出すことが可能です。

「functions.php」を編集する必要がないので、独自のショートコードを手軽に追加したい場合に便利でしょう。

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。