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

※本サイトは、アフィリエイト広告による収益を得て運営しています。リンク先での購入により売上の一部が本サイトに還元されることがあります。
WordPressのテーマ Bonesでカスタマイズ

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」をアップロードし、管理画面の「外観」→「テーマ」にアクセスし子テーマが表示されていれば成功です。

bones 子テーマ有効化
bones 子テーマ有効化

まとめ

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

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

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



この記事のタイトルとURLをコピーする
スポンサーリンク