こんにちは朱夏です。
今回もWordPressテーマ作成やっていきます。
前回までで、トップページのデザインはほぼ完成しました。
今回は、投稿ページなどのリンク先が表示できるようにしてくところから始めます。
勉強させていただく動画はこちら。
それではやっていきます。
ファイル分割
ヘッダー、フッターサイドバーの3つの部分を、他のページでも使いまわせるように別ファイルに分割します。
分割する時のファイル名などをまとめておきます。
| 場所 | ファイル名 | テンプレートタグ |
|---|---|---|
| ヘッダー | header.php | <?php get_header(); ?> |
| フッター | footer.php | <?php get_footer(); ?> |
| サイドバー | sidebar.php | <?php get_sidebar(); ?> |
ヘッダー部分をindex.phpから切り取って、header.phpへ張り付け、index.phpへは代わりにヘッダーのテンプレートタグを書きます。
フッター、サイドバーも同様に分割していきます。
1ファイルごとに確認しながら分割していくと、失敗した時修正が楽です。
プレビューで表示がおかしくなってなければ成功です。
投稿記事ページ
投稿記事を表示するためのsingle.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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!-- ヘッダー呼び出し --> <?php get_header(); ?> <!-- ヘッダー呼び出し END --> </header> <!----- ヘッダー END -----> <!----- メインコンテンツ -----> <main class="" style="background-color: beige;"> <div class="container"> <div class="row py-3 m-0"> <div class="col-md-8 col-12 p-3"> <!-- 投稿記事 --> <!-- ループ --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="col-12 px-0"> <div class="p-3 bg-light shadow"> <!-- 記事タイトル --> <h1 class="h2 text-center"><?php the_title(); ?></h1> <!-- カテゴリー --> <p class="text-center mb-0"><?php the_category( ' ' ); ?></p> <!-- 日付 --> <p class="text-center mb-0"><small class="text-muted"><?php the_time('Y/n/j'); ?> <?php the_time('G:i'); ?></small></p> </div> </div> <div class="col-12 py-3 px-0"> <div class="bg-light shadow"> <div> <?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail( '', array( 'class' => 'img-fluid' ) ); ?> <?php else : ?> <img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="card-img" alt="..."> <?php endif; ?> <div class="text-left p-3"><?php the_content(); ?></div> </div> </div> </div> <?php endwhile; else : ?> <p>記事がありません。</p> <?php endif; ?> <!-- ループ --> <!-- 投稿記事 END --> </div> <!-- サイドバー呼び出し --> <?php get_sidebar(); ?> <!-- サイドバー呼び出し --> </div> </div> </main> <!----- メインコンテンツ END -----> <!-- フッター呼び出し --> <?php get_footer(); ?> <!-- フッター呼び出し END --> |
投稿記事を1ページ表示にして、ピックアップの項目を削っています。
表示するとこんな感じになります。
これを1つ作っておくだけで、投稿ページ毎に記事の内容を切り替えてくれます。
これで管理画面から投稿できるようになりました。
固定ページ
固定ページの表示はpage.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 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!-- ヘッダー呼び出し --> <?php get_header(); ?> <!-- ヘッダー呼び出し END --> </header> <!----- ヘッダー END -----> <!----- メインコンテンツ -----> <main class="" style="background-color: beige;"> <div class="container"> <div class="row py-3 m-0"> <div class="col-12 p-3"> <!-- 投稿記事 --> <!-- ループ --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="col-12 px-0"> <div class="p-3 bg-light shadow"> <!-- 記事タイトル --> <h1 class="h2 text-center"><?php the_title(); ?></h1> <!-- カテゴリー --> <p class="text-center mb-0"><?php the_category( ' ' ); ?></p> <!-- 日付 --> <p class="text-center mb-0"><small class="text-muted"><?php the_time('Y/n/j'); ?> <?php the_time('G:i'); ?></small></p> </div> </div> <div class="col-12 py-3 px-0"> <div class="bg-light shadow"> <div> <?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail( '', array( 'class' => 'img-fluid' ) ); ?> <?php else : ?> <img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="card-img" alt="..."> <?php endif; ?> <div class="text-left p-3"><?php the_content(); ?></div> </div> </div> </div> <?php endwhile; else : ?> <p>記事がありません。</p> <?php endif; ?> <!-- ループ --> <!-- 投稿記事 END --> </div> </div> </div> </main> <!----- メインコンテンツ END -----> <!-- フッター呼び出し --> <?php get_footer(); ?> <!-- フッター呼び出し END --> |
こちらは投稿ページと同じですが、サイドバーを削って、記事の部分の横幅を広げています。
実行結果はこんな感じです。
かなりシンプルなデザインになりました。
あとがき
投稿ページと固定ページを作成しました。
これで、だいぶ完成に近づいてきました。
あと残っている作業は、細かい部分の作り込みや、検索結果の表示ページ、404ページを準備したりといったところでしょうか。
今回はここまでです。
次回もよろしくお願いします。
