WordPressのブロックのプラグインと自作

2025年1月4日

覚書です。

エックスサーバーのお友達紹介プログラム!

Contents

1 WordPressのブロックエディタのプラグイン
2 WordPressのパターン(旧再利用ブロック)
3 WordPressのブロックの自作(functions.php)
4 WordPressのブロックの自作(JSON)

WordPressのブロックエディタのプラグイン

WordPress.org 日本語

BlockMeister – Block Pattern Builder Visually create custom block patterns. No coding skills needed! Categorize them easily and use keywords for easy discoverability.

WordPress.org

Custom Block Patterns You can easily create your own block patterns and register them.

ただし、CocoonやSWELLのテーマはデフォルトで対応しているため、これらのプラグインは必要ありませんでした。

WordPressのパターン(旧再利用ブロック)

WordPressのパターン(旧再利用ブロック)はWordPressの標準機能のようです。CocoonもSwellも対応しています。

Cocoonの場合は

外観 > パターン

同期：修正すると、すべて同じパターンになる。
非同期：同じテンプレを使い回すけど、内容は変更したい。リストタグなどに便利。

JSONファイルでインポートできるようです。JSONファイルの方がお手軽です。

ただ、functions.phpで書く方法もあります。

次のような場合、functions.phpの方がよいでしょう。

プラグイン化を検討している
プラグイン化してCSSとHtmlを一緒にしたい
プラグイン化して配布物のアップデート

WordPressのブロックの自作(functions.php)

今回はfunctions.phpで作成します。

function my_custom_block_patterns_init() {
    // 箇条書きリストパターン
    register_block_pattern(
        'my-custom-patterns/simple-bullet-list',
        array(
            'title'       => __( 'シンプルな箇条書きリスト', 'text-domain' ),
            'description' => __( '箇条書きのリストブロックパターンです', 'text-domain' ),
            'content'     => "<!-- wp:list -->\n<ul>\n\t<li>リストアイテム1</li>\n\t<li>リストアイテム2</li>\n\t<li>リストアイテム3</li>\n</ul>\n<!-- /wp:list -->",
        )
    );

    // 番号付きリストパターン
    register_block_pattern(
        'my-custom-patterns/simple-numbered-list',
        array(
            'title'       => __( 'シンプルな番号付きリスト', 'text-domain' ),
            'description' => __( '番号付きリストのブロックパターンです', 'text-domain' ),
            'content'     => "<!-- wp:list {\"ordered\":true} -->\n<ol>\n\t<li>ステップ1</li>\n\t<li>ステップ2</li>\n\t<li>ステップ3</li>\n</ol>\n<!-- /wp:list -->",
        )
    );
}
add_action( 'init', 'my_custom_block_patterns_init' );

プラスボタンを押してlistと検索して表示することはできます。

しかし、この方法は問題がありましたね。/(スラッシュ)をおしても検索になりません。今回は簡単なテストだったため、プラグイン化も含めて良い方法を模索します。

ローカルを利用しましょう。

ithands

Local by Flywheelの使い方(ファイルの場所、エラー) | ithands Local by Flywheel(現・Local)の使い方、覚書です。 Local by Flywheelのダウンロード Download > Mac/WIndows > 仕事とメールアドレスは必須 > GET ITNO

WordPressのブロックの自作(JSON)

JSONはおそらくこういうコードのはずです(functions.phpで実装したため未検証)

{
  "version": 2,
  "namespace": "my-custom-patterns",
  "title": "シンプルな箇条書きリスト",
  "content": "<!-- wp:list --><ul><li>リストアイテム1</li><li>リストアイテム2</li><li>リストアイテム3</li></ul><!-- /wp:list -->"
}