WordPressを始める　第９回「ショートコードでPHPを使用する」

「礼」の~IT人材を目指して~
作成：2025/06/15
更新：————-

はじめに

現在、WordPressでWEBサイト構築の勉強をしています。

このサイト自体をWordPressで作成し、勉強の実験台にしています。

そして、勉強の進捗があればその都度、このサイトで、報告しているところです。

これまでの経緯と課題

第４回で、WordPressを構成しているPHPファイルを編集してみました。（→関連記事）

しかし、サイトが表示されなくなる等のリスクが大きいため、別の方法でPHPを使用する方法を検討し、前回は、PHPで作ったプログラムを、iframeタグでWordPress記事に埋め込んでみました。（→関連記事）

iframeはHTMLのタグで、別のWebページを現在のページに表示しています。WordPress内のPHPファイルを直接編集しないため、サイトが表示されなくなる等のリスクが少なくてすみます。

しかし、単に別サイトを表示しているに過ぎないため、そこから、WordPressで使われる、特定の機能やコンテンツを呼び出すことはできません。

今回実施すること

そこで今回は、ショートコードの使用について、調べてみたいと思います。

ショートコードとは

ショートコードとは、あらかじめ用意しておいたパーツをWebサイト中で使えるようにするための、WordPress独自の仕組みのことです。WordPressで使われる、より複雑なコンテンツを簡潔に記述することができます。

ショートコードはいくつでも作ることができ、よく使用する処理を簡単にどこからでも呼び出せます。1つのショートコードを何度でも簡単に呼び出すことも可能です。

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

また、内容が完全に同じではないパーツも表現可能です。

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

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

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

iframeタグとの比較

iframeタグとショートコードの主な違いは次のようになっています。

▼表＿iframeタグとショートコードの主な違い

 

プラグインとの比較

第７回では、「プラグイン」の利用についても試してみました。（→関連記事）

どちらもPHPで書かれていますが、ショートコードは、特定の機能やコンテンツを呼び出すための短いコードで、テーマやプラグインによって提供されます。プラグインは、WordPressの機能を拡張するためのソフトウェアモジュールで、より広範なカスタマイズや機能追加が可能です。

「プラグイン」との違いも比較してみます。

▼表＿プラグインとの比較

項目	ショートコード	プラグイン
役割	特定の機能やコンテンツを呼び出す	WordPressの機能を拡張する
記述場所	記事、固定ページ	WordPress管理画面
提供元	テーマ、プラグイン	WordPress公式ディレクトリ、開発者
カスタマイズ性	限定的（提供元による）	高い（開発者による）

どちらを使うか？という疑問がわきますが状況によって使い分けたり、組み合わせて利用するのが良いようです。

• 簡単な機能追加やコンテンツの挿入には、ショートコードが便利です。
• より複雑な機能追加やサイト全体のカスタマイズには、プラグインが適しています。
• 必要に応じて、ショートコードとプラグインを組み合わせて、ウェブサイトを構築することも可能です。

 

ショートコードは2種類

WordPressのショートコードは、利用シーンによって以下の2種類に分類できます。

1. 「自己完結型ショートコード」
2. 「囲み型ショートコード」

「自己完結型ショートコード」はひとつのショートコードを書くだけで内容が出力されるタイプ。

「囲み型ショートコード」はコンテンツを挟んで出力するタイプです。

 

「自己完結型ショートコード」を書いてみる

それでは、実際にショートコードを書いてみます。

まずは、「自己完結型ショートコード」です。

functions.phpに以下の関数を書きます。functions.phpファイルは、WordPressサイトのコンテンツを管理するwp-contentフォルダの中にあります。具体的には、”wp-content/themes/テーマ名”に格納されています。（cocoonの場合は、子テーマ）

▼functions.phpに記載するコード：

• 「txt_func」が新たに作成した関数
• その後の{}内にショートコードの中身を書きます。
• そして「add_shortcode」関数で「work_txt」というショートコードを登録します。
• 「add_shortcode」関数は、WordPress本体に内蔵されているWordPressの関数で、ショートコードを登録して使える状態にします。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

すると、「~IT人材を目指して~」というテキストが表示されます。

▼結果

~IT人材を目指して~

「囲み型ショートコード」を書いてみる

つぎに「囲み型ショートコード」です。さきほどと同様にfunctions.phpにコードを記載します。

▼functions.phpに記載するコード：

▼解説

• 「box_func」が新たに作成した関数
• $contentで引数を受け取ります。$contentは変数です。PHPの変数は、ドル記号（$）の後に変数名を付けて宣言します。
• その後の{}内にショートコードの中身を書きます。
• 受け取った変数$contentをdivタグで囲います。
• そして「add_shortcode」関数で「dot」というショートコードを登録します。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

すると、さきほどと同じように「~IT人材を目指して~」というテキストが表示されますが、今回は、その周りに点線で枠囲いが施されます。

▼結果

「囲み型ショートコード」に属性を追加する

さきほどの「囲み型ショートコード」に属性を追加してみます。

▼functions.phpに記載するコード：

▼解説

• 「box_color_func」が新たに作成した関数
• その後の{}内にショートコードの中身を書きます。
• $attsをshortcode_attsで属性定義します。
• 配列arrayで’color’ を’red’として定義
• divタグにbackground-colorを追加して、 $atts[‘color’]で背景色を指定
• そして「add_shortcode」関数で「dot_color」というショートコードを登録します。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

すると、さきほどと同じように「~IT人材を目指して~」というテキストが周りに点線で枠囲いが施されて表示されますが、今回は、点線の枠囲いの中の背景色が赤色で表示されます。

▼結果

 

さいごに

以上、今回はWordPressを構成しているPHPファイルを編集してみました。

これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。

 

参考