VK Filter Search 2.7.2 からインナーブロックの許可ブロックを独自にカスタマイズできるようになっています


  1. 製品更新情報
  2. VK Filter Search
  3. VK Filter Search 2.7.2 からインナーブロックの許可ブロックを独自にカスタマイズできるようになっています

JavaScript で改変できます。以下のコードでは カスタムHTMLブロックを使う事ができるようになります。

const AllowHtmlToVKFS = (settings, name) => {
	if (name === 'vk-filter-search-pro/filter-search-pro') {
        const { allowedBlocks = [] } = settings;
        return {
            ...settings,
            allowedBlocks: [...allowedBlocks, 'core/html'],
        };
    }
    return settings;
};

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'core/html',
    AllowHtmlToVKFS,
    10
);

ただ、これを書き込むための JSファイルを用意してそれを読み込むのが面倒という人は PHPファイルから以下のように書いて完結する事もできます。

function my_allow_html_block_to_vkfs_editor_scripts() {

	// インラインJavaScriptコード
	$inline_script = <<<EOD
const AllowHtmlToVKFS = (settings, name) => {
	if (name === 'vk-filter-search-pro/filter-search-pro') {
        const { allowedBlocks = [] } = settings;
        return {
            ...settings,
            allowedBlocks: [...allowedBlocks, 'core/html'],
        };
    }
    return settings;
};

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'core/html',
    AllowHtmlToVKFS,
    10
);
EOD;

	// スクリプトを登録後、インラインスクリプトを追加
	wp_add_inline_script( 'vk-filter-search-pro-block', $inline_script );

}
add_action( 'enqueue_block_editor_assets', 'my_allow_html_block_to_vkfs_editor_scripts' );

注意

VK Filter Search Pro はインナーブロックの幅制御処理が入っています。

独自にカスタマイズして利用できるようにしたブロックにはそれが反映されませんので、自身でCSSなどを書いて調整が必要です。

独自にインナーブロックを追加して配置している場合の崩れはサポート対象外となりますで予めご了承願います。

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。