ホームページ表示に対応するfront-page.phpを作る – [17]WordPressテーマ制作レッスン

  • ブックマーク
  • -
    コピー

このレッスンでは、サイト内に作られているグローバルメニューのリンクを設置していき、他にウェブサイトの情報などを出力するテンプレートタグを設置してきます。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson
Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.
github.com

このレッスンでは、上記リポジトリのwp-lesson-17というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-17ディレクトリを設置しましょう。

ホームページ表示に対応するfront-page.phpを作る

WordPressにはウェブサイトを表示する設定として、

  • 最新の投稿
  • 固定ページ

という２つの方法があります。これらの設定は管理画面内【設定】→【表示設定】で変更することができます。

現在は、ウェブサイトのトップページにアクセスすると、デフォルト設定のままであれば、投稿一覧が表示されるようになっていると思います。こちらは「最新の投稿」の表示設定となっているからです。

では、「固定ページ」という表示設定にした場合はどうなるでしょうか。設定項目があるように、

  • ホームページ
  • 投稿ページ

それぞれに固定ページを設定することで、WordPressをブログのようではなく、一般的なホームページのように 利用することができます。

そして、front-page.phpというテンプレートファイルは、上記のようにホームページのようにWordPressを表示させた際に、「ホームページ」に利用されます。

では、実際に試してみましょう。

front-page.phpを作る

まず、page.phpを複製してfront-page.phpを作成します。

WordPressを「ホームページ形式」に変更

WordPress管理画面内、【設定】→【表示設定】に進み、「ホームページの表示」の設定を「固定ページ」に変更します。

そして、ホームページと投稿ページを任意の固定ページに設定します。（詳細は動画を参照）

テンプレートファイルの読み込み

実際にウェブサイトにアクセスして、front-page.phpテンプレートファイルが読み込まれているか、Show Current Templateプラグインを活用して確認してみましょう。

front-page.phpの修正

今のままではpage.phpと同じ表示形式ですので、少し修正してみましょう。

まずは、前後のページへのナビゲーションを削除します。以下のソースコードを削除します。

<?php the_post_navigation(); ?>

サイドバーもトップページでは表示しないようにしてみます。以下のソースコードを削除します。

<?php get_sidebar(); ?>

最後に、フロントページ用のCSSスタイルを用意してあるので、

<main class="l-content">

にp-front-pageというCSSクラスを追加して、

<main class="l-content p-front-page">

と修正します。

最後に、トップページに利用するので、ページタイトルや投稿日時などは必要ありません。削除しましょう。

<header class="entry-header">
    <h1 class="entry-title">
        <?php the_title(); ?>
    </h1>
    <div class="entry-meta">
        <time class="entry-date published"><?php the_time( get_option( 'date_format' ) ); ?></time>
    </div>
</header>

こうすることで、ワンカラムデザインのトップページ用テンプレートができました。

このレッスンの関連動画一覧を見る
WordPress