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

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

投稿日:

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

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

ショートコードとは?

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

関連する記事

サムネイル

ContactForm7でreCAPTCHAを設定する【安全……

2024年04月12日
ContactForm7で「安全でないメール設定が十分な防御策なく使われている」というエラーを解消するためにreCAPTCHAを設定した手順を紹介します。
サムネイル

WordPressでサイトマップページを作るプラグイン【WP……

2024年03月07日
サイトマップページを手作業で作ろとすると非常に手間が掛かりますが、WordPressの場合は専用のプラグインが存在するので、あっという間に実装することができます。
サムネイル

【無料レンタルサーバー】XREA FreeでWordPres……

2024年02月01日
「XREA Free」は複数のレンタルサーバーを提供しているGMOグループのひとつであるGMOデジロックが提供するXREA(エクセリア)というレンタルサーバーの無料プランです。
サムネイル

WordPressが使える無料レンタルサーバーおすすめ3選【……

2024年02月01日
最終更新日:2024年04月12日
無料レンタルサーバーはコストを掛けずにWebサイトを運用できるのという点でとても魅力的ですが、デメリットもあるので注意が必要です。
サムネイル

レンタルサーバー不要!WordPress.comの無料プラン……

2024年02月01日
WordPress.comの無料プランを使ってWebサイトを公開する方法をご紹介します。レンタルサーバーなしでWordPress使ったWebサイトを制作・公開・運用できるという手軽さが大きな魅力のサービスです。
サムネイル

WooCommerceとは?特徴やインストール方法を解説【W……

2024年01月05日
WooCommerceはWordPress用のECサイト構築プラグインです。WordPressで作成されたWebサイトにインストールすれば、誰でも簡単にECサイト開設・運営することができます。
サムネイル

ワードプレスでページURLの一覧をCSVで取得する【Expo……

2024年01月05日
ワードプレスでは「Export All URLs」というプラグインを使うと公開中のすべてページのURL一覧を簡単にCSVファイル化することができます。