カスタム投稿で追加したページのタクソノミーを一覧表示する方法

WordPress

今回はWordPress(ワードプレス)でカスタム投稿で追加した投稿でカテゴリーやタグ、タームなどのタクソノミー関連の情報を取得して、出力する方法を紹介します。

前回紹介した、カテゴリー一覧表示する方法を何となくでも理解していないと難しいかも知れないです。なので分からない方は以下の記事で予習して下さい。

また今回のも個人的に苦労した部分でしたので、メモ感覚でここに残しています。誰かの役に立てれば幸いです。

カスタム投稿で追加したページを作成

今回、カスタム投稿を追加する方法は、WordPressのプラグインである「Custom Post Type UI」を使用します。

投稿機能を追加するくらいならfunction.phpで簡単ですが、後ほど紹介するタクソノミー関連が難しいですし、管理がめんどくさそうだったので、諦めてプラグインを使いました。

プラグインの使い方は直感的に理解出来ると思うので、ここでは説明しません。

今回は「photo」という名前で投稿機能を追加して「photo_c」という名前のタクソノミーを追加しました。

ここで作成した「photo」の投稿ページを表示させるには「single-photo.php」という名前のファイルを作成します。これだけでphotoのページが完成です。内容は「single.php」を複製して後から書き直せば良いと思います。

先ほどCPI UIで追加した「photo_c」のタクソノミーのページを作成する場合は「taxonomy-photo_c.php」とすれば出来ます。

何故こうなるのか?については説明しないときます。というより、難しいことはそんなに考えてなくて大丈夫です。WordPressはコレだけで細かいページを作成出来る機能が標準でついているということになります。

ここまで出来たら、あとは「投稿」の「カテゴリー」と同じです。以下のような管理画面が出てくるので分類を追加して行って下さい。

カスタム投稿のタクソノミーを一覧表示する

では、このカスタム投稿のタクソノミーを使って一覧表示させます。

「taxonomy-photo_c.php」で追加した分類に「画像カテゴリーA」〜「画像カテゴリーC」までを作成しました。その中で選択したカテゴリーの一覧を表示させます。
(例えば、「画像カテゴリーA」をクリックしたら「画像カテゴリーA」に属する記事のみを表示させるといったことです。)

以下の記事を「taxonomy-○○○.php」にコピペして下さい。コレだけです。

<! – ここからカテゴリ内記事一覧取得 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<! – サムネイル -->
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php echo the_post_thumbnail(); ?>
<?php else: ?>
<img src="ここに代替画像のURL">
<?php endif; ?>
</a>
<! – ここに自由に内容を書いてもOK -->
<?php endwhile; else : ?>
<p>まだ記事がありません</p>
<?php endif; ?>

<! – ページネーション -->

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    )); ?>
</div>

カスタム投稿の関連記事一覧を作成

関連記事を作成したい場合は以下のコードを使って下さい。必ず、先程のページを作成してから行って下さい。

<! – 関連 -->

<?php
  $terms = get_the_terms($post->ID,'photo_c'); //ここにカスタムタクソノミーのスラッグ名を入れる
  foreach( $terms as $term ) {
    $term_slug = $term->slug; // 現在表示している投稿に属しているタームを取得
  }
  $args = array(
  'post_type' => 'photo', // ここに投稿タイプのスラッグを指定
  'post__not_in' => array($post->ID), // 現在表示している投稿を除外
  'posts_per_page' => 10, // 表示件数10件
  'orderby' =>  'rand', // ランダム
  'tax_query' => array( // タクソノミーの指定
    array(
      'taxonomy' => 'photo_c', //ここにカスタムタクソノミーのスラッグ名を入れる
      'field' => 'slug',
      'terms' => $term_slug, // 取得したタームを指定
    ))
  ); $the_query = new WP_Query($args); if($the_query->have_posts()):
?>

<! – 見た目 -->
<div class="container kanrencon mt-5">
<ul class="kanrenul">
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="kannren"></a>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<! – 投稿が無い場合の処理 -->
<?php endif; ?>
</div>
</div>

ざっくり説明すると、photo_cページのカテゴリーを取得してから、photoページで表示している投稿内に現在開いている投稿と同じタームのphoto_cのタクソノミーを表示します。といった意味合いです。

今回の場合はphoto_cタクソノミーで作成した「画像カテゴリーA」に属する以下の投稿ページを開くと、下の方に「画像カテゴリーA」が並ぶようにしています。


以上が「カスタム投稿で追加したページのタクソノミーを一覧表示する方法」でした。

難しいですけど、このレベルが出来ないとWordPressの仕事は貰えないので、諦めずに挑戦してみて下さい。

WordPressphp,Plugin,WP

Posted by KT