普段の仕事ではオリジナルテーマでウェブサイトを作ってるんですけど、このブログはサポトピアさんが公開しているNishikiというテーマをずっと使ってたんですよね。
テーマ自体に大きな不満はなかったんですけど、クラシックエディタを使いたかったりシステム的にも自由にしたいぼくにとっては既存テーマでは限界を感じたので、いっそのことオリジナルテーマに移行することにしたんです。
既存テーマから脱却するのにそこそこの時間を使ったので、まとめとして備忘録も兼ねた記事になってます。
要件定義をする
何はともあれ、まずは要件を定義してタスク化しておくのがおすすめ。何が必要で何が不要かを整理整頓しておくことでコーディングに専念できるようになります。
ファイルの構成やルール、使用する色やフォントなど、時間はかかりますが「段取り八分仕事二分」ということで、できるだけ細かく定義しておきましょう。
また、全部が完成してからローンチするのか、スピード重視でコア機能だけ作ってローンチするのか、ステージング環境から本番環境に反映させるタイミングも定義しておきます。
ファイル構成
実際に作成したファイル構成はこんな感じです。
. ├── css │ ├── _archive.scss │ ├── _common.scss │ ├── _footer.scss │ ├── _front-page.scss │ ├── _header.scss │ ├── _mixin.scss │ ├── _not-found.scss │ ├── _search.scss │ ├── _sidebar.scss │ ├── _single.scss │ └── _style.scss ├── js │ └── script.js ├── template ├── 404.php ├── archive.php ├── footer.php ├── front-page.php ├── header.php ├── index.php ├── search.php ├── sidebar.php ├── singular.php └── style.css
管理と運用は自分ひとりしかいないので、できるだけシンプルにすると良いですね。ファイルを更新してもバージョン管理などは行わず、ローカルで実装 → 確認 → FTPでアップロードでやっていきます。
最小構成でテーマを作る
では、いよいよ作成していきます。WordPressはindex.phpとstyle.cssさえあればテーマの最小構成が作れるので、まずはそれらのファイルを作ります。
index.phpは空白のままでだいじょうぶですが、style.cssは「これはテーマですよ！」ってWordPressに認識させるためにコードが必要なので、それを入れておきます。
/* Theme Name: IROIRODESIGN LAB. Author: KUKI SASHIDA */
これでWordPressのテーマファイルとして認識できるので、ダッシュボードからテーマを適用しておきましょう。
この時点では何もコードが入ってないので画面は真っ白になります。
ここからフロントのコーディングです。全ページ共通で表示させるヘッダーとフッターを作成していきます。
WordPressではCSSとJavaScriptはfunctions.phpを使って読み込む方法が推奨されてますので、今回は<link>や<script>は使わずにfunctions.phpで読み込んでいます。
front-page.phpを作る
いわゆるトップページですね。front-page.phpは投稿ページや固定ページと構成が違うので、CSSは特別に_index.scssに書いていくと管理がしやすくおすすめです。
single.phpとpage.phpを作る
WordPressには投稿ページと固定ページってのがあって、どちらも同じように記事が公開できるんですけど、仕様がちょっと違うんです。
single.php
single.phpは投稿ページを表示させるファイルです。投稿ページというのはブログ記事のことで、カテゴリやタグに紐付けることができます。
page.php
page.phpは固定ページを表示させるファイルです。固定ページというのは、お問い合わせや会社概要など「作ったらずっと使うページ」のこと。カテゴリやタグを紐付けることはできませんが、親子の関係性を持つことができます。
親子関係というのは例えば、「問い合わせ」の中に「確認」と「完了」があるみたいな感じですね。
URLはこうなります。
// お問い合わせページ (親) https://iroirodesignlab.com/contact/ // お問い合わせ内容の確認ページ (子) https://iroirodesignlab.com/contact/confirm/ // 送信完了ページ (子) https://iroirodesignlab.com/contact/thanks/
「contact」が親、「confirm」と「thanks」が子っていう関係性ですね。
で、今回はsingle.phpとpage.phpをそれぞれ作るのではなくて、両方の役割をまとめて共通で使えるsingular.phpを作って、同じレイアウトで表示させる形にしました。
singular.php
single.phpとpage.phpのどちらにも対応したファイルです。ここに書けば投稿ページも固定ページも同じように表示ができます。
ただ、投稿ページに使えるカテゴリやタグは固定ページには使えません。そのままだとレイアウトが不自然になったりするので、is_page()とかの条件分岐を使って、表示をうまく振り分けます。
<?php if (!is_page()) : ?>
<!-- 投稿ページだけに表示したい要素 -->
<?php endif; ?>
<?php if (!is_page()) : ?>にすると「固定ページ以外に」という意味になるので、これさえ覚えておけばスムーズに作れるはず。逆に<?php if (is_page()) : ?>にすると「固定ページのみに」という意味になります。
! (エクスクラメーションマーク)の有無で条件が変わります。
archive.phpを作る
カテゴリやタグを見るときに表示されるページで、アクセスが少ないわりにページネーションを付けたりしないといけないので、思ったよりしっかり作り込まないといけません。
カテゴリ専用のcategory.phpやタグ専用のtag.phpもありますが、今回は効率化のためarchive.phpに集約して作成しました。
search.phpを作る
search.phpはキーワードで検索したときに表示されるページです。見た目はカテゴリページを表示したときと同じで良いので、コードはこんな感じにしておきます。
<?php get_template_part('archive'); ?>
「えっ？これだけ？」って思いますが、これだけで検索結果ページでもarchive.phpとまったく同じレイアウトを表示させることができます。
カスタマイズ
ここまで終わったらカスタマイズしていきます。
functions.phpでカスタムする
今回はfunctions.phpを作らずにCode Snippetsというプラグインで制御しようと思ったので、functions.phpに書くことはすべてCode Snippetsに書いています。
functions.phpはCSSを読み込んだりJavaScriptを読み込んだりってことにも使いますが、システム側のカスタマイズなんかもできたりします。
ダッシュボードのメニューにカテゴリ投稿ページを独立表示させたり。
投稿ページにアイキャッチ画像をサムネイルにして表示させたり。
GoogleのGemini APIを使って、記事が更新されたらタイトルや本文を解析して自動でタグを付ける仕組みを作ったり。
って感じですね。
WordPressは最初からしっかりしたダッシュボードが用意されていますが、自分の作業効率が上がるようにカスタマイズしてみると面白いと思います。
プラグインをインストールする
SEOやバックアップなど、運用していく上で助かるプラグインは多数ありますので、適宜インストールしていきます。
王道はこんな感じかな…？
- All in one SEO：定番のSEO対策プラグイン。
- Contact Form 7：定番のお問い合わせプラグイン。
- Table of Contents Plus：目次を作ってくれるプラグイン。
- UpdraftPlus：自動でバックアップができるプラグイン。
- WP Popular Posts：人気記事を集計/表示できるプラグイン。
- WP-Optimize：サイト表示を高速化できるプラグイン。
見た目を整える
最後にCSSを細かく調整したりアニメーションを付けたりして見た目を整えていきます。
さいごに
WordPressならではの便利な仕組みはしっかり活かしつつ、自分だけのこだわりや演出を加えることで、既存テーマにはないオリジナリティ全開のブログに仕上げることができました。
既存テーマのデザインにちょっと飽きてきたなーって人はもちろん、WordPressの構造をもっと深く勉強したい人も、ぜひオリジナルテーマ作りに挑戦してみてくださいねー！
RECOMMEND
この記事にコメントできます。