前提・実現したいこと
wordpressの固定ページに投稿記事をカードで作成し、そのカード(投稿記事)をget_permalink()をで囲みたいです
投稿記事が1ページに10個表示するようにしたいために、Phpのループを使用しています。vscodeではaタグで囲まれているようになっているのですが、検証ツールで確認すると記事のthumbnailの画像までしか囲まれていない。
aタグが表示される場所の場所が、エディター上と違う場所に入っている
ループに関しての知識があまり何ので、アドバイスいただけたら嬉しいです!
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
・Phpのループ内のaタグ(get_permalink())が表示される場所が、エディター上と検証ツールで違う場所に入っている ・投稿記事をget_permalink()で囲めない
該当のソースコード
HTML
1<?php 2 3/** 4 * Template Name: トップページ 5 * @package WordPress 6 * @Template Post Type: post, page, 7 * @subpackage I'LL 8 * @since I'LL 1.0 9 */ 10get_header(); ?> 11<section class="stection__mv"> 12 <h1 class="stection__mv__title"> 13 パンダブログ 14 </h1> 15</section> 16<section class="news-content flex content inner"> 17 <article class="news-content__main flex"> 18 <div class="news-content__main__warp"> 19 <h2 class="news-content__title">新着情報</h2> 20 <div class="flex"> 21 <?php 22 $paged = (get_query_var('page')) ? get_query_var('page') : 1; 23 // 固定ページに特定のカテゴリーを表示 24 $args = array( 25 'post_type' => 'post', 26 'paged' => $paged, 27 'posts_per_page' => 10, /* 表示する記事数を入力 */ 28 'order' => 'DESC' //並び順の指定(降順) 29 ); 30 $the_query = new WP_Query($args); 31 if ($the_query->have_posts()) : 32 ?> 33 34 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 35 36 <a class="card" href="<?php echo get_permalink(); ?>"> 37 <div class="card-skin"> 38 <div class="card__imgframe"> 39 <?php if (has_post_thumbnail()) : ?> 40 <?php the_post_thumbnail('full'); ?> 41 <?php endif; ?> 42 </div> 43 <div class="card__textbox"> 44 <div class="card__overviewtext"> 45 <div class="flex"> 46 <?php the_tags('<ul><li class="tagcloud">', '</li><li class="tagcloud">', '</li></ul>'); ?> 47 <?php echo get_the_date(); ?> 48 </div> 49 </div> 50 <div class="card__titletext"> 51 <?php the_title(); ?> 52 </div> 53 </div> 54 </div> 55 </a> 56 57 <?php endwhile; ?> 58 <?php endif; ?> 59 </div> 60 </div> 61 62<?php wp_pagenavi(array('query' => $the_query)); ?> 63<?php wp_pagenavi(); ?> 64 65 </article> 66 <aside class="news-content__side-bar"> 67 <?php get_sidebar(); ?> 68 </aside> 69</section> 70 71 72<?php get_footer(); ?>
試したこと
・the_post_thumbnailを消した→テキスト部分は囲まれなかった
・aタグにポジションを指定して無理やり上に重ねようとした
・thumbnail部分とタイトル部分に分けてaタグで囲もうとした
↑解決できず
ループの設定か、endifの場所に問題があるのかもしれませんが分かりませんでした
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー