カテゴリーごとの複数タブの切り替え表示を作成しておりますが、タブの中身が表示されません。

前提・実現したいこと

wordpressのテーマ「cocoon」でサイトを作成しております。
徐々に記事数を増やし、カテゴリーも複数にわたってきたため、カテゴリー別にタブを作り、トップページを見やすくしようとサイトをリニューアルしようとしています。
javaScriptを使用せず、phpとcssだけでの作成を試みており、
以下の方法を試していますが、タブは表示されるものの、タブの中身が表示されません。
（具体的には、カテゴリー別の新着記事だけでなく、「コンテンツ○をもっと見る」のタブタブの中身が一つ表示されません）

タブの中身だけが表示されないので、phpの何かが違うのかと思い、phpを勉強したり、色々なサイトからヒントを得ようとしておりますが、一週間わからない状態が続いており、ぜひ原因がわかる人がいればご教示いただきたいです。

【方法】
①以下のphpについて、メモ帳で「top.php」というファイルを作成し、FFTPのcocoon子テーマ直下にアップロード。
②cocoonの編集画面で、外観＞カスタマイズ＞追加CSSに以下のCSSコードを入力。
③固定ページ（A）を新規作成し、編集画面のページ属性で「トップページテンプレート」を選択。
④トップページの表示設定で、ホームページの表示から固定ページを選び、さらに③で作成した固定ページ（A）を選択。

【php】

<?php
 /*
 Template Name:トップページテンプレート
  */
 if ( !defined( 'ABSPATH' ) ) exit; ?>
 <?php get_header(); ?>
 <div class="front-top-page top-page">
     <input id="tab1" type="radio" name="tab_item" checked>
     <input id="tab2" type="radio" name="tab_item">
     <input id="tab3" type="radio" name="tab_item">
     <input id="tab4" type="radio" name="tab_item">
     <div class="top-cate-btn">
         <label class="tab-btn" for="tab1">生活</label>
         <label class="tab-btn" for="tab2">娯楽</label>
         <label class="tab-btn" for="tab3">食べ物</label>
         <label class="tab-btn" for="tab4">その他</label>
     </div>

      <div class="tab-cont tb1">
         


  <!-- 1つ目のコンテンツ --> 
         <?php
             $arg = array(
                 'posts_per_page' => 8, // 表示させる件数
                 'orderby' => 'date',
                 'order' => 'DESC',
                 'category_name' => 'living' // カテゴリーの指定（スラッグで指定）
             );

             $posts = get_posts( $arg );
             if( $posts ): ?>
         <div class="list">
             <?php
                 foreach ( $posts as $post ) :
                 setup_postdata( $post ); ?>
                     <?php get_template_part('list-card'); ?>
             <?php endforeach; wp_reset_postdata(); ?>
         </div>
         <?php endif; ?>
         <div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
         <!-- リンクのアドレスを任意の物に -->
             <a href="<?php bloginfo('url') ?>/category/○○" class="btn btn-l btn-circle"  
target="_self">コンテンツ1をもっと見る</a>
         </div>
      </div>
      <div class="tab-cont tb2">
         <!-- 2つ目のコンテンツ -->
         <?php
             $arg = array(
                 'posts_per_page' => 8, // 表示させる件数
                 'orderby' => 'date',
                 'order' => 'DESC',
                 'category_name' => 'goraku' // カテゴリーの指定（スラッグで指定）
             );
             $posts = get_posts( $arg );
             if( $posts ): ?>
         <div class="list">
             <?php
                 foreach ( $posts as $post ) :
                 setup_postdata( $post ); ?>
                     <?php get_template_part('list-card'); ?>
             <?php endforeach; wp_reset_postdata(); ?>
         </div>
         <?php endif; ?>
         <div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
         <!-- リンクのアドレスを任意の物に -->
             <a href="<?php bloginfo('url') ?>/category/○○" class="btn btn-l btn-circle"  
target="_self">コンテンツ3をもっと見る</a>
         </div> 
     </div>


      <div class="tab-cont tb3">
         <!-- 3つ目のコンテンツ -->
         <?php
             $arg = array(
                 'posts_per_page' => 8, // 表示させる件数
                 'orderby' => 'date',
                 'order' => 'DESC',
                 'category_name' => '○○' // カテゴリーの指定（スラッグで指定）
             );
             $posts = get_posts( $arg );
             if( $posts ): ?>
         <div class="list">
             <?php
                 foreach ( $posts as $post ) :
                 setup_postdata( $post ); ?>
                     <?php get_template_part('list-card'); ?>
             <?php endforeach; wp_reset_postdata(); ?>
         </div>
         <?php endif; ?>
         <div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
         <!-- リンクのアドレスを任意の物に -->
             <a href="<?php bloginfo('url') ?>/category/○○" class="btn btn-l btn-circle"  
target="_self">コンテンツ3をもっと見る</a>
         </div> 
     </div>

     <div class="tab-cont tb4">
         <!-- 4つ目のコンテンツ -->
         <?php
             $arg = array(
                 'posts_per_page' => 8, // 表示させる件数
                 'orderby' => 'date',
                 'order' => 'DESC',
                 'category_name' => '○○' // カテゴリーの指定（スラッグで指定）
             );
             $posts = get_posts( $arg );
             if( $posts ): ?>
         <div class="list">
             <?php
                 foreach ( $posts as $post ) :
                 setup_postdata( $post ); ?>
                     <?php get_template_part('list-card'); ?>
             <?php endforeach; wp_reset_postdata(); ?>
         </div>
         <?php endif; ?>
         <div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
         <!-- リンクのアドレスを任意の物に -->
             <a href="<?php bloginfo('url') ?>/category/○○" class="btn btn-l btn-circle"  
