【記事ページの作成】自作ワードプレステーマの最低限を作る④

前回まで

2019.05.20【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③

記事一覧ページを作る

今回変更するファイル,フォルダ

loop-main.php
index.php
style.css
img

記事読了後のデモデザイン

デモサイト

loop-main.php

このloop-main.phpに記事をループ処理で吐き出していくテンプレートを作ります。

記事のデザインは以下の記事を参考にします。

2019.05.20記事カードを作る

loop-main.phpは現在空なので、以下のコードを書いていきます。

<?php
if(have_posts()):
  while(have_posts()):the_post();
?>
<a href="<?php the_permalink(); ?>" class="blog-card" title="<?php the_title(); ?>">
  <div class="blog-card-content">
    <div class="blog-card-thumbnail">
      <?php if (has_post_thumbnail()) : ?>
      <?php the_post_thumbnail(array( 300, 225 )); ?>
      <?php else : ?>
      <img src="<?php echo get_template_directory_uri() ?>/assets/img/default.jpg" alt="デフォルト画像" />
      <?php endif ; ?>
    </div>
    <div class="blog-card-text">
      <div class="blog-card-title"><?php the_title(); ?></div>
      <span><?php the_excerpt();?><span>
      <div class="blog-card-update-date"><?php the_time( 'Y.m.d' ); ?></div>
    </div>
  </div>
</a>
<?php
  endwhile;
else:
?>
  <?php if(is_search()):?>
    <section style="padding:50px 0 100px;">
　　　　<p>検索結果はありませんでした。</p>
    </section>

  <?php else:?>
    <section style="padding:50px 0 100px;">
　　　　<p>記事はありませんでした。</p>
    </section>
  <?php endif;?>
<?php endif;?>

<?php

if(have_posts()):

while(have_posts()):the_post();

<a href="<?php the_permalink(); ?>" class="blog-card" title="<?php the_title(); ?>">

<?php if (has_post_thumbnail()) : ?>

<?php the_post_thumbnail(array( 300, 225 )); ?>

<?php else : ?>

<img src="<?php echo get_template_directory_uri() ?>/assets/img/default.jpg" alt="デフォルト画像" />

<?php endif ; ?>

</div>

</div>

</a>

<?php

endwhile;

else:

<?php if(is_search()):?>

　　　　<p>検索結果はありませんでした。</p>

</section>

<?php else:?>

　　　　<p>記事はありませんでした。</p>

</section>

<?php endif;?>

style.css

記事カードのスタイリングと軽いフォント設定をします。

style.cssに以下のコードを追記します。

/*記事カードデザイン*/

.blog-card {
  color: #333;
  text-decoration: none;
  display: block;
  border: 1px solid #e8e8ec;
  padding: 20px;
  margin-bottom: 30px;
}

.blog-card:hover {
  background-color: #f5f8fa;
  transition: all .7s ease;
  opacity: 0.6;
}

.blog-card-content {
  display: flex;
}

.blog-card-thumbnail {
  width: 30%;
  margin-right: 20px;
}

img {
  width: 100%;
  height: auto;
}

.blog-card-text {
  width: 65%;
}

.blog-card-title {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 0 0;
}

.blog-card-update-date {
  font-size: 14px;
  text-align: right;
  color: #9799aa;
}

@media screen and (max-width:480px) {
  .blog-card-content {
    display: block;
  }
  .blog-card-text, .blog-card-thumbnail {
    width: 100%;
    margin: auto;
  }
  .blog-card-text p {
    display: none;
  }
}


/*フォントデザイン*/

h1, h2, h3 {
  padding: 10px 10px 15px;
  margin: 15px 0;
}

h2 {
  background-color: #f3f4f5;
  border-radius: 2px;
}

h3 {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #333;
  /*文字色*/
  background: #f3f4f5;
  /*背景色*/
  border-left: solid 5px #333;
  /*左線（実線 太さ 色）*/
}

p {
  padding: 10px 10px 15px;
  margin: 0;
}

/*記事カードデザイン*/

.blog-card {

color: #333;

text-decoration: none;

display: block;

border: 1px solid #e8e8ec;

padding: 20px;

margin-bottom: 30px;

}

.blog-card:hover {

background-color: #f5f8fa;

transition: all .7s ease;

opacity: 0.6;

}

.blog-card-content {

display: flex;

}

.blog-card-thumbnail {

width: 30%;

margin-right: 20px;

}

img {

width: 100%;

height: auto;

}

.blog-card-text {

width: 65%;

}

.blog-card-title {

font-size: 20px;

font-weight: bold;

padding: 15px 0 0;

}

.blog-card-update-date {

font-size: 14px;

text-align: right;

color: #9799aa;

}

@media screen and (max-width:480px) {

.blog-card-content {

display: block;

}

.blog-card-text, .blog-card-thumbnail {

width: 100%;

margin: auto;

}

.blog-card-text p {

display: none;

}

/*フォントデザイン*/

h1, h2, h3 {

padding: 10px 10px 15px;

margin: 15px 0;

}

h2 {

background-color: #f3f4f5;

border-radius: 2px;

}

h3 {

padding: 0.5em;

/*文字周りの余白*/

color: #333;

/*文字色*/

background: #f3f4f5;

/*背景色*/

border-left: solid 5px #333;

/*左線（実線太さ色）*/

}

p {

padding: 10px 10px 15px;

margin: 0;

}

index.php

loop-main.phpをindex.phpに読み込んでいきます。

<?php get_template_part(‘loop’, ‘main’);?>をmain-contentの中に追記するだけでOKです。

追記した後のindex.php全文は以下のようになります。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>インデックスページ</h2>
      <?php get_template_part('loop', 'main');?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>インデックスページ</h2>

<?php get_template_part('loop', 'main');?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

assets/img

loop-main.phpの11行目で、記事カードのデフォルト画像を指定しています。

/assets/img/default.jpg　を指定しているので、そこにdefault.jpgを追加します。

現在のファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
├ footer.php/
├ single.php/
├ page.php/
├ 404.php/
├ search.php/
├ loop-main.php/
└ assets/
・・├ js/
・・├ css/
・・└ img/
・・・・└ default.jpg/