【WordPress】カスタム投稿のアーカイブ一覧に表示するタグ一覧を決まった件数でランダムに表示させたい

前提・実現したいこと

カスタム投稿（NEWS）のアーカイブ一覧に出力させているタグ一覧を、ランダムで決まった件数表示させたいです。

1. アーカイブページを開く
2. ランダムでカスタム投稿のタグが10件表示
3. 「その他」ボタンを押すと、カスタム投稿に存在するタグがすべて表示

※2と3でタグを押すと、タグに紐づく投稿記事が表示される想定です。

現在は、archive-news.phpに下記のコードを記載しておりますが、2と3の時点でうまくいっていません。

【2の問題】
news-tagすべてのタグからランダムで10件表示されるのではなく、同じ10件のタグがリロードするごとに順番が変わって表示されるだけになっております。

アーカイブページを開く
10件のタグが表示
リロードすると、最初に表示されたタグの順番が入れ替わり表示（その他のタグは表示されず）

<div class="news__search">

  <div class="other__btn">
    <p>その他</p>
  </div>
  <ul>
    <?php
      $news_terms = get_terms( 'news-tag', Array('number' => 10) );
      shuffle( $news_terms );

      foreach( $news_terms as $term ) {
         echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
      }
    ?>
  </ul>

</div>

【3の問題】
「その他」ボタンを押して全タグが表示される実装に関しては、2つ目のulタグをを追加してみたのですが最初から全タグが表示されるようになってしまい実装方法が不明となっております。

<div class="news_search">

  <div class="other_btn" onclick="searchClick()">
    <p>その他</p>
  </div>
  <ul class="init-display">
    <?php
      $news_terms = get_terms( 'news-tag', Array('number' => 10) );
      shuffle( $news_terms );

      foreach( $news_terms as $term ) {
         echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
      }
    ?>
  </ul>

  <ul class="init-hide">
    <?php
      $example_terms = get_terms( 'example-tag' );
      shuffle( $example_terms );

      foreach( $example_terms as $term ) {
      echo '<li class="init-hide><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
       }
     ?>
   </ul>

<style>
.init-hide {
    display: none;
}
</style>

<script>
function searchClick() {
    var objList = document.getElementsByClassName("init-hide");
    objList[0].style.display = "block";
    var objList = document.getElementsByClassName("init-display");
    objList[0].style.display = "none";

</script>

</div>

お手数ですが、ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

【2の問題】

PHP
1// ↓先頭から10件取得
2$news_terms = get_terms( 'news-tag', Array('number' => 10) );
3// ↓順番をシャッフル
4shuffle( $news_terms );
5```なので「同じ10件のタグがリロードするごとに順番が変わって表示されるだけ」になります。
6
7> 【3の問題】
8
9```PHP
10  <ul class="init-display">
11    <?php
12// ↓全て取得
13$news_terms = get_terms( 'news-tag' );
14// ↓順番をシャッフル
15shuffle( $news_terms );
16// ↓10件表示
17for ( $i = 0 ; $i < 10 ; $i++ ) {
18	echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
19}
20    ?>
21  </ul>
22  <ul class="init-hide">
23    <?php
24// ↓残りを表示
25for ( ; $i < count( $news_terms ) ; $i++ ) {
26	echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
27}
28     ?>
29   </ul>