Wordpressで固定ページの中に投稿記事を表示する（phpコードが利用できる）方法
Wordpressの固定ページ内で投稿記事を表示させる（PHPコードを動作させる）方法をご紹介します。
固定ページに投稿記事のみを出すのではなく、ページ内のHTMLソースに加えて投稿記事も追加するのが主旨です。
プラグインを使う方法と、専用テンプレートとfunctions.phpへ追記する方法があります。
固定ページの中に投稿記事を表示したい
WordpressでTOPページに新着情報などの投稿記事を表示する事がありますよね。
しかし場合によっては、特定の固定ページの中に投稿記事を表示させるケースもあると思います。
本記事では固定ページの中でphpコードが使えるようにし、投稿記事を表示させる方法をご紹介します。
今回のポイント
今回は固定ページに単に投稿記事の一覧だけを出すのではありません。
固定ページ内に投稿記事だけを表示させる場合は「固定ページ 投稿記事 表示」などで検索するとたくさん出てきます。
投稿記事向けに専用の固定ページテンプレート（page-○○〇.php）を用意するパターンが主流ですかね。
page.phpには手を加えない
今回は固定ページの欄に書いたソースの中で投稿表示も表示させるのが主旨です。
ですのでpage.phpテンプレートに対してではなく、中で生成されるソース内に手を加えなければなりません。
固定ページ内でPHPを動かす
方向性としては、固定ページで作られたWEBページにphpで出力された情報を追加表示させる事です。
固定ページの中にはご自身でHTMLソースを入れているはずです。
投稿を表示させるためには、このHTMLソース内にphpコードを埋め込まなければなりません。
固定ページ内ではPHPコードが動かない
しかし通常は固定ページの編集画面の中にphpコードを直接書いても動かないのです。
固定ページ内でPHPコードを動かすためには、プラグインを使う方法とテンプレート（PHP）ファイルを使う方法とがあります。
プラグインを使う方法
PHPコードを動かすプラグインはたくさんありますが、本記事では「Insert PHP Code Snippet」プラグインをご紹介します。
「Insert PHP Code Snippet」プラグインのインストール
まずプラグインの新規追加で「Insert PHP Code Snippet」で検索を掛けます。
表示されたプラグインをインストールし有効化しましょう。
有効化するとWordpress管理画面のメニュー内に「XYZ PHP Snippets」という項目が表示されます。
マウスを合わせて「PHPCode Snippets」をクリックしましょう。
挿入するPHPコードの作成
開いた画面（英語ページです）で、上部にある「Add New PHP Code Snippet」のボタンをクリックしましょう。
「Tracking Name」と「PHP code」の入力ボックスが表示されます。
Tracking Nameはコードの呼び出し名となりますので、半角英数字で決定してください。
ここでは「merit」と設定しています。
PHP codeの欄に投稿を出力するためのPHPコードを書きましょう。
PHPコード例
<?php $wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'post', //カテゴリは特定せず 'posts_per_page'=> '100', //とりあえず100件 ); $wp_query->query( $my_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <div class="team-2-box"> <div class="team-2-pic"> <?php the_post_thumbnail('index_thumbnail'); ?> </div> <div class="team-2-content"> <h5><?php the_title(); ?></h5> <a class="theme-btn" href="<?php the_permalink(); ?>"><span>詳細はこちら</span></a> </div> </div> <?php endwhile; endif; wp_reset_postdata(); ?>
コードの解説
上記コードは特にカテゴリなどは設定せず、投稿記事をそのまま表示する仕様にしています。
記事数はとりあえず100件にしています。
while()の繰り返し処理で、記事のサムネイル画像：the_post_thumbnail('index_thumbnail');と、タイトル：the_title();を表示させるようにしています。
「詳細はこちら」のthe_permalink();で詳細ページに飛ばします。
それ以外のHTMLタグで、表示デザインやレイアウトを調整しています。
※自分のケースにあった形でタグを記述しましょう。
入力した状態
書き終わったら「Create」のボタンを押してコードを作成します。
そうするとmeritの名前で項目が一つできている事がわかります。
項目欄の操作
PHPコード動作のON・OFF
項目欄の2重縦棒マークを押すとチェックマークになり、チェックマークを押すと2重縦棒マークに変わります。
2重縦棒マーク時は、アクティブなのでコードが反映されます。
チェックマーク時は、非アクティブなのでコードが反映されません。
これでコード反映のON・OFFが切り替えられます。
スニペットの編集・削除
その隣の「鉛筆アイコン」を押す事でコードが編集できます。編集が終わったら下の「Update」ボタンを押しましょう。
鉛筆マークの隣が「削除アイコン」で、クリックするとその項目だけが削除されます。
固定ページへのショートコード埋め込み
固定ページの中で今回の投稿記事を表示させるページの編集画面を開きましょう。
固定ページ内ソースの任意の位置に下記のコードを貼ります。
[xyz-ips snippet="merit"]
""の間に先ほどの「Tracking Name」の欄で決定した名称（今回はmerit）を入れましょう。
これで固定ページを更新すれば完了です。
固定ページ内の投稿記事の表示例
実際にPHPによる投稿記事が表示された状態が以下です。
上記の様に、固定ページのHTMLソースにより項目が4列単位で並んでいます。
丸く加工したサムネイルとタイトルおよびボタンをデザインされています。
クライアントからここを投稿記事で追加したいという要望を受けていました。
そこで赤枠の様に、同じデザインで投稿記事が追加できる様にしています。
テンプレートファイルを使う方法
次はプラグインは使わず、専用テンプレート（今回はmerit.php）とfunctions.phpへの追記で実現する方法です。
結果、上記の事例と全く同じように出力されます。
専用テンプレートファイルの作成
まず先ほど紹介した投稿記事用のPHPコードをそのまま、merit.phpという名前で保存しましょう。
投稿記事用PHPコードはこちら
作成したmerit.phpを使っているテーマテンプレート内にUPします。
functions.phpへの追記
次に固定ページ内でPHPコードを動かす設定をするため、functions.phpへ以下を追記します。
//PHP動作用コード function Include_my_php($params = array()) { extract(shortcode_atts(array( 'file' => 'default' ), $params)); ob_start(); include(get_theme_root() . '/' . get_template() . "/merit.php"); return ob_get_clean(); } add_shortcode('myphp', 'Include_my_php');
下から4行目の最後の部分は「"/merit.php"」としています。ここは先ほど作ったphpファイル名が入ります。
最後の行では「myphp」の名前でこのfunctionコードが使える様にしています。
固定ページへのショートコード埋め込み
固定ページの中で投稿記事を表示させたい位置に、以下のコードを入れます。
[myphp file="merit"]
この時""の中は名前のみで、.phpの拡張子は含みませんので注意しましょう。
これでプラグインの時と同様に、固定ページの任意の位置から投稿記事が表示されます。
