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サイトにおけるUIとUXの違い

現代のデジタル時代において、Webサイトは企業の顔とも言える存在です。そのWebサイトの成功は、優れ...

2024年1月9日

Web制作

iPhoneでTwitterのウィジェットがはみ出る…

こんにちは、丹羽です。WEBLICでは様々なお客さんのサイト運用をお手伝いしています。先日弊社がお手...

2016年10月11日

Web制作

ファーストビューに動画を!メリットと注意点の解説

ウェブサイトにおいて、訪問者の最初の印象を決定づけるファーストビューは非常に重要です。静的な画像やテ...

2024年3月7日

Web制作

Dreamweaver CC2017を試してみる

先日アップデートされたAdobe Dreamweaver CC2017を試してみました。まず見違える...

2016年11月14日

Web制作

GoogleドキュメントOCRの力でサイト制作効率アップ!

こんにちは、丹羽です。サイト制作する際に、クライアントから支給された原稿がデータ化されていない場合や...

2023年7月20日

  • カテゴリー

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

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社