この記事は「Vektor WordPress Solutions Advent Calendar 2021」の12月9日の記事になります。
請求書、見積書を何で発行してます？
2023年10月1日（令和5年10月1日）よりインボイス制度が導入されるということもあり、フリーランスのWEB制作者も請求書について関心があると思います。
多くの方は、クラウドの請求書作成サービスや、エクセルの請求書テンプレートを利用されているのでしょうか。
私も独立当初は、無料でMisocaを利用していたのですが、弥生がMisocaを買収し、無料で利用できる範囲が小さくなった時、ちょうどこちらが出てきて、すぐに飛びつきました。
BillVektor
ベクトル社が提供している、請求書の管理をWordPressのテーマとして実装したオープンソースの請求書管理システムです。
WordPressでのWEB制作をしていて、BizVektorやLightningを使ってましたので、違和感なくBillVektorを使いこなせ、見積書・請求書作成・管理が飛躍的に楽になりました。
導入、使い方
カスタマイズできる
既存の請求書テンプレートや請求書作成サービスは
ありきたりだし、デザインも。。。
だよね。
デザインを生業にしてるので
請求書も、他とは違う見た目にしたいよね。
色だけでなく
フォントサイズや余白を変えるだけで
かなり変わるもんね
そう、そういうちょっとした所だけでも変えたいよね。
クラウドだと数種のテンプレートから選んで。とかだし
エクセルだと見た目を変えるのに慣れていないから
思うように変えにくいし
結局、行政っぽい、定形になっちゃうよね。
ちょっと差をつけたい、変えたい人こそ
BillVektorがいいんだよ。
WEB制作をしているなら
普段からWordPressのテーマをカスタマイズしているし
CSSで見た目を整えてるよね。
BillVektorはWordPressのテーマなので普段どおりにカスタマイズして
請求書のデザインも作れるんだよ。
見た目を変える
請求書を入力してプレビューするとこんな感じになります。
非常にシンプルですが、ベースなので、お好きなようにCSSでいじっていきます。
例えば、「ご請求書」と下のボーダーの余白、気になりますよね。
DEVツールなどでソースを確認すると、その箇所は
.bill-title {
line-height: 1em;
border-bottom: 3px double #000;
text-align: center;
letter-spacing: 1em;
margin-top: 10px;
margin-bottom: 1em;
font-size: 1.6em;
}
なので、
.bill-title {
padding-bottom: 10px;
font-size: 2em;
}
と変えてみたり、
表の見出し部分の色を変えたいなら
table.table-bill thead tr th {
background-color: #666 !important;
color: #fff;
letter-spacing: 0.2em;
}
などCSSを触り、追加CSSに書くか、子テーマのCSSに追加します。
皆さん得意なCSSのカスタマイズなので、エクセルのテンプレートを編集するより、
簡単に見た目を自分仕様に変えられます。
請求書をPDFで出力
請求書なので、メールで添付したり、印刷するため、PDFで出力する事があると思います。
やり方は、
先程の請求書のシングルページで右クリック。印刷を選択し
ポップアップの「送信先」を「PDFに保存」で保存すればPDFで出力できます。
サイトで見ると、ブラウザの都合で横長なので間延びしているようになりますが、
印刷の際は縦長になりますので、それを踏まえ、見た目のカスタマイズをしてください。
子テーマの小数点
への対応なのか、
こちらのカスタマイズ用子テーマを使うと、単価・金額欄の金額が小数点以下２桁まで表示されるようになっています。
この子テーマのfunctions.phpは
add_filter( 'item_price_print_digits', 'item_price_print_digits_change' );
function item_price_print_digits_change( $digits ) {
// 小数点以下の桁数
$digits = 2;
return $digits;
}
となっているので、小数点不要の方は
変更
$digits = 2;
を
$digits = 0;
とすれば、小数点以下を消すことが出来ます。
請求書管理システム
BillVektorは、フリーランスにとっても見積書・請求書作成し、見た目をカスタマイズしやすいものではあるのですが、
本当の良さは、請求書・見積書の管理を楽にする請求書管理システムの部分なのです。
エクセルで1件1件発行していると、一覧で見れないので、管理が大変なんだよね。
BillVektorはWordPressのテーマとして実装されてるから
1件1件は投稿記事と同じなので、サイト内に請求書がたまっていく。
一覧表示はWordPressの得意なところだよ。
発行日や取引先も、カテゴリごとに絞り込み検索できるので
見たい項目の一覧表示も簡単
発行日はWordPressの投稿日なので
並び替えたければ、普段使ってるプラグインを入れればいいしね。
この手のシステムの管理画面って、どのように作られているのかが、
私レベルだと理解できないのですが、
WordPressを使って、WordPressのテーマとして実装されているから、
どこを触ればどこが変わるのか理解できるので使いやすい。
私なりの使い方・カスタマイズ
タグの利用
制作会社宛の請求書なら、タイトルにサイト名を書くのでいいけど
直取引の請求書だと、どこの案件かわかりにくいね。
一手間かかるけど
タグに取引先名を入れてる
タグに取引先ごとのリンクが付くので
請求書が増えていっても、
取引先の過去分を含んだ一覧が管理画面でも見れるのは便利だね。
金額の表示
カテゴリ分けしてて、各一覧が見れるのは便利だけど、
未入金一覧など、案件ごとの金額がパッと見れればいいのに。
そのために、こんな感じにカスタマイズしてる。
WordPressだから俺でもできた。
CSSで見た目を触るだけなら、追加CSSでいいのに
↑↑で子テーマの話をしたのは、ここからのカスタマイズのためなのよ。
注意
頻繁にアップデートされるテーマでもありませんし、ローカルで個人利用のみで使いますので
子テーマですが、フックも使わず、直接追加していきます。
同じようにされる方は自己責任でお願いします。
index.phpを子テーマにコピペ。
index.phpの37行目辺り
<?php if ($page_post_type['slug'] != 'client') { ?>
<th>件名</th>
<?php if ($post_type['slug'] != 'salary') { ?>
<th>カテゴリー</th>
<?php } elseif ($post_type['slug'] == 'salary') { ?>
<th>支給分</th>
<?php } ?>
<?php } ?>
の下、</tr>の上に
<th class="price_tit">金額</th>
を追加
次に
<?php if ($page_post_type['slug'] != 'client') { ?>
<!-- [ 件名 ] -->
<td><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></td>
<!-- [ カテゴリー ] -->
<td><?php echo bill_get_terms(); ?></td>
<?php } ?>
の下、</tr>の上に
<!-- [ 金額 ] -->
<?php
global $post;
if (isset($post->bill_tax_type) && $post->bill_tax_type == 'tax_not_auto') {
$bill_total = bill_total_no_tax($post);
} else {
$bill_total = bill_total_add_tax($post);
}
?>
<td class="price">￥ <?php echo number_format($bill_total); ?></td>
を追加
揃えたいので
CSSに
td.price {
text-align: right;
}
を追加
これで税込表示されます。
おお、これなら、1件ずつ開いて確認しなくていいので便利！
請求書のテキストを変えたい
請求書の合計金額の上の文章。
「平素は格別のご高配に賜り・・・」
企業ならいいけど、フリーランスだとかたいよね。
ここを変えるには？
備考の文言は管理画面の「BillVektor設定」から変えられるけど
この部分はカスタマイズしないとね。
子テーマにframe-bill.php
親テーマと階層を合わせるため
template-parts > doc > frame-bill.php
になるよう、frame-bill.phpをコピペ。
テキスト変更
ここではファイルで文言を直接書き換えることになります。
「御請求書」も変えるなら、ここのファイルなります。
フリーランスぽい、優しい文章になったね
Admin Columns
石川さんが結構な頻度で推しているプラグイン。
Admin Columns をここで使ってみましょう。
Admin Columnsは、投稿・固定ページ・メディアなどの記事一覧ページをカスタマイズできるWordPressプラグインです。
個人利用なので、このままで問題ないのですが、
Admin Columnsを使えば、いらない項目を消したり順序を入れ替えられたりします。
「投稿者」「コメント」を削除し、「日付」を最後に持っていきました。
Custom Fieldも追加できます。
BillVektorでは、すでに用意されていますので、
画像のように、TypeでCustom Fieldを選び、Labelを任意の言葉に変え、Fieldを選べばいいだけです。
画像では「お支払い期日」を表示する場合ですが、請求書項目の「メモ」なら「bill_memo」です。
「メモ」だったら、担当者名とか、どんな言葉でも入れられるので、使い方はあなた次第です。
Admin Columnsは、このような使い方だけでなく、項目ごとのwidthだけの設定もここからできます。
横幅調整だけでも使う価値アリです。使い方次第で、思うように見た目を整えられます。
イチオシなわけですね。
最後に。
Advent Calendarでネタかぶりしないよう、ベクトル製テーマ＆プラグインの中からBillVektorを選んでみました。
それだけでなく、実際にカスタマイズし愛用してますので、更に便利なカスタマイズを紹介したかったのです。
無料で使えますし、WordPressを使った制作をしているフリーランスの方は、ぜひ使ってみてください。
昨年のMy Lightningがそこそこダウンロードされましたので需要はあるのかな。
上記作業が面倒な方はこちらをどうぞ。
子テーマだけなので、CSSやプラグインの追加・設定はご自分で。
自己責任ですが、追加や削除などアレンジして、試してみてください。
記事の最初にインボイスについて触れたわりに、何も関係ない記事でしたが、
適格請求書の記載事項は、「適格請求書発行事業者の氏名又は名称及び登録番号」等々なので、
BillVektor設定の「住所」の欄に、登録番号を書けばいいのかなあと思っています。
ベクトル社自体でもBillVektorを利用されてますので、石川さんが対応してくれることに期待しましょう。
明日12/10は、DRILL LANCERさん。「去年のやつの G3 対応」について書いてくれるそうです。
Vektor WordPress Solutions Advent Calendar 2021
投稿者プロフィール
-
フリーランスのWEB屋
【WordPressコミュニティ活動】
・2016 WordCamp Kansai - サイト制作ハンズオン世話役
・Kansai WordPress Meetup 神戸 - 元共同オーガナイザー
・2021 WordCamp Japan - 実行委員
・ベクトル年末クイズ大会2021 優勝
【制作実績】 認定こども園
最新の投稿
youtube2024年8月24日WordPressの制作のフローと予算と期間
BillVektor2021年12月9日フリーランスの請求書 – BillVektorをカスタマイズして使ってみよう！
Lightning2020年12月5日My Lightningはいかが？
