この記事では、不動産プラグインの物件詳細ページにローンシュミレーションを設置する方法を解説していきます。不動産プラグインの拡張プラグインで不動産ローンシュミレーションプラグインがありますが、35,200円(税込)と高価でしたのでローンシュミレーションを自作いたしました。
ファイルを編集する前に必ずバックアップを保存してください。
ローンシュミレーション機能を導入した利用環境
下記がローンシュミレーション機能を導入した利用環境です。
- WordPress6.0
- テーマ:Twenty Twenty-Two
- 不動産プラグインv6.0.0
不動産プラグインのファイルを編集しますがバージョンによって記述箇所が異なります。
ファイルをアップロード
不動産プラグインの物件詳細ページでローンシュミレーション機能を利用する準備として、「loan.php」のファイルを不動産プラグインのプラグインフォルダーにアップロードします。まずはJISAKU-HP storesでご購入ください。販売価格は10分の1の3,520円(税込)です。
ダウンロードしたzipファイルを解凍して、「loan.php」を不動産プラグインのフォルダにアップロードしてください。
アップロード場所:/wp-content/plugins/fudou/themes
ローンシュミレーションのcssを追記
スタイルの追記はcssファイルを編集します。テーマがTwenty Twenty-Twoを使用しているので/wp-content/plugins/fudou/themesの「style2022.css」を編集します。
「style2022.css」の最後に、下記のコードを追記してください。
/* ローンシュミレーション
---------------------------------------------------------------------- */
.loan .koumoku_box{ border-bottom:solid 1px; position:relative; height:50px; max-width:400px; margin:auto; margin-top:20px;}
.loan .koumoku{ background:white; position:absolute; bottom:5px; border-radius:10px; padding:5px 10px; border:solid 1px;}
.loan .koumoku_value{position:absolute; right:0; bottom:5px; text-align:right;}
.loan .koumoku_box input{ border:none; background:white; text-align:right; background:none; font-size:20px; max-width:70%;}
.red{ color:red; }
.loan {
margin: 2em 0;
background: #fff8e8;
margin-bottom:50px;
position:relative;
}
.loan .box-title {
font-size: 1.2em;
background: #ffc06e;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.loan .contents{
padding:10px;
}
.loan p {
padding: 15px 20px;
margin: 0;
}
.loan-button {
text-align: center;
text-decoration: none!important;
padding: .5em 1em;
color: #fff;
display: block;
font-size: 1.2em;
line-height: 1.5em;
background-color: #09c;
background-image: -webkit-linear-gradient(#009fd4,#09c,#0086b2);
background-image: -moz-linear-gradient(#009fd4,#09c,#0086b2);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
border: 1px solid #0086b2;
cursor: pointer;
margin:auto;
margin-top:30px;
}ローンシュミレーションを実装
ローンシュミレーションを実装するためにコードを追記します。追記するファイルは、テーマがTwenty Twenty-Twoを使用しているので/wp-content/plugins/fudou/themesの「single-fudo2022.php」を編集します。
「single-fudo2022.php」の884行目//地図の1行下の885行目に、下記のコードを追記してください。
<?php if ( get_post_meta($post_id,'bukkenshubetsu',true) <3000 ) { include 'loan.php';} ?>つづいて、413行目に下記のコードを追記してください。
<?php if ( get_post_meta($post_id,'bukkenshubetsu',true) <3000 ) {
if(get_post_meta($post->ID,'kinri',true) != ''){$kinri = get_post_meta($post->ID,'kinri',true);}else{$kinri = '0.625';}
if(get_post_meta($post->ID,'year',true) != ''){$year = get_post_meta($post->ID,'year',true);}else{$year = '420';}
echo '<tr><td><div style="background:#ddd; padding:10px;">借入金額:'.number_format(get_post_meta($post->ID,'kakaku',true)/10000).'万円、ローン金利:'.$kinri.'%、借入期間:'.$year.'ヶ月で毎月の返済額を試算しています。</div><div style="text-align:center;">月々<span style="color:red; font-weight:bold; font-size:2rem;"><script>document.write(Math.floor(('.get_post_meta($post->ID,'kakaku',true).' * ('.$kinri.' / 100 / 12) * (Math.pow(1 + ('.$kinri.' / 100 / 12), '.$year.'))) / (Math.pow(1 + ('.$kinri.' / 100 / 12), '.$year.') -1)).toLocaleString())</script>円</span></div></td></tr>';}?>カスタムフィールドの値で金利と借入期間を変更
デフォルトでは、金利が0.625%、借入期間が420ヶ月で設定していますが、物件によってあらかじめ設定したい場合もあるかと思いますので、その要望にお応えします。
/wp-content/plugins/fudou/adminの「fudo-functions.php」の最後に下記のコードを追記します。
//追加するカスタムフィールドを定義
function define_custom_fields() {
add_meta_box( 'meta_id', 'ローン設定', 'draw_custom_fields', 'fudo', 'advanced');
}
add_action('admin_menu', 'define_custom_fields');
//管理画面にHTMLを出力
function draw_custom_fields() {
global $post;
echo '<p>金利(%):<input type="text" name="kinri" value="'.get_post_meta($post->ID, 'kinri', true).'" size="50"></p>';
echo '<p>借入期間 (ヶ月): <input type="text" name="year" value="'.get_post_meta($post->ID, 'year', true).'" size="50"></p>';
}
//カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {
if(!empty($_POST['kinri'])) {
update_post_meta($post_id, 'kinri', $_POST['kinri'] );
} else {
delete_post_meta($post_id, 'kinri');
}
if(!empty($_POST['year'])) {
update_post_meta($post_id, 'year', $_POST['year'] );
} else {
delete_post_meta($post_id, 'year');
}
}
add_action('save_post', 'save_custom_fields');これにより、物件の編集画面の最下部に下記のカスタムフィールドが表示されますので値を入力して更新を行えば、入力した値でローンシュミレーションに設定されます。

まとめ
サイトに記述しているコードをコピペするだけで、簡単に不動産プラグインの物件詳細ページにローンシュミレーションが導入できました。


