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. この記事へのトラックバックはありません。

最近のお知らせ

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

2018年版カレンダー公開

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

Excelでカレンダー作成

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

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

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

サイトリニューアル

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

サイトリニューアル

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

2017年版カレンダー公開

本年よりオリジナルカレンダーを作るようにしてまいります。 画像形式での…

ホームページ製作について

これまでに製作してきた企業・団体のホームページを紹介するページを作成し…

営業日変更のお知らせ

2016年4月より毎週土日を休業とさせていただきます。 ご迷惑をおかけ…

年末年始の営業案内

お客様各位 日頃より、ヒムカシステムをご愛顧いただき誠にありがとうござ…

取り扱い商品項目の追加をしました

この度、京セラプリンター及びセキュリティ対策ツールの取り扱いを開始しま…

最近のブログ

–PR–

カスペルスキー セキュリティ
PAGE TOP