WordPressテーマを新規に作る機会があったのですが、何から作るんだっけと戸惑ってしまいました。
そこで改めて必要なものや手順をおさらいしたので備忘録的にご紹介したいなと思います。

真っ白の何もないところから作ります！
(先にサーバーはご用意くださいね)

必要なファイルはこれだけ

絶対必要なのは2つ

・index.php…トップページ用phpファイル
・style.css…見た目を整えるcssファイル

WordPressというのはいくつかのphpファイルの集まりで出来ています。
そのファイルたちをWordPressテーマとして認識してもらうのに必要なのが
index.phpとstyle.cssです。
これさえあればテーマとして認識されます、が
大抵の場合これでは足りないので下に紹介するファイルも作りましょう。

だいたいいつも使うファイル

・header.php
・footer.php
・single.php
・functions.php
・page.php
・archives.php
・404.php

場合によって作成するファイル

その時々によっては下のファイルも作りましょう。

・category.php
・search.php
・sidebar.php
・comments.php

今回つくるサイトの構成図

今回はシンプルなコーポレートサイトを想定します。
下記のような構成図で作成していきます。

トップページ
┣会社概要
┣事業紹介
┃　┣事業1紹介
┃　┗事業2紹介
┣スタッフ紹介
┃　┣スタッフA紹介
┃　┣スタッフB紹介
┃　┗スタッフC紹介
┣アクセス
┣会社ブログ
┗お問い合わせ

会社ブログを会社様ご自身に更新していただくために
WordPressを実装しますよ、という感じの案件ですね。

投稿ページ、一覧ページ、固定ページ

WordPressでは投稿、投稿一覧、固定ページと大まかな分類があります。

・投稿ページ…ブログやニュース、プレスリリースなどで使います。
・投稿一覧ページ…上記の投稿を並べた一覧ページに使います。
・固定ページ…会社概要など更新頻度の低いページに使います。

投稿ページは投稿1つ1つによってデザインを変えることはできません。(カテゴリーやタグごとにはできます)
固定ページはページごとにデザインを変えられますが、投稿ページのようなコメント機能はありません。

最初にすること

WordPressのインストール

WordPressの公式サイトからダウンロードしましょう。
一緒にデータベースも用意しましょう。
(ここではデータベースに関する説明は割愛します)

最初にwp-config.phpを開き
・データベース名
・データベースユーザー名
・データベースパスワード
・データベースホスト
これらを入力しましょう。

デバッグモードを使おう

wp-config.phpを編集するときについでにやっておきたいのがデバッグモードの設定です。
これをしておくと何かコードを間違えたときにどこが間違っているのか表示してくれます。

設定は簡単で

このfalseの部分をtrueにするだけです。

トップページをつくる

headerとfooter、たまにsidebar

トップページであるindex.phpは複数のphpファイルで構成されています。
先にHTMLでマークアップしておくとスムーズです。

マークアップしたHTMLのheader部分をコピーし、header.phpとして保存しましょう。
その際、</head>の直前に<?php wp_head(); ?>を記述しましょう。

次にHTMLからfooter部分をコピーし、footer.phpとして保存しましょう。
この際にも、</body>の直前に<?php wp_footer(); ?>を記述するのを忘れないようにしましょう。
この2つの記述がないとプラグインが動かない場合があります。

index.phpにはHTMLのコンテンツ部分をコピーします。
コンテンツの上下にそれぞれ<?php get_header(); ?>と<?php get_footer(); ?>を記述します。
これはheader.phpとfooter.phpを呼び出すコードです。

※以下サンプルコード

※header.php

※footer.php

※index.php

CSSとJavaScript

style.css

WordPressのテーマ作成で必ず必要なstyle.cssには、これまた必ず書く記述があります。
とはいえ必須なのは「Theme Name」だけなので、あとはお好みでどうぞ。
テーマ名は管理画面からも見えるので「○○(社名とか)専用テーマ」なんて付けてあるとわかりやすいですね。

/*
	Theme Name: テーマの名前※必須
	Description:テーマについての説明
	Theme URI: テーマのURL
	Author: 作者名
	Author URI: 作者のURL
	Version: バージョン(1.0など)
	License: ライセンス
	License URI: ライセンスのURL
*/

