不動産Hakoniwaテーマサポートプラグイン は、WordPress公式ディレクトリ掲載の無料テーマ『Hakoniwa』で不動産プラグインを美しく動かすための拡張プラグインです。
テーマに馴染む専用の物件テンプレート、CSS調整、そして編集を簡単にする独自ブロックを追加します。
サイトエディタの基本的な操作方法はこちらをご覧ください。
「サイトエディタを使用する| WordPress日本語サポート
https://wordpress.com/ja/support/site-editor/
※WordPressのテーマ編集ツール(サイトエディタ)の使い方やテンプレート/テンプレートパターンの新規作成、プロックの設置・調整方法等 はサポート致しませんのでご了承ください。
※何らかの原因でブロックが壊れたりレイアウトが崩れたりした場合はテンプレートやテンプレートパターンを初期化してやり直してください。こちらではデバッグする術はありませんのでサポート致しませんのでご了承ください。Hakoniwaテーマのマニュアルはこちらをご覧ください
https://hakoniwa.animagate.com/
トップページ
トップページは Hakoniwaテーマ標準の「ブログホーム」テンプレートを使用しています。
トップページを変更する場合は、以下のどちらかの方法で変更してください。
①「ブログホーム」テンプレートをサイトエディタで直接編集する。
② 固定ページで作成してフロントページ設定をする。
※使用するテンプレートを「single-without-title」に変更してください。
デモサイトのトップページは「② 固定ページで作成してフロントページ設定をする」の方法で作成しています。
また、デモサイトで使用しているブロックパーツは「ブロックパターンライブラリ」から無料でダウンロードできますので参考にしてください。
他には「Hakoniwa Patterns」も利用できますので参考にしてください。
テンプレート
不動産プラグイン用のテンプレートは4つご用意しています。
・物件一覧
・物件一覧(サイドバー付き)
・物件詳細
・物件詳細(サイドバー付き)
※テンプレートの切り替えは管理画面の 外観→テーマサポートオプション で切り替える事ができます。
テンプレート内ブロック
テンプレートでは表示に必要な項目を細分化してブロックにしていますので、ブロック単位で表示位置を変更したり、他のブロックを差し込む事も可能です。
※ 関連物件表示ブロック は 設定変更できますので確認をおねがいします。
※不動産閲覧履歴プラグイン の閲覧履歴ブロックを設置してもいいですね。
カスタマイズ例 直接書き込む
物件詳細(会社情報)ブロックでは、不動産プラグイン設定の「物件問合せ先」のデータを表示するようになっています。
物件詳細(会社情報)ブロックを使わずに直接書き込む事でデザイン性のある会社情報を作成する事ができます。
※不動産プラグインPro マルチユーザータイプをご利用の場合はシステムが会社情報を表示しますので、直接書き込まないでください。
※物件詳細(問合せフォーム)も Contact Form 7 ブロックがありますのでこちらを利用する事も可能です。
※上記画像の会社情報は「ブロックパターンライブラリ」にサンプルコードがございます。
カスタマイズ例 物件一覧・物件詳細テンプレートをサイドバー付きに変更する
サイドバー付き にするメリットは条件検索フォームをサイドバーに設置できる事です。
トップページ等から条件検索するとサイドバーの条件検索フォームでは検索条件が保持されています。
これによりユーザーはトップページ等に戻る事なく条件を変えて再検索ができるようになります。
※物件条件検索(サイドバー用)ブロックの機能です。物件条件検索(固定ページ用)からでは引き継ぎません。
①管理画面の 外観 → テーマサポートオプション をクリックしてください。
②物件一覧・物件詳細テンプレートを「サイドバー無し」「サイドバー付き」どちらかを選択して変更を保存ボタンをクリックしてください。
物件一覧・物件詳細でのサイドバー付きのテンプレートは標準で「物件条件検索(サイドバー用)ブロック」が設置されていますのでそれぞれのテンプレートをサイトエディターで変更・追加・調整をおこなってください。
※自由にブロックを追加変更する事ができます。
※「物件条件検索(サイドバー用)ブロック」の表示設定も標準になってますので 設定確認 をお忘れなく。
物件詳細 物件画像スライダー
「不動産物件ブロックスライダープラグイン」を導入すると物件詳細ページの物件画像をスライダーで表示できるようになります。
問い合わせフォーム
テーマサポートプラグインではデザインされた問い合わせフォームを設置する事が可能になりました。
詳しくはこちらをご覧ください。
開発者向け
CSSについて
CSSは「corners-bt.css」「style-bt.css」を読み込んでいます。
①corners-bt.css
独自ブロックやサイトパーツの補正等をしています、
②style-bt.css
物件一覧、物件詳細、テンプレートの装飾・補正用です。
※不動産プラグイン(本体)内の CSS は使用しません。
物件情報表示部分のカスタマイズ
物件一覧、物件詳細の物件情報表示部分はブロックエディタでは変更できません。
ここだけclassを入れたい、HTML構造を一部変更したい等おこないたい場合は
物件一覧、物件詳細それぞれの 物件情報表示用のphpファイル を変更してください。
物件情報表示用のphpファイル
物件一覧 archive-fudo-loop-bt.php
物件詳細用 single-fudo-content-bukken.php
このファイルを直接変更してもいいのですが、テーマサポートプラグインをバージョンアップすると元にもどってしまいます。
そこでバージョンアップしても影響のない方法をご紹介します。
上記の「物件情報表示php」を my-plugin へコピーしてください。
my-plugin内の my-plugin.php に以下のコードを張り付けてください。
※不動産Hakoniwaテーマサポートプラグインの場合
/**
* fudou-hakoniwa 物件詳細-物件表示テンプレート差し替え
* apply_filters( 'single_fudo_content_bukken', $single_fudo_content_bukken );
*/
function hakoniwa_single_fudo_content_bukken( $single_fudo_content_bukken ){
// theme check
if ( function_exists('wp_get_theme') ) {
$theme_ob = wp_get_theme();
$theme_name = $theme_ob->template;
}else{
$theme_name = get_option('template');
}
if( defined( 'FUDOU_HAKONIWA_THEME_VERSION' ) && $theme_name == 'hakoniwa' ){
$single_fudo_content_bukken = dirname( __FILE__ ) . '/single-fudo-content-bukken.php';
}
return $single_fudo_content_bukken;
}
add_filter( 'single_fudo_content_bukken', 'hakoniwa_single_fudo_content_bukken' );
/**
* fudou-hakoniwa 物件一覧-物件表示テンプレート差し替え
* apply_filters( 'archive_fudo_loop_template', $archive_fudo_loop_template, $meta_id );
*/
function hakoniwa_archive_fudo_loop_template( $archive_fudo_loop_template, $meta_id ){
// theme check
if ( function_exists('wp_get_theme') ) {
$theme_ob = wp_get_theme();
$theme_name = $theme_ob->template;
}else{
$theme_name = get_option('template');
}
if( defined( 'FUDOU_HAKONIWA_THEME_VERSION' ) && $theme_name == 'hakoniwa' ){
$archive_fudo_loop_template = dirname( __FILE__ ) . '/archive-fudo-loop-bt.php';
}
return $archive_fudo_loop_template;
}
add_filter( 'archive_fudo_loop_template', 'hakoniwa_archive_fudo_loop_template', 10, 2 );
これで my-plugin内の archive-fudo-loop-bt.php、single-fudo-content-bukken.php を読むようになりますのでカスタマイズしてください。
※カスタマイズするファイルだけおこなってください。
