ブログ機能の開発を通じて学んだWordpressのブロック構造
はじめに
新しいブログ機能を開発するにあたって、WordPressのブロック構造をじっくり触る機会がありました。
普段は投稿する側として使っていたエディターも、実際に機能を組み込もうとすると想像以上に奥が深い。
この記事では、今回の開発で試したこと・詰まった点・改善した工夫などをまとめます。
あくまでテスト投稿ですが、ブログとしての実験台になれば嬉しいです。
ブロックエディターの構造を理解する
Gutenberg（ブロックエディター）は「すべてがブロック」という考え方で動いています。
段落も、見出しも、画像も、そしてコードも「ブロック」として扱われます。
ブロックを追加するには / コマンドで検索して選ぶのが便利。
特に「コード」ブロックは、プレビュー上では色がつかないこともありますが、プラグインで拡張可能です。
実装テスト：コードブロックの挿入
今回はPythonで簡単なサンプルを試してみました。
def greet(name: str) -> None:
"""指定した名前で挨拶する"""
print(f"こんにちは、{name}さん！")
if __name__ == "__main__":
greet("WordPressユーザー")このコードブロックが、枠付き＋色付きで表示されれば成功です。
見た目を整えるには「SyntaxHighlighter」や「Prism.js」を導入するのがおすすめです。
トラブルシューティング
・コードが色分けされない・枠が出ない場合は、以下のどちらかの原因が多いです。
・コードブロックではなく「段落」に貼り付けている
・シンタックスハイライト用のプラグインを入れていない
「段落」ブロックでは単なるテキスト表示になるため、
必ず「コード」ブロックか「プリフォーマット済みテキスト」ブロックを使用しましょう。
スタイルを整えるためのCSSカスタマイズ例
シンプルに見た目だけ改善したい場合は、次のCSSを「外観 → カスタマイズ → 追加CSS」に入れるだけでもOKです。
.wp-block-code {
background-color: #f8f9fa;
border: 1px solid #ddd;
padding: 1em;
border-radius: 5px;
font-family: 'Fira Code', monospace;
line-height: 1.6;
overflow-x: auto;
}これで枠線が付き、少しnote風の落ち着いたトーンになります。
まとめ
今回のテストで得たポイントをまとめると：
1. コードブロックはプラグイン導入で本領発揮
2. ブロックの種類を意識すると編集効率が上がる
3. CSSカスタマイズで見た目を簡単に整えられる
ブログ機能のテスト段階でも、実際の記事として使えるレベルに仕上げられることが分かりました。
これからデザインを整えて、もう少し読みやすいUIにしていきます。
最後に
この記事自体は仮の投稿ですが、
開発記録としてそのまま公開しても違和感がない構成になっています。
今後はこの形式で「機能追加ログ」や「アップデートノート」をまとめていく予定です。
