karakaram-blog

WordPressのテーマをBootstrap3で自作したときに調べたことまとめ

 ツイート 1  シェア 2  Google+1 0  Hatena 4

WordPress on Bootstrap3

今までこのブログのテーマは STINGER3 を拡張したものを使っていましたが、STINGER5 が公開されたのをきっかけに STINGER から卒業し、Bootstrap3 でテーマを自作することにしました。

STINGER3 はよく出来ており不満はありませんでしたが、それゆえに利用サイトも多く、どこもかしこも STINGER な状況が気になっていました。STINGER5 に更新することも考えましたが、また子テーマを作ってカスタマイズするのが面倒になってしまったこと、他ブログとの差別化をはかりたかったことから、テーマの自作に踏み切りました。

テーマの作成は初めてで、最初は何をどうすればいいか分からない状態でしたが、基本を理解した後はサクサク進みました。作成にあたりブックマークした記事をまとめたので、Bootstrap でテーマを作ってみたい方は参考にどうぞ。

目次

  1. テーマ作成の 3 ステップ
  2. テーマの基本を理解する
  3. 単純なサンプルテーマを作ってみる
  4. サンプルを Bootstrap3 に置き換える
  5. WordPress のリファレンス
  6. Bootstrap3 のリファレンス
  7. ソーシャル連携のリファレンス
  8. レスポンシブデザインの表示確認
  9. 参考書籍

テーマ作成の 3 ステップ

以下のような流れでテーマを作成しました。順番に解説していきます。

  1. テーマの基本を理解する
  2. 単純なサンプルテーマを作ってみる
  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 などもあります。
Bootstrap CDN by MaxCDN

Bootstrap3 学習ノート

すごいまとめ資料。Bootstrap3 を使うなら一読をおすすめ。Bootstrap3 はそれなりに使っていましたが、知らないことがたくさん書いてありました。
Bootstrap 3 学習ノート – Qiita

Google カスタム検索

Bootstrap で Google カスタム検索を利用するときのデザイン崩れ問題の解決方法が紹介されています。
HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法 – WordPressの使い方と設定 – Webkaru

ソーシャル連携のリファレンス

ソーシャルシェア数の取得方法

サーバーサイド(PHP)、クライアントサイド(Javascript)の両パターンの解説あり。
ソーシャルカウントの取得方法まとめ(全9サイト)

レスポンシブデザインの表示確認

iPhone, iPad, iPad mini など、マルチデバイスの表示を確認できるサービス
Responsive Checker | レスポンシブデザイン検証サービス

参考書籍

Bootstrap3 の書籍を 1 冊買いました。Bootstrap3 でできることがよくまとまっています。

まとめ

  • STINGER 多すぎなので Bootstrap3 をベースにテーマを自作
  • テーマの基本を理解したら後は意外とスイスイ進んだ
  • テストデータの取り込みはかなりオススメ
  • テーマ作成した時にブックマークしたサイトの紹介

ブログの更新が1ヶ月止まってしまいましたが、仕上がりには満足しています。STINGER の時と比べ、マルチデバイスに対応したデザイン調整はすごく楽になりました。この後は少しずつ Bootstrap っぽさを消していこうかと思っています。今までありがとう、STINGER。

 ツイート 1  シェア 2  Google+1 0  Hatena 4