説明
VSCodeに「Markdown PDF」という拡張機能をインストールし、シーケンス図をPDFファイルとしてエクスポートした際、中間ファイルとしてHTMLファイルが生成されていた。このHTMLファイルを見た際、この仕組みはWordPressのcodeブロックでも利用できるのではと思い挑戦した。
Mermaid
Mermaidはシーケンス図やクラス図といった図表を生成するツールである。通常はMarkdown文書のコードブロックを利用しており、「Markdown PDF」が生成したHTMLファイルでは次のような内容になっていた（抜粋）。
<code class="language-mermaid"><div class="mermaid">sequenceDiagram
actor line_1 as new_lifeline
participant line_2 as new_lifeline
line_1 ->> line_2: message
</div></code></pre>
同じ内容をWordPressのcodeブロックに挿入した場合は、次のようなHTMLが生成される。
<pre class="wp-block-code"><code>sequenceDiagram
actor line_1 as new_lifeline
participant line_2 as new_lifeline
line_1 ->> line_2: message
</code></pre>
要素の構成は少し変わってしまうが、code要素のclass属性に"mermaid"を追加できれば、なんとかなりそうな雰囲気だ。幸いなことに、ブロックエディターの「高度な設定」「追加CSSクラス」に指定した内容はpre要素のclass属性に反映されるので、今回はこの仕組みを活用することにした。
render_block_core/codeフィルター
今回はcode要素のclass属性に"mermaid"を追加する方法としてrender_block_core/codeフィルターを使う。render_block_core/〇〇フィルターは、投稿データ内の〇〇ブロックがHTMLコードとして出力される前に呼び出される便利なフィルターである。
add_filter( 'render_block_core/code', 'render_block_core_code_mermaid', 10, 2 );
function render_block_core_code_mermaid( $block_content, $block ) {
$class_string = $block['attrs']['className'] ?? '';
if ( preg_match( '/\blanguage\-mermaid\b/', $class_string ) ) {
$tags = new \WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag( 'code' ) ) {
$tags->add_class( 'mermaid' );
}
return $tags->get_updated_html();
}
return $block_content;
}
上記では、「追加CSSクラス」に'language-mermaid'が指定された際、code要素のclass属性に'mermaid'を追加している。
次にenqueue_block_assetsアクションを使ってMermaidのJavaScriptを読み込むようにする。
add_action( 'enqueue_block_assets', 'enqueue_block_assets_mermaid' );
function enqueue_block_assets_mermaid() {
wp_enqueue_script(
'unpkg-com-mermaid',
'https://unpkg.com/mermaid/dist/mermaid.min.js'
);
}
上記のURLは「Markdown PDF」がデフォルトで使用しているものになり、バージョンを記述する形式にはなるが、CDNも用意されている。
https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js上記を適用し、投稿を表示してみる。
codeブロックの部分は、編集時に入力したテキストではなく、Mermaidによって生成されたシーケンス図（SVG）に変更された。
Mermaidは今回紹介したシーケンス図のほか、ガントチャートや円グラフといった図表をサポートしている。Mermaid記法（構文）を覚える必要はあるが、独自ブロックを作ることなく、それらの図表が使えるようになるのはとても助かる。
最終更新 : 2025年03月15日 14:06
お勧め
wp_save_post_revision（2024年1月10日 更新）
int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。
get_the_author_posts_link（2019年8月21日 更新）
string get_the_author_posts_link( )
投稿者アーカイブページのリンクを取得する。
get_year_link（2012年2月2日 更新）
string get_year_link( mixed $year )
年アーカイブのURLを取得する。
register_taxonomy（2022年6月1日 更新）
WP_Taxonomy | WP_Error register_taxonomy( string $taxonomy, array | string $object_type, array | string $args = array() )
タクソノミーを登録する。
wp_add_object_terms（2013年8月6日 更新）
mixed wp_add_object_terms( int $object_id, mixed $terms, mixed $taxonomy )
投稿情報などにタクソノミーを追加する。