不動産プラグインテーマベース「UNPC-bt」(ブロックテーマ) は WordPressの新機能「サイトエディタ」に対応する次世代のテーマです。
サイトエディタでは、「ブロック」を使用して、ヘッダやフッタ、各テンプレート等、サイトの要素を管理画面でデザインできるようになります。
サイトエディタの基本的な操作方法はこちらをご覧ください。
「サイトエディタを使用する| WordPress日本語サポート
https://wordpress.com/ja/support/site-editor/
※WordPressのテーマ編集ツール(フルサイトエディタ)の使い方やプロックの設置・調整方法等 はサポート致しませんのでご了承ください。
※何らかの原因でブロックが壊れたりレイアウトが崩れたりした場合はテンプレート(パーツ)を初期化してやり直してください。こちらではデバッグする術はありませんのでサポート致しません。
※WordPressのサイトエディタは、現在ベータ版ですので 今後仕様が変わるおそれがありますのでご了承ください。
テンプレート
テンプレートは 管理画面 外観→エディタ で編集する事ができます。
最初はホームテンプレート編集画面になりますので、左上の「W」又はサイトアイコンをクリックすると各テンプレート又はテンプレートパーツを選択できるようになります。
編集したいテンプレート又はテンプレートパーツ(ヘッダ/フッタ)を選択して編集してください。
テンプレート/テンプレートパーツへは 管理画面 外観 → エディタ → 「Wマーク」クリックで → テンプレート/テンプレートパーツを選択して編集する事ができます。
テンプレートパーツ
| |
概要 |
| Header(For Home) |
トップページ専用ヘッダ |
| Header |
トップページ以外のヘッダ |
| Header (simple) |
簡易タイプのヘッダ |
| Footer |
共通フッタ |
Headerはトップページ専用 と トップページ以外用、簡易タイプ(標準では未使用) の3種類に分けています。
※簡易タイプ「Header (simple)」 は UNPC-bt ver6.1.2から使えます。
テンプレート
【サイトシーンによるテンプレート読込】
トップ/一般ページ
| |
header-home.html |
header.html |
footer.html |
概要 |
404(1カラム)
404.html |
|
○ |
○ |
コンテンツが見つからないときに表示します。 |
アーカイブ(2カラム)
archive.html |
|
○ |
○ |
投稿カテゴリー、投稿タグ、他のアーカイブを表示します。 |
インデックス(1カラム)
index.html |
|
○ |
○ |
投稿を表示します。(未使用) |
固定ページ(2カラム)
page.html |
|
○ |
○ |
標準の固定ページテンプレート |
固定ページ(1カラム)
page-full.html |
|
○ |
○ |
固定ページ編集でテンプレート切り替えをしてください |
単一(2カラム)
single.html |
|
○ |
○ |
標準の投稿テンプレート |
投稿(1カラム)
single-full.html |
|
○ |
○ |
投稿ページ編集でテンプレート切り替えをしてください |
検索(2カラム)
search.html |
|
○ |
○ |
投稿の検索結果を表示します |
ホーム(2カラム)
home.html |
○ |
|
○ |
標準のトップページテンプレート トップウィジェットエリアが付いてます。 |
フロントページ(2カラム)
page-front-page.html |
○ |
|
○ |
トップページ専用固定ページ(要フロントページ設定)テンプレート |
フロントページ(1カラム)
page-full-front-page.html |
○ |
|
○ |
トップページ専用固定ページ(要フロントページ設定)テンプレート |
フロントページ(1カラム トップウィジェットエリア)
page-full-front-page-widget.html |
○ |
|
○ |
トップページ専用固定ページ(要フロントページ設定)テンプレート トップウィジェットエリアが付いてます。 |
トップページのテンプレートを変更したい場合はフロントページ設定をします。
トップページ用の固定ページを制作し、固定ページ編集画面で希望のテンプレートに変更してください。
※フロントページテンプレートはタイトル、アイキャッチ画像は非表示にしています。
不動産物件表示関連
| |
header-home.html |
header.html |
footer.html |
概要 |
物件一覧(2カラム)
archive-fudo.html |
|
○ |
○ |
標準の物件一覧ページです。 |
物件一覧(1カラム)
archive-full-fudo.html |
|
○ |
○ |
別途、切り替え(コード作業)が必要です |
物件詳細(2カラム)
single-fudo.html |
|
○ |
○ |
標準の物件詳細ページです。 |
物件詳細(1カラム)
single-full-fudo.html |
|
○ |
○ |
別途、切り替え(コード作業)が必要です |
※不動産マッププラグインを利用している場合では 不動産マッププラグイン内の インマップ用のPHPテンプレート(page-map_unpc_bt.php) を読み込みます。
物件一覧/物件詳細を常に1カラムページにしたい場合は
以下のコードを my-plugin.php に張り付けてください。
/*
* UNPC-bt 強制テンプレート切替
* $template_slug = apply_filters( 'unpc_pre_get_block_templates', $template_slug );
* @param str $template_slug
* @return str $template_slug
* unpc-bt v1.0.0
*/
function unpc_bt_template_slug( $template_slug ){
//物件一覧を１カラムにする場合
if( $template_slug == 'archive-fudo' ){
$template_slug = 'archive-full-fudo';
}
//物件詳細を１カラムにする場合
global $wp_query;
$object = $wp_query->get_queried_object();
if( is_single() && !empty( $object->post_type ) && $object->post_type == 'fudo'){
$template_slug = 'single-full-fudo';
}
return $template_slug;
}
add_filter( 'unpc_bt_template_slug', 'unpc_bt_template_slug' );
※上記のコードは物件一覧ページと物件詳細ページ、どちらも１カラムにします。
片方だけの場合は１カラムにしない方のコードをコメントアウトしてください。
※物件詳細ページでは 物件管理画面 で 物件ごとにテンプレート変更する事で個別に変更する事も可能です。(物件一覧ページは個別にはできません)
※トップページはフロントページテンプレート(3種類あります)を利用し、フロントページ設定をしてください
テンプレート編集
テンプレート編集では「テンプレート「と「テンプレートパーツ」に分かれていますので、ヘッダ/フッタを編集する場合は「テンプレートパーツ」の方で編集してください。
一部のブロックは消したり移動したりするとレイアウトが崩れるおそれがありますのでロックをしています。
どうしても編集したい場合はロックを解除してください。
テンプレート編集中、おかしくなってどうにもできなくなった場合はリセットする事ができます。
各テンプレート/テンプレートパーツ リストの３点リーダクリックでカスタマイズをクリアする事ができます。
ヘッダ
ヘッダ は カスタマイズ前提で作っています。
利用者のデザインや仕様によってカスタマイズしてください。
■「Header(For Home)」「Header」
ヘッダ内は「site-header」「site-header-after」「site-navigation」の3つのグループに分けています。
「site-header」はサイトタイトルや電話番号。「site-header-after」はサイトブランディング用のコンテンツ(画像等)
「site-navigation」はサイトのメニューになります。
■「Header」「Header (simple)」
ヘッダ内は「logo_title」「site-navigation」の2つのグループで左右に分けています。
【ロゴ】
ロゴ画像はサイトロゴブロックで設定できます。
※「Header(For Home)」「Header」「Header (simple)」
【サイトタイトル/キャッチフレーズ】
サイトのタイトル/キャッチフレーズは、管理画面 設定 → 一般設定 と連動しています。
管理画面の設定 → 一般設定で変更してもいいです。
※「Header(For Home)」「Header」「Header (simple)」
【電話番号/営業時間】
ヘッダの電話番号/営業時間の所は 直接「Header(For Home)」「Header」テンプレートパーツ をそれぞれ同様にテキスト変更してください。
※ブロック操作ミスを防止するためにブロックにロックをかけています。
※もしブロックを移動や削除をする場合はロックを外してから操作をしてください。
※「Header(For Home)」「Header」
【サイトナビゲーション】
ナビゲーションはサイトのメニューにあたるものです。ナビゲーションブロックで「+」ボタンをクリックして、1つ1つリンクを追加してください。
文字色はナビゲーションブロックで、上位のグループブロック(#site-navigation)で背景色等変更できますのでお好みの色に変更する事もできます。
※サイトナビゲーションブロックは使いにくいので根気よく試してください。
※「Header(For Home)」「Header」
【ヘッダコンテンツ】
ヘッダにコンテンツを追加する場合は「site-header」又は「site-header-after」グループの中に追加してください。
また「site-header」「site-header-after」のグループブロックは消さないようにしてください。(ロックをかけています)
※「Header(For Home)」「Header」
【重要】間違うと サイトナビゲーションをスクロール時ヘッダ固定設定(オプション) にした場合、サイトナビゲーション位置がおかしくなります。
ヘッダテンプレート「Header(For Home)」には site-header-afterブロック内に サンプルで「カバーブロック」を設置しています。
変更する場合は「カバーブロック」を内容変更 又は一度 削除 して新しいコンテンツを設置してください。
①ここで削除
②削除後、「+」ボタンを押して新しいコンテンツを追加してください。
ヘッダテンプレート「Header」には site-header-afterブロック内がカラになっていますので、必要ならば「+」ボタンを押してコンテンツを追加してください。
※ヘッダテンプレート「Header」はトップページ以外のページで使いますの注意してください。
※「不動産物件ブロックスライダープラグイン」を導入するとヘッダ内に簡単にスライダーを設置する事ができます。
※「不動産マッププラグイン(ver6.1.0～)」を導入するとヘッダ内にGooglemapsを設置する事ができます。
①設置する部分の「+」ボタンをクリックして「ヘッダー埋め込みマップ」を選択してください。
②設置後に表示幅はブロックのツールバーで「なし・幅広・全幅」のどれかを選択してください。高さはヘッダマップオプションで数値を入力してください。
※「site-header-after」グループ内に設置してください。
※「Header」テンプレートパーツに設定した場合での物件詳細や物件一覧ページでは(条件検索ウィジェットからの条件)にあわせて表示します。
※条件検索(固定ページ)からの検索には連動しません。
【簡易タイプのヘッダ Header(simple)】
ヘッダをシンプルにしたい場合は、簡易タイプのヘッダ Header(simple)を使う事が出来ます。
サイトタイトルがそんなに長くなくて、サイトメニューも少ない場合は簡易タイプのヘッダを使う事ができます。
※モバイル用でメニューがアイコンに変わるブレイクポイントは600px未満です。(WordPressの設定です)
※簡易タイプのヘッダに他のコンテンツ(スペーとを使う)を追加するのはおすすめ致しません。
サイトメニューが多かったり、表示幅が少ないと、メニューが2行・3行と折り返ししますのでご了承ください。
※UNPC-bt ver6.1.2から
【ヘッダ(テンプレートパーツ)の変更方法】
ヘッダを変更する場合はまず、サイトエディタで変更したい「テンプレート」を選択します。
次にプロックのリスト表示をクリック →「Header」をクリック(青くしてから)、右の3点リーダーをクリック →「Header」を置き換えをクリックしてください。
変更できるテンプレートパーツが表示しますので目的のテンプレートパーツをクリックしてください。
※変更したい「テンプレート」全てで行ってください。
フッタ
フッターは全テンプレート共通で使います。
フッターには「フッターウィジェットエリア」が設置されています。
サイトロゴとサイトタイトルはヘッダの設定と同期しています。
フッターの「Copyright」部分はサイトに合わせてテキスト変更してください。
表示スタイル
表示スタイルでは予め用意しているテーマスタイルを選択する事でサイトのカラーを変更する事ができます。
スタイルアイコンをクリックして、表示スタイルをクリックしてください。
お好みのカラーがあればクリックしてください。
※カラーはヘッダとフッタに反映されます。
テーマバックアップ
ブロックテーマのテンプレート等を編集した場合、テンプレートデータはデータベースに入りますのでFTP等でテーマファイルを保存してもバックアップとしては不完全です。
テーマをバックアップをする場合は、サイトエディタで右上の3点リーダーをクリック→エクスポートをクリックしてください。
変更されたテンプレートデータをテンプレートファイルに反映された状態で、テーマファイル一式でダウンロードされます。
CSSについて
CSSは「style.css」「style-fudou.css」「style-pro.css(Pro版のみ)」を読み込んでいます。
①style.css
メインのCSSではタイトルCSSやブロックエディタの補正等をしています、
②style-fudou.css
不動産プラグインのパーツ、物件一覧、物件詳細、各ウィジェット用等
③style-pro.css
不動産プラグインPro 用のCSSです。(不動産プラグインPro利用時以外は読み込まれません)
※不動産プラグイン(本体)内の CSS は使用しません。
CSS変数
不動産プラグイン テーマベース UNPC-btt ではグローバルCSS変数を設定しています。
これにより、1つ1つ対象のidやclassを探して変更する事なく グローバル値を変更する事で一括で変更する事ができます。
対象は以下に記述しています。
style.css
:root {
/* table_border_color */
--fudou--table-border-color: #d1d1d1;
--fudou--table-background-color: #f6f6f6;
/* widget_border_color */
--fudou--widget-border-color: #d1d1d1;
/* select/input border color */
--fudou--select-input-border-color: #d1d1d1;
/* Submit Button color */
--fudou--button-background-color: #1a1a1a;
--fudou--button-text-color: #fff;
--fudou--button-background-hover-color: #fff;
--fudou--button-text-hover-color: #000;
/* kakaku color */
--fudou--bukken-kakaku-color: #a82000;
/* new mark color */
--fudou--new-mark-background-color: #a82000;
/* up mark color */
--fudou--up-mark-background-color: #a82000;
}
CSSサンプルコード
CSSファイルにはいくつかのサンプルコードがあります。
style.css、style-fudou.css のソースコード を見てください。
例えば、style-fudou.css では トップ物件表示ウィジェット用のサンプルコードがあります。
標準では3列表示ですが 2列用 4列用 を用意してますので 3列部分をコメントアウトして希望の列のCSS部分のコメントアウトを外してください。
/* 2列 */
/*
ul.syousai-content li,
ul.grid-content li {
display: block;
list-style-type: none;
margin: 0;
padding: 10px;
width: calc(50% - 36px);
box-sizing: content-box;
box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
font-size: 16px;
}
ul.syousai-content img.box2image,
ul.grid-content img.box1image {
width: 100px !important;
height: auto;
float: left;
padding: 0 8px 0 0;
aspect-ratio: auto !important;
object-fit: inherit !important;
}
ul.syousai-content span.fudo_kaiin_type_logo,
ul.grid-content span.fudo_kaiin_type_logo{
position: static;
top: 0 !important;
left: 0 !important;
}
ul.syousai-content li .up_mark,
ul.syousai-content li .new_mark,
ul.grid-content li .up_mark,
ul.grid-content li .new_mark{
top: 10px !important;
left: 10px !important;
}
*/
/* end 2列 */
/* 4列 */
/*
ul.syousai-content li,
ul.grid-content li {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
width: calc(25% - 23px);
box-sizing: content-box;
box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
font-size: 16px;
}
div.top_r_content{
padding: 0 10px ;
}
@media screen and (min-width: 600px) {
ul.syousai-content li div.top_r_footer,
ul.grid-content li div.top_r_footer{
padding: 0 10px;
}
}
*/
/* end 4列 */
※デザインのカスタマイズ次第で補正を入れてください。
ダークモード
ダークモードに対応する事もできます。(標準では機能を停止させています)
ダークモードに対応させる場合は style.cssに以下の記述がありますのでコメントアウトを外してください。
/* dark mode */
/*
@media (prefers-color-scheme: dark) {
・
・
省略
・
・
}
*/
※カスタマイズしている場合は、必要に応じてCSSを追加変更してください。
追加CSS
クラシックテーマでよく使われているカスタマイザーの「追加CSS」ですが
カスタマイザーがサイドメニューには出てこないので「追加CSS」をすぐ使う事ができません。
管理画面にログイン後、URLを http～/wp-admin/customize.php のように手打ちしたらカスタマイザーに入れます。
どうしても簡単に「追加CSS」を使いたい場合は「追加CSS」へのリンクをメニューに表示させる参考Tipsを紹介します。
/**
* Add an Appearance sub-menu link to Additional CSS.
* ver5.9.0
*/
function nendebcom_add_custom_css_submenu() {
add_submenu_page(
'themes.php',
__( 'Additional CSS' ),
__( 'Additional CSS' ),
'edit_theme_options',
admin_url( 'customize.php?autofocus[section]=custom_css' )
);
}
add_action( 'admin_menu', 'nendebcom_add_custom_css_submenu' );
【参考】Customizer Will Disappear for Some Block Theme Users With WordPress 5.9
https://wptavern.com/customizer-will-disappear-for-some-block-theme-users-with-wordpress-5-9
スライダー
「不動産物件ブロックスライダープラグイン」を導入すると 物件詳細ページの物件画像をスライダー表示させる事ができます。
物件画像をスライダー表示させるには、以下のコードを 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' );
※スライド表示される画像はスライド枠に合わせて拡大(又は縮小)されますので、画像の縦横比によっては端が見切れたりしますのでご了承ください。
※物件画像で小さい画像(アイコン等)を登録している場合はスライド表示で拡大する為、ボケたりしますので大きな画像を使うか 画像に余白を入る加工をしてください。
※印刷モードではスライドではなく、元の画像表示の状態で表示されるようになっています。
テーマの開発時
CSS開発モード
CSSを変更してブラウザチェックする際にキャッシュが残っていると作業効率が悪くなりますよね。
そこで 以下のコードを my-plugin.php に張り付けてください。
/*
* CSS開発モード
*/
add_filter( 'fudou_develop_mode', '__return_true' ) ;
※CSSにバージョン情報(日時分秒)をつけるようになります。
※本番サイトでは外してください。
エラー出力
開発する場合は 開発環境のWordPressのデバッグモードにしましょう
wp-config.php に以下のコードを追加するだけです。
define( “WP_DEBUG”, true );
define( “WP_DEBUG_LOG”, true );
管理画面等ではエラー出力が隠れて見えない場合がありますのでWP_DEBUG_LOGで生成する ～wp-content/debug.log を確認しましょう。
「WordPressでのデバッグ」
https://ja.wordpress.org/support/article/debugging-in-wordpress/
※エラー表示しないで画面が真っ白になる場合は サーバーphp.ini の error_reporting を確認してください。
※本番サイトではデバッグモードを外してください。
WordPress コーディング規約
必須ではありませんが「WordPress コーディング規約」をご覧ください。
他の人でも見やすいコードを書きましょう。
「WordPress コーディング規約」
https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/
