• HOME > 
  • WordPress > 
  • ワードプレスでショートコードを使う方法【投稿・固定ページでP...

ワードプレスでショートコードを使う方法【投稿・固定ページでPHPを使う】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年02月05日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

ショートコードとは?

テーマはPHPで構成されているのでヘッダーやフッターといった共通部分ではPHPによる処理が使用できます。

しかし投稿ページや固定ページでは、HTMLやCSS、Javascriptは扱うことができますが、PHPはを動かすことができません。

では、ページの本文中でも現在日時を表示するといったPHPによる処理が必要な場合はどうすればよいのでしょうか?

ショートコードとは、PHPの特定の処理を呼び出すことができるコードのこと

ワードプレスでは、あらかじめ使いたいPHPの処理をショートコードという形で設定しておくことで、に投稿ページや固定ページでもショートコードを本文中に記述することでその処理を呼び出すことができます。

ショートコードを使うメリット

ショートコードを使えるようになれば、以下のようなメリットがあります。

投稿・固定ページでPHPを使える

HTMLやCSS、Javascriptでは行えない処理を本文中で実行することが可能になり、サイトでできる表現の幅が広がります。

面倒な処理や記述も使いまわすことができる

多くのページで何度も利用するような処理はショートコードにしておくことで簡単に使いまわすことができるので作業の効率化につながります。

投稿・固定ページでPHPをショートコード化して扱う方法

新しいショートコードは使用しているテーマのfunctions.phpに記述することで作成できます。

functions.phpとはテーマに機能を追加することができるファイルです。

ここで独自のショートコードを有効化させておくことで、投稿ページや固定ページで使うことが可能になります。

functions.phpへの記述の仕方

functions.phpはテーマエディターを使用して編集します。

ワードプレス管理画面左側のメニューから「外観」の中の「テーマエディター」(WP5.9からはテーマファイルエディター)を開きます。

テーマエディターを開く

使用中のテーマを選び、functions.phpを選択します。

functionsを開く

functions.phpは、テーマの機能をつかさどる役割を持ちます。すでにテーマの制作者によって様々な記述がされていると思います。そこには触れずに末尾に新しいコードを追記していきましょう。

※テーマファイルの編集はサイトに予期せぬエラーを引き起こす可能性があります。必ずバックアップを取って自己責任で行って下さい。

ショートコードは以下のような記述方法で作成します。

記述方法

まず実行したい処理を関数として用意(functionの部分)、そしてその関数を「add_shortcode」でショートコード化するという流れになります。

投稿・固定ページでこのショートコード名を記述することで、PHPの処理を呼び出すことが可能になります。

例えばdate関数を使って今日の日付と現在時刻、曜日を表示させたい場合は次のような記述になります。

functions.php

function sc_get_today(){
        $date = date_i18n('Y年m月d日 H:i:s');
        $week = array('日','月','火','水','木','金','土');
        return $date . '(' . $week[date_i18n('w')]  . ')';
    }
add_shortcode('sc_today','sc_get_today');

関数名・ショートコード名は重複しないように注意

テーマやプラグインでは関数を使用していたり、ショートコードが用意されていたりします。

それらと同じ名前を付けてしまうとエラーになる恐れがありますので、独自の接頭語を付けるなど重複しないような工夫が必要です。

今現在は問題無くても今後使用するテーマやプラグインでは関数名・ショートコード名が使わている可能性もあるので、可能な限りユニークな名称を付けるようにしましょう。

投稿・固定ページでの記述の仕方

ショートコードの準備が整いましたので、投稿・固定ページでショートコードを使っていきましょう。

ショートコードを使うためにはHTMLを編集できる状態に切り替えておく必要があります。

ブロックの「・・・」をクリックして「HTMLに変換」で切り替えます。

HTMLに切替 リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。「ビジュアルエディター」と呼ばれるページ編集機能を使用することで専門知識がなくても画像の配置などを直感的に行いページを作成することができます。...【もっと読む】

ショートコードは[ ] カッコの中にショートコード名を記述して使用します。

ショートコード記述方法

先程のfunctions.phpに記述した例の場合は次のようになります。

HTML

[sc_today]

投稿・固定ページのエディターに記述すると次のようになります。

エディターにショートコードの例

実際にサイトの表示を確認して見ましょう。

プレビュー

プレビュー

本文中にPHPの処理を使った日時の表示を行うことができました。

関数内でechoを使うとエラーになるので注意

ショートコードの関数でechoを使うと、固定ページや投稿ページでショートコードを記述して更新ボタンを押した際にJSONコードエラー「更新に失敗しました。正しいJSONレスポンスではありません。」.というエラーが表示され更新ができなくなります。

echoを使うとエラー

returnを使って値を返し関数の実行を終了させるようにしてください。

まとめ

投稿ページや固定ページでPHPを扱うことができれば、HTMLやCSSだけではできない処理も実現できるので、サイトの表現の幅が大きく広がります。投稿・固定ページのエディターにダイレクトに記述できる訳ではありませんが、ショートコード化することで簡単に使いまわすことができるので複数のページで利用したい処理などをショートコード化しておけば制作の効率アップが可能です。

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPでカスタム投稿タイプを追加してページを分類する方法

2024年12月03日
WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。 カスタム投稿タイプとは? WordPressでは、標 […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]