高度なカスタマイズの仕様

テンプレートファイルを直接編集したいというWeb制作者の方へ

WordPress 3.0以降には「子テーマ」という使い方が出来ます。変更を加えるファイルのみ子テーマのフォルダに入れる形になるので、BizVektor本体のバージョンアップの際も、せっかく変更した点を再修正したり、うっかり上書きして消えてしまうという事もありませんので、子テーマによるカスタマイズを推奨しています。
BizVektorではユーザーから要望の強い機能やインターネット事情にあわせて新しく出てきた機能を随時追加しています。“自分はバージョンアップしないから” と思ってテーマ本体を直接いろいろカスタマイズしてしまって、後から魅力的な機能が追加されてもバージョンアップ出来ずに後悔する人が後を絶ちません。
子テーマの作り方に関しては「WordPress 子テーマ作り方」などで検索すれば参考記事が出てきます。

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

子テーマのインストール・適応

下記に子テーマのサンプルがありますので、ダウンロードしてテーマ同様にアップロードして下さい。
[wpdm_file id=6]

style.cssに子テーマの名前などの情報がありますので、必要に応じて変更して下さい。

「設定」→「外観」から、子テーマを選択出来るようになっているので、適応させて下さい。

子テーマを適用させると、WordPressとしては「別のテーマを適用した」と認識されてナビゲーションが解除されますので、「設定」→「メニュー」からメニューを再度設定してください。

子テーマによるCSSの修正方法

軽微な調整の場合

子テーマのディレクトリのstyle.cssに直接記述して下さい。
IE8以前用のCSSは子テーマのディレクトリ内に新たに style_oldie.css というファイルを作成して記述して下さい（BizVektor0.8.5以降）。

cssを全て差し替えたい場合

子テーマのディレクトリ内に差し替えたいCSSや画像ファイルを置いた上で、
子テーマのfunctions.php（なければ作成）に下記を記述します。

<?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;
}

※ ★テーマ識別用引値★は３つとも同じ値を入力して下さい。
※ 正しく動作しなかったり認識しない場合は ‘ などが全角になっていないか確認して下さい。

上記記入すると、BizVektorの設定画面（外観→テーマオプション）で、オリジナルのCSSを適応させる事ができます。

プラグインによる外部デザインの読み込み方法

ウェブ制作者が他のCSSを適応する場合のフィルターフックを用意しました。
下記の様式のphpファイルを作成し、プラグインフォルダにアップロードして有効化する事によって、テーマオプション内のデザイン選択プルダウンから選択出来るようになります。

<?php
/*
Plugin Name: ★プラグイン名★
Plugin URI:
Description: ★プラグインの説明★
Author: ★制作者★.
Author URI: ★制作者URL★
Version: 0.0
*/

/*
一つ目の 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;
}

※ 無料の拡張デザインスキンプラグイン「WCT2012 SP1」を参考にするとわかりやすいです。
※ ★テーマ識別用引値★は３つとも同じ値を入力して下さい。
※ 正しく動作しなかったり認識しない場合は ‘ などが全角になっていないか確認して下さい。

IE8以前用のCSSについて

BizVektorでは、モバイルファーストの視点より、標準でモバイルレイアウトを適応し、ウィンドウサイズに応じてメディアクエリーで別のレイアウト用スタイルを順次読み込んでいます。
しかし、IE8以前においてはメディアクエリーに対応していない為、PCでの閲覧時においてもモバイル版のレイアウトで表示されてしまいます。
それを回避する為に、追加でIE8以前用のスタイルを読み込みます。
IE8以前用のスタイルは、メディアクエリー部分をそのままコピー＆ペーストし、メディアクエリーに関する表記だけ削除すればよいと思います。

※実は0.5からこの関数は用意してありましたので、テーマを解読された方は上記のような手法でスタイルを追加されたかもしれませんが、配列の形式が変わっていますので、ご確認の上調整下さい。

header.phpに読み込み先のCSSを直書きじゃいけないの？

端末によってCSSが適切なタイミングで読み込まれずに稀に表示が崩れる事があるのと、header.phpも今後のバージョンアップでまだソースコードが変更になりますので、出来るだけ上記方法での対応を推奨いたします。

フィルターフック

BizVektorでは主に下記のフィルターフックを用意しています。

// head タイトル
$headTitle = apply_filters( 'titleCustom', $headTitle );
// ヘッダーコンタクトエリア
$headContact = apply_filters( 'headContactCustom', $headContact );
// ヘッダーOGP
$bizVektorOGP = apply_filters( 'bizVektorOGPCustom', $bizVektorOGP );

MENU