WordPressのテーマ Bonesでカスタマイズ

2015年2月22日

モバイルファーストでレスポンシブなWordPressのテーマ 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」をアップロードし、管理画面の「外観」→「テーマ」にアクセスし子テーマが表示されていれば成功です。

bones 子テーマ有効化

bones 子テーマ有効化

まとめ

まだ画面サイズごとのレイアウト調整、コメント投稿関連のテンプレート、引用のCSSなどなど細かい部分の調整は完了していませんが、phpやcssファイルにコメントが書かれていましたので、カスタマイズし易かったです。
機能やデザイン面で親テーマのphpをカスタマイズする必要があったので、WordPress公式のマニュアル WordPress Codexで調べながらの作業。もっとシンプルなテーマの方がカスタマイズし易いかなと思いました。

Bones以外のカスタマイズ前提なテーマ(Blank WordPress Themes)
Roots
underscores
html5 blank
html5 reset
naked wordpress

ベースとして使用されることが多いテンプレート
HTML5 BOILERPLATE