不動産物件ブロックスライダープラグイン

不動産物件ブロックスライダープラグイン

不動産物件ブロックスライダープラグインは、不動産プラグイン(本体)の追加機能プラグインで、物件情報をスライダー形式で表示する機能を提供します。
投稿や固定ページで 画像ブロック等のコンテンツをスライド表示したり、物件のスライダーをスタイリッシュにブロックエディタで作成・表示できるようになります。
　　
「不動産物件ブロックスライダープラグイン」には「ブロックスライダー」と「物件スライダー」を用意しています。
従来のスライダーは 画像しか使えず、その画像のサイズも加工して合わせないといけませんでしたが、「ブロックスライダー」はブロック単位で画像・カバーや他のブロックも使えるようになり、高さも自動で調整する機能も付いていますので 簡単にきれいなスライダーを作る事が可能になりました。
　

さらに「プレビュー機能」を使って管理画面上で仕上がりの確認をしながらスライダーの調整ができるようになっています。
※プレビュー表示は必ずしも公開ページと同一になるとは限りませんのでご了承ください。

「物件スライダー」は「ブロックスライダー」のスライダー機能部分を踏襲しながら 高機能の条件選択で物件を抽出、又は任意の物件をスライダーで表示させる事ができます。
　
【スライダーサンプル】https://nendeb.jp/demo/?p=910
　
また、ショートコード機能の装備していますので 作ったスライダーをテーマのテンプレート(ヘッダ等)に貼り付ける事も可能になりました。
【スライダーサンプル】https://nendeb.jp/wp36
　
　
※「不動産物件ブロックスライダープラグイン」は、将来のWordPressや他のAPI等のアップデート(仕様変更)によっては表示しなくなる場合がありますのでご了承ください。
※「不動産物件ブロックスライダープラグイン」をご利用の場合は 「不動産プラグイン」が必要です。
※「不動産物件ブロックスライダープラグイン」はWordPress5.9以降で利用してください。
※「不動産物件ブロックスライダープラグイン」は Swiper を使っています。
※「不動産物件ブロックスライダープラグイン」はIE11以下では対応しておりませんのでご了承ください。
※ 作成したスライダーはAMPページでは表示しませんのでご了承ください。(AMPの仕様です)
※ マルチサイト機能には対応しておりません。シングルサイトでご利用してください。
※「不動産物件ブロックスライダープラグイン」を利用する場合は 35,200円 (32,000円 + 消費税10%) をお願い致します。
※ 購入後、１年間は今後のバージョンアップ版をダウンロードできます。
※ 購入後 ２年目以降で バージョンアップ版のダウンロードを希望の方は「年間(ダウンロード)ライセンス」をご検討してください。

動作環境 v6.2.0～

WordPress
「WordPress 5.9 日本語版」以降
サーバー
PHPバージョン　7.3 ～ 8.1　(8.1系はv6.2～)
MySQLバージョン　 5.6 以上または MariaDB 10.1 以上

【参考】https://ja.wordpress.org/support/article/before-you-install/

導入方法

「不動産物件ブロックスライダープラグイン」をダウンロードしてWordPressへインストールしてください。

　　①プラグイン新規追加をクリック
　　②アップロードをクリック
　　③「ZIP 形式のプラグインをインストール」で ダウンロード した fudou_sliderXXXXX.zip を
　　　 選択して「いますぐインストール」をクリックしてください。
　　④インストールが終了したら「有効化」にしてください。
　　⑤キャッシュページを利用している場合はキャッシュクリアしてください。

　※解凍してFTPでアップロードすると不完全になる場合がありますのでお勧め致しません。

　

スライダー設置方法

プラグインを有効化するだけでブロック(ブロックスライダーと物件のスライダー)が利用できます。
投稿または固定ページでブロツク(ブロックスライダーまたは物件のスライダー)を選択してぐたさい。

　

ブロックスライダー

任意のコンテンツ(主に画像)をブロックごとにスライダーで表示させることができます。
【サンブル】

