Habakiriの導入方法まとめ
2017/01/30
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
こんにちは、okutani(@okutani_t)です。本記事ではWordPressテーマの「Habakiri」の導入方法について解説しています。
Habakiriはシンプルなデザインが特徴で、ばっちりレスポンシブ対応した素敵なテーマです。
以下の特徴があげられます。
- WordPress公式テーマ
- Bootstrapベース
- レスポンシブ
- 便利なテーマカスタマイザー
- シンプルで使いやすい
コーポレートサイトやブログなんかに使いやすいテーマかと思います。
もっと詳しく知りたい方は、以下の公式ブログを参照してみてください。
LINKBootstrap ベースのシンプルでカスタマイズ性の高い WordPress テーマ Habakiri が公式ディレクトリに掲載されました。 – モンキーレンチ
では、さっそくHabakiriの導入方法についてみていきましょう。
スポンサーリンク
Habakiriの導入
以下の公式サイトへアクセス。「DOWNLOAD」ボタンをクリック。
LINKHabakiri – BootstrapベースのWordPress公式ディレクトリ掲載テーマ
wordpress.orgに移動します。「Download」ボタンをクリック。
今回は「habakiri.2.4.0.zip」がダウンロードされました。
Habakiriのアップロード
ダウンロードしたHabakiriをWordPressサイトにアップロードしていきます。
FTPソフトを使ってもいいのですが、今回は管理画面からアップロードすることにしました。
管理画面から「外観」→「テーマ」→「新しいテーマを追加」を選択。
「テーマのアップロード」→「ファイルを選択」から先ほどダウンロードしたHabakiriを選択、「今すぐインストール」をクリック。
インストールが完了しました。確認のため、有効化しておきます。
サイトを確認して、Habakiriのテーマに変更されていればOKです。
子テーマの作成
では、Habakiriの子テーマを作っていきます。
なぜ子テーマとやらを作るのか、と疑問に感じる方もいるかと思います。とっても簡潔に説明すると、「別のテーマを作っておくことで、親テーマのアップデートに対応できるようにする」ということです。
親テーマを継承した子テーマをカスタマイズしていくことで、のちのちの管理を楽にすることができます。基本的には親テーマはいじらず、子テーマをガシガシ更新していくとGoodです。
詳しく知りたい方は「WordPress 子テーマ」とかでぐぐってみましょう。たくさん解説しているサイトが出てきます。
Habakiriの子テーマ作成方法は公式マニュアルにも紹介されています。
今回はこれにそって進めていきます。
まずは「habakiri-child」フォルダを作成。その中に「style.css」ファイルを以下の内容で作成します。
/*
Theme Name: habakiri-child
Template: habakiri
*/今回は必要最低限の記述のみおこないました。子テーマの名前、継承するテンプレートの名前を指定してあげています。
通常は@import url(“../themename/style.css”);などの記述が必要ですが、Habakiriではそれがなくても親のCSSファイルを読み込んでくれます。なので、上記の記述のみでOKです。
これで子テーマが作成できました。かんたんですね。
子テーマのアップロード
FTPソフトでアップロードしてもいいですが、今回は先ほどと同じように管理画面からアップロードすることにします。
作成した子テーマをzipで圧縮しておき、親テーマと同じ方法でアップします。
先ほどと同じく、有効化しておきましょう。
管理画面で次のように表示されていればOKです。
Habakiri本体は選択されておらず、作成した子テーマが指定されていることを確認してください。
これで、サイトを確認して、HabakiriのテーマになっていればOKです。
テーマカスタマイズの進め方
途中の説明でもありましたが、カスタマイズは「子テーマ」をいじりながら進めていきます。
「habakiri-child/style.css」にCSSコードを追加していけば、親テーマを汚さずにCSSの追加をすることができます。
FTPソフトで直接いじってもいいですし、「外観」→「テーマの編集」からstyle.cssを編集してもOKです。
例えば、次のCSSをstyle.cssに記述すれば、タイトルのフォントの大きさと、色を変更することができます。
h1.site-branding__heading a {
font-size: 50px;
color: red;
}次のように、タイトルが変更されます。
それ以外のファイル「○○.php」などは、親テーマからコピーし、子テーマに入れて編集します。
こうすることで、子テーマの.phpファイルが親テーマの.phpファイルより優先されて読み込まれるため、特定の部分のみ子テーマで編集することができます。
アップロードした親テーマ、子テーマはそれぞれ次の場所にあります。FTPで直接いじる場合は、以下の場所を見に行けばOKですね。
// 親テーマ
（WordPressのインストール場所）/wp-content/themes/habakiri/
// 子テーマ
（WordPressのインストール場所）/wp-content/themes/habakiri-child/Habakiriの導入方法と、カスタマイズの進め方について解説しました。
Habakiriを利用する際の参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