target="_self">コンテンツ4をもっと見る</a>
         </div> 
     </div>
     <div class="original_cont">
         <!-- 固定ページで作成した内容表示 -->
         <?php the_content(); ?>
     </div>
</div>
<?php get_footer(); ?>

【css】

.top-cate-btn{
     margin: 10px 0 20px;
     border-radius: 5px;
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
     box-shadow: 0 3px 10px -2px rgba(0,0,0,.2);
 }
 .top-cate-btn label{
     width: calc(100% / 4);
     padding: 10px;
     text-align: center;
     background: #eee;
     transition: .5s;
     border-right: 1px solid #ddd;
 }
 #tab1:checked ~ .top-cate-btn label[for="tab1"],
 #tab2:checked ~ .top-cate-btn label[for="tab2"],
 #tab3:checked ~ .top-cate-btn label[for="tab3"],
 #tab4:checked ~ .top-cate-btn label[for="tab4"],
 .top-cate-btn label:hover{
      background: #66cccc
 }
 .top-cate-btn label{ 
 .top-cate-btn label:last-of-type{
     border-right: none;
 }
 .tab-cont,
 input[name="tab_item"]{
     display: none;
 }
 @keyframes show{
     from{
         opacity: 0;
     }
     to{
         opacity: 1;
     }
 }
 tab1:checked ~ .tab-cont.tb1,
 tab2:checked ~ .tab-cont.tb2,
 tab3:checked ~ .tab-cont.tb3,
 tab4:checked ~ .tab-cont.tb4{
     display: block;
     animation: show 1s linear 0s;
 }
 /* スマホ用 */ 
@media screen and (max-width: 768px){
     .top-cate-btn label{
         width: calc(100% / 2);
     }
     .top-cate-btn label:nth-of-type(2){
         border-right: none;
     }
     .top-cate-btn label:nth-last-of-type(n+3){
         border-bottom: 1px solid #ddd;
     }
}

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

回答1件

「チェックしたときにdisplay: blockにする」所のCSSセレクタが間違ってそうです。

css
1tab1:checked ~ .tab-cont.tb1,
2tab2:checked ~ .tab-cont.tb2,
3tab3:checked ~ .tab-cont.tb3,
4tab4:checked ~ .tab-cont.tb4{
5    display: block;
6    animation: show 1s linear 0s;
7}

ではなく、

css
1#tab1:checked ~ .tab-cont.tb1,
2#tab2:checked ~ .tab-cont.tb2,
3#tab3:checked ~ .tab-cont.tb3,
4#tab4:checked ~ .tab-cont.tb4{
5    display: block;
6    animation: show 1s linear 0s;
7}

としてみてください。

追記：修正したあとのCSS全文は下記です。
(構文エラーが合った部分は、.top-cate-btn label{を削除して .top-cate-btn label:last-of-type{ を残してます)

css
1.top-cate-btn{
2    margin: 10px 0 20px;
3    border-radius: 5px;
4    overflow: hidden;
5    display: flex;
6    flex-wrap: wrap;
7    box-shadow: 0 3px 10px -2px rgba(0,0,0,.2);
8}
9.top-cate-btn label{
10    width: calc(100% / 4);
11    padding: 10px;
12    text-align: center;
13    background: #eee;
14    transition: .5s;
15    border-right: 1px solid #ddd;
16}
17#tab1:checked ~ .top-cate-btn label[for="tab1"],
18#tab2:checked ~ .top-cate-btn label[for="tab2"],
19#tab3:checked ~ .top-cate-btn label[for="tab3"],
20#tab4:checked ~ .top-cate-btn label[for="tab4"],
21.top-cate-btn label:hover{
22     background: #66cccc
23}
24.top-cate-btn label:last-of-type{
25    border-right: none;
26}
27.tab-cont,
28input[name="tab_item"]{
29    display: none;
30}
31@keyframes show{
32    from{
33        opacity: 0;
34    }
35    to{
36        opacity: 1;
37    }
38}
39#tab1:checked ~ .tab-cont.tb1,
40#tab2:checked ~ .tab-cont.tb2,
41#tab3:checked ~ .tab-cont.tb3,
42#tab4:checked ~ .tab-cont.tb4{
43    display: block;
44    animation: show 1s linear 0s;
45}
46/* スマホ用 */ 
47@media screen and (max-width: 768px){
48    .top-cate-btn label{
49        width: calc(100% / 2);
50    }
51    .top-cate-btn label:nth-of-type(2){
52        border-right: none;
53    }
54    .top-cate-btn label:nth-last-of-type(n+3){
55        border-bottom: 1px solid #ddd;
56    }
57}

投稿2019/12/30 10:19

編集2019/12/30 11:12

Eggpan

総合スコア2727

Eggpan

2019/12/30 10:30

あと本題とは直接関係なさそうですけど下記がCSS構文エラーです。括弧の数があわないので。 .top-cate-btn label{ .top-cate-btn label:last-of-type{ border-right: none; }

mona1230

2019/12/30 11:00

早速の回答ありがとうございます！ cssをご指摘のとおりに直してみましたが、やはりタブの中身は表示されないままでした・・・とは言え、ご指摘色々ありがとうございます＞＜構文エラーも .top-cate-btn label:last-of-type{ border-right: none; } のように直したところ、エラーは消えました！ありがとうございます！

Eggpan

2019/12/30 11:08

あれ・・手元でcocoonいれてタブ切り替えできること確認したんですけどね・・。カテゴリの記事データはないので「コンテンツ1をもっと見る」などのボタンが表示されること、しか確認はしてないですけども。修正したあとのCSS記載しておきます。

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