wp_get_block_css_selector()


WordPressのwp_get_block_css_selector()関数は、ブロックエディタで使用されるCSSセレクタを取得するために使用されます。この関数は、特定のブロックに対して適用されるCSSクラスを動的に生成するのに役立ちます。

構文

wp_get_block_css_selector( string $block_name );
  • $block_name(string) — CSSセレクタを取得したいブロックの名前を指定します。

例1: 基本的なブロックのCSSセレクタを取得

この例では、core/paragraphブロックのCSSセレクタを取得します。

$selector = wp_get_block_css_selector('core/paragraph'); echo $selector;

例2: カスタムブロックのCSSセレクタを取得

カスタムブロックmy-plugin/custom-blockのCSSセレクタを取得します。

$selector = wp_get_block_css_selector('my-plugin/custom-block'); echo $selector;

例3: 取得したセレクタをCSSに適用

取得したCSSセレクタを使用して、スタイルを動的に適用します。

$selector = wp_get_block_css_selector('core/heading'); echo "<style>$selector { color: red; }</style>";

例4: 複数のブロックのセレクタを取得

複数のブロックのCSSセレクタを取得し、一括でスタイルを適用します。

$selectors = [ wp_get_block_css_selector('core/paragraph'), wp_get_block_css_selector('core/heading') ]; echo "<style>" . implode(', ', $selectors) . " { font-size: 18px; }</style>";

例5: ブロックのセレクタをフィルタリング

取得したセレクタをフィルタリングして、特定の条件に合致する場合のみスタイルを適用します。

$selector = wp_get_block_css_selector('core/list'); if (strpos($selector, 'wp-block-list') !== false) { echo "<style>$selector { list-style-type: square; }</style>"; }

例6: セレクタをJavaScriptで使用

取得したCSSセレクタをJavaScriptで使用して、動的に要素を操作します。

$selector = wp_get_block_css_selector('core/image'); echo "<script>document.querySelector('$selector').style.border = '2px solid blue';</script>";

例7: セレクタをテーマの関数で使用

テーマの関数内でCSSセレクタを使用して、スタイルを動的に追加します。

function my_theme_custom_styles() { $selector = wp_get_block_css_selector('core/quote'); echo "<style>$selector { background-color: #f0f0f0; }</style>"; } add_action('wp_head', 'my_theme_custom_styles');

注意点

  • この関数は、ブロックエディタが有効な場合にのみ使用できます。
  • ブロック名が正しく指定されていない場合、空の文字列が返されることがあります。
  • 動的に生成されるセレクタは、テーマやプラグインの更新によって変更される可能性があります。

関連機能：