「WordPressの投稿本文で安全にコードを書くためのテンプレート例」
「WordPressの投稿本文で安全にコードを書くためのテンプレート例」をご紹介します。
✅ 安全にコードを表示するための基本方針
| 対策 | 目的 |
|---|---|
| エンティティ化 | <script> や rm -rf などの危険文字列を無害化 |
| コードブロックで囲む | 可読性とWAF対策を両立 |
| スタイルやJSは使わずHTMLのみで構成 | WAFやブラウザ誤動作を防ぐ |
📄 投稿本文テンプレート例（Gutenberg・クラシックエディタ対応）
▼ テンプレート（HTML記述）
<div class="code-block">
<pre><code>
<?php
// 投稿IDを取得して出力
$post_id = get_the_ID();
echo '投稿IDは ' . $post_id;
?>
</code></pre>
</div>
📌 ポイント
・`<`, `>` などのHTMLタグ記号はエンティティ（< / >）に変換済み ・`pre + code` タグで整形表示され、改行やインデントも維持
・`class=”code-block”` はオプション。必要に応じてCSSで見た目を整えられます
🖋 CSSによる装飾（任意）
<style>
.code-block {
background: #f5f5f5;
padding: 1em;
font-family: monospace;
font-size: 0.95em;
border-left: 5px solid #ccc;
overflow-x: auto;
}
</style>
✍ WordPress編集画面での使い方
1. 「コードブロック」を選択
2. そのままコードを貼り付け → Gutenbergが自動的に安全な形にしてくれます。
3. `<` や `>` を使う場合は、手動で `<` などに変換が必要です。またはHTMLブロックで記述）
1. 「テキスト」タブで編集
2. 上記テンプレートを貼り付け
3. 投稿時にビジュアルタブで編集しないように注意（タグが崩れる可能性あり）
✅ 自動エンティティ化の便利ツール（外部）
・[HTMLエスケープ変換ツール](https://www.htmlescape.net/)
・WordPressプラグイン「Code Syntax Block」や「SyntaxHighlighter Evolved」も便利です
📝 まとめ
・Gutenbergでは「コードブロック」がベスト
・クラシックエディタではテキストモード + エスケープが必須
ホームページ作成/運用関連サイトマップのご紹介
ホームページ作成/運用サイトマップをご紹介します。
 ホームページ作成/運用サイトマップのご紹介 |
|||
| 学び/学習TOP > IT|ゲーム作り|HP作成 | |||
| HP作成Top > WordPress|Cocoon|便利テクニック | |||
| CMS（コンテンツ管理システム） 概要 歴史 比較 AI(概要 WordPress 活用 プラグイン ワークフロー OpenAI API 節約) ワードプレス/WordPress 歴史 バージョン変遷 b2/cafelog 普及 世界シェア ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 |
|||
| プラグイン機能 歴史 年代別 カテゴリ別 注意点 AI |
|||
| テーマ機能 概要 歴史 注意点 ブロックテーマ(比較 ＋FSE 普及状況) 定番 Cocoon 概要 歴史 機能 概要 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 投稿 整理 |
|||
| 【レンタルサーバー】 | |||
| Xサーバー 特徴 歴史 WordPress 機能 サーバー移行時のエラー・トラブル解決 画面が表示されない| |
|||
| 【トラブル対策】 HTTPステータスコード 概要 発生例 関係 HTTP 基本仕様 歴史 WordPress HTTP/2/３普及 エラー 403 Forbidden 概要 対処 501 Not Implemented 概要 回避策 メソッド以外の原因 WAF 概要 ブロックチェック ログ読み解き 誤認識 (概要 投稿本文 特殊文字 テンプレ エンティティ HTMLエスケープ 便利ツール) 脅威対策(概要) 関連用語 メソッド( 非標準) WebDAV(概要 歴史 代替技術 衰退) |
|||
| 【便利テクニック】 サクラエディタ|正規表現 |
ホームページ作成・運用関連ページのご紹介
ホームページ作成・運用関連ページをご紹介
「学ぶ」学習用関連サイトマップのご紹介
「学ぶ」学習用関連サイトマップをご紹介します。
「学ぶ」学習用関連サイトマップのご紹介 |
|||
| 学び/学習TOP > IT|ゲーム作り|HP作成 | |||
| 【IT】エディタ/正規表現|プログラミング| 【ゲーム作り】STG作り方|C言語の入門/基礎|リファレンス/サンプル文 【HP作成】WordPress|Cocoon|便利テクニック |
|||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
「学ぶ」学習用関連ページのご紹介
「学ぶ」学習用関連ページをご紹介
コペンギン・サイトマップ
コペンギンのサイトマップをご紹介します。
| 【コペンギンTOP】サイトマップ | ||||
| コペンギンTOP > ゲーム│ホビー│書籍・マンガ│ | ||||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
||||
| サイトマップ一覧 |
懐かしの名作から最新作までの豊富な品揃え！通販ショップの駿河屋
コペンギンサイトマップ関連ページのご紹介
コペンギン関連ページをご紹介します。
【ゲームTOP】ゲーム関連ページのご紹介
【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介
【ホビーTOP】ホビーサイトマップ関連ページのご紹介
