BillVektor改造その２

金額を表示するようにしたら、その一覧表がほしくなり更に改造しました。

変更内容
TOPページのデータ一覧の部分だけ印刷する。

一覧部分を選択し印刷すれば、それで一覧の印刷にも変えられますが、ちょっとスマートではないので作り変えます。

編集した内容
・index.php
・header.php
・テーマのカスタマイズ画面にてCSSの追加
・メニューの追加

変更の結果画面

【TOPページを普通に表示した状態】

【TOPページの印刷プレビュー】

やったこと

・ヘッダーのBillVektorのロゴ画像の変更（ファイルアップロード・リネーム）
・ヘッダーのロゴとソフトタイトル「見積書・請求書管理システム」のレイアウト変更
・index.phpの印刷用のレイアウト変更
・CSSの追加

ヘッダーのロゴ変更やソフトタイトル変更は必要ではありません。
タイトルが左寄せだったのがちょっと気になったから変更しただけです。

変更のPOINT

・印刷したくないパーツに<span class=”bill-no-print”>を追加します。閉じる</span>も忘れずに。
ヘッダーのロゴ、メニュー
index.phpのパンくずリスト、サイドバー、検索ボックス、お知らせ、エクスポート機能、コピーライトを印刷しないようにします。
変更イメージ（パンくずリストを印刷しないようにしています）

[code] <span class="bill-no-print">
<?php get_template_part(‘template-parts/breadcrumb’);?>
</span>
[/code]

・標準では複数ページになった場合、品名などの項目が2ページ目以降表示されませんので、
改ページした場合に項目を印刷するようにします。（上の印刷プレビューの画像を参考にしてください）
index.phpの30行目前後の<table class=”table table-striped table-borderd”>の下に
<thead>を追加します。
40行目前後の<th>金額</th>（前回の改造で金額表示をするようにした場合）の3行下</tr>の下に
</thead>を追加します。

 

変更後のイメージ

[code] <table class="table table-striped table-borderd">
<thead>
<tr>
<th>書類</th>
<?php if ( $page_post_type[‘slug’] != ‘client’ ) { ?>
<th>発行日</th>
<?php } ?>
<th>取引先</th>
<?php if ( $page_post_type[‘slug’] != ‘client’ ) { ?>
<th>件名</th>
<th>金額</th>
<?php } ?>
</tr>
</thead>
[/code]

これで改ページされたときにも書類、発行日、取引先などの項目が印刷されます。

カスタマイズでのCSS追加

１．印刷時にはテーブルを画面いっぱいに表示させる。
２．印刷時にリンク先アドレスが印刷されないように変更。
３．メニューの背景色と文字色の変更（必須ではありません）
以上を行っています。

CSSサンプル

[code] @media print {
a[href]:after {
content: "" !important;
}
abbr[title]:after {
content: "" !important;
}
.col-md-9 {
width:100%
}
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
background: #008fc4;
border-color: #008fc4;
}
.navbar-inverse .navbar-nav>li>a {
color: #ffffff;
}
[/code]

全てのコードを提示すると長くなりすぎますので、割愛させて頂きました。
全て知りたいと言う方いましたら、メールで依頼をいただければ変更後のファイルを送付させていただきます。