Grits JP | PhamDocs

Smart UI (Beta)

phamcuong96

schedule2024.12.20

Feature Grits JP Grits-Themes-2.1 smart UI

現在、多くのサイトでは、FABs、バナー、AIチャットバナー、グローバルメニューなどのフローティングUIを採用しています。

灰色のエリアはフローティングUI です。
Green view はサイトの主要なコンテンツです。

サイトにこのようなUIが多すぎると、メインコンテンツが隠されてしまい、情報へのアクセスや閲覧が難しくなるため、ユーザーにとって使いにくいインターフェースとなります。特にスマートフォンでは、これらのUIが画面の約50%のGreen Viewを占めることがあり、それは非常に不適切で不便を引き起こします。

実際にスマートフォンでサイトにアクセスすると、Address BarやTab Barが追加されるため、残りのGreen Viewが非常に少なくなります。

スマートフォンでのユーザー行動に関するいくつかの研究に基づき、この機能は次のように問題を解決することができます：

通常、ユーザーがスクロールダウンすると、さらに情報を探したり、見たりしたい可能性があります。このとき、「Smart UI」機能が起動し、現在表示されているすべてのUIを画面外に押し出すことで、ユーザーがサイトの全コンテンツを妨げられることなく見ることができるようにします。

ユーザーがスクロールアップすると、別のコンテンツを探しているか、他の部分に移動したい可能性があります。この場合、「Smart UI」はUIを画面に引き戻し、ユーザーはサイト上の他のコンテンツに簡単にアクセスすることができます。

この機能は、画面からUIを押し出したり引き戻したりするだけで、非表示にはしないため、SEOには影響しません。

この機能は以下のUIに適用されます：

この機能はサイトでデフォルトで有効になっていますが、この機能を使用したくない場合は、管理画面から無効にすることができます。

管理画面　▶　Theme Settings　▶　UI Control　▶　Smart UI

お問い合わせフォーム (Update)

phamcuong96

schedule2024.12.20

Contact Form Feature Grits JP Grits-Themes-2.1 System

このバージョンでは、ユーザーが入力したメールアドレスを確認するための新しいフィールドが追加されました。

「メールアドレス」フィールドと「Eメール確認」フィールドの内容が一致しない場合、
フォームは次のステップに進むことができません。

この2つのフィールドには誤入力を防ぐため、メールアドレスを手動で入力する必要があり、コピー＆ペーストはできません。

「お問い合わせ内容」フィールドに文字数カウント機能が追加されました。
これにより、ユーザーは入力可能な文字数を正確に把握することができます。

文字数の上限は1000文字で、ユーザーがテキストを入力すると残りの文字数が自動的に減少します。カウントが0になると、それ以上入力することはできません。

文字数の上限を増やしたい場合は、Devに連絡してください。

Fabs設定する

phamcuong96

schedule2024.12.19

FABs Feature Grits JP Grits-Themes-2.1

WPのカスタマイズモードにアクセスしてください。

カスタマイズ　▶　ウィジェット　▶　Floating Action Buttons

インターフェースは、各ボタンを簡単に区別できるように再設計されています。

@Title	ボタンのタイトルを入力する。 Tips： PCとスマートフォンで異なるタイトルを表示したい場合は、以下の2つのタグを使用してください。PC： <span class=”pc-only”>PCタイトル</span> SP： <span class=”sp-only”>SPタイトル</span>
@Active	ONにするとボタンが表示され、OFFにするとボタンがサイトから非表示になります。
@ID	Add custom id for button.
@Class	Add custom class for button.
@Type	「LINK」 : ボタンをリンクとして設定し、ボタンをクリックするとそのリンク先に移動します。
	「TEL」 : 電話番号にリンクするボタンを設定します。ボタンをクリックすると、その電話番号に通話が発信されます。
	「EMAIL」 : メールアドレスにリンクするボタンを設定します。ボタンをクリックすると、そのメールアドレスへのメール作成ウィンドウが開きます。
	「AI-CHAT」 : AIチャットへのリンクボタンを設定します。もしAIチャットをバナーとして表示したくない場合、このオプションを選択できます。ボタンをクリックすると、AIチャットのウィンドウが開きます。もし AIチャットをバナーを設定している場合、この機能は使用できません。また、NOMOCa AI Chatへの API接続が完了していることを確認してください。 1ページにつき、AI-Chatを表示するための機能は1つだけ使用されるようにしてください。
	「CUSTOM HTML」 : Add your custom code html, Your code will replace the button that you added.
@Add Icon	アイコンは、画像ライブラリから追加するか、コンピューターからアップロードするか、またはアイコンのURLを使用して追加することができます。
@Icon size	アイコンのサイズをカスタマイズできます。
@Add background color	ボタンの色を設定できます。HEXコードまたはRGBを使用して色を指定することができます。
@URL	ボタンのリンクを入力する。
@Phone number	電話番号をボタンに入力してください。スペース、ハイフン、またはその他の文字を追加しないでください。入力前に、キーボードをローマ字入力に切り替えてください。
@Email address	ボタンにメールアドレスを入力する。
@Custom HTML	Add your custom code here.

AI-Chatを設定する(Beta_v1)

phamcuong96

schedule2024.12.18

AI-Chat Feature Grits JP Grits-Themes-2.1

サイトとAPIを接続するcontent_copycheck_circle

サイトでAIチャットを使用するために最初に行うべきことは、サイトを「NOMOCa AI Chat」のAPIに接続することです。

管理画面　▶　Theme Settings　▶　Webmaster Tools　▶　AI Chat

受け取った各「設定コード」ファイルの中で、「設定方法」には2つの重要な情報があります。それは、APIへのリンクのパスとIDです。

<script scr=”your-connection-to-api”></script>タグをAPIフィールドにコピーし、その後IDをIDフィールドにコピーして保存すれば、「NOMOCa AI Chat」への接続が完了します。

APIをコピーする際は、<script>タグで始まり、タグで終わる内容を正確にコピーしてください。
IDは“”内の内容だけをコピーし、“”やスペースをIDフィールドに入力しないでください。
間違った操作を行うと、AIチャットは動作しません。

AI-Chatバナーの設定content_copycheck_circle

以下の手順を実行する前に、サイトがAPIに接続されていることを確認してください。

WPのカスタマイズモードにアクセスしてください。

カスタマイズ　▶　ウィジェット　▶　AI-Chat Banner

@Active	バナーの有効化または非表示
@Close BTN	ユーザーがクリックするとバナーを非表示にできるボタンを追加します
@Only Home	ONにするとバナーはホームページにのみ表示されます。OFFの場合、バナーは全てのページに表示されます
@PC Banner	デスクトップ用画像バージョン
@SP Banner	スマートフォン用画像バージョン。PC版とスマートフォン版のバナーが同一でレイアウトに変更がなく、サイズだけが異なる場合は、PC版の画像を設定するだけで問題ありません。
@Banner Width	バナーサイズの設定（入力後、自動的にデバイスごとに適したサイズに調整されます）
@Position	バナーの位置を設定し、画面の左側または右側に表示します。
@Bottom	バナーの下部の余白をカスタマイズします。デフォルトでは、バナーは画面の下部に設定されています。
@Left , @Right	左または右の余白をカスタマイズします。@Positionで選択した位置に応じて、@Leftまたは@Rightのフィールドが表示されます。