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

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

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

0.手順

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

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

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

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は、本当にちょっとしたことでエラーになるので、扱いは慎重に。
バックアップを取ってから作業する、という手順は厳守ですね。

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

【番外】WordPress・WEB習得におすすめの本

スポンサーリンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク