ポートフォリオサイト公開中

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

wp自作テーマの最低限

前回まで

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

記事一覧ページを作る

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

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

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

デモサイト

loop-main.php

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

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

記事カードを作る 記事カードを作る

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

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

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(); ?>

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/

自作ワードプレステーマの最低限を作るシリーズ一覧

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です