---
title: "コンテンツウィジェットの設定オーバーライド"
slug: "override-content-widget-configuration"
abstract: "コンテンツパーソナライズウィジェットのデフォルト設定をJS SDKとUI Components React Sitecore Search上書き。"
---
# コンテンツウィジェットの設定オーバーライド

通常、コンテンツパーソナライズウィジェットのコンテンツや外観設定はSitecore Searchで設定します。バナーやHTMLブロックウィジェットには、URL、テキスト、HTMLが含まれます。

rfkIdSitecore Searchバナーウィジェットの構成を上書きするにはbanner\_2:

1.  Sitecore Searchでは、**Widgets**セクションの**Widgets**タブでバナーウィジェットを見つけて、そのrfkIdに記録してください。
    
2.  Reactプロジェクトのwidget\_componentsフォルダに「 temporaryBanner.js」というファイルを作成し、次のコードブロックを貼り付けます。
    
    import {
     useContentBlock,
     useWidgetVisibility,
     widget,
     WidgetDataType,
    } from "@sitecore-search/react";
    import { createElement, useLayoutEffect, useRef } from "react";
    
    function addStyle(rfkId, node, css) {
     let styleNode = document.querySelector(\`data-rfk-id-style=${rfkId}\`);
     if (!styleNode) {
     styleNode = document.createElement("style");
     styleNode.setAttribute("type", "text/css");
     styleNode.dataset.rfkIdStyle = rfkId;
     node.parentNode?.appendChild(styleNode);
     }
     styleNode.innerHTML = css;
    }
    
    const ContentBlockWidget = () => {
     const {
     rfkId,
     queryResult: {
     data: {
     appearance: {
     css\_names: cssNames = ,
     templates: {
     html: {
     devices: { pc: { content: htmlContent = null } = {} } = {},
     } = {},
     css: {
     devices: { pc: { content: cssContent = null } = {} } = {},
     } = {},
     } = {},
     } = {},
     } = {},
     },
     } = useContentBlock();
     const { ref } = useWidgetVisibility();
     const contentRef = useRef(null);
    
     // sets widget styles
     useLayoutEffect(() => {
     if (contentRef.current && cssContent) {
     addStyle(rfkId, contentRef.current, cssContent);
     }
     }, rfkId, cssContent);
    
     // sets widget content
     useLayoutEffect(() => {
     if (contentRef.current && htmlContent) {
     contentRef.current.innerHTML = htmlContent;
     }
     }, htmlContent);
     return createElement(
     "div",
     { ref, "data-rfkid": rfkId, className: cssNames.join(" ") },
     createElement("div", { ref: contentRef })
     );
    };
    
    export default widget(ContentBlockWidget, WidgetDataType.CONTENT\_BLOCK);
    
3.  ウィジェットコンポーネントをインポートしてアプリケーションやページコンポーネントに追加してください。
    
4.  コンポーネント名とインポートを更新してください。
    
5.  バナーが表示されているページをテストしてください。