カスタムフィールドを利用して「オススメ投稿記事一覧」を表示する

オススメ投稿記事一覧表示の解説ページのアイキャッチ

このページでは、カスタムフィールドを利用して「オススメ投稿記事一覧」を表示するプログラムの紹介と、そのプログラムの解説を行います。

まずカスタムフィールドで「オススメ投稿記事」かどうかをチェックボックスで設定できるようにし、

オススメ投稿記事設定を行うカスタムフィールド

チェックボックスが ON の投稿記事を抽出し、抽出した投稿記事の情報を関連記事カードととして表示します。

オススメ投稿記事一覧の表示例

これにより、例えばトップページに「オススメ投稿記事一覧」を表示するようなことができます。

このページで利用するカスタムフィールドについては下記ページで解説しています。

カスタムフィールド追加の解説ページアイキャッチ【ワードプレス】テーマの作り方⑪:カスタムフィールドを追加して設定項目を増やす

カスタムフィールドをご存知ない方、使い方に自信がない方はまずコチラを読んでいただけると、よりオススメ投稿記事一覧の表示方法の解説がわかりやすくなると思います。

「オススメ投稿記事一覧」を表示するプログラム

最初に「オススメ投稿記事一覧」を表示するサンプルプログラムを載せておきます。

変更するファイルは主に3つです。

  • functions.php
  • style.css
  • テンプレートファイル(今回はトップページに表示するので front-page.php)

特に functions.php はプログラム記述を失敗するとページが表示されなくなる可能性がありますので、必ずバックアップをとってから変更してください。

functions.php の変更

functions.php に下記を追記します。

functions.php
<?php
/* カスタムフィールドに表示するHTMLを出力する関数 */
function recommend_setting_field(){
    /* 以前のオススメ投稿記事設定を取得 */
    $before_value = get_post_meta(get_the_ID(), '_my_recommend_setting', true);

    if($before_value == 'on'){
        /* 以前のオススメ投稿記事設定が'on'の場合はチェックをつけた状態で表示 */
        echo '<input type="checkbox" name="my_recommend_setting" value="on" checked="checked">オススメ投稿記事';
    } else {
        echo '<input type="checkbox" name="my_recommend_setting" value="on">オススメ投稿記事';
    }
}
/* オススメ投稿記事設定カスタムフィールドを追加する関数 */
function add_recommend_setting_field(){
    /* カスタムフィールドを追加 */
    /* 第5引数を'side'と設定してサイドに表示 */
    add_meta_box(
        'my_recommend_setting_id',
        'オススメ投稿記事設定',
        'recommend_setting_field',
        'post',
        'side',
        'low',
        null
    );
}

/* add_meta_boxesにフック */
add_action('add_meta_boxes', 'add_recommend_setting_field');

/* オススメ投稿記事設定をメタデータとして保存する関数 */
function save_recommend_setting($post_id){
    /* 自動保存の場合はなにもしない */
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    /* $_POST自体が空の場合は何もしない */
    if (empty($_POST)){
        return;
    }

    /* オススメ投稿記事設定の設定情報を_my_recommend_settingキーに保存 */
    update_post_meta( $post_id, '_my_recommend_setting', $_POST['my_recommend_setting'] );
}

/* save_postにフック */
add_action( 'save_post', 'save_recommend_setting' );

/* サムネを作成するための関数 */
function my_enable_popular_thumbnail(){
    add_theme_support( 'post-thumbnails' );

    /* リサイズ時に 100 x 100 pxのサムネを作成するように設定 */
    add_image_size('popular-thumb', 100, 100, true);
}

add_action('after_setup_theme', 'my_enable_popular_thumbnail');
/* オススメ投稿記事一覧を表示する関数 */
function listup_recommend_post(){

    /* サブクエリの条件を作成 */
    $sub_args = Array(
    /* _my_recommend_setting が ON の投稿記事のみを取得 */
    'meta_key' => '_my_recommend_setting',
    'meta_value' => 'on',

    /* 投稿日に対して降順に整列 */
    'orderby' => 'date',
    'order' => 'DESC',
    );

    /* サブクエリを発行してデータベースからデータ取得 */
    $my_query = new WP_Query($sub_args);

    /* まだオススメ投稿記事がない場合は関数終了 */
    if(!$my_query->have_posts()){
        echo '<p>オススメ投稿記事はありません</p>';
        return;
    }

    /* 見出しを出力 */
    echo '<H2>オススメ投稿記事一覧</H2>';

    /* 取得した投稿データをサブループで表示 */
    while ( $my_query->have_posts() ){
        $my_query->the_post();

        $post_id = get_the_ID();
        /* サムネを表示するHTMLを取得 */
        $image = get_the_post_thumbnail($post_id, 'popular-thumb');
        /* タイトル取得 */
        $title = get_the_title($post_id);
        /* リンク取得 */
        $link = get_the_permalink($post_id);
        /* ページビュー数取得 */
        //$view_count = get_post_meta($post_id, '_my_view_count', true);

        /* 取得した情報を出力 */
        $output = '';
        $output = $output . '<a href="' . $link . '" class="my-card-link">';
        $output = $output . '<div class="my-card">';
        $output = $output . $image;
        $output = $output . '<div class="my-card-content">';
        $output = $output . '<div class="my-card-title">';
        $output = $output . $title;
        $output = $output . '</div>';
        //$output = $output . '<div class="my-card-count">';
        //$output = $output . $view_count . ' views';
        //$output = $output . '</div>';
        $output = $output . '</div>';
        $output = $output . '</div>';
        $output = $output . '</a>';

        echo $output;
    }

    wp_reset_postdata();

}
?>