画像ブロック

カバーブロック

メディアと文章ブロック
(グループブロック内)


　
ブロックスライダーを設置すると、画像ブロックが仮設置された状態で始まりますのでここから始めてください。

スライド用のブロックは、右へ右へ と追加していきます。下のスクロールバーで移動しながら追加してください。

　

表示したいコンテンツを「画像ブロック」や「カバーブロック」等でスライドを作ってください。
スライドを追加する場合は ボタンをクリックしてください。

※画像やカバーの大きさ(幅・高さ)はブロック側で変更してもスライダー再生時に再設定されますので 設定不要です。

　

画像にリンクを付けたい場合は「画像ブロック」で設定してください。

　

ブロック内で任意のコンテンツを制作したい場合は グループブロック を選択して グループブロック内で作成してください。
グループブロック 内でブロックを追加する場合は ボタンをクリックしてください。

※グループブロックでの高度な設定→HTML要素では「デフォルト(div)」以外にするとスライダーが壊れますので必ず「デフォルト(div)」設定にしておいてください。wp58～
　
【注意】
ブロック作成に慣れていない場合は、まず簡単な画像ブロックだけで作ってみてください。ブロックの作成。設定方法等はサポートしません。
※任意で制作したコンテンツによっては画面幅が小さいときに見切れる場合がありますので スライダー表示設定の「高さあわせ」やグループブロック内のコンテンツで調整しください。
※自由に作れるわけではありませんのでいいところで調整してください。
※ブロックの作り方はWordpressの機能ですのでサポート致しませんのでご了承ください。

　

物件スライダー

条件で絞り込みした物件をスライダーで表示させることができます。
【イメージサンプル】

条件は「物件抽出設定」と「物件抽出条件追加オプション」で物件表示条件を設定してください。

※スライド(物件表示部分)で個別の編集はできません。

　

スライダー表示設定

スライダー部分(動きとかエフェクトとか)ではスライダー設定でスライドの動作や表示設定を「プレビュー」モード で確認しながら設定する事ができます。

編集状態に戻す場合は「編集」ボタンを押してください。
最後に保存する事を忘れずにしてください。
※プレビュー表示は必ずしも公開ページと同一になるとは限りませんのでご了承ください。

　
もし、編集に戻りたくてもブロックスライダーを選択できなくなった場合は 上の「リスト ビューアイコン」をクリックして表示されるリストからブロックスライダーをクリックすると選択状態になります。

※ブロックとは投稿や固定ページのブロックエディタ上で使える機能パーツです。
※不動産物件ブロックスライダープラグインが使えるのは WordPress5.9～ になります。
※低スペックのサーバーでは管理画面でブロックエディタでエラーが出てプレビューできない場合があります。
　その場合は、ブロックエディタ利用をあきらめる か 最新のサーバーへ乗換えする事を推奨します。
※「不動産プラグインブロックエディタ対応テーマ」を利用してください。
※サイトエディタ上ではプレビュー機能は使えません。
※「ブロックエディタ(Gutenberg)」はIE11では非推奨ですので他のブラウザを使用してください。

スライダー表示設定(ブロックスライダー/物件スライダー共通)

ブロックスライダー/物件スライダーを選択している状態で右上の歯車マークをクリックするとブロックの設定画面が右側に表示されます。

スライダー表示設定

【ナビゲーションボタン】
「<(前へ)」「>(次へ)」ボタンを表示/非表示を設定します。

【ページネーション】
　スライダー下部にスライド位置を表示するページ付けを設置できます。

Pagination 標準
Dynamic 動的なページ付け
Fraction ページ数値表示

スライダー詳細設定

【自動でスライドが動く間隔(ms)】
　スライダーを自動で動かす間隔(ms)を設定します
　※自動で動かさない場合は「0」にしてください

【スライドするスピード(ms)】
　スライダーを動かす速さ(ms)を設定します

【スライドの間隔(px)】
　スライドとスライドの間隔(px)を設定します

