WordPressテーマの構成

以前モックアップの作成についての記事を書きました。

今回はWordPressテーマの構成について簡単に書いていこうと思います。

 

ブログに必要なページ、機能は?

テーマの構成について触れる前にそもそもブログで必要なページと機能は何かをみておきましょう。大体のブログでは次のようなページと機能が用意されていると思います。

  • トップページ(インデックスページ)
  • 特定の条件に従って記事を並べるアーカイブページ(カテゴリ別、日付別、著者別)
  • 404ページ(URLの内容が見つからなかったとき)
  • 記事本体のページ
  • お問い合わせフォームなど静的なページ
  • 検索機能
  • コメント機能
  • サイドバー(サイト横端の領域)
  • ヘッダー(サイト最上部、メニューなども含む)
  • フッター(サイト最下部、メニューなども含む)

大雑把ですが大体以上のようなページと機能が用意されていればブログとして成立するのではないかと思います。WordPressのテーマ作成では上記に対応するファイル(後述のテンプレート)を用意することで作っていきます。

なお当ブログの場合では「コメント機能はお問い合わせフォームやSNSで代替できるだろう」と考えてコメント機能は実装しませんでした。このように自身の作りたいサイトに合わせて上記のリストからページや機能を追加・削除してもよいかと思います。

 

WordPressテーマの構成について

それではWordPressテーマの構成について触れます。テーマを構成する「テンプレート」「function.php」「style.css」「screenshot.png」について見ていきます。

テンプレート

実はWordPressテーマでは上記で確認したようなページや機能に対応するphpファイル名が決まっています。このファイル群はテンプレートと呼ばれます。そしてこのテンプレートを元にhtml(ブラウザで実際に閲覧するファイル)を生成する仕組みです。先ほどあげたページや機能がどんな名前に対応するか見てみます。

ページ・機能 ファイル名
トップページ index.php
アーカイブページ archive.php
404ページ 404.php
記事本体のページ single.php
静的なページ page.php
検索機能 searchform.php, search.php
コメント機能 comments.php
サイドバー sidebar.php
ヘッダー header.php
フッター footer.php

テンプレートはこれだけではなく他にもあります。例えばアーカイブページでもカテゴリーのページだけ変えたいところがあるという場合はcategory.phpという名前が用意されていたりします。また自分でカスタムしたテンプレートも用意できます。詳しくはここでは割愛しますが、次のようなページが参考になると思います。

 

function.phpについて

WordPressテーマでは上記で示したテンプレートの他にfunction.phpと呼ばれるテーマに関する設定を行なったり自分で作った関数を配置するファイルがあります。例えば現在ではブログ記事で設定するのが一般的となっているアイキャッチ画像などはfunction.phpが真っさらな状態だと設定することができません。

<?php

if ( ! function_exists( 'theme_setup' ) ) :
function theme_setup() {
  /*
   * アイキャッチ画像を設定できるようにする
   */
  add_theme_support( 'post-thumbnails' );
}
endif;
add_action( 'after_setup_theme', 'theme_setup' );

この場合function.phpに上記のような設定を施すことによって、WordPressの投稿エディタからアイキャッチ画像を設定できるようになります。このようにfunction.phpに設定のためのコードを追加することで、WordPressのダッシュボードから様々なことを行うことができるようになります。

 

style.cssについて

テンプレートphpファイル、function.phpに加えて必要となるのがstyle.cssです。ここにデザインに関する記述を行うことになります。必要最低限下記の項目をヘッダとして記述しておかないとテーマとして認識してくれないので注意です。XXX YYY ZZZにはそれぞれテーマの名前、著者名、テーマの説明を記載します。

/*
Theme Name: XXX
Author: YYY
Description: ZZZ
*/

 

screenshot.png

必須ではありませんが、テーマのスクリーショットを用意してもいいかもしれません。テーマ選択画面で表示されるようになります。

 

 まとめ

今回はテーマの簡単な構成についてお話ししました。なんとなくこんなファイルがあれば動くんだなということを分かってもらえればよいと思います。

次はブランクなテーマを作成していこうと思います。

return-top