WordPressでサイトを構築する際にはテーマが利用されます。WordPressのテーマには予め用意されているものであったり、インターネット上で配布されている様々なテーマをダウンロードして利用することができます。また、自分でオリジナルのテーマを作成して使うこともできます。ここでは、オリジナルテーマを使用するための基本的な枠組みを用意してみます。

テーマの準備

テーマを作成するためには、Webページを生成するためのテンプレートファイルが必要になります。最低限必要なファイルは「index.php」と「style.css」で、この2つがあれば動かすことができます。それ以外には、パーツごとにファイルを分けて作っていきます。サイトの構成にもよりますが、大まかには以下のようなファイルを用意します。

  • header.php
  • footer.php
  • single.php
  • sidebar.php

これらのテンプレートファイル以外にもWordPressの処理に関する設定をするために使用する「functions.php」などが必要な場合には用意します。
それぞれのファイルが用意できたら、テーマフォルダを作成して用意したファイルを格納します。テーマフォルダ名は任意でつけてください。

テンプレートを設定する

それでは、準備したテンプレートファイルにHTMLを出力するための最低限必要な設定をしていきます。

header.phpの設定

ここには、ヘッダーに関する内容を記述していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>

1行目はDOCTYPEの宣言になります。日本語サイトの作成を想定していますので言語は「lang=”ja”」を指定しています。WordPressの場合、生成されるページのエンコードは「UTF-8」となるため、エンコードの種類は「UTF-8」を指定します。
タイトルには、ページタイトルとサイト名が出力されるように設定します。「<?php wp_title(); ?>」でページタイトルを出力し、「<?php bloginfo(‘name’); ?>」でサイト名を出力します。
「<?php wp_title(); ?>」のパラメータには、ページタイトルとサイト名を「｜」で区切るように設定をしています。
スタイルシートは、テーマフォルダ内に用意したファイルを読み込むため「<?php echo get_stylesheet_uri(); ?>」と設定してテーマフォルダにあるstyle.cssを出力します。
「<?php wp_head(); ?>」はWordPressのシステムなどを出力するために必要で、決まり文句みたいなもので、「</head>」の直前に記述する必要があります。
「<body>」についている「<?php body_class(); ?>」は、ページを区別するクラス名を挿入するためのものです。

footer.phpの設定

ここには、フッターに関する内容を記述します。

<footer>
  <p id="copyright"><small>copyright</small></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

フッターに含める内容はそれぞれですが、とりあえずコピーライトだけ例として記述しておきます。
「<?php wp_footer(); ?>」は、ヘッダーで設定した「wp_head」と同様、お決まりの設定で「</body>」の直前に記述します。

index.phpとsingle.phpの設定

これらのファイルはページを生成する際に使用するテンプレートファイルで、ヘッダーやフッター、サイドバーなどのパーツテンプレートを読み込んで利用します。

<?php get_header(); ?>
<div id="contents">

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

「<?php get_header(); ?>」を読み込んで、header.phpで設定した内容を出力します。そして、「<?php get_footer(); ?>」を読み込んで、footer.phpで設定した内容を出力します。2カラムレイアウトなどでサイドバーが必要な場合は、「<?php get_sidebar(); ?>」を読み込むことで、sidebar.phpで設定した内容を出力できます。

スタイルシートの設定

WordPressで使用するスタイルシートは「style.css」というファイル名で保存する決まりとなっています。また、スタイルを記述する前に冒頭でテーマに関する情報を記載する必要があります。

@charset "UTF-8";
/*
Theme Name: original my theme
Description: 基本的なオリジナルテーマについて
Author: Taro
Version: 1.0
*/

いろいろ記述していますが、ここで必要な項目は「Theme Name」で必ず記載するようにしてください。エンコードについては、テンプレートファイル同様、WordPressに合わせて「UTF-8」で設定します。ちなみに、スタイルシートに記載できるテーマに関する情報は以下のような項目があります。

Theme Nameテーマ名
Descriptionテーマに関する説明
Author作成者
Author URI作成者のアドレス
Theme URIテーマのアドレス
Versionテーマのバージョン
Licenseライセンス
License URIライセンスのアドレス
Tagsタグ

このような感じで、必要最低限のファイルと設定を用意すればオリジナルのテーマを作成することができます。

おすすめの記事