wordpressで複合検索系・不動産・中古車向けのWEBサイト制作
プラグイン
- Geo Mashup
- Custom Field Template
- Contact Form 7
- flamingo
step.1
テーマに物件情報を投稿を設定
step.1-1
カスタム投稿とカテゴリ・タグの追加するため、function.phpに記載
//カスタム投稿
add_action('init', 'create_post_type');
function create_post_type()
{
register_post_type('house', [ // 投稿タイプ名の定義
'labels' => [
'name' => '物件', // 管理画面上で表示する投稿タイプ名
'singular_name' => 'house', // カスタム投稿の識別名
],
'public' => true, // 投稿タイプをpublicにするか
'has_archive' => false, // アーカイブ機能ON/OFF
'menu_position' => 5, // 管理画面上での配置場所
'show_in_rest' => true, // 5系から出てきた新エディタ「Gutenberg」を有効にする
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
]);
}
//カスタム投稿のタグとカテゴリーを共通に
add_action('init', function () {
register_taxonomy(
'post_tag',
[ 'post', 'house' ],
[
'hierarchical' => false,
'query_var' => 'tag',
'show_in_rest' => true, //管理画面にタクソノミー
]
);
register_taxonomy(
'category',
[ 'post', 'house' ],
[
'hierarchical' => true, /* カテゴリーの場合はtrue */
'query_var' => 'category_name',
'show_in_rest' => true, //管理画面にタクソノミー
]
);
});
add_action('pre_get_posts', function ($query) {
if (is_admin() && ! $query->is_main_query()) {
return;
}
if ($query->is_category() || $query->is_tag()) {
$query->set('post_type', [ 'post', 'house' ]);
}
});
step.1-2
カスタム投稿のテンプレートの用意
codex: 投稿タイプ 投稿タイプテンプレート
step.2
Custom Field Templateの設定
step.2-1
カスタムフィールドテンプレートオプションに物件情報をテンプレートコンテンツへカスタムフィールドを設定する。 カスタムポストタイプ (カンマ区切り): house サンプル(広島)
[break1]
type = break
class = break
[textfield_common]
label = 物件番号
type = text
size=15
[textfield_common1]
label = 家賃
type = text
size=15
[radio_common14]
label = 賃料区分
type = select
value=3万円~5万円#5万円~7万円#7万円~10万円#10万円~15万円#15万円超
clearButton = true
[radio_common3]
label = 敷金
type = select
value=-#1ヶ月#2ヶ月#3ヶ月#4ヶ月#5ヶ月#6ヶ月#敷金無し
default = -
clearButton = true
[radio_common4]
label = 礼金
type = select
value=-#1ヶ月#2ヶ月#3ヶ月#4ヶ月#5ヶ月#6ヶ月#礼金なし
default = -
clearButton = true
[radio_common6]
label = 保証金
type = select
value=1ヶ月#2ヶ月#3ヶ月#4ヶ月#5ヶ月#6ヶ月#保証金なし
default = 保証金なし
clearButton = true
[textfield_common14]
label = 管理費
type = text
size=15
clearButton = true
[radio_common10]
label = 雑費
type = select
value=-#雑費なし
default = -
clearButton = true
[radio_common7]
label = 保険加入義務
type = select
value=要加入#不要#要確認
default = 要確認
clearButton = true
[hr_common]
fieldname = 物件詳細
type = hr
[radio_common2]
label = 地域区分
type = select
value=中区#西区#南区#安芸郡府中町
clearButton = true
[textfield_common6]
label = 住所2
type = text
size=15
clearButton = true
[textfield_common12]
label = 建物名
type = text
size=15
clearButton = true
[textfield_common13]
label = 部屋番号
type = text
size=15
clearButton = true
[radio_common1]
label = 物件種目
type = select
value=貸アパート#貸マンション#貸事務所(一部)#貸店舗(一部)#貸店舗・事務所(一部)
clearButton = true
[textfield_common3]
label = 間取り
type = text
size=15
clearButton = true
[radio_common5]
label = 建物構造
type = select
value=-#軽量鉄骨造#鉄骨造#RC#SRC#木造
default = -
clearButton = true
[textfield_common2]
label = 階数
type = text
size=15
clearButton = true
[textfield_common4]
label = 築年月
type = text
size=15
clearButton = true
[radio_common8]
label = 取引態様
type = select
value=-#媒介
default = -
clearButton = true
[radio_common9]
label = 引渡し・入居日
type = select
value=-#予定#即時#期日指定
default = -
clearButton = true
[radio_common12]
label = 敷引き
type = select
value=-
default = -
clearButton = true
[radio_common13]
label = 向き
type = select
value=-
default = -
clearButton = true
[textfield_common5]
label = 最寄の交通機関
type = text
size=15
clearButton = true
[textfield_common7]
label = 面積
type = text
size=15
clearButton = true
[textfield_common8]
label = 共益費
type = text
size=15
clearButton = true
[textfield_common9]
label = 駐車場料金無料フラグ
type = text
size=15
clearButton = true
[textfield_common10]
label = 引渡し時期
type = text
size=15
clearButton = true
[textfield_common11]
label = コメント
type = text
size=15
clearButton = true
[radio_common11]
label = 総戸数
type = select
value=-#100戸以下#100戸以上
default = -
clearButton = true
[break2]
type = break
class = break
step.2-2
管理画面のデザイン2グリッドに変更 ADMIN CSSにcssを記載。
cft .break { clear:both; }
#cft .break dl { width:49%; float:left;}
#cft dl {color: #ccc;
margin: 20px 0;
border-top: 1px dotted #dfdfdf;
padding-top: 10px;
}
#cft dl:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#cft dt {
width:50%;
clear:both;
float:left;
display:inline;
font-weight:bold;
text-align:center;
}
#cft dt .hideKey {
visibility:hidden;
}
#cft dd {
margin:0 0 0 21%;
}
#cft dd p.label {
margin:0;
color: #000;
}
#cft_instruction {
margin:10px;
}
#cft fieldset {
border:1px solid #CCC;
margin:5px; padding:5px;
}
#cft .dl_checkbox {
margin:0;
}
step.2-3
htmlでカスタムフィールドを表示させるショートコードを制作 [cft] and [cftsearch] にhtml記載 FORMAT #0 : 物件情報の表示
<div class="row">
<div class="col-lg-6"><small>
<table class="table table-striped"><tbody>
<tr><th>物件番号</th><td>[textfield_common]</td>
<tr><th>家賃</th><td>[textfield_common1]</td>
<tr><th>管理費</th><td>[textfield_common14]</td>
<tr><th>敷金</th><td>[radio_common3]</td>
<tr><th>礼金</th><td>[radio_common4]</td>
<tr><th>物件種目</th><td>[radio_common1]</td>
<tr><th>築年月</th><td>[textfield_common4]</td>
<tr><th>保証金</th><td>[radio_common6]</td>
<tr><th>保険加入</th><td>[radio_common7]</td>
<tr><th>取引態様</th><td>[radio_common8]</td>
<tr><th>引渡し日</th><td>[radio_common9]</td>
<tr><th>向き</th><td>[radio_common13]</td>
<tr><th>雑費</th><td>[radio_common10]</td>
<tr><th>コメント</th><td>[textfield_common11]</td>
</tbody>
</table>
</small></div>
<div class="col-lg-6"><small>
<table class="table table-striped"><tbody>
<tr><th>間取り</th><td>[textfield_common3]</td>
<tr><th>地域区分</th><td>[radio_common2]</td>
<tr><th>住所</th><td>[textfield_common6]</td>
<tr><th>建物名</th><td>[textfield_common12]</td>
<tr><th>部屋番号</th><td>[textfield_common13]</td>
<tr><th>階数</th><td>[textfield_common2]</td>
<tr><th>交通機関</th><td>[textfield_common5]</td>
<tr><th>建物構造</th><td>[radio_common5]</td>
<tr><th>面積(m²)</th><td>[textfield_common7]</td>
<tr><th>共益費</th><td>[textfield_common8]</td>
<tr><th>駐車場料金</th><td>[textfield_common9]</td>
<tr><th>引渡時期</th><td>[textfield_common10]</td>
<tr><th>総戸数</th><td>[radio_common11]</td>
<tr><th>敷引き</th><td>[radio_common12]</td>
</tbody>
</table>
</small></div></div>
FORMAT #1 : 複合検索の表示
<div class="row">
<div class="col-lg-6"><small>
<table class="table table-striped"><tbody>
<tr><th>賃料区分</th><td>[radio_common14]</td>
<tr><th>地域区分</th><td>[radio_common2]</td>
<tr><th>建物構造</th><td>[radio_common5]</td>
<tr><th>総戸数</th><td>[radio_common11]</td>
<tr><th>敷引き</th><td>[radio_common12]</td>
<tr><th>向き</th><td>[radio_common13]</td>
<tr><th>雑費</th><td>[radio_common10]</td>
</tbody>
</table>
</small></div>
<div class="col-lg-6"><small>
<table class="table table-striped"><tbody>
<tr><th>敷金</th><td>[radio_common3]</td>
<tr><th>礼金</th><td>[radio_common4]</td>
<tr><th>物件種目</th><td>[radio_common1]</td>
<tr><th>保証金</th><td>[radio_common6]</td>
<tr><th>保険加入</th><td>[radio_common7]</td>
<tr><th>取引態様</th><td>[radio_common8]</td>
<tr><th>引渡し日</th><td>[radio_common9]</td>
</tbody>
</table>
</small></div></div>
FORMAT #2
[textfield_common]
step.2-4
物件に表示させる step2-3で制作したショートコードを記入。 位置:投稿のあと カスタムポストタイプ (カンマ区切り): house HOOK #0 :
[cft format=0]
[geo_mashup_map]
<hr />
<h3>この物件を問い合わせる</h3>
[trust-form id=14]
step.3
検索ページを追加 ページを作成してショートコードを追加 複合検索:
[cftsearch format=1]
地図検索:
[geo_mashup_map]
step.4
Geo Mashupの設定 plugin: Geo Mashup
step.5
Contact Form 7の設定 どの物件からお問い合わせがあったか、メールに通知させる。 メールの受信設定のメッセージ本文にショートコードを記載
[_post_title]
[_post_name]
[_url]
[_remote_ip]
[_user_agent]
flamingoでもどの記事から投稿があったか確認できる。 plugin: flamingo