今までこのブログのテーマは STINGER3 を拡張したものを使っていましたが、STINGER5 が公開されたのをきっかけに STINGER から卒業し、Bootstrap3 でテーマを自作することにしました。
STINGER3 はよく出来ており不満はありませんでしたが、それゆえに利用サイトも多く、どこもかしこも STINGER な状況が気になっていました。STINGER5 に更新することも考えましたが、子テーマを作ってカスタマイズするのが面倒になってしまったこと、他ブログとの差別化をはかりたかったことから、テーマの自作に踏み切りました。
テーマの作成は初めてで、最初は何をどうすればいいか分からない状態でしたが、基本を理解した後はサクサク進みました。作成にあたりブックマークした記事をまとめたので、Bootstrap でテーマを作ってみたい方は参考にどうぞ。
目次
- テーマ作成の 3 ステップ
- テーマの基本を理解する
- 単純なサンプルテーマを作ってみる
- サンプルを Bootstrap3 に置き換える
- WordPress のリファレンス
- Bootstrap3 のリファレンス
- ソーシャル連携のリファレンス
- レスポンシブデザインの表示確認
テーマ作成の 3 ステップ
以下のような流れでテーマを作成しました。順番に解説していきます。
- テーマの基本を理解する
- 単純なサンプルテーマを作ってみる
- サンプルを Bootstrap3 に置き換える
テーマの基本を理解する
以下のサイトで テーマの基本的な仕組みを学びました。とても分かりやすいです。
テーマを自作したい人必見！WordPressの基本的な仕組み | 初心者にもおすすめ！無料 WordPress テーマ Principle
単純なサンプルテーマを作ってみる
以下のサイトを参考に動くサンプルを作りました。7 回くらいに分けて解説されています。
WordPressのテーマを作る。テーマを作るための下準備・知っておいた方がいいこと。【テーマ作成 ⓪】
ここのサイトで紹介されているテストデータの取り込みは必ずやったほうがいいと思います。各種マークアップ、長すぎるタイトルや、大きすぎる画像、大量のカテゴリをもった記事など、良質なサンプルデータが手に入ります。
ローカル環境でWordPressを色々試したい時はテストデータを放り込むといいよ！所要時間5分。
サンプルを Bootstrap3 に置き換える
上記の記事だけでテーマの基本がつかめたので、html と css を Bootstrap3 に置き換えていきました。html のベースは Blog Template for Bootstrap を使いました。
WordPress のリファレンス
テーマの作り方 本家マニュアル
本家 Codex のマニュアル。情報量が多いぶん、初心者にはとっつきにくいです。
Theme Development « WordPress Codex
テーマ作成のチートシート
記事のループ、サイドバー、ナビゲーションメニューなど、基本的な部品のひな形が紹介されています。
WordPress Theme Development Cheatsheet » Codeclown
Bootstrap3 のリファレンス
Bootstrap CDN
Bootstrap は CDN から読み込んでいます。Font Awesome や Bootswatch などもあります。
Bootstrap3 学習ノート
すごいまとめ資料。Bootstrap3 を使うなら一読をおすすめ。Bootstrap3 はそれなりに使っていましたが、知らないことがたくさん書いてありました。
Google カスタム検索
Bootstrap で Google カスタム検索を利用するときのデザイン崩れ問題の解決方法が紹介されています。
HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法 - WordPressの使い方と設定 - Webkaru
ソーシャル連携のリファレンス
ソーシャルシェア数の取得方法
サーバーサイド(PHP)、クライアントサイド(Javascript)の両パターンの解説あり。
レスポンシブデザインの表示確認
iPhone, iPad, iPad mini など、マルチデバイスの表示を確認できるサービス
Responsive Checker ｜ レスポンシブデザイン検証サービス
まとめ
- STINGER 多すぎなので Bootstrap3 をベースにテーマを自作
- テーマの基本を理解したら後は意外とスイスイ進んだ
- テストデータの取り込みはかなりオススメ
- テーマ作成した時にブックマークしたサイトの紹介
ブログの更新が１ヶ月止まってしまいましたが、仕上がりには満足しています。STINGER の時と比べ、マルチデバイスに対応したデザイン調整はすごく楽になりました。この後は少しずつ Bootstrap っぽさを消していこうかと思っています。今までありがとう、STINGER。