記事内に広告が含まれています。

WordPressのページ内に外部HTMLファイルを読み込ませて表示させる方法

Sep 27, 2021

WordPress , コーディング

HTMLで言うiframeのように、ワードプレスのページ内にHTMLファイルを読み込ませて表示させる方法です。
ワードプレスの各パーツはPHPファイルでできていますので、PHPファイルにHTMLファイルを読み込ませて表示する方法です。

プラグインなどを使わずに、意外に簡単にできたのでメモとして記事にします。

0.手順

手順をシンプルに書くとたったの3工程です。

functions.phpにPHPコードを記述
所定の場所に外部ファイルを保存
ページ内にショートコードを記述

では、具体的に説明していきます。

1.functions.phpにPHPコードを記述

PHPコードの前に・・・
functions.phpをいじる際は、下記の注意点に気を付けましょう。

注意1）必ずバックアップをとっておこう！

functions.phpはとても大切なファイルで、ちょっとした記述ミスで不具合というか画面が真っ白になったりします。
functions.phpを編集する際は、その前に絶対にバックアップをとっておくようにしましょう。

注意2）PHPの基本的な記述のルール

PHPスクリプトは開始タグ <?php からはじまり、終了タグ ?> で終わります。開始タグと終了タグの間にPHPスクリプトのコード（命令文、プログラム）を記述します。

 
<?php 
  
  ここにコードを記述
  
  ?>

今回functions.phpにコードを記述しますが、終了タグ ?> の直前に追記するのがおすすめです。
開始タグ <?php と終了タグ ?> の間ならどこでも構いませんが、終了タグ ?>の直前だと、他のコードと混ざらずわかりやすいのでミスが少ないと思います。

いろいろ注意点がありましたが、functions.phpに記述するコードは下記になります。

 

function includeFile($atts) {
 
	if (isset($atts['file'])) {
		$file = $atts['file'];
		return file_get_contents(dirname(__FILE__) . '/' . $file);
	}
 
}
add_shortcode('call-php', 'includeFile');

2.所定の場所に外部ファイルを保存

次にfunctions.phpと同じ階層に読み込ませたいHTMLファイルを保存します。
functions.phpはテーマディレクトリ内にあると思うので、テーマディレクトリ内の同じ階層に保存します。

階層を変えたい時

functions.phpに記述したコードの5行目
return file_get_contents(dirname(__FILE__) . ‘/’ . $file);
の「 ‘/’ 」部分がfunctions.phpと同じ階層を意味しています。

階層を変えたい場合は、ここの記述をfunctions.phpとの相対値で適切なものに変えてください。

読み込ませたい外部ファイルの書き方

表示させたいHTMLコードだけを書きます。
htmlタグやheadタグ、bodyタグなどは不要です。

3.ページ内にショートコードを記述

HTMLファイルを読み込ませたいページに下記のショートコードを記述します。

[call-php file=’読み込ませたいファイルのファイル名’]

例えばsample.htmlというファイルを読み込ませて表示したい場合は、

[call-php file=’sample.html’]

と記述します。

call-phpと名付けたショートコードをページ内に記述することで、functions.phpに記述したコード9行目の
add_shortcode(‘call-php’, ‘includeFile’);
の’call-php’が対応し、関数’includeFile’が実行される、といった作りになっています。

まとめ

上手く読み込ませることが出来たでしょうか。
プラグインを使う方法もありますが、ワードプレスが重くなったりするので、私はなるべくコードを直接書くようにしています。
ただ、functions.phpは、本当にちょっとしたことでエラーになるので、扱いは慎重に。
バックアップを取ってから作業する、という手順は厳守ですね。

この記事がお役に立てるものになっていると嬉しいです。