不動産プラグインの物件詳細ページにローンシュミレーションを設置

不動産ホームページを自作

この記事では、不動産プラグインの物件詳細ページにローンシュミレーションを設置する方法を解説していきます。不動産プラグインの拡張プラグインで不動産ローンシュミレーションプラグインがありますが、35,200円(税込)と高価でしたのでローンシュミレーションを自作いたしました。

ファイルを編集する前に必ずバックアップを保存してください。

デモページでローンシュミレーションを確認できます。

ローンシュミレーション機能を導入した利用環境

下記がローンシュミレーション機能を導入した利用環境です。

  1. WordPress6.0
  2. テーマ:Twenty Twenty-Two
  3. 不動産プラグイン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');

これにより、物件の編集画面の最下部に下記のカスタムフィールドが表示されますので値を入力して更新を行えば、入力した値でローンシュミレーションに設定されます。

まとめ

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

Fudousan Plugin Ver.6.0.0
タイトルとURLをコピーしました