style.css の変更

style.css に下記を追記します。これで「オススメ投稿記事一覧」の見た目が整います。

style.css
.my-card {
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #888888;
    margin: 10px;
    padding: 10px;
    max-width: 90%;
    overflow: hidden;
    background-color: #fafafa;
}

a.my-card-link {
	text-decoration: none;
	color: #222222;
}

.my-card-title {
	font-size: 1.0em;
    margin-left: 20px;
}
/*
.my-card-count {
    font-size: 0.8em;
    color: #ff8888;
    margin-left: 20px;
}
*/

front-page.php の変更

functions.php で定義した listup_recommend_post 関数を呼び出すことで「オススメ投稿記事一覧」が表示されます。

例えば front-page.php を下記のように作成して listup_recommend_post 関数を呼び出してやれば 、トップページにオススメ投稿記事一覧が表示されるようになります。

front-page.php
<?php
get_header();

echo '<div id="content">';
echo '<h2>トップページです</h2>';

listup_recommend_post();

echo '</div>';
get_sidebar();
get_footer();
?>

動作確認

上記のように functions.php、style.css、front-page.php を変更すると、投稿記事の編集画面の一番右下付近に下のような「オススメ投稿記事設定」が表示されるようになるはずです。

カスタムフィールドが追加される様子

さらに、このオススメ投稿記事にチェックを付けて保存した記事がトップページに一覧として表示されるようになります。

オススメ投稿記事一覧の表示例

ちなみに functions.php と style.css でコメントアウトしている部分はページビュー数を表示するための記述です。

下記ページでページビュー数を表示する人気記事一覧を表示する解説を行っており、下記ページ同様にページビュー数をカウントしている場合は、コメントアウトを外すと「オススメ投稿記事一覧」にページビュー数も表示されるようになります。

同じカテゴリの人気記事一覧ウィジェット解説ページのアイキャッチ「同じカテゴリの人気記事一覧」ウィジェットを自作する

「オススメ投稿記事一覧」を表示する手順

この「オススメ投稿記事一覧」を表示するために、下記のことを行っています。

  • オススメ投稿記事設定を行うカスタムフィールドを追加する
  • 記事一覧に表示するサムネを作成する
  • オススメ投稿記事設定が ON の投稿記事を抽出するサブクエリを発行する
  • サブクエリ発行で取得した投稿データの情報とサムネイルを表示する
  • スタイルを設定する

「オススメ投稿記事設定を行うカスタムフィールドを追加する」は下記の関数で行っています。

  • add_recommend_setting_field
  • recommend_setting_field
  • save_recommend_setting

これらは、下記のカスタムフィールド追加の解説ページで紹介した「サイドバーの非表示設定」とほぼ作りは同じなので、各関数で何を行っているかはコチラを参考にしていただければと思います。

カスタムフィールド追加の解説ページアイキャッチ【ワードプレス】テーマの作り方⑪:カスタムフィールドを追加して設定項目を増やす

「記事一覧に表示するサムネを作成する」「サブクエリ発行で取得した投稿データの情報とサムネイルを表示する」「スタイルを設定する」は下記ページで紹介しているものとほぼ全く同じですので、解説は下記ページを参考にしていただければと思います。

同じカテゴリの人気記事一覧ウィジェット解説ページのアイキャッチ「同じカテゴリの人気記事一覧」ウィジェットを自作する

オススメ投稿記事設定が ON の投稿記事を抽出するサブクエリを発行する

これを行っているのは listup_recommend_post 関数の下記部分です。

/* サブクエリの条件を作成 */
$sub_args = Array(
    /* _my_recommend_setting が ON の投稿記事のみを取得 */
    'meta_key' => '_my_recommend_setting',
    'meta_value' => 'on',

    /* 投稿日に対して降順に整列 */
    'orderby' => 'date',
    'order' => 'DESC',
);

/* サブクエリを発行してデータベースからデータ取得 */
$my_query = new WP_Query($sub_args);

メタデータが特定の値の投稿記事のみを検索(抽出)するためには、WP_Query のインスタンス作成時に指定する引数の連想配列(条件)に下記のように記述します。

$sub_args = Array(
    'meta_key' => 'メタデータのキー',
    'meta_value' => '指定したキーの値',
    /* 〜略〜 */
);

このような条件を指定してサブクエリを発行することで、’meta_key’ で指定したキーの設定値が ‘meta_value’ で指定した値と一致する投稿記事の投稿データのみを取得することが可能です。

上記のプログラムの例だと、オススメ投稿記事設定が ‘on’ の投稿記事の投稿データのみが取得できるので、あとはサブループを使ってそれらの投稿データの情報を出力してやれば、オススメ投稿記事一覧を作成することができます。

スポンサーリンク

まとめ

このページでは「オススメ投稿記事記事一覧」を表示する方法について解説しました。

サンプルプログラムはおそらくコピペするだけで使用することができます。

特に style.css についてはご自身の好みに合わせて変更して使用していただければと思います。

解説に関してはかなり簡単に済ましてしまいましたが、コメント等いただければ不明点や疑問点にお応えできますので、気軽にコメントしていただければと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.172 秒です