WordPressの子テーマ設定方法（BizVektor）

BizVektorはWordPressの便利なテーマです。

このテーマを使った企業のサイトも沢山あります。

しかし一般的なテーマと構造が少しだけ違うんですね。

そのせいで子テーマを使ったカスタムに一手間かかるのも事実。

私も色々と調べながら苦戦しつつ何とか設定することができました。

良かったら参考にしてください。

公式ページの説明は分かってる人向け
他の参考にさせてもらったサイト
BizVektorの構造
BizVektorの子テーマ設定手順

公式ページの説明は分かってる人向け

最初に調べたのはBizVektorの公式サイトです。

以下の説明、コードなどが書いてました。

でも詳しくない人には正直分からないと思います。

<?php

/*

一つ目の biz_vektor_themePlus はテーマ側で用意されているフィルターフック名

二つ目の themePlus はフィルター処理の関数名。任意に変更可ですが下の行の function と同じ名前にして下さい。

【重要】複数の拡張デザインスキンプラグインを同時に有効化する場合は、フィルター処理の関数名がダブらないように注意して下さい。

*/

add_filter('biz_vektor_themePlus','themePlus');

function themePlus($biz_vektor_theme_styles){

    $biz_vektor_theme_styles['★テーマ識別用引値★']['label'] = '★プルダウンに表示されるテーマ名★';

    $biz_vektor_theme_styles['★テーマ識別用引値★']['cssPath'] = '★スタイルシートのURL★';

    $biz_vektor_theme_styles['★テーマ識別用引値★']['cssPathOldIe'] = '★IE8以前用スタイルシートのURL★';

    return $biz_vektor_theme_styles;

}

よく分からん！と思った方、ここは飛ばしてもOKです。

フィルターフックという機能を使って他のデザイン設定を引っ張ってきてるなーくらいに思っておいてください。

補足ですが、公式サイトにはこういうことも書いてあります。

※BizVektorの場合は親テーマのcssを style.css に書いているわけではないので、
@import url(“../*******/style.css”);
と記載する必要はありません。むしろ記載しないで下さい。

他の参考にさせてもらったサイト

今回調べてみて分かったことは、BizVektorの子テーマをカスタマイズしている情報がそんなに多くないということ。

最初に書いたように、面倒だからか子テーマではなく本体をそのまま編集している人が多い印象でした。

BizVektorは更新が多く便利な機能が足されていくテーマなので、親テーマではなく子テーマを編集をした方がいいです。

きちんと子テーマを編集していて、一番親切で分かりやすかったページがこちら

BizVektorのデザインスキンが簡単に設置出来る方法（子テーマ・カスタマイズ） | Toroノマド

最近、コーポレートサイト作成等でBizVektorのテーマを使用することが多い＠「ノマド」な主婦Toroです。このテーマは、Wordpressを扱っている人は必ず耳にしたことがあるテーマですね。無料テーマで、あれだけの機能が備わっているのは本当に珍しい、いや、ありません。このテーマについて、以前、他の記事で紹介していま...

ただ少しだけ分かりにくいところがあったので、自分がやった手順と説明を書いておきます。

（子テーマに置くスキンフォルダ内のCSSファイル名が違った）

BizVektorの構造

子テーマを設定する前に1つだけ知っておいて欲しいのがBizVektorの構造です。

早く方法がしりたいかも知れん。

でもここを知ってないと変な事をしちゃて後で泣くから！

最低限これだけは知っといて。

一般的なテーマには、テーマフォルダに「style.css」が存在しており、それでテーマ全体のデザインを設定しています。

しかしBizVektorではデザインスキンが4種類ある。

スキンごとに4つのフォルダがあって、各フォルダの中にあるCSSファイルがそれぞれのデザインを設定しています。

ちなみに、BizVektorのテーマフォルダにstyle.cssはありますが、ここではテーマ全体のデザインを設定していません。

（↑BizVektorのテーマフォルダ）

（↑BizVektorのテーマフォルダ内のデザインスキンフォルダ）

（↑デザインスキンフォルダ001：Default）

（↑デザインスキンフォルダ002：Calmly）

（↑デザインスキンフォルダ003：Rebuild、ファイル数が他より多い）

（↑デザインスキンフォルダplain：プレーン）

このようにBizVektorはこのデザインスキン機能で、4種類のデザインを選ぶことができます。

便利だけどカスタマイズする時にこの知識が必要です。

このスキンはもっと増えるかもしれません。

BizVektorの子テーマ設定手順

それでは本題の子テーマ設定手順に進みます。

１．対象フォルダをダウンロード

対象フォルダとは上の図に書いてあるデザインスキンフォルダのうちの１つです（「001」,「002」,「003」,「plain」のどれか）。

FTPソフト（FileZillaなど）を使って、これをフォルダごとパソコンにダウンロードします。

既にパソコンにデータがある人は必要ありません。

私は「001」（Default）を選びました。

２．フォルダ名・ファイル名を変更

まずフォルダの名前を変更します。

私の場合は「001」を「MySkin」にしました。

次にフォルダ内にあるファイル名を変更します。

私の場合だと「001.css」を「MySkin.css」、「001_custom.php」を「MySkin_custom.php」、「001_oldie.css」を「MySkin_oldie.css」に変更しました。

このフォルダは、後で子テーマフォルダの中に入れるフォルダです。

子テーマフォルダ本体ではないので注意してください。

３．子テーマフォルダの準備

BizVektorの公式サイト（先ほどのリンク）から子テーマフォルダをダウンロードします。

その中の「function.php」を編集します。

初期状態だと”<? php”しか書かれていないと思いますが、以下の通りに変更します。

<?php
add_filter(‘biz_vektor_themePlus’,’MySkin’);
function myskin($biz_vektor_theme_styles){
$biz_vektor_theme_styles[‘MySkin’][‘label’] = ‘マイスキン’;
$biz_vektor_theme_styles[‘MySkin’][‘cssPath’] = get_stylesheet_directory_uri().’/MySkin/MySkin.css’;
$biz_vektor_theme_styles[‘MySkin’][‘cssPathOldIe’] = get_stylesheet_directory_uri().’/MySkin/MySkin_oldie.css’;

return $biz_vektor_theme_styles;
}

大文字、小文字には注意してください。

同じようにするなら貼り付けでOKです。