【スライドエフェクト】
　スライドする時の効果を設定します。

Slide 標準
Fade フェード効果で切替え
Cube 3Dキューブで回転するスライド
Coverflow 3次元効果スライドで切替え
Flip 平面回転

【ループ】
　ループ再生するかどうかを設定します。

【表示枚数】
　スライダーに同時表示されるスライド枚数を設定います。
※スライダー幅が640px未満の場合は1枚になります。(モバイル用)
※ヒント※ スライドの左右を 少し前後のが見切れた状態にしたい場合は「スライド枚数」を1.2あたりで数値入力して「中央配置」にチェックを入れてみてください。

【中央配置】
　現在のスライドを中央になるように設定します。

【高さあわせ】
　各スライドの高さをあわせる事ができます。

　①高いスライドにあわせる
　②低いスライドにあわせる
　③高さを指定する
　　※高さ(数値のみ)と単位(px,rem.em.vh)を指定してください。
　④画面比率で指定する
　　※画面の比率を指定してください。
　　　　4：3 (スタンダード)
　　　　16：9 (ワイド)
　　　　16：10 (WXGA)
　　　　2.35:1 (シネスコ)

※スライダーの表示幅と設定次第では画像が見切れますのでそれぞれ画像の縦横比をあわせるとか、多少見切れても問題のない画像を使ってください。
※「画面比率指定」以外はページがロードされた時の高さになります。
※「画面比率指定」以外はブラウザを伸縮しても高さはそのまま維持されます。

※グループブロックで任意で制作したコンテンツによっては画面幅が小さいときに 下部分が見切れる場合がありますのでうまく調整して作ってください。
※物件スライダーの場合、低い状態では物件情報が見切れないように 高さを再調整していますので 設定した高さにならない場合があります。

【スライダー識別用コード】
　個々のスライダーを識別するコードです。スライダー新規作成時に自動で割り当てられます。
　※再利用ブロックやブロックパターン、ブロックをコピーした..等でスライダーを再利用する場合は 同一ページでの重複を避ける為にユニークなコードに変更してください。

物件設定(物件スライダー)

物件抽出設定やオプション設定により物件表示条件を変更する事が出来ます。
それぞれのオプションは組み合わせて利用する事ができます。
追加する度にAND絞込(～かつ～) になります。
※複数の絞込条件を組み合わせて設置する場合は(複雑になるので) 表示数指定を多めにして 1つ1つ条件を追加し表示確認しながら設定するとわかりやすいです。

　

物件抽出設定

【表示数指定】
　スライダーに表示する物件数(上限)を設定します。
　※物件抽出設定やオプション設定によっては設定した物件数に満たない場合があります。

【種別】
　抽出する物件の種別を指定します。

【並び順】
　物件抽出(上位の物件数まで)と表示の並び順を設定します。

【会員物件(不動産会員プラグイン 必要)】
　会員物件を分けるかどうかを設定します

【成約物件】
　成約物件を分けるかどうかを設定します

物件表示項目

【画像指定】
　表示する画像を指定します。
　外観優先：外観画像が無い場合、間取り画像が表示されます。
　間取り優先：間取り画像が無い場合、外観画像が表示されます。

※物件画像は必須です。画像が無い(間取り・外観画像どちらも登録していない)物件は表示されません。

【抜粋・物件タイトル・価格・間取り・土地面積・地域・路線・駅】
　各項目で 表示する/しない を設定できます。

【文字サイズ指定】
　文字サイズ指定する事ができます。
　※デフォルト：テーマが指定している文字サイズ

　

物件抽出条件追加オプション

以下、追加設定する事でさらに物件を絞り込む事ができます。

【物件Post-IDで直接指定】
　post_idによる物件を直接指定できます(複数可)
　　複数の場合はカンマ(,)区切り (例: 114,115,116,227,229)
　　指定した物件番号順で表示します。
　　「並び順」指定する事で並び替えもできます。
　　公開ではない物件(非公開や下書き、削除した 等で)は表示しません。

