【WordPress】index.phpにはトップページのソースを書く－オリジナルテーマを作るために

luck

3年前

「【Wordpress】style.cssに書くこと」で「style.css」を作成しました。後は作成するサイトに必要なスタイル（css）を記載すれば完成です。

では、次に「index.php」には何を書いたらいいか見ていきましょう。

共通部分を読み込む

サイトにはヘッダーやフッター、サイドなどサイト全体で共通する箇所があります。その共通部分を読み込むための関数がWordpressには用意されています。

<?php get_header(); ?>

上のように関数「get_header()」を使えばヘッダーを読み込んでくれます。具体的にいうと、「header.php」を読み込んでくれます。

つまり、header.phpに「ヘッダーで共通する部分」を書けばOKです。

引数を指定した場合

「get_header(‘top’)」というように引数を渡すると、読み込まれるファイルは「header.php」ではなく「header-top.php」になります。

トップページだけ他のページとは異なるヘッダーを使いたい場合などに、引数を指定するといいですね。

<?php get_sidebar(); ?>

上のように関数「get_sidebar()」を使えばサイドを読み込んでくれます。具体的にいうと、「sidebar.php」を読み込んでくれます。

つまり、sidebar.phpに「サイドで共通する部分」を書けばOKです。

引数を指定した場合

「get_sidebar(‘top’)」というように引数を渡すると、読み込まれるファイルは「sidebar.php」ではなく「sidebar-top.php」になります。

トップページだけ他のページとは異なるサイドを使いたい場合などに、引数を指定するといいですね。

<?php get_footer(); ?>

上のように関数「get_footer()」を使えばフッターを読み込んでくれます。具体的にいうと、「footer.php」を読み込んでくれます。

つまり、footer.phpに「フッターで共通する部分」を書けばOKです。

引数を指定した場合

「get_footer(‘top’)」というように引数を渡すると、読み込まれるファイルは「footer.php」ではなく「footer-top.php」になります。

トップページだけ他のページとは異なるフッターを使いたい場合などに、引数を指定するといいですね。

共通部分を読み込む部分も含めたソースがこちらです。

<?php get_header(); ?>

<p>ここにトップページの内容を書きます。</p>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

テキストだけなので非常にシンプルです。

先ほどのシンプルなソースを反映してトップページを見てみると身に覚えのない情報が表示されました。

実は、Wordpressでは「get_header()」「get_sidebar()」「get_footer()」で読み込むはずの「header.php」「sidebar.php」「footer.php」がテーマフォルダに無い場合、下記ファイルを代わりに表示してくれる仕様になっています。

header.phpが無い場合	wp-includes/theme-compat/header.php
sidebar.phpが無い場合	wp-includes/theme-compat/sidebar.php
footer.phpが無い場合	wp-includes/theme-compat/footer.php

WordPressがデフォルトのファイルを用意してくれているということですね。

実際はこれらのファイルを用意すると思いますので特に覚えておく必要はありません。

中身が空の「header.php」「sidebar.php」「footer.php」を用意してテーマフォルダに入れました。

改めてトップページを見てみると、先ほど代わりに表示されていた内容は消えましたが、管理バーも消えてしまいました。

これは、「wp_footer()」が記述されていないことが原因です。

通常「footer.php」に記述するのですが、今は空ファイルなので、管理バーが表示されていません。先ほど代わりに使用していた「wp-includes/theme-compat/footer.php」には下記のように「wp_footer()」が記述されているので管理バーが表示されていました。

今後「footer.php」についても記事を書く予定ですので、その際に対応します。

少し脱線が多くなってしまいましたので、「index.php」に書くソースを見直しておきましょう。

<?php get_header(); ?>

<p>ここにトップページの内容を書きます。</p>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

記事自体は長くなってしまいましたが、index.phpのソースは↑これだけです。

今後「<p>ここにトップページの内容を書きます。</p>」の部分についてもう少し手を加えていきたいと思います。

手を加える内容としては、下記のようなトップページでよく利用されるコンテンツを考えています。