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

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。