【WordPress】タクソノミーを利用してオススメ記事のみ取得、表示する

「Custom Post Type UI」を利用すれば簡単に自信で「オススメ」に指定した記事を表示する事ができます。自動で「オススメ記事(つまりは人気の記事)」を表示する場合はその手のプラグインを利用すればよいのですが、あくまで自分で選んだ記事を「オススメ」として表示します。

このサイトも上の写真の赤枠部分のように、「Recommended」として利用しています。

「Custom Post Type UI」を利用する

まず初めに「Custom Post Type UI」プラグインをインストールします。「プラグイン」>新規追加で「Custom Post Type UI」と検索し、インストールします。

「新規タクソノミー」を追加

インストールをすると左側に「CPT UI」というメニューが追加されるので、そこで「タクソノミーの追加と編集」をクリックして「新規タクソノミー」を追加します。

ここで任意の文字列「タクソノミースラッグ」、「複数形のラベル」、「単数形のラベル」を入力します。特に重要なのは「タクソノミースラッグ」で、半角英数字で入力します。ここでは「recommend」としました。「複数形のラベル」、「単数形のラベル」は左メニューに表示される文字列で、日本語で表示する場合は単数も複数もないので同じに「オススメ」としました。

スクロールすると「利用する投稿タイプ」という欄が出てきます。今回は投稿に対して「オススメ」を選択できるようにするので、「投稿(WPコア)」をチェックします。

「設定」の「階層」部分を「真」にする

この「設定」の「階層」部分を「真」にするとタクソノミーがカテゴリー選択のようにチェック形式で選択できるようになります。「偽」のままだとタグ選択のようになるので、今回のようなケースだとチェック形式がベターなため「真」に変更します👍

念のため、「偽(デフォルト)」の場合と「真」の場合の違いを下に掲載します。

「設定」の「階層」部分を「偽(デフォルト)」の場合

「設定」の「階層」部分を「真」の場合

「真」に変更してチェック形式にしておきましょう。

パラメータいろいろありますが今回はこの程度の設定でOKです😅

「新規オススメ」を追加する

「投稿」の中に「カテゴリー」、「タグ」と並んで「オススメ」が設置されているのでクリックします。

本来であれば複数作る事で利用するのですが、今回は単純に「オススメ」記事なのか、そうでないのかという形にはなってしまいます。が、「新規オススメ」を追加して、「オススメ」記事の時にチェックする、という仕様となっています。ここでは、「オススメに表示する」としてみました。名前欄に「オススメに表示する」、スラッグに「recommended」と入力し「新規オススメを追加」をクリックします。

これで準備完了です🤩

新規記事を作成すると、「カテゴリー」、「タグ」の下に「オススメ」が出てきます。「オススメ」の記事には「オススメに表示する」にチェックを入れます。

特定のタームに紐づく投稿一覧を表示

何件かのオススメ記事にチェックを入れたら、表示したい場所で処理をします。私の場合はsingle.phpの一番下で取得、表示をしていますが、ブログトップや固定ページ、何処でもphpファイルに記入すれば取得、表示が可能です。

以下、処理方法です。

<ul>
<?php // 特定のタームに紐づく投稿一覧を表示
$custom_posts = get_posts(
	array(
		'post_type' => 'post', // 投稿タイプの指定
		'posts_per_page' => 4, // 表示件数
		'tax_query' => array(
		array(
			'field' => 'slug',
			'taxonomy' => 'recommend', // タクソノミーのスラッグを指定
			'terms' => 'recommended', // タームのスラッグを指定
			'post_status' => 'publish' // 公開済みの投稿を表示
		)
	)
));
global $post;
if($custom_posts): foreach($custom_posts as $post): setup_postdata($post); ?>
<?php
    $category = get_the_category();
    $cat_id   = $category[0]->cat_ID;
    $cat_name = $category[0]->cat_name;
    $cat_slug = $category[0]->category_nicename;
    $cat_link = get_category_link($cat_id);
?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<p><?php echo $cat_name; ?></p>
<time datetime="<?php echo esc_attr( get_the_date() ); ?>" title="<?php echo esc_attr( get_the_date() ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></time>
<h3><?php the_title(); ?></h3>
</a>
</li>
<?php endforeach; wp_reset_postdata(); endif; ?>
</ul>

今回は通常の投稿から取得するので投稿タイプは「post」です。「オススメに表示する」にチェックが入っている記事の情報を取得し、表示件数の回数繰り返し処理をします。

「オススメ」を投稿一覧に表示する

ついでに、管理画面の投稿一覧に、今回の「オススメ」のチェックが入っているかどうかがわかるように表示をさせようと思います。

上の写真が何もしていない状態です。ここに「オススメ」の欄を追加します。下記コードをfunction.phpに追加します。

function.php
//「オススメ」を投稿一覧に表示する
function add_recommend_column( $defaults ) {
    $defaults['recommend'] = 'オススメ';
    return $defaults;
}
add_filter('manage_post_posts_columns', 'add_recommend_column'); 
 
function add_recommend_column_id($column_name, $id) {
    $terms = get_the_terms($id, $column_name);
    if ( $terms && ! is_wp_error( $terms ) ){
        $recommended = array();
        foreach ( $terms as $term ) {
            $recommended[] = $term->name;
        }
        echo join( ", ", $recommended );
    }
}
add_action('manage_post_posts_custom_column', 'add_recommend_column_id', 10, 2);

投稿一覧に「オススメ」欄が追加されました。

投稿一覧の順序を変更する

先程の状態だと一番右側に追加された状態なので、カテゴリーと日付の間に移動します。

function.php
// 投稿一覧の順序を変更する
function sort_post_column($columns){ 
    $columns = array(
        'cb' => '<input type="checkbox">',
        'title' => 'タイトル',
        'author' => '投稿者',
        'category' => 'カテゴリー',
        'recommend' => 'オススメ',
        'date' => '日付'
    );
    return $columns;
}
add_filter( 'manage_edit-post_columns', 'sort_post_column');

これで順序が入れ替わりました。

「オススメ」記事の絞込機能を追加

この投稿一覧の状態だと、オススメ記事が古くなった場合に探すのが困難ですので、絞込機能を追加します。上の写真の赤枠部分に追加されます。

function.php
// 「オススメ」記事の絞込機能を追加する
function add_term_dropdown( $post_type ) {
    if($post_type == 'post') {
        $term_slug = get_query_var('recommend');
        wp_dropdown_categories(array(
            'show_option_all' => __('オススメ', 'my_theme'),
            'selected'        => $term_slug,
            'name'            => 'recommend',
            'taxonomy'        => 'recommend',
            'value_field'     => 'slug',
        ));
    }
}
add_action('restrict_manage_posts', 'add_term_dropdown', 10, 3);

これで「オススメ」の絞り込み機能が追加されました。

まとめ

いかがでしたでしょうか?今回はパーツの説明でなく「オススメ」記事の取得、表示というのをメインに記事を作ってみたので通常の記事で作ってみました。

「Custom Post Type UI」を利用すれば簡単に「オススメ」記事の取得、表示ができます!タクソノミーを利用すれば、いろいろな可能性があります。

Yuki Nakata

中田デザイン事務所 代表

WEBデザイナー / WEB講師 / 海外販売 他

お仕事のご相談はお問い合わせフォームへお願いします。
事務所概要はコチラ