【ド素人OK！】WordPressテーマを自作したので道のりをシェアするよ⑤「動画付き過保護説明」
さて、今回はindex.phpファイルにPHPコードを埋め込んでいきたいと思います！
☆テーマ自作の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのWordPressテーマ自作方法！画像＆動画付き「過保護解説」
【保存版】超初心者のためのWordPressテーマ自作方法！画像＆動画付き「過保護解説」
他のファイルと比べて、たくさんのPHPコードを書いていきますが、出来る限り分かりやすく説明していきますので、ついてきてくださいね(^^)
Contents
if文とwhile文
index.phpには、if文とwhile文が何個か出てきますので、ざっくりおさらいしますね！
if文
条件によって、表示する、しないを決定します。
while文
条件によって、繰り返して表示する、しないを決定します。
実際はもう少し複雑です。。
基本は上記の通りですが、実際に記述していくコードは、当たり前ですが、もう少し複雑なものになります(^_^;)
ただ、お決まりのコードになりますので、覚えてしまってもいいかもしれません。
※動画の中に出てきた「コロン構文」に関しては、下記のブログが分かりやすかったです(^^)
index.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 36 37 38 39 40 41 42 43 44 |
<?php get_header(); ?> <!--header end--> <div id="main-body"> <div id="main-body-left"> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="blogcard"> <?php if(has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/img/default.jpg" width="150" height="150"> <?php endif; ?> <div class="posts"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="info"><?php echo get_the_date(); ?> 【<?php the_category(','); ?>】</div> <p><?php the_excerpt(); ?></p> </div> </div> <?php endwhile; else: ?> <p>記事はありません</p> <?php endif; ?> <div id="prenext"> <div class="pre"><?php previous_posts_link(); ?></div> <div class="next"><?php next_posts_link(); ?></div> </div> </div> <!--mainbody end--> <?php get_sidebar(); ?> <!--sidebar end--> </div> <?php get_footer(); ?> <!--footer end--> |
functions.php
今回functions.phpに追加したコードは下記の通りになります。
|
1 2 |
//アイキャッチ画像の指定 add_theme_support('post-thumbnails'); |
トップページを確認してみましょう！
作ったファイルをいつものようにアップロードし、トップページを確認してみましょう。
アップしている記事が違うので、そこは異なると思いますが、こんな感じになっていたらOKです！
まとめっ！
後は、個別ページ、固定ページ（←コピペで終わりますっ！）と、CSSのクラス名を変えて反映させたら終了！！
次回で完成！！がんばりましょう(^^)
