---
title: "index.phpのことはじめ – WordPressテーマをゼロから作る"
canonical_url: "https://olein-design.com/blog/dev-wp-theme-03"
language: "ja"
date_published: "2016-09-30T09:00:07+09:00"
date_modified: "2016-09-30T09:00:07+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "WordPress"
---

# index.phpのことはじめ – WordPressテーマをゼロから作る

今回は前回テーマファイルとして用意した２つのファイルのうちの一つ、`index.php`にHTMLの雛形を記述して、CSSを読み込むところまで進んでいこうと思います。お付き合いよろしくお願いします。 ## この時点での表示を確認しておこう

 作業に入る前に、この時点でどのように表示されているのかを確認しておきましょう。 ![dev-wp-theme-03-01](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-03-01-1.png) 真っ白ですね。 WordPressで制作したウェブサイトにアクセスした場合、最初に表示されるのは`index.php`（home.phpがあればそちらが優先）というファイルになります。現在、アクセスして表示しているファイルも`index.php`ということになります。 そちらのファイルはまだからの状態なので何も表示されないという結果になるわけです。では、ゼロからスタートしていきましょう！ ## index.phpにHTML雛形を記述

 ではまずエディタで`index.php`を開いてみましょう。以前に記載したように、この連載ではBracketsを利用しています。 そして、最初は以下のような雛形コードを入力しました。  こちらのコードを入力したら、一度表示を確認してみましょう。 ![dev-wp-theme-03-01](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-03-01-1.png) ですね。何も表示されませんね。`bodyタグ`内に何も記述していませんもんね、当たり前です。 では、ちょっと何かしら入力してちゃんと表示されるかだけ試しておきましょう。  するとこのように表示されているはずです。 ![dev-wp-theme-03-02](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-03-02-1.png) ちゃんと`index.php`が反映されていることも確認できましたね。後々には、この`index.php`というファイルもヘッダー部分とフッター部分、サイドバー部分などを切り離したりしますが、詳しいことは後々説明していくことにします。まずはこの調子で作っていきましょう。 ## 大まかなレイアウト構成をコーディングしていく

 では、大まかなレイアウト構成をコーディングしていこうと思います。 当初の仕様でも触れたように、シンプルなブログを作ることを目標としているので、レイアウトとしてはざっくりとですがこんな感じにしようと思っています。 ![dev-wp-theme-03-03](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-03-03-1.jpg) スタイリングは後ほどということになりますが、骨組みだけレイアウトをしておきましょう。  ヘッダー部分とフッター部分はシンプルに`header`と`footer`でコーディングし、コンテンツとサイドバーはスマホ表示以外で横並びにするので全体を`div.wrap`で囲ってしまう形にしてあります。 この時点での表示はこのようになります。まだ何もスタイリングしていないので、マークアップしたテキストが表示されているだけとなっています。 ![dev-wp-theme-03-04](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-03-04.png) ## wp_head()とwp_footer()を設置する

 では、ここで`wp_head()`と`wp_footer()`を設置しておきます。 では、この`wp_head()`と`wp_footer()`が何をしてくれるのかというところですが、簡単に言うと**CSSやJavaScript、必要なメタ情報などを読み込んでくれる**と理解しておけばとりあえず大丈夫かなと思います。 WordPressを形成する大きな要素として**テーマ**と**プラグイン**があります。テーマは**デザイン部分**、プラグインは**機能部分**を担当していると理解して間違いはないと思います。 そして、WordPressにはたくさんのテーマやプラグインが用意されています。それらがこの`wp_head()`と`wp_footer()`を利用して**必要なCSSやJavaScriptを読み込んでいる**ということです。 ですので、WordPressを利用するということは**テーマを利用すること、プラグインを利用すること**でもありますから、これら`wp_head()`と`wp_footer()`の記述は必ず行う必要があります。記述がされていないとプラグインなどは正常に使えないと考えておいたほうが良いです。 では、設置してみましょう。設置位置に注意してください。  `wp_head()`は、`headタグ`が閉じられる前に記述してあります。そして、`wp_footer()`は`bodyタグ`が閉じられる前に記述されています。 あと、ちょっと注意が必要なのは`titleタグ`部分が削除されていることに気づかれた方も多いかと思います。WordPress4.1というバージョンから`titleタグ`が`wp_head()`から自動で書き出されるようになりました。ですので、最新のバージョンに対応することを考えていますので`titleタグ`の記述も必要なくなるということになります。覚えておきましょう。 ## body_class()を設置する

 `body_class()`を`bodyタグ`のクラス名として設定することで、様々な状況のクラス名を自動で書き出してくれるのでスタイリングなどがしやすくなっています。 例えば、`index.php`では`home`というクラスが自動で書き出されたり、アーカイブページを表示している場合には自動的に`archive`というクラスが書き出されたりします。 他にも記事idに関連したクラスや、固定ページのスラッグに関連したクラスなども書き出してくれるので、様々な条件を想定してスタイルシートを設定することができます。詳しくは以下のリンクを参照してみてください。 参照：[https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class) 記載方法はこのようになります。  このように記述しておくことにより、とても便利なクラスを書き出してくれます。ちなみにWordPress公式に掲載する場合は必ず記述しないといけませんのでお忘れなく！