前回まで

記事一覧ページを作る
今回変更するファイル,フォルダ
- loop-main.php
- index.php
- style.css
- img
記事読了後のデモデザイン
loop-main.php
このloop-main.phpに記事をループ処理で吐き出していくテンプレートを作ります。
記事のデザインは以下の記事を参考にします。

loop-main.phpは現在空なので、以下のコードを書いていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?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に以下のコードを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/*記事カードデザイン*/ .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全文は以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 |
<?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/
自作ワードプレステーマの最低限を作るシリーズ一覧







コメントを残す