　※post_id を調べる場合は、該当の物件編集画面を開いてください。
　　編集画面URLの「post=○○」の ○○が post_id になります。(物件番号ではありません)

【物件カテゴリ/物件タグ (タクソノミーID)】
　物件カテゴリ(ID)/物件タグ(ID)による物件を絞り込みできます(複数可)
　　複数の場合は物件カテゴリ(ID)/物件タグ(ID)をカンマ(,)区切りで入力 (例: 114,115,116,227,229)
　　複数指定の場合は OR(～または～) になります。

　※物件カテゴリ/物件タグ IDを調べる場合はこちらを参考にしてください。
　※参考「物件カテゴリ(物件タグ)IDを調べる方法」　https://nendeb.jp/1169

【県】
　県を指定してください。

【市区ID を指定 (↑該当の「県」指定が必要)】
　市区(ID)による物件を絞り込みできます(複数可)
　※複数の場合は 市区ID をカンマ(,)区切りで入力 (例：101,102,103)

　市区ID を調べる場合は、公開サイト の ウィジェット条件検索 で 調べたい県/市区で検索してください。
　　検索結果URLの「sik=○○」がそれぞれ市区IDになります。
　　※条件検索ウィジェットを設置していない場合は 一時的に設置してください。

【路線】
　路線を指定してください。

【駅ID を指定 (路線指定は不要です)】
　複数の場合は駅(ID)をカンマ(,)区切りで入力 (例: 4994,4997)

　※駅ID を調べる場合は、公開サイトの ウィジェット条件検索 で 調べたい路線/駅で検索してください。
　　検索結果URLの「eki=○○」がそれぞれ駅IDになります。
　　※条件検索ウィジェットを設置していない場合は 一時的に設置してください。

【設備】
　設備名を入力してください。
　※複数の場合は 設備名 をカンマ(,)区切りで入力 (例：楽器相談可,リノベーション)
　　複数指定の場合は AND絞込(～かつ～) になります。

【物件抽出オフセット】
　デフォルトでは並び順での物件抽出は1番目から指定された表示数まで ですが
　物件抽出オフセットで指定数だけ抽出をオフセットします。
　　例:別のスライドで最初に4つ表示させている場合、下にスライドを新規作成して続きの物件表示させたい場合は 4 と入れます。

　

カスタマイズ

以下のカスタマイズは WordPressやPHP,CSS等の高度な知識が必要ですので 解る方のみ行ってください。

CSSカスタマイズ

ブロックスライダー/物件スライダーの表示部分は独立したCSSを使用するようにしていますが テーマのデザイン、レイアウト等の理由で変更したい場合は
wp-content/plugins/fudou-slider/assets/style-index.css を直接変更して頂くか
今後のバージョンアップに対応させるためテーマCSS側へ CSSをコピーしてからテーマCSS側で変更していく方法があります。

テーマCSS側へ CSSをコピーした場合は元のCSSが不要になりますので
以下のコードを テーマの functions.php 又は my-plugin.php に張り付けて元のCSSを無効にしてください。

/*
 * フロックスライダー/物件スライダーのCSSを無効にする。
 * @subpackage Fudou Block Slider Plugin
 * ver1.0.0
 */
function remove_fudou_slider_css(){
	global $is_fudou_block_slider;
	if( $fudou_bukken_shortcode ){
		remove_action( 'wp_enqueue_scripts', 'fudou-slider' );	//ブロックスライダー CSS
	}
}
add_action( 'wp_enqueue_scripts', 'remove_fudou_slider_css' );

ヘッダー(テンプレート)に埋込

【クラシックテーマ】
WordPressのショートコード機能を使う事でテーマのテンプレートにスライダーを(ヘッダー等に)埋め込む事もできます。

