WEBLIC LLC

ブログ

WordPressでショートコードを使って外部PHPファイルを読み込む方法

Web制作

2024年7月12日

WordPress

WordPressでサイトを構築している方には馴染みのあるショートコード。例えばお問い合わせのプラグインで有名なContact Form7を表示させるためのショートコードは以下のようになります。

上記のコードをWordPressの投稿画面に貼り付ければその部分にお問合せフォームが表示されると行った機能です。

今回は外部ファイルのphpをショートコードで読み込む方法を解説します。

手順の説明

ファイルの配置

まず、読み込むPHPファイルをテーマフォルダ内の適切な場所に配置します。今回は、abc.phpファイルをshortフォルダに配置することとします。

テーマフォルダ
└short/
 └abc.php

ルートからのパスは以下のようになります。

/wp-content/themes/your-theme/short/abc.php

functions.phpの編集

次に、ショートコードを定義するために、テーマのfunctions.phpファイルを編集します。以下のコードを追加します。

function load_abc_template() {
    ob_start();
    include(get_template_directory() . '/short/abc.php');
    return ob_get_clean();
}

add_shortcode('abc', 'load_abc_template');

ショートコードの使用

functions.phpにコードを追加したら、投稿や固定ページ内で [abc] と入力するだけで、abc.phpファイルの内容が表示されます。

[abc]

これで、指定した場所にabc.phpが表示されます。

なぜショートコードで外部ファイルを読み込もうと思ったのか

弊社が運用しているこのブログに、特定の記事の指定した場所にCTAバナーを設置したいと考えたのがはじまりです。テンプレートに直接組み込む方法も検討しましたが、以下の理由からショートコードを使用することに決めました。

  • CTAバナーを特定の記事にのみ表示させたい
    • 全ての記事に同じCTAバナーを表示するのではなく、記事の内容に合わせて表示したいバナーを選びたかった。
  • 見出しの数や全体の長さが異なるため、CTAバナーの配置位置が不規則になる
    • 記事によって構成が異なるため、テンプレートに組み込むと固定された位置にしか表示できず、柔軟な配置が難しい。
  • CTAバナーのクリック数やコンバージョン率などのデータを取得しやすくするため
    • コードで管理することで、必要に応じてバナーの内容や表示位置を簡単に変更でき、効果的なマーケティング施策を実行しやすくなる。

このような理由から、ショートコードを使用して外部PHPファイルを読み込み、CTAバナーを柔軟に管理する方法を採用しました。

関連記事

Web制作

Webサイト導線設計の考え方

効果的な導線設計はWebサイトの成功に欠かせません。この記事では、Webサイト担当者が、ターゲットに...

2023年11月28日

Web制作

HTTPS(常時SSL)が必要なワケ

GoogleはHTTPSのサイトを優遇すると発表をして数年経ちますが、これからは大企業のみならず、中...

2017年1月23日

Web制作

TwitterでOGP画像が表示されない時の対処法

Twitterで記事をシェアしたときに、期待したOGP画像が表示されないことはありませんか?この記事...

2023年8月1日

Web制作

JavaScriptで作られたページはGoogleにインデックスされるの?

Google検索エンジンはどこを見ているの?ソースとDOMの違いWebページには"ソース"と"DOM...

2024年11月7日

Web制作

障害者差別解消法の改正法案にみるウェブアクセシビリティ

2024年4月からは、民間のウェブサイトに関しても、障害のある人を含むすべての人が情報にアクセスしや...

2024年2月26日

  • カテゴリー

  • 本日、 2人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社