ループ内で使うhtmlタグメモ【WordPress】

Wordpress

HTMLでどのタグを使うべきか？いつも悩みます。

articleなのかul li…??

ということで自分のためのメモ置き場です。クラス名は参考程度にどうぞ。

店舗リスト・事業内容のリストなど(サムネあり)

事業店舗一覧や事業内容などの一覧で使うループ内のコード。

<li class="common-item">
 <a class="common-link" href="<?php the_permalink(); ?>">
  <div class="common-image">
   <?php the_post_thumbnail('common'); ?>
  </div>
  <div class="common-body">
   <p class="name"><?php the_title(); ?></p>
   <p class="caption"><?php the_excerpt(); ?></p>
  <div class="buttonBox">
 　 <button type="button"class="seeDetail">MORE</button>
 </div>
 </div>
 </a>
</li>

記事一覧(サムネあり)

サムネと記事タイトル、抜粋があるカード風デザインの一覧で使うコード。
<article class="article-card">
 <a class="card-link" href="<?php the_permalink; ?>">
  <div class="image">
   <?php
   the_post_thumbnail('middle');
   ?>
  </div>
 <div class="body">
   <div class="title"><?php the_title(); ?></div>
   <div class="excerpt"><?php the_excerpt(); ?></div>
     <div class="buttonBox">
       <button type="button"class="seeDetail">MORE</button>
     </div>
 </div>
 </a>
</article>

投稿記事一覧(サムネなし)

記事タイトルと日時のみのシンプルなアーカイブページで使うループ内のコード。

<a class="news-link" href="<?php the_permalink(); ?>">
  <div class="news-body">
   <time class="release"><?php the_time('Y.m.d'); ?></time>
   <p class="title"><?php the_title(); ?></p>
  </div>
</a>

なんの解説もなくてすいません〜

タイトルとURLをコピーしました