BillVektor改造その2

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

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

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

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

変更の結果画面

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

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

やったこと

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

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

変更のPOINT

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

<span class="bill-no-print">
<?php get_template_part('template-parts/breadcrumb');?>
</span>

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

 

変更後のイメージ

<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>

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

カスタマイズでのCSS追加

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

CSSサンプル

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

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

 

BTOパソコン最大3万円OFF!パソコン工房「夏の大感謝祭」8月29日(火)14:00まで!
カスペルスキー セキュリティ

関連記事一覧

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近のお知らせ

スライダーでお知らせを表示します。

台風被害

先日の大型台風24号により 自宅ですが、ベランダの屋根や離れの家屋の屋…

サイトリニューアルに伴う一時閉鎖のお知らせ

サイトのリニューアルと同時に完全SSL対応、記事や他のコンテンツ整理を…

移転しました

移転先:宮崎県日向市細島839-4 本日より業務は上記住所で行っていま…

DoSPOTのサービス停止

移転に伴い1日1時間無料でWi-FiのDoSPOTのサービス配信を中止…

移転します

5月末で移転させていただきます。 店内販売は停止となりますが、その他の…

2018年版カレンダー公開

2018年のカレンダーが完成しましたので、PDFを公開しました。 カレ…

Excelでカレンダー作成

本日でExcelを使ってオリジナルカレンダー作りが完結しました。

端切れ・小物の店内販売!

おばあちゃんの手作り小物や端切れ、毛糸など なんと!100円から販売中…

サイトリニューアル

年に1,2回のペースでリニューアルをしています。 今回のリニューアルは…

サイトリニューアル

全体的にデザインを変更しました。 お知らせとブログ的記事は別々にリスト…

最近のブログ

パソコン工房
PAGE TOP