自作WordPressテーマ『front-page.php』の作り方
- 自作(オリジナル)WordPressテーマを作成したいとお考えの方
- 自作(オリジナル)WordPressテーマにトップページ(フロントページ)を追加したい方
- WordPressを利用している or 利用予定 の方
- Webデザイナーを目指している方
今回は、自作WordPressテーマ作成時に作成する『front-page.php』の作り方について解説します。
front-page.phpとは、WordPressのトップページにあたるファイルです。
自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください!
自作WordPressテーマ『front-page.php』の作り方
1.「front-page.php」というファイルを用意し、WordPressのテーマフォルダ内に保存
まずは、front-page.phpというファイルを用意して、WordPressテーマフォルダ内に保存しましょう。
2.ヘッダー(get_header)とフッター(get_footer)を読み込む
1<?php get_header(); ?>
2<!-- ここにコンテンツを記載する -->
3<?php get_footer(); ?>
get_headerとget_footerを使って、ヘッダーとフッターを読み込みましょう。
3.静的にコーディングしたコンテンツを記載
1<?php get_header(); ?>
2<section id="info">
3 <h2 class="ttl">information<span class="jp">お知らせ</span></h2>
4 <ul class="list">
5 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
6 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
7 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
8 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
9 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
10 </ul>
11 <p class="more"><a href="/category/information/">お知らせ一覧</a></p>
12</section>
13<?php get_footer(); ?>
いきなりPHPで組むのはちょっと難しいので、まずは、静的にコーディング(HTML、CSS)しましょう。
ここでは、例として5件のインフォメーションを表示したいと思います。
4.繰り返し表示するためのコードを記載する
1<section id="info">
2 <h2 class="ttl">information<span class="jp">お知らせ</span></h2>
3 <ul class="list">
4 <?php
5 $arg = array(
6 'posts_per_page' => 5, // 件数
7 'orderby' => 'date', // 'date'で日付でソート、'modified'で更新順でソート
8 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
9 'category_name' => 'information' // 表示したいカテゴリーのスラッグを指定
10 );
11 $posts = get_posts( $arg );
12
13 foreach ( $posts as $post ):
14 setup_postdata( $post );
15 ?>
16 <li><a href=""><span class="date">20**/**/**</span>タイトルが入ります</a></li>
17 <?php endforeach; ?>
18 </ul>
19 <p class="more"><a href="/category/information/">お知らせ一覧</a></p>
20</section>
上記4~15行目、17行目をご覧ください。
こちらは、記事(<li>~</li>)を繰り返すための指定です。
上記例は、「投稿日順でソートしたinformationカテゴリーの記事を、最新から5件表示してね」という意味です。
コピペして、6~9行目をカスタマイズしてご使用いただけます。
繰り返しの最後には、必ずendforeachを入れて、繰り返しはここまでと指定する必要があります。
5.リンクと日付を出力する
1<section id="info">
2 <h2 class="ttl">information<span class="jp">お知らせ</span></h2>
3 <ul class="list">
4 <?php
5 $arg = array(
6 'posts_per_page' => 5, // 件数
7 'orderby' => 'date', // 'date'で日付でソート、'modified'で更新順でソート
8 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
9 'category_name' => 'information' // 表示したいカテゴリーのスラッグを指定
10 );
11 $posts = get_posts( $arg );
12
13 foreach ( $posts as $post ):
14 setup_postdata( $post );
15 ?>
16 <li><a href="<?php the_permalink(); ?>"><span class="date">
17 <?php echo get_the_date('Y/m/d'); ?>
18 </span>
19 タイトルが入ります
20 </a></li>
21 <?php endforeach; ?>
22 </ul>
23 <p class="more"><a href="/category/information/">お知らせ一覧</a></p>
24</section>
次に、<li>~</li>の中身を書いていきましょう。
16~20行目をご覧ください。
リンクは、the_permalink();
日付は、echo get_the_date();
で呼び出すことができます。
6.タイトルを出力する
1<section id="info">
2 <h2 class="ttl">information<span class="jp">お知らせ</span></h2>
3 <ul class="list">
4 <?php
5 $arg = array(
6 'posts_per_page' => 5, // 件数
7 'orderby' => 'date', // 'date'で日付でソート、'modified'で更新順でソート
8 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
9 'category_name' => 'information' // 表示したいカテゴリーのスラッグを指定
10 );
11 $posts = get_posts( $arg );
12
13 foreach ( $posts as $post ):
14 setup_postdata( $post );
15 ?>
16 <li><a href="<?php the_permalink(); ?>"><span class="date">
17 <?php echo get_the_date('Y/m/d'); ?>
18 </span>
19 <?php
20 if ( mb_strlen( $post->post_title ) > 40 ) {
21 $title = mb_substr( $post->post_title, 0, 40 );
22 echo $title . "...";
23 } else {
24 echo $post->post_title;
25 }
26 ?>
27 </a></li>
28 <?php endforeach; ?>
29 </ul>
30 <p class="more"><a href="/category/information/">お知らせ一覧</a></p>
31</section>
タイトルの部分を、PHPのコードに差し替えています。(19~26行目)
上記をコピーして、数字(40)の部分を変えれば、どのテーマでも使えます。
上記例は、
「タイトルが41文字以上あったら、40文字まで表示して最後に「…」を表示」「40文字以下だったら、そのまま表示」
という意味です。
最後に:WordPressについてのご相談もお気軽にどうぞ!
空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方、Webデザイナーになりたい方へのサポートなども承っております。
下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)