loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【WordPress】無料テーマのBizVektorを使ってみた-子テーマ
この記事は約4分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2012.8.16

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

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

追記 -2014.3.22-

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

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

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

 

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

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

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

ちまたにワードプレス用テンプレートがごまんとある中
以前から気になっていたのが「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 設定も必要ありません。

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

キャプチャ画像

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LUXE (tcd022)」

コメント(2件)

  • khy より:

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

    • lacuisine より:

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

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