自動見積りができるWordPressのプラグイン-stylish cost calculator-

このコラムであまりWordPressのことを書くことはない予定だが、WordPressのVersionが5系列になってから、自動見積もりができる良いプラグインがあまりなくなってしまった。

最終的にCalculated Fields Formstylish cost calculatorを候補として残し、実験してみた結果、両方とも有料プラグインだがstylish cost calculatorを採用した。

理由として、キャンペーン期間中で約2,000円であること。PDFとして書き出せること。登録が必要ではあるが、メール送信が可能であることが決め手である。

しかし残念なことにこのプラグイン、2バイトコードに対応しておらず、日本語を入力したらすべて「??????」となってしまった。

原因を探ったところ、DBテーブル文字コードがLatin-1で作られていることがわかった。ここをmysqladminで[utf8mb4_unicode_520_ci]に変更すると、日本語でもちゃんと登録できるようになる。

このままでも使えるが、多言語対応になっていないので多少日本向けにカスタマイズする必要がある。このためプラグインの自動更新をオンにしておくと、上書きされてしまうので注意が必要。

修正カ所は[stylish-cost-calculator > shortcodes]の中に入っている[costcalculator.php]と[scc_table_modal.php]である。

※バージョン3.15になって行数がかなり変更になっているので注意。
また、下記を行わなくてもある程度日本語で使えるようになった。
(ただし設定ごとに日本語を入れなければならないので、テンプレート自体を直してしまったほうが早いかもしれない。)

まずは、[scc_table_modal.php]から見ていく。
このファイルはプラグインが読み込まれたときに反映するCSSが前半に記述されている。利用しているテンプレートとCSSがぶつかったら、このファイルを修正するとなんとかなる。
まずは英語表記されている部分を日本語表記に変えることを優先しよう。
500行目付近を見ると[price]という文字や[Total]という文字が見えるので、これらを日本語表記にする。
ついでに消費税を加算する欄を追加する。下記が修正したコードである。
※今後のアップデートにより変わるかもしれないので注意。
js関数の[toFixed(2)]を[toLocaleString()]に置き換えてある。これで3桁区切りで表示される。

table_body+="    <div class='col-md-3 col-xs-3 sscfull-height position-relative table__fricctableprice' style='border: 1px solid white;display: flex; justify-content: center; align-items: center;'><span class='performance-facts__summary6 '' >合計(円)</span></div>";
  table_body+="    <div class='col-md-3 col-xs-3 sscfull-height position-relative table__fricctableprice' style='border: 1px solid white;display: flex; justify-content: center; align-items: center;'><h3 class='performance-facts__summary6 ' >"+totalPrice.toLocaleString()+" <?php echo get_option('scc_currency'); ?></span></div>";
  
    table_body+="    <div class='col-md-3 col-xs-3 sscfull-height position-relative table__fricctableprice' style='border: 1px solid white;display: flex; justify-content: center; align-items: center;'><span class='performance-facts__summary6 '' >税込合計(円)</span></div>";
  table_body+="    <div class='col-md-3 col-xs-3 sscfull-height position-relative table__fricctableprice' style='border: 1px solid white;display: flex; justify-content: center; align-items: center;'><h3 class='performance-facts__summary6 ' >"+(totalPrice*1.08).toLocaleString()+" <?php echo get_option('scc_currency'); ?></span></div>";

次に少し上に戻って447行目だが、.dateの部分を[年/月/日]に直しておいた方が良いかもしれない。

450〜460行目付近。
ここは単純に日本語化するだけでよい。

$body .=   "<div class='col-md-9 col-xs-9 sscfull-height position-relative center-flex performance-facts__summary3' style='color: black;'><span style='width: 100%; padding: 1%; height: 100%; display: flex;position: relative;align-items: flex-end;'>".date('Y/m/d/ H:i:s')."</span></div>";
$body .=   "<h1 class='performance-facts__title' style='color: black;'>概要</h1>";
$body .=   "<div class='col-md-6 col-xs-6 performance-facts__summary1'><h3 class='performance-facts__summary6'  style=' text-align: left;margin-left: 20px;'>項目<span></h3></div>";
  $body .=   "<div class='col-md-2 col-xs-2 performance-facts__summary1'><h3 class='performance-facts__summary6' >単価(円)</h3></div>";
  $body .=   "<div class='col-md-2 col-xs-2 performance-facts__summary1'><h3 class='performance-facts__summary6' >数量</h3></div>";
  $body .=   "<div class='col-md-2 col-xs-2 performance-facts__summary1'><h3 class='performance-facts__summary6' >金額(円)</h3></div>";

修正カ所は以上である。次に[costcalculator.php]。
643行目を下記のように修正。こちらも[toFixed(2)]を[toLocaleString()]に置き換え、消費税行を追加している。

jQuery(parent_id + ' .totalPrice').fadeIn().html('合計: ¥' + (price).toLocaleString() + " - " + "(税込:¥" + (price*1.08).toLocaleString() +  " -) " + jQuery('#sccCurrencyUSD').html());
  });

以上の変更で日本語環境でも使える。あとは細かなスタイルの調整をすれば良い。

[おまけ]
デフォルトのValue入力窓が小さいので、大きくしてみた。
書かれている場所は[stylish-cost-calculator > admin > main_body.php]。
190行目付近。styleと改行を追加している。

使い勝手はわりと良いと思う。

シェアする

Return to Top ▲Return to Top ▲