超倍速でWordPressオリジナルテーマ作成！骨だけ「Bones」の使い方をザックリと
「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。（当人比。ちなみに、その他のブランクテーマは下記リンク先を）
「Bones＝骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。
簡単にまず、優れた特徴をあげてみましょう。
ウェブさえ
子テーマ不要
よそ様が作ったテーマをカスタマイズする場合、子テーマを用意した方がいいです。直接、元のテーマをいじくると、開発者によるテーマのアップデートで、それまでのカスタマイズを失ってしまう恐れがあるからです。苦労が水の泡に。
でも、子テーマを利用するときにも、色々と難しいルールがあって、デザインや機能を上書きする順序に気をつかわないといけなかったり、特に「functions.php」の挙動には細心の注意を払わないと、WordPress自体が動かなくなるってこともあります。
それに対してBonesは、スターターテーマとして「カスタマイズ前提」を誇ってます。子テーマではなく、直接テーマファイルをいじくりざんまいできるよう、ファイル構成はシンプルで、デザイン面への装飾も必要最低限に抑えてくれてます。
「Welcome カスタマイズ」な作りになってるわけです。
モバイルファースト
モバイルファーストは、「モバイルに優しく」という考え方です。
このブログ、アクセスの半数以上はまだPCからなのですが、モニタのサイズで見てみると実は「320×568」での閲覧が最も多いのですよ。スマホからのアクセスですね。
こんな時代ですから、「モバイルファースト」をおろそかにしちゃうと、モテません。
Bones君は、もちろん立派なモテ姿勢ですよ。優しすぎて、骨抜きにされちゃうかも。
ちゃんと、モバイルからデザインを設計しやすいようにしてくれてます。ムダにCSSを重くせず、閲覧側の画面サイズに合わせてスタイルを定義していきやすいのです。
Sass！
Sass、ホント便利！
Sassを導入しやすくしてくれてるBonesもホントにホント、素敵です！！
Compass用の設定ファイルを用意してくれてます。ぜひ、「Sass + Compass」で、カスタマイズを始めましょう。確実に、スピードアップを体感できます。
カスタムほにゃらら
WordPressのCMS的側面を強化するための「カスタムほにゃらら」。興味があっても、最初の手間が大きくて、特に初心者は敬遠しがち。
でも、Bonesなら、先に必要なファイルや「functions.php」への記述を用意してくれてるので、ハードル低く取り入れられます。
「カスタム投稿タイプ」を利用して、物件情報を更新できる不動産サイトや、地域に分けたローカル情報を配信するポータルサイトなどの構築。「カスタムダッシュボード」を利用して、管理画面さえもオリジナルに。
なんて、WordPressを単なるブログツールで終わらせない使い方を楽しめます。いろいろな案件にも幅広く対応できそうですね！
Bonesの使い方
これ、テーマをインストール直後の画面です。ムダがない感じでしょ。
使い方、というかカスタマイズの方法は、今までテーマをいじくったことのある人なら、それほど困難なく入っていけると思います。
ディレクトリ構成はすごくシンプルにまとまってます。第１階層は、こんな感じ。あんまいじくらないかなーと思ったものはリストから省いてます。
|-- 404.php （404エラーページ） |-- archive-custom_type.php （カスタム投稿一覧ページ） |-- archive.php （ブログ一覧ページ） |-- comments.php （コメント） |-- editor-style.css （エディター用） |-- favicon.ico （ファビコン） |-- favicon.png（ファビコン） |-- footer.php （フッター） |-- functions.php （テーマ機能） |-- header.php （ヘッダー） |-- index.php （表紙） |-- library （CSS／JS関連ファイルをまとめたフォルダ） |-- page-custom.php （カスタム固定ページ） |-- page.php （固定ページ） |-- post-formats （投稿フォーマット関連ファイルをまとめたフォルダ） |-- screenshot.png （スクリーンショット） |-- search.php （検索） |-- sidebar.php （サイドバー） |-- single-custom_type.php （カスタム投稿シングルページ） |-- single.php （投稿シングルページ） |-- style.css （スタイルシート） |-- taxonomy-custom_cat.php （カスタム投稿カテゴリーページ）
（このディレクリ構成図を使いたかった！方法は「前回」紹介してますよね）
ファイル名を見れば、どれを編集すれば、サイト上のどこに影響するのか分かりますよね。細かいところでは、ファビコンも用意してくれてたり。ニクいですね。同じサイズでオリジナルの画像を作って、差し替えればOKです。
functions.php
を覗くと、そのテーマならではのオリジナルの機能を把握できます。Bonesの機能としては、ヘッダー整形、アイキャッチ画像、ナビゲーションメニューなどを設定してます。
どのファイルもそうですが、ちゃんと編集方法をコメントで記述してくれるので助かります。
例えば「アイキャッチ画像」について見てみると、
add_image_size( 'bones-thumb-600', 600, 150, true ); add_image_size( 'bones-thumb-300', 300, 100, true ); /* to add more sizes, simply copy a line from above and change the dimensions & name. As long as you upload a "featured image" as large as the biggest set width or height, all the other sizes will be auto-cropped.
他にサイズを増やしたいなら、「コピペして数値を変えるだけでいいよ」と教えてくれてます。親切ですね。
ウィジェットの増やし方とかナビゲーションメニューについてもちゃんと説明してくれてるので、じっくり読めば、オリジナルテーマの作り方をあまり知らない初心者さんにとって、かなり勉強になるはずです。
CSSの編集
CSSをいじくるのは、上述通りSassがおすすめです。
Sassを知らない人は「library」の中にある「style.css」を編集します。
|-- library | |-- css | | |-- admin.css | | |-- editor-style.css | | |-- ie.css | | |-- login.css | | `-- style.css ←コイツ！
でも、せっかくなのでこれを機に一度Sassをトライしてみましょうよ。
Sassで編集するファイルは「scssフォルダ」に以下のようにまとまってます。ここも、いじくらなそうなファイルはリストアップしてません。
| |-- scss | | |-- admin.scss（管理画面） | | |-- breakpoints | | | |-- _1030up.scss（画面サイズ1030px以上） | | | |-- _1240up.scss（画面サイズ1240以上） | | | |-- _2x.scss（画面サイズ1030px以上） | | | |-- _481up.scss（画面サイズ481px以上） | | | |-- _768up.scss（画面サイズ768px以上） | | | `-- _base.scss（ベースになるスタイル。モバイルファーストってことを忘れずに） | | |-- ie.scss（ie用） | | |-- modules | | | |-- _alerts.scss（アラート） | | | |-- _buttons.scss（ボタン） | | | `-- _forms.scss（フォーム） | | |-- partials | | | |-- _functions.scss（追加機能） | | | |-- _grid.scss（グリッド／レイアウト用） | | | |-- _ie_grid.scss（ie用グリッド／レイアウト用） | | | |-- _mixins.scss（ミックスイン） | | | |-- _print.scss（印刷用） | | | |-- _typography.scss（タイポグラフィ、テキストまわりのスタイル） | | | `-- _variables.scss（変数） | | `-- style.scss（コンパイル後）
デザインをパーツごとに分けてくれてるので、ピンポイントでカスタマイズできますね。
「variables.scss（変数）」や「mixins.scss（ミックスイン）」をうまく利用して、繰り返しの記述を省いたり、頻繁に使うスタイルを使い回す旨味を味わいましょう。CSS一本でカスタマイズするより、うんと速く進められます。
Compassを使えばもっと便利
Compassを利用すれば、Sassをもっと強化できます。Bonesでは、Compass用の設定ファイル「config.rb」を用意してくれてます。Compassもインストールしたら、その旨味をすぐに味わえるようになってる。ってわけです。
日本語、文字化ける
最後にちょっとご注意を。今使ってるバージョン（Version: 1.7）だと、変なふうに日本語が文字化けします。解消するには下記の部分を削除します。
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga", "dlig";
-o-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
この記述の在処は「libraryフォルダ」の中、以下のファイルにあります。
|-- css | `-- style.css ←CSSならここ（523行目あたり） |-- scss | |-- partials | | |-- _typography.scss ←Sassならここ（78行目あたり）
っと、以上のように
Bonesをザックリと解体してみました。Bonesのダウンロードは下記の公式サイトでできます。
読み終わったらシェア！
ウェブさえの無料サービス
どちらでもお好きな方を。もちろん両方でも。
