Habakiriの導入方法まとめ

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。本記事ではWordPressテーマの「Habakiri」の導入方法について解説しています。

Habakiriはシンプルなデザインが特徴で、ばっちりレスポンシブ対応した素敵なテーマです。

以下の特徴があげられます。

コーポレートサイトやブログなんかに使いやすいテーマかと思います。

もっと詳しく知りたい方は、以下の公式ブログを参照してみてください。

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

今回はこれにそって進めていきます。

まずは「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を利用する際の参考になれば幸いです。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

親テーマ、子テーマの考え方は最初はとっつきにくいですが、覚えておくと管理が便利になるので設定しておくと吉ですね！ぜひ試してみてください。