【WPカスタム投稿】人気記事一覧の上部に、カスタムフィールドで指定した記事を固定する

Web制作

「カスタム投稿で取得した人気記事一覧の上部に、カスタムフィールドで指定した記事を固定したい...!2つの配列を合体させたいのに、array_mergeがうまく機能しない!」そのような方に向けた記事です。

こんにちは。Webコーダーのはるです。

WordPressでプラグインを使わず、カスタムフィールドで指定した記事 + 人気記事一覧 を取得する方法をまとめます。

結論、PHPのarray_mergeを使用して、2つの配列を合体して表示させます!

この記事のゴール

① 「Advanced Custom Fields」プラグインを使用して、記事投稿画面にカスタムフィールドを作成。   

②カスタムフィールドにチェックが入る

③人気記事一覧の上にその記事が固定される。
固定記事(数は可変します)と人気記事は、あわせて5記事になるように設定する。

ここがゴールです。さっそく、解説していきます!

①カスタムフィールドの作成

今回は「Advanced Custom Fields」プラグインを使用して、カスタムフィールドを作成しました。

このプラグインについては、過去記事:【WordPress】カスタムフィールドにチェックをしたらコンテンツを表示させるでも詳しく解説しています!

まず、管理画面から「カスタムフィールド」メニュー > 新規追加でカスタムフィールドを追加します。

・タイトル... カスタムフィールドのタイトル
・フィールドラベル... 記事投稿ページで表示される
・フィールド名... コードで使用する
・フィールドタイプ... 今回は '真偽' を選択します

次に、ページの下部の「フィールドグループを表示する条件」にて、使用するカスタム投稿タイプ名を選択します。今回は'column'というカスタム投稿で使用したいので'コラム投稿'を選びました。

さらに下部の「設定」> 「位置」では、カスタムフィールドを記事投稿ページのどこに表示させるかを設定することができます。今回は、記事エディタの下に設定しました。

②カスタムフィールドにチェックを入れる

実際に、作成したカスタムフィールドにチェックを入れてみます。

固定表示したい記事の編集ページを開きます。

カスタムフィールドにチェックを入れます。

③カスタムフィールドで指定した記事 + 人気記事一覧 を取得する方法

【WordPress】カスタム投稿の人気記事一覧をプラグインなしで実装するで作成したノーマルな人気記事一覧がベースになっています。こちらをカスタマイズしてしていきます。

人気記事出力用の関数

上記の記事よりコードのみ抜粋します。

/* functions.php */

// 人気記事出力用関数
//記事の閲覧回数を計測
function set_post_views($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
/* single.php */
<?php if (!is_user_logged_in() && !is_robots()) {
  setPostViews(get_the_ID());
}?>

カスタムフィールドで指定した記事 + 人気記事一覧を取得

出力したいPHPファイルに記述します。今回は、sidebar.phpに記述しました。

/* sidebar.php */

 <?php
    //カスタムフィールドで指定した記事を固定表示
    $pickup_args = array(
        'post_type' => 'column',
        'posts_per_page' => 5,//表示数
        'orderby' => 'meta_value_num',
        'meta_key' => 'post_views_count',
        'order' => 'DESC',
        'meta_query' => array(
             array(
                'key' => 'fixed_pickup',
                'value' => '1'
             )
         ),
     );

   //get_postsで指定したオブジェクトの配列を取得する
   $side_posts = get_posts( $pickup_args );

    //人気記事一覧を取得
    $not_pickup_args = array(
        'post_type' => 'column',
        'posts_per_page' => 5,//表示数
        'orderby' => 'meta_value_num',
        'meta_key' => 'post_views_count',
        'order' => 'DESC',
        'meta_query' => array(
            array(
                'key' => 'fixed_pickup',
                'compare' => 'NOT EXISTS'
            )
        )
    );

   //配列をマージする
   $side_posts = array_merge($side_posts, get_posts($not_pickup_args));
    if($side_posts):?>

    <ul>
       //ループ開始
       <?php
       foreach($side_posts as $index => $post) : setup_postdata($post); ?>
       <li>
       記事の取得内容はは割愛します
       </li>
       <?php
           if($index > 3) break;
           endforeach;
           wp_reset_postdata(); 
       ?>
    </ul>
  //ループ終了
    <?php endif; ?>

・固定記事用と人気記事用の2つの配列をarray_mergeでマージさせる

・'meta_key'は、2配列とも共通で 'post_views_count' にする(人気記事用)

・'meta_query'で、カスタムフィールド'fixed_pickup' の有効・無効を設定する(固定記事用)
→こちらを、'value' ='0' や 'value' = 'false'にすると取得できない... 'compare' = 'NOT EXIST'で取得できました。

<?php
if($index > 3) break;
endforeach;
wp_reset_postdata();
?>

$indexが4になったらループを終了します。今回の例では5記事取得したいので、0,1,2,3,4でbreakです。

これで、うまく表示されました。

投稿数をカスタマイズしたいとき

今回は5記事を例にしましたが、投稿数をカスタマイズしたいときは以下3点を変更します。

①1つ目の配列の'posts_per_page'に表示したい記事数を入力

②2つ目の配列の'posts_per_page'に表示したい記事数を入力

③ループを抜けるbreakに、表示したい記事数 - 1を入力

あとがき

今回のコードについて、Twitterにて小生さん(@shoseeeeeee)にお世話になりました。ありがとうございます!

今日は以上です。

*もりけん塾に所属しています↓

もりけんさん(@terrace_tec)のHPはこちら

タイトルとURLをコピーしました