サイトのデザインを指定するcssソースはもちろんstyle.cssに記述してもOKですが、
別のcssファイルにして、header.phpなどから呼び込むこともできます。

WordPressでjQueryを使うとき

動きを付けたいときにjavascrptやjQueryを使う場合、注意する点があります。
WordPressには標準でjQueryが読み込まれているということです。
記述的には<?php wp_head(); ?>辺りです。
これは「/wp/wp-includes/js/jquery/jquery.js」から呼ばれています(大抵の場合)。

このjQueryは普通とは違ってコンフリクトを起こさない工夫がされているため
jQueryでよく記述する「$」が使えません。
対応は簡単、「jQuery(function($){ });」でラップするだけです。
この中では「$」が使えるので普段通りの書き方ができます。

※以下サンプルコード

サブページをつくる

続いてはサブページを作っていきましょう。
こちらも先にHTMLでマークアップしてあると早いですよ。

固定ページをつくる

今回は会社概要のページを作成するとします。
固定ページにはページごとにテンプレートが設定できるので
page.phpから派生したpage-company.phpを作成しましょう。

サブページ全体のテンプレートをpage.phpとして
各ページのコンテンツを管理画面から入力する方法もありますが
今回はweb制作者の方が管理しやすいように各ページをphpファイルにわける方法にします。

※以下サンプルコード
※page-company.php

上の方に記述してある「Template Name」は必ず書いてください。
この時の名前が管理画面に表示されます。
この場合は「会社概要のページ」と表示されます。

投稿ページをつくる

お知らせやブログの部分は投稿ページとして作成します。
こちらは管理画面から入力したものを表示したいので、記事を表示するループ文を記述します。

※以下サンプルコード
※single.php

一覧ページをつくる

投稿ページを作ったら次は、投稿一覧を表示するページを作りましょう。
archive.phpやcategory.phpがこれにあてはまります。
ブログサイトではトップページに記事一覧を表示している場合もありますね。
今回は会社ブログの部分のほかに投稿する箇所がないので、archive.phpとして作成します。

※以下サンプルコード
※archive.php

画像などのパスは絶対パスにしよう

画像のパス

WordPressではphpファイルを使って別のphpファイルを読み込んだりする場面が多くあります。
その時に画像などのファイルパスは相対パスではなく、絶対パスで書くといいでしょう。
get_template_directory_uriを使って、ドメイン名からテーマフォルダーまでのパスを呼び出すとスムーズです。

リンクタグも絶対パスが便利

画像と同じくリンクタグにも絶対パスで記述しましょう。
こちらは<?php echo esc_url( home_url( ‘/company/’ ) ); ?>のように
ドメイン名までを表示するhome_urlに各ページのスラッグを付け足す感じで書くとスマートです。

総仕上げ！管理画面からテーマを設定しよう

作ったファイルをサーバーにアップロード

残りのページも同じように作成したら、いよいよ大詰め、ファイルをサーバーにアップロードします。
先ほどまでに作成したファイルはすべてテーマフォルダーの中にあるので、
wp/wp-content/themes/
この階層にフォルダーごとアップロードしましょう。

テーマを選択

テーマフォルダーをアップロードすると、管理画面の「外観＞テーマ」のところに表示されます。
作成したテーマを有効化しましょう。
するとトップページが作成したindex.phpの形になっていると思います。

固定ページを登録

テーマを有効化したら、固定ページを登録していきましょう。
管理画面の固定ページ＞新規追加から作成します。
タイトルを入力して、右側のページ属性からテンプレートを選びます。
プレビューで表示を確認し問題なければ公開しましょう。

記事を投稿してみよう

投稿ページであるsingle.phpやarchive.phpが正常に表示されるか
記事を投稿して確かめてみましょう。
管理画面の「投稿＞新規追加」から記事の作成ができます。
タイトルと本文を入力したらプレビューで確認し、公開します。
カテゴリーやタグを使用する場合は右に表示されるので、そこから選択してくださいね。

さいごに

WordPressには素敵なテーマテンプレートがたくさんありますが、
やっぱりサイトの仕様に合わせてカスタマイズするには、新規にテーマを作るのも有用です。
上で説明したほかにもWordPressではたくさんのことができるので、
うまく活用して、より効率よく運用できるサイト構築を心掛けたいですね。