WordPress ブロックエディタを使う理由 – 記事構造と再利用性を高める

以前は、自分で CSS を作り、HTML を直接書いて記事を管理していました。そのため、見慣れないコメントやタグが入る WordPress のブロックエディタには抵抗がありました。

しかし、改めて使ってみると、ブロックエディタはかなり良いです。理由は、単に見た目を作りやすいからではありません。記事を段落、見出し、コード、表、広告、関連記事といった構造として扱えるからです。

この記事では、ブロックエディタを見た目の編集ツールではなく、記事構造を管理する仕組みとして整理します。特に、古い記事を再編し、REST API 経由で更新し、見出し CSS やコードブロックを統一していく場合、ブロック形式の価値は大きくなります。

参考
書籍

参考書籍

WordPress 仕事の現場でサッと使える！デザイン教科書 [WordPress 6.x対応版] 改訂第3版

WordPress のサイト構築、テーマ、カスタマイズ、運用項目を確認したい場合の参考書籍です。価格や在庫、WordPress の最新仕様との差分はリンク先や公式ドキュメントで確認してください。

Amazon で見る

このリンクは Amazon アソシエイトリンクです。

参考
書籍

参考書籍

ModSecurity Handbook, Second Edition

ModSecurity と Web Application Firewall の設定、ログ、ルール、チューニングを確認したい場合の参考書籍です。英語書籍であり、価格や在庫はリンク先で確認してください。

Amazon で見る

このリンクは Amazon アソシエイトリンクです。

ブロックエディタへの抵抗感

クラシックエディタや HTML 直書きに慣れていると、ブロックエディタが生成するコメントやタグは少し気持ち悪く見えます。自分で HTML と CSS を管理してきた場合、余計なものが混ざっているように感じます。

<!-- wp:heading {"className":"my1"} -->
<h2 class="wp-block-heading my1">見出し</h2>
<!-- /wp:heading -->

ただし、このコメントは単なるノイズではありません。WordPress が本文をブロックとして認識するための構造です。見出し、段落、コードブロック、表、HTML ブロックを区別できるため、後から編集、移動、再利用しやすくなります。

記事を構造として扱える

ブロックエディタの利点は、記事を単なる HTML の文字列としてではなく、意味のある単位に分けられることです。

ブロック	役割
段落	本文の基本単位。
見出し	記事の階層と目次構造を作る。
コードブロック	コマンドや設定ファイルを読みやすく表示する。
表	比較、整理、設計項目を一覧化する。
HTML	広告カードや独自パーツを挿入する。
リスト	手順や確認項目を整理する。

技術記事では、この構造化がかなり重要です。本文、手順、コマンド、注意点、関連リンクが混ざると、読み手も書き手も後から追いにくくなります。

CSS クラスを統一しやすい

このブログでは、見出しに <code>my1</code> クラスを付けています。HTML 直書きでも可能ですが、ブロック形式にすると、見出しブロックとして className を持たせられるため、後から一括整備しやすくなります。

<!-- wp:heading {"level":2,"className":"my1"} -->
<h2 class="wp-block-heading my1">設定手順</h2>
<!-- /wp:heading -->

古い記事では、見出しタグ、CSS クラス、コードブロックの形式がばらばらになりがちです。ブロック形式に寄せることで、見た目だけでなく記事の管理単位も統一できます。

コードブロックとの相性

技術ブログではコードブロックが重要です。単なる <code>pre</code> タグではなく、使用しているコードハイライトプラグインのブロックとして管理できると、表示と編集の両方が安定します。

<!-- wp:loos-hcb/code-block {"langType":"bash","langName":"Bash"} -->
<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>sudo systemctl status apache2</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

コードブロックが古い形式に戻ると、表示が崩れたり、プラグイン側で正しく認識されなかったりします。ブロック形式で統一することは、記事の見た目だけでなく運用上の安定にもつながります。

REST API で扱いやすい

ブロック形式の記事は、WordPress REST API から更新する場合にも扱いやすいです。本文を構造化した HTML とブロックコメントとして管理できるため、記事全体を再編しやすくなります。

見出しに my1 クラスを付ける。
コードブロックを HCB 形式に統一する。
広告カードを HTML ブロックとして挿入する。
関連記事リンクをリストとして追加する。
古い広告や旧目次ショートコードを削除する。
Markdown のバッククォートではなく <code> を使う。

今のこのブログ再編作業では、まさにこの利点を使っています。古い記事を単に書き直すのではなく、ブロック形式として整え直すことで、記事全体の保守性が上がります。

注意点もある

もちろん、ブロックエディタには注意点もあります。特に、保存処理は REST API を使うため、WAF、リバースプロキシ、PHP エラー、パーマリンク設定が原因で保存に失敗することがあります。

注意点	内容
REST API	ブロックエディタの保存は REST API に依存する。
WAF	投稿内容が ModSecurity などによりブロックされる場合がある。
プラグイン互換性	コードブロックや広告パーツはプラグインの形式に合わせる必要がある。
HTML 直書き	自由度は高いが、構造が崩れると後から直しにくい。
二重エスケープ	リンク文字列やエンティティの扱いに注意が必要。

ブロックエディタは万能ではありません。ただし、問題が起きた場合も、REST API、WAF、プラグイン、本文構造を分けて見ることで切り分けられます。

長期運用ブログほど効果がある

新しい記事を書く時だけでなく、古い記事を再編する時にもブロックエディタは有効です。長く運用しているブログでは、時期によって HTML、CSS、広告、コードブロック、見出しの書き方が変わります。

ブロック形式に統一すると、記事単位で再利用できるパターンが増えます。たとえば、参考書籍の広告カード、関連リンク、まとめ、確認コマンド、注意点の表などを、同じ構造で各記事へ入れられます。

まとめ

WordPress のブロックエディタは、単に初心者向けの編集画面ではありません。記事を構造化し、見出し、段落、コード、表、広告、関連記事を管理するための仕組みです。

HTML 直書きに慣れていると最初は違和感がありますが、長期運用ブログでは、ブロック形式の方が後から整備しやすくなります。特に技術記事では、手順、設定、コード、設計意図を分けて管理できることが大きな利点です。

今後、古い Ubuntu 関連記事や WordPress 運用記事を再編していく上でも、ブロックエディタを前提にした記事構造へ寄せていくのが良いと感じています。

WordPress ブロックエディタを使う理由 – 記事構造と再利用性を高める

関連する記事

ブロックエディタへの抵抗感

記事を構造として扱える

CSS クラスを統一しやすい

コードブロックとの相性

REST API で扱いやすい

注意点もある

長期運用ブログほど効果がある

まとめ

コメントを残すコメントをキャンセル

WordPress ブロックエディタを使う理由 – 記事構造と再利用性を高める

関連する記事

ブロックエディタへの抵抗感

記事を構造として扱える

CSS クラスを統一しやすい

コードブロックとの相性

REST API で扱いやすい

注意点もある

長期運用ブログほど効果がある

まとめ

Related posts:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル