2018年10月17日追記:Boneの公式ウェブサイトは停止していませんが、GitHubのレポジトリが削除されデータはダウンロードできない状態です。
2017年5月3日追記:Boneの公式ウェブサイトのサーバが落ちています。GitHubで報告されていますが、そのままのようなので公開を停止したと思われます。Bones Website Down · Issue #864 · eddiemachado/bones
モバイルファーストでレスポンシブなWordPressのテーマ Bones http://themble.com/bones/ をベースにカスタマイズしました。
はじめに
Sassは使用せずにCSSをそのまま編集しました。またカスタマイズ内容によっては下記にあげるファイル/フォルダ以外に編集する必要が発生する場合があります。
子テーマ
そのままカスタマイズをしても良かったのですが、試しに子テーマを作成してCSSを上書きする方法をとってみました。
テーマを格納するフォルダ名を親テーマ「bones」、子テーマ「bones-child」としました。
親テーマ「bones」はそのままWordPressにアップロード。
子テーマ「bones-child」の中身
下記の3ファイルを作成
functions.php、style.css、library/css/style.css(親テーマのCSSをコピー)
functions.phpの中身
'../bones/style.css'の部分が親テーマのCSS
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'../../bones/style.css' );
}
style.cssの中身
Theme Nameに子テーマの名称とTemplateに親テーマの名称
/*
Theme Name: bones-child
Author: 適当な名前
Template: bones
*/
library/cssのディレクトリにあるstyle.css
親テーマのCSSをコピーして配置
子テーマの有効化
子テーマ「bones-child」をアップロードし、管理画面の「外観」→「テーマ」にアクセスし子テーマが表示されていれば成功です。
まとめ
まだ画面サイズごとのレイアウト調整、コメント投稿関連のテンプレート、引用のCSSなどなど細かい部分の調整は完了していませんが、phpやcssファイルにコメントが書かれていましたので、カスタマイズし易かったです。
機能やデザイン面で親テーマのphpをカスタマイズする必要があったので、WordPress公式のマニュアル WordPress Codexで調べながらの作業。もっとシンプルなテーマの方がカスタマイズし易いかなと思いました。
Bones以外のカスタマイズ前提なテーマ(Blank WordPress Themes)
Roots
underscores
html5 blank
html5 reset
naked wordpress
ベースとして使用されることが多いテンプレート
HTML5 BOILERPLATE