【WordPress】無料テーマのBizVektorを使ってみた-子テーマ

Total 1,458 views
この記事の所要時間は約 4分です。

当ブログとは別にある SeeeSaa運営のブログなんですが
今後そのブログを育て上げる意味も込めて独自ドメインによるワードプレスでの新サイトに引っ越すことにしました。

その時に使ったテーマが「BizVektor」です。

スポンサーリンク


追記 -2014.3.22-

BizVektor についてはこれまで度々カスタマイズの記事を書いてきましたが、バージョンアップの間隔が短く変更内容も一気にガラっと変わることも多いため、とうとうカスタマイズが追いつかなくなりました。
テーマが複雑でカスタマイズが難しいというのもあります。

よって BizVektor を使ってのサイト構築記事はちょっとお休みすることにしました。

ここは参考記事として残しておきますが、内容は古いバージョンについてのものです。ご了承ください。

 

イメージ画像

 

これまでなら自作のテンプレート(テーマ)を使ってサイト構築するところですが
改修に改修を重ねてつぎはぎだらけのテンプレートということもあって
SEO 的にはちょっと頭打ちにもなっていたんです。

そこで SeeeSaaブログは、今後の自分自身の勉強のためにも他人様が作った全く別物のテンプレートを使ってサイト構築しようと考えてみました。

白羽の矢が立ったのは無料テンプレートの「BizVektor」です。

 

このテーマはかなり使えます

ちまたにワードプレス用テンプレートがごまんとある中
以前から気になっていたのが「BizVektor」という無料テンプレートでした。

シンプルなデザインが気に入ったのと
レスポンシブルデザインや Facebook との連携なども標準で装備し、
ブログだけでなくそのほかの機能もさりげなく盛り込めそうな雰囲気だったのが決め手です。

気にはなってましたが
ひんぱんにアップデートを繰り返している(未完成の)テンプレートなので
本当はちょっと敬遠もしてはいたんです。

せっかくカスタマイズしても
アップデートのたびに一から手直しするのは面倒くさいなぁというのがその理由です。

差分アップデートならまだしもテーマ本体を入れ替えるアップデート方式ですからね。

しかしワードプレスの子テーマというものをふと思い出し
「子テーマならやっていけるんじゃねぇ?」と一念発起。

敢えて未完成のテーマを取り込むことで
共にブラッシュアップしようではないかと勝手に手を組むことにしたんです。

 

子テーマとは

子テーマとは、簡単に言ってしまえば
親テーマ(基本のテーマ)の機能やレイアウト情報などをそのまま引き継ぎ
カスタマイズしたい部分だけを上書きすることで
自分好みのテーマを作れるという便利な手法のことです。

これだと親テーマ本体がアップデートしたとしても若干の手直しだけで対応できるので
今回のような事例にはちょうどいいんです。

しかし子テーマを作るのは予想していたのと異なり結構しんどいものでした。

 

子テーマの作り方

子テーマの作り方自体の情報はネットでいくらでも紹介されているので
ここではポイントだけに絞っていきます。

その前に BizVektorはメインメニューの項目数を管理画面で選べるようになっています。今回はカスタマイズしやすいプレーンなテーマ色である「プレーン」と、メニュー数は 4(分割)を選択したとします。

子テーマには親となる「プレーン」テーマ用の CSS ファイル『plain.css』を @import で読み込んでおきます。

さらにメニュー項目を均等に配置するための「gMenu_divide_4.css」も読み込ませます。この指定がないとメニューが左詰めにされて見栄えが悪くなります。
そのため項目数を変更したときは例えば 5 なら「gMenu_divide_5.css」に変えておかないと均等配置になりませんので注意が必要です。

追記 -2012.8.27-

コメントにて『子テーマのインポート文はこれ一行でいけませんかね? @import url('../biz-vektor/style.css');』とのご指摘を受けました。

子テーマの作成方法に乗っ取れば確かにその通りで私も最初はそう書いていたんです。
しかし当の style.css を見たらほとんど何も書いてなかったため、ロクに検証もせずに上図のような方法を取ってしまったという経緯があります。

しかしご指摘を受けてあらためて試したところ問題なく稼働するのを確認いたしました。他の import 設定も必要ありません。

ありがとうございました。キャプチャ画像をつけておきます。

キャプチャ画像

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

2件のコメント

  • khy

    こんにちは、子テーマのインポート文は、
    これ一行でいけませんかね?
    @import url(‘../biz-vektor/style.css’);

    • lacuisine

      khy さん、コメントありがとうございます。
      確かにその通りでした。確認して追記分として更新しておきました。

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)