新規投稿ページで 表示したいスライダーを(非公開)で予め作ってください。(下書き保存のままでOKです)
※公開にしてしまうと単独ページとして見えてしまうので非公開設定にしてください。
※タイトルは表示されませんので、管理画面でわかりやすいタイトルにしてください。(例:ヘッダー用スライダー)
※スライダー以外の別コンテンツを入力しないでください。(スライダー以外は表示されません)

【例】テンプレートに挿入する場合(post_idが1717の場合)

<?php
	/*
	 * スライダー埋め込み
	 * ※トップページのみ表示する
	 */
	if( is_home() || is_front_page() ){
		echo do_shortcode( '[fudou_slider_shortcode post_id=1717]' );
	}
?>

※スライダーを作った 投稿ID を「post_id=」に入れてください。
※スライダーの表示幅は設置した場所の設定幅になります。変えたい場合はCSS等で調整してください。

　

【ブロックテーマ】
ブロックテーマの場合はとても簡単です。サイトエディタでヘッダー(テンプレートパーツ)を選択し、希望の位置にてスライダーブロックを選択するだけです。
　
【参考】不動産プラグインテーマベース UNPC-bt マニュアル
https://nendeb.jp/2055

　

物件詳細ページの物件画像をスライダー

不動産物件ブロックスライダープラグインver6.1.0より 物件詳細ページの物件画像をスライダー表示させる事ができます。

対象は不動産プラグイン(本体)ver6.1.0～を利用(必須)で
不動産プラグインテーマペースUNPC(v6.1.0～)/UNPC-Light(v6.1.0～)と UNPC-bt、WordPressデフォルトテーマ「Twenty Fourteen」～「Twenty Twenty-Three」になります。
　
【デモ】　https://nendeb.jp/demo/?post_type=fudo&p=44

　
物件画像をスライダー表示させるには、以下のコードを my-plugin.php に張り付けてください。

/*
 * 物件詳細ページ 物件画像スライダー
 *
 * @package WordPress6.1
 * @since Fudousan Plugin v6.1.0
 * @since Fudou Bukken Block Slider Plugin v6.1.0
*/
add_filter( 'do_single_fudou_slider', '__return_true' );

※スライド表示される画像はスライド枠に合わせて拡大(又は縮小)されますので、画像の縦横比によっては端が見切れたりしますのでご了承ください。
※物件画像で小さい画像(アイコン等)を登録している場合はスライド表示で拡大する為、ボケたりしますので大きな画像を使うか 画像に余白を入る加工をしてください。
※印刷モードではスライドではなく、元の画像表示の状態で表示されるようになっています。

　

ご注意

  • 「不動産物件ブロックスライダープラグイン」は、将来のWordPressや他のAPI等のアップデート(仕様変更)によっては表示しなくなる場合がありますのでご了承ください。
  • 物件スライダーは呼び出される度に物件抽出を行いますので、物件情報を更新(削除)した場合は、指定条件によっては物件表示が変動する場合があります。(同じ物件をずっと固定表示するものではありません)
  • 作成したスライダーはAMPページでは表示しませんのでご了承ください。(AMPの仕様です)
  • 「不動産物件ブロックスライダープラグイン」をご利用の場合は 「不動産プラグイン」が必要です。
  • ブロックの作り方はWordpressの機能ですのでサポート致しませんのでご了承ください。
  • WordPressマルチサイト機能には対応しておりません。WordPress標準仕様でご利用してください。
  • 不動産プラグインシリーズやサービス 及びnendebサイト情報をご利用上の損害等に関して、nendebはいかなる責任も負わないことと致します。
  • 提供するプラグイン、デザインテーマ、各種サービスは全て「不動産プラグイン」シリーズ利用規約に基づきます。ご試用またはご購入いただきました時点で「不動産プラグイン」シリーズ利用規約に同意したものと致します。

不動産物件ブロックスライダープラグイン ver6.2.0 (有償) お支払い・ダウンロード

無料版/Pro版共通

不動産物件ブロックスライダープラグイン
不動産物件物件ブロックスライダープラグインダウンロード
不動産プラグインマーケット サイトへ移動します。