BillVektorカスタマイズ（TOPページ編集）

前回まででIWPの起動メニューをカスタマイズし、BillVektorの使用準備ができました。
引き続きBillVektorのカスタマイズで自分の使いやすいようにしていきます。

便利なシステムのご提供ありがとうございます。

ビルベクトル・・BillVektorは請求書の管理をWordPressのテーマとして実装したオープンソースの請求書管理システムです。

運営会社「株式会社ベクトル」

上記リンクにBillVektorの概要やインストール方法が掲載されています。
ここではインストールや初期設定ができているのを前提として話を進めていきます。

公式サイトの動画より、BillVektor初期画面（テストデータ登録済み）

編集後の画面

初期画面の変更点は

１．ヘッダーメニューの表示・CSS設定
２．左のメニューへ取引先へのリンク追加
３．CSV出力機能など削除

子テーマを作ってカスタマイズをするのが一般的ですが、今回は基本的にバージョンアップの予定もない為
テーマファイルを直接編集します。とは言え、原本を直で編集するのではなく編集するPHPファイルをコピーし
編集を加え、リネームすることで原本は残しています。
編集に失敗した場合、動作が停止してしまいますので原本は必ず残すようにしてください。

カスタマイズ

１．ヘッダーメニューの表示
１－１．PHP編集

「d:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\bill-vektor-master」内にある「header.php」を編集
Ver0.7.1ではheader.phpの下部にメニュー表示のコードが記載されコメント化されていましたので、それを生かします。
24行目<?php /*　と　55行目 */?>を削除します。

編集したらUTF-8で保存してください。
これで一旦グレー背景で「ホーム・見積書・請求書」のメニューが表示されます。

１－２．メニュー作成

WP管理の外観からメニューに行き、好みのメニューを作成し「Header Navigation」にチェックを入れて保存。
これでメニューが作成したメニュー表示に変わります。

１－３．メニューの背景色などの変更

WP管理のテーマのカスタマイズより、「追加CSS」を選択し以下のように追加します。

.navbar-inverse {
background-color: #0099CC;　＜－メニューの背景色
border-color: #CCCCCC;　＜－メニューの境界線色
}
.navbar-inverse .navbar-nav>li>a {
color: #ffffff;　＜－メニュー項目の文字色
}

それぞれの部分を好きな色に変更してください。

私の場合は、管理画面に切り替えなければならない自社情報や取引先・見積・請求の追加編集ともう一つのWP環境へのリンクをメニューにしました。

メニューサンプル

２．左メニューへの項目追加
送付状を編集するのに管理画面に推移して編集となるため、ワンクリックで移動できるように追加しました。
ヘッダーメニューにもありますが・・
２－１．PHP編集

「d:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\bill-vektor-master」内にある「sidebar.php」を編集

13行目に追加
<h3 class=”sub-section-title”><a href=”<?php echo home_url(‘/’).’?post_type=client’;?>”>取引先（送付状）</a></h3>

これで以下のように表示されます。

３．エクスポートなどの機能削除
この機能の削除などは無理にしなくても結構です。

PHP編集

「d:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\bill-vektor-master」内にある「index.php」を編集

82行目　<div id=”news” class=”section”>から　113行目</div>まで削除

BillVektorの起動画面のカスタマイズは以上です。

次回は請求書と見積書のカスタマイズをテーマにします。