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

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

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

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

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

チェックボックスが 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 についてはご自身の好みに合わせて変更して使用していただければと思います。

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

6 COMMENTS

ちゃろす

コメント失礼いたします。

カスタムフィールドについて記事を読ませていただいたのですが、実装出来ずに困っている部分があり、お手すきの際にご教授いただければ幸いです。

トップページの記事一覧にカスタムフィールドで設定した値を追加で表示させたいのですが、どのファイル・どの関数にフックさせて良いのか分からずに大変困っています。

希望としては、記事一覧(デフォルト)の記事タイトルの下にカスタムフィールド(2つ)を表示させたいと思っています。
(最初は抜粋に記述して表示させようかと思ったのですが、google検索で表示されるため断念しました。)

かなり調べてもよく分からず、こちらのサイトに辿り着いたので、初歩的な質問でしたら申し訳ございません。

返信する
daeu

ちゃろすさん

コメントありがとうございます!

記事一覧の各タイトルの下にカスタムフィールドを2つずつ表示したいということですよね?

うーん、正直テーマによってやり方は異なりそうです。

フックが用意されていれば良いのですが、用意されていない場合は、テーマのトップページを表示しているファイルのタイトル表示部分をカスタムフィールドが表示できるように変更する必要があるかもしれません。

差し支えなければお使いのテーマ名を教えていただければ、(無料のテーマであればですが)私の方で調べて具体的な変更方法を回答できるかもしれないです。

返信する
ちゃろす

だえうさん、ご回答ありがとうございます!

> 記事一覧の各タイトルの下にカスタムフィールドを2つずつ表示したいということですよね?
→その通りです!

テーマは無料のLuxeritasというものを使用しております。
一応、ファイルをダウンロードしてgrep検索してみたのですが、初学のため良くわかりませんでした…

お手数をおかけして申し訳ありませんが、よろしくお願い致します。

返信する
daeu

ちゃろすさん

テーマの情報ありがとうございます!

ちょっと調べてみました。
#初期設定時の調査なので、テーマの設定によって状況違うかもしれないです

まず「記事一覧のタイトル」は loop.php の下記★部分で表示されているようです。

<h2 class="entry-title" itemprop="headline name"><a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a></h2> ★
<?php
		unset( $luxe['meta_under'] );
		get_template_part('meta');

さらに get_template_part('meta') 実行時に日付が表示されるようになっているようです。

つまり、記事一覧のタイトルの直後にカスタムフィールドを表示したい場合は、get_template_part('meta') が実行される前に表示してやる必要があります。

したがって、loop.php の★の行よりも後 〜 get_template_part('meta') 実行よりも前の部分でカスタムフィールドを表示してやれば目的は達成できると思います。

ただし、loop.php を変更してしまうとテーマの更新時に上書きされて変更部分が上書きされてしまう場合があります。

幸い get_template_part('meta') の中で get_template_part_meta というアクションフックへのフック関数が実行されるようになっているようです。

なので、子テーマの functions.php に下記のような処理を追記してやることで loop.php を変更することなくカスタムフィールドを表示できるのではないかと思います。

$before_id = -1; /* 前にoutptut_my_metaを実行したときの投稿ID */
function output_my_meta() {
	global $before_id;

	/* 実行するのはホームページのみ */
	if ( is_home() ) {

		/* 投稿ID取得 */
		$post_id = get_the_ID();

		if ( $before_id === $post_id ) {
			/* 既に表示ずみなら何もせず終了 */
			return;
		}

		/* 投稿IDを覚えておく */
		$before_id = $post_id;

		/* カスタムフィールドの値を取得 */
		$meta_data1 = get_the_date(); /* 仮に日付を取得 */
		$meta_data2 = get_the_author(); /* 仮に執筆者を取得 */

		/* カスタムフィールドの値を表示 */
		echo '<p>MetaData1 : ' . $meta_data1 . '</p>';
		echo '<p>MetaData2 : ' . $meta_data2 . '</p>';
	}
}

/* フック */
add_action( 'get_template_part_meta', 'output_my_meta' );

/* カスタムフィールドの値を取得 *//* カスタムフィールドの値を表示 */ の部分はご自身が表示したいように変更してください。
#何度か同じ投稿IDに対して get_template_part_meta へのフック関数実行が行われるようなので、一度しかカスタムフィールドが表示されないように $before_id を用意しています

上記を functions.php に追記することで一応ホームページ表示時の記事一覧のタイトルの直後に投稿日と執筆者を表示できるようになったことは確認済みです。
ですが、他の動作は確認できていないので注意してください。
また functions.php を変更することになるのでバックアップをとってから試すようにしてください。

参考になれば幸いです。

返信する
ちゃろす

だえうさん、テーマまで調べてやり方を教えてくださりありがとうございます!!

記載してくださった内容で、カスタムフィールドの取得を変更するだけで、無事にやりたいことが実装できました(*^^)
ものすごく苦戦していたので、実装することが出来てすごく感動しました!!

すごく分り易く解説してくださり本当に助かりましたし、感謝の気持ちでいっぱいです。
この度は、本当にありがとうございました(*^^)
このご恩にお返しは出来ませんが、だえうさんのTwitterのフォロー&固定ツイをRTさせて頂きました!

今後も、だえうさんのWebページで勉強させて頂きます!

返信する
daeu

ちゃろすさん

Twitterの件ありがとうございました!

上手くいったようでこちらとしても嬉しいです。
苦労していたことが上手くいった時は嬉しいですよね!その気持ち分かります!

また何か困ったことや質問などありましたら気軽にコメントいただければと思います!
よろしくお願い致します。

コメントを残す

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

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