『タームを一覧表示できるようにしたんだけど、意図していない並びになる』
『解決できる方法があれば知りたい』
こういった疑問に答えます。
本記事の内容
- 自動でターム名と関連する投稿を表示するやり方
Webエンジニア歴2年6ヶ月
WordPressの運営＆立ち上げ70サイト以上かかわっている
こういった私が解説していきます。
1. 自動でターム名と関連する投稿を表示するやり方
この方法ではプラグイン『Category Order and Taxonomy Terms Order』と併せて使います。
大体の流れはこんな感じ。
- その①：管理画面でプラグインの設定をする
- その②：phpファイルにコードを記載する
それでは順番に解説していきます。
その①：管理画面でプラグインの設定をする
画像付きで解説していきます
管理画面にログインしたら、メニュー『プラグイン』から『Category Order and Taxonomy Terms Order』をインストールします。
インストールしたら有効化して、設定画面に入ります。
『設定』⇒『Taxonomy Terms Order』の方は、このプラグインの詳細設定なので特にいじらなくてOKですね。
調整するのは、操作したい投稿の『タクソノミーの並び順』から設定に入ります。
並び順の入れ替えは、タームをドラッグで入れ替えることができるので直観的な操作ができます。
コードの方で昇順、降順は操作できるますが、昇順だと一番上から取得されていきますよ。
『更新』ボタンを押して管理画面での操作は完了です！
その②：phpファイルにコードを記載する
コピペして使えます
表示させたいページのphpファイルに下記コードを入れます。
下記は『よくある質問ページ』の例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?php // タームを順序で取得 $terms = get_terms(array( 'taxonomy' => 'q-a-category', 'hide_empty' => false, 'meta_key' => 'term_order', 'orderby' => 'meta_value_num', 'order' => 'ASC' )); if (!empty($terms) && !is_wp_error($terms)) : foreach ($terms as $term) : ?> <div class="question_about"> <h3><?php echo esc_html($term->name); ?></h3> <?php $args = array( 'post_type' => 'q-a', 'post_status' => 'publish', 'posts_per_page' => -1, 'order' => 'ASC', 'tax_query' => array( array( 'taxonomy' => 'q-a-category', 'terms' => array($term->slug), 'field' => 'slug' ), ), ); $the_query = new WP_Query($args); if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); $title = get_the_title(); $answer = get_field('answer'); ?> <div class="question_item"> <h4><?php if (!empty($title)) { echo esc_html($title); } ?></h4> <div class="answer"> <?php if (!empty($answer)) { echo '<p>' . esc_html($answer) . '</p>'; } ?> </div><!-- /.answer --> </div><!-- /.question_item --> <?php endwhile; endif; wp_reset_postdata(); ?> </div><!-- /.question_about --> <?php endforeach; endif; ?> |
少し長いですが、解説していきます
まず、タームの一覧を取得します。
今回はタクソノミー『q-a-category』からターム一覧を取得しています。
投稿がないタームも『hide_empty』で含めるように調整しました。
『meta_key』、『orderby』では『Taxonomy Terms Order』で設定した値を引っ張ってくるようにしています。
また、『order』でASC(昇順)になるようにしています。
|
1 2 3 4 5 6 7 |
$terms = get_terms(array( 'taxonomy' => 'q-a-category', 'hide_empty' => false, 'meta_key' => 'term_order', 'orderby' => 'meta_value_num', 'order' => 'ASC' )); |
次に、タームが存在しているか確認し、foreachで存在する分繰り返して処理させます。
|
1 2 |
if (!empty($terms) && !is_wp_error($terms)) : foreach ($terms as $term) : |
ある場合には、ターム名をタイトルとして表示。
|
1 |
<h3><?php echo esc_html($term->name); ?></h3> |
そのタームに関連する投稿を取得します。
今回はカスタム投稿タイプ『q-a』としています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$args = array( 'post_type' => 'q-a', 'post_status' => 'publish', 'posts_per_page' => -1, 'order' => 'ASC', 'tax_query' => array( array( 'taxonomy' => 'q-a-category', 'terms' => array($term->slug), 'field' => 'slug' ), ), ); |
投稿をループで表示させています。
今回表示するのは、タイトルとカスタムフィールドの値にしていますが、必要に応じて変えてくださいね。
|
1 2 3 4 5 6 |
$the_query = new WP_Query($args); if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); $title = get_the_title(); $answer = get_field('answer'); |
表示させたい内容をhtmlで出力しています。
|
1 2 3 4 5 6 |
<div class="question_item"> <h4><?php if (!empty($title)) { echo esc_html($title); } ?></h4> <div class="answer"> <?php if (!empty($answer)) { echo '<p>' . esc_html($answer) . '</p>'; } ?> </div><!-- /.answer --> </div><!-- /.question_item --> |
最後には、投稿データのリセットを忘れずに入れておきます。
|
1 |
<?php endwhile; endif; wp_reset_postdata(); ?> |
長々と説明しましたが、コードの解説は以上になります。
今回はこんな感じで作成しましたが、もしわからない場合はお気軽に聞いてくださいね。
以上、『ターム名と関連する投稿を一覧で自動表示するやり方』をご紹介しました。
ではまた。
