ショートコードを使ってWordPressの固定ページに記事一覧を表示する

やりたいこと

・固定ページのhtmlエディタを利用してページを作成
・そのページの好きな場所にニュース記事一覧をひっぱってきたり、カスタム投稿タイプの記事から新着記事一覧を表示したい!
今回は一例として、カスタム投稿タイプの記事一覧(FAQの記事一覧)を固定ページに表示する手順をまとめます。

手順①:固定ページでショートコードが使えるようにする記述をfunctions.phpに記載

/*-------------------------------------------*/
/* 固定ページでショートコードを利用
/*-------------------------------------------*/
function Include_my_php($params = array()) {
    if(is_front_page()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();

    include(get_stylesheet_directory() . "/parts/$file.php");
    return ob_get_clean();
    }
}
add_shortcode('myphp', 'Include_my_php');

/*-------------------------------------------*/

/* 固定ページでショートコードを利用

/*-------------------------------------------*/

function Include_my_php($params = array()) {

if(is_front_page()) {

extract(shortcode_atts(array(

'file' => 'default'

), $params));

ob_start();

include(get_stylesheet_directory() . "/parts/$file.php");

return ob_get_clean();

}

add_shortcode('myphp', 'Include_my_php');

今回は、スタイルシートディレクトリ(現在のテーマ)の中の/parts/ディレクトリの中に、パーツとしてまとめようと思うので、get_stylesheet_directory() . "/parts/$file.phpの記述にしています。
*ここのディレクトリ指定の記述は、自分のテーマに合わせて適宜変更してください。

手順②:固定ページで読み込ませるphpファイルを作成

①/parts/ディレクトリの中に、parts-faq.phpを作成。
②そのファイル内で、カスタム投稿タイプ一覧(FAQ記事一覧)を表示させる記述を記載します。

<?php
$custom_posts = get_posts(array(
    'post_type' => 'faq',
    'posts_per_page' => 3,
    'post_status' => 'publish',
    'taxonomy' => 'faq_type',
    'field' => 'slug',
    'term' => '20', //特定のカテゴリのFAQを表示したいので指定
));
global $post;
if($custom_posts) {
?>
  <?php
  foreach($custom_posts as $post) {
    setup_postdata($post);
  ?>
  <dl>
    <dt>Q: <?php the_title(); ?></dt>
      <dd>
        <p><span><?php the_content(); ?></span></p>
      </dd>
  </dl>
  <?php
  }
  ?>

<?php
wp_reset_postdata();
} 
?>

<?php

$custom_posts = get_posts(array(

'post_type' => 'faq',

'posts_per_page' => 3,

'post_status' => 'publish',

'taxonomy' => 'faq_type',

'field' => 'slug',

'term' => '20', //特定のカテゴリのFAQを表示したいので指定

));

global $post;

if($custom_posts) {

<?php

foreach($custom_posts as $post) {

setup_postdata($post);

<dl>

<dd>

</dd>

</dl>

<?php

}

<?php

wp_reset_postdata();

}

・カスタム投稿タイプ(FAQ)から記事を3件取得
・FAQ記事の中でも、カテゴリidが「20」に所属するFAQのみを表示したいので、指定。
*カテゴリの絞り込みがいらない場合は、’taxonomy’、’field’、’term’の指定はコメントアウトしてもらえればと思います。

手順③:固定ページ側で、記事一覧を表示したい箇所にショートコードを記載

[myphp file='parts-faq']

1	[myphp file='parts-faq']

先ほどparts-faq.phpという名前でphpファイルを保存したので、読み込むファイル名に「parts-faq」を指定します。
保存して該当の固定ページを開くと、固定ページで作っているページにも関わらず、指定した箇所で動的にFAQの記事一覧が取得できています!
あとは、固定ページのデザインにあわせて、好きなようにcssを指定すれば完成です。

汎用的なパーツとして作成すれば、一つの固定ページだけじゃなく、いろんなページでも使いまわせるようになるので、より便利。沢山使う事になりそうなショートコードです。