この記事は公開から8年、最終更新日からも6年経過しています。内容が古くなっている可能性があります。

久しぶりのWeb系、WordPressの記事です。

概要

WordPressのショートコードで外部PHPファイルを読み込む方法の紹介です。また後半では、外部PHPでPC用/モバイル用各々のウィジェットを呼び出す例も紹介しています。

使用例

・投稿記事の途中に定型文や広告コード(PHPファイルに直接記述したものも、テキストウィジェットに記述したものも可能です)を挿入したい。
・投稿記事の途中にブログの最新記事５つのタイトル一覧を表示したい。
などなど。
※プラグイン等を利用することで可能になる場合もありますが、例えば広告を挿入したいが、パソコンとスマホで別サイズの広告を挿入したい時などは便利です。

前提条件

・本投稿でのサンプルコードはテーマ「STINGER5」の子テーマ上に準備しています。
・途中、is_mobile()関数を使用していますが、これは、「STINGER5」に実装されている関数ですので、WordPress全環境での動作は保証しません。WordPress標準でwp_is_mobile()関数は用意されているようです。このあたりは適時読み替えて下さい。

実際に実装した例のURL

・実装例１：オリジナルのショートコード実験１(単純テキスト読み込み) | sample2
・実装例２：オリジナルのショートコード実験(PC/モバイル別にウィジェット読み込む例) | sample2
・実装例３：オリジナルのショートコード実験(最新記事タイトル表示例) | sample2

基本的な実装(単純テキスト出力)

準備１：ショートコードの定義

・functions.phpに任意の文字列で定義されたショートコードを使用可能にするための記述を行います。
・ショートコードを「myphp」とした例を記述します。

//ショートコードを使ったphpファイルの呼び出し方法
function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    //include(get_theme_root() . '/' . get_template() . "/$file.php"); //子テーマ利用の時に動作しないのでコメントアウト
	get_template_part($file,'');	//$fileで取得した外部PHPファイルを読み込みます
    return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');	//'myphp'がショートコードの文字列となります。

準備２：外部PHPファイルの準備

・読み込む外部PHPファイルを準備し、動作させたい処理を記述します。
・ここでは、定型文を挿入することを前提に単純にテキストをechoする例を載せておきます。
・「echo_text.php」というファイル名で準備

<p>
<?php echo '●ここに定型文を記載します'; ?>
</p>

準備３：表示させたい箇所にショートコードを記述します

・投稿本文内などに、準備２で準備したPHPファイルの内容を表示させたい場合は、以下のように記述します。

[myphp file='echo_text']

・下記の’ファイル名’の部分に読み込みたい外部ファイル名を記述します

[myphp file='ファイル名']

・このあと紹介する実際の例では下記のように記述しています。

テスト投稿です
[myphp file='echo_text']
テスト投稿です

以上で準備完了です。

実装例１

・上記を実際に実装した例はコチラです。→オリジナルのショートコード実験１(単純テキスト読み込み) | sample2
・表示例

実装応用編(外部PHPでウィジェットをPC/モバイルにあったウィジェットを読み込む)

応用１ー１：ウィジェットを読み込む外部PHPファイルの準備

・ここでは、パソコンではパソコン用のウィジェット、スマホではモバイル用のウィジェットに定義された内容を表示しています。
・「myphpwidget.php」というファイル名で準備

<div class="myphp-widget">
	  <!--PC用のウィジェット読み込み -->
		<?php  if ( (!is_mobile()) && is_active_sidebar( 'pc-myphp-widget' ) ) { ?>
		<ul class="pc-myphp-widget">
			<?php dynamic_sidebar('pc-myphp-widget'); ?>
		</ul>
		<?php  } ?>
	  <!--mobile用のウィジェット読み込み -->
		<?php  if ( (is_mobile()) && is_active_sidebar( 'mobile-myphp-widget' ) ) { ?>
		<ul class="mobile-myphp-widget">
			<?php dynamic_sidebar('mobile-myphp-widget'); ?>
		</ul>
		<?php  } ?>
</div>

応用１ー２：ウィジェットの準備

・ウィジェットエリアは既に存在していることを前提とし、そのウィジェットにテキストウィジェットを追加し定型文を表示させるための準備です。
　※ウィジェットエリアそのものを追加する方法についてはこちらを参照下さい→[WordPress]フッター(フッタ以外にも応用可能)にウィジェットを追加する方法 #WordPress « curation by nakamurayuji

・ウィジェット’pc-myphp-widget’定義内容

●これはPC用ウィジェットです●
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。

・ウィジェット’mobile-myphp-widget’定義内容

●これはモバイル用ウィジェットです●
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。
ここにショートコードmyphpを利用して挿入したいテキスト、HTML等を記述します。

応用１ー３：投稿への記述

テスト投稿です


[myphp file='myphpwidget']


テスト投稿です

応用１ー４：表示例

・上記を実際に実装した例はコチラです。→オリジナルのショートコード実験(PC/モバイル別にウィジェット読み込む例) | sample2
　※スマホとPC両方でアクセスして頂けると違いがわかるかと思います。

・表示例(PC)

・表示例(スマホ)

●パソコンとスマホで表示内容が異なることがわかると思います。

実装応用編その２(おまけの実装：ブログ最新５記事のタイトル一覧を表示させてみました)

応用２ー１：最新５記事タイトルを読み込む外部PHPファイルの準備

・「new_article_list.php」というファイル名で準備

<ul>
  <?php query_posts('posts_per_page=5'); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li>
    <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
  </li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
</ul>

応用２ー２：投稿への記述

ここから本ブログの最新記事５つのタイトルを表示します。
[myphp file='new_article_list']

応用１ー４：表示例

・上記を実際に実装した例はコチラです。→オリジナルのショートコード実験(最新記事タイトル表示例) | sample2
・表示例

●最新５記事のタイトルが記事内に表示できました

参考サイト

ショートコードを使ったphpファイルの呼び出し方法。 | 小さな会社の経営者の為のWeb集客実践塾
※こちらの参考サイトですと子テーマでは何かしらのカスタマイズが必要になるかと思いますが、とても参考になりました。ありがとうございます！！

最後に

今回、これを使用しようと思った最大の理由は、記事内の任意の位置に広告を表示したいというお客様の要望によるもの。※いつもありがとうございます！
広告ってレスポンシブサイズの広告もあるけれど、やはり、パソコンはパソコン用のサイズで、スマホはスマホ用のサイズで表示したいという要望も多いので、今回の方法はとても役に立ちました。