質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 373

mona1230

score 7

前提・実現したいこと

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;
     }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+2

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

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;
}

ではなく、

#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;
}

としてみてください。


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

.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: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;
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/30 19:30

    あと本題とは直接関係なさそうですけど下記がCSS構文エラーです。 括弧の数があわないので。

    .top-cate-btn label{
    .top-cate-btn label:last-of-type{
    border-right: none;
    }

    キャンセル

  • 2019/12/30 20:00

    早速の回答ありがとうございます!
    cssをご指摘のとおりに直してみましたが、やはりタブの中身は表示されないままでした・・・
    とは言え、ご指摘色々ありがとうございます><

    構文エラーも
    .top-cate-btn label:last-of-type{
    border-right: none;
    }
    のように直したところ、エラーは消えました!ありがとうございます!

    キャンセル

  • 2019/12/30 20:08

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

    修正したあとのCSS記載しておきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • カテゴリーごとの複数タブの切り替え表示を作成しておりますが、タブの中身が表示されません。