WordPressでソースコードを埋め込む方法＆ソースが汚い場合の対処法

この記事ではWordPressでソースコードを埋め込む方法と埋め込んだソースコードが汚い場合の対処法をお伝えします。

WordPressのソースコードが汚いと感じるのはなぜ？

「汚いソースコード」って具体的にどういう状態？

人によって「汚い」の基準は違いますが、よくあるパターンをざっくりまとめると、次のようなイメージです。私自身も、昔はこのあたりがすごく気になっていました。

汚く見える例	実際に起きていること
インデントがそろっていない	テンプレート側で自動整形されていない、あるいは途中で追記して崩れている
改行が少なく横に長い	出力をコンパクトにするために、テーマが改行を減らしている
divやspanがやたら多い	ブロックエディターやプラグインの入れ子構造がそのまま出ている
クラス名が長い・種類が多い	汎用性やカスタマイズ性を高めるために、細かくクラスを分けている
コメントが多くて読みにくい	テーマ開発者や自分用のメモが残っている

ブラウザ上の見た目が普通に表示されているなら、これらはどちらかと言えば「見た目の好み」の話です。ただ、あまりにも読みにくいソースは、あとから自分や他の人が修正するときに余計な時間がかかります。

WordPressの仕組み上、ソースコードが増えやすい理由

WordPressのページは、「テーマ」「プラグイン」「ブロックエディター」の3つが協力してHTMLを作っています。それぞれが自分の役割でHTMLのかたまりを出力するので、どうしても入れ子構造が深くなりがちです。

ざっくり言うと、次のような流れです。

• テーマがレイアウト用のタグやクラスを出力する
• ブロックエディターがコンテンツ用のタグやクラスを追加する
• 装飾系や広告系のプラグインが、さらに自分用のタグで囲む

見た目はシンプルな見出しやボタンでも、ソースを開くと複数のタグが重なっている、ということがよくあります。これはWordPressの構造上、ある程度は避けにくい部分です。

テーマやプラグイン次第で「汚さ」は変わる

同じ内容の記事でも、使うテーマやプラグインの組み合わせによって、ソースコードの雰囲気はかなり変わります。

• 軽量テーマ：余計な入れ子やクラスを減らし、シンプルなHTMLを目指している
• 高機能テーマ：デザインの自由度を高めるために、どうしてもHTMLが複雑になりやすい
• プラグインが多いサイト：各プラグイン用のタグがどんどん追加される

SEOプラグインやスライダー、問い合わせフォームなどを積み重ねていくと、ソースコードには「この機能のためのタグ」が自然と増えていきます。ある程度の「ゴチャゴチャ感」は、WordPressサイトではよくある状態だと考えておくと気が楽になります。

WordPressのソースコードが汚いとSEOは不利なのか？

検索エンジンが本当に見ているポイント

検索エンジンは、人間のように「インデントがそろっていて美しい」かどうかを採点しているわけではありません。もっと根本的な部分を見ています。

• HTMLとして大きな文法エラーがなく、正しく解釈できるか
• 見出しの構造が論理的か（h1の下にh2、その下にh3が来ているかなど）
• ページの表示速度や、スマホでの使いやすさに大きな問題がないか

インデントや改行は、機械から見ればほとんど「装飾」に近い情報です。多少の崩れは気にしなくて大丈夫で、むしろ構造や表示速度の方がずっと重要です。

本当に危ない「汚さ」はエラーや表示崩れ

とはいえ、「汚いソースコード」がまったく問題にならないわけでもありません。本当に怖いのは、次のような状態です。

こういった「バグの原因になる汚さ」や「明らかな速度低下につながる汚さ」は、SEOにもユーザー体験にも影響が出やすいので、できる範囲で減らしておきたいところです。ただ、公式テーマやメジャーなプラグインを使っていれば、初期状態で致命的なエラーが仕込まれているケースはそれほど多くありません。

きれいさより「メンテしやすさ」が大事

制作の現場では、「完璧に整ったソース」よりも「後から直しやすいソース」が重視されることが多いです。条件分岐が増えたり、対応ブラウザやデバイスが増えたりすると、どうしてもコードは複雑になっていきます。

そこで私が意識しているのは、次のようなポイントです。

• 他の制作者が見ても、ざっくり意図が分かる書き方になっているか
• 数か月後の自分が見ても、「ああ、こういう理由でこう書いたのか」と思い出せるか
• 無理に1行にまとめず、必要なら少し冗長でも分かりやすさを優先する

SEOだけを理由に、WordPressのソースコードを根こそぎ書き直すのはあまり現実的ではありません。まずは「重大なエラーがないか」「極端に遅くなっていないか」を確認し、その上で余裕があれば読みやすさを整えていく、くらいのスタンスで十分だと思います。

WordPressでソースコードをきれいに埋め込む3つの方法

• 標準のコードブロックを使う方法
• プラグインでシンタックスハイライト表示にする方法
• プラグインなしでpreタグやcodeタグを使う方法

標準のコードブロックでシンプルに埋め込む

ブロックエディターには、最初から「コード」という専用ブロックが用意されています。まずはこれを使うだけでも、最低限の整った表示ができます。私も、簡単なコードサンプルだけ載せたいときは、この方法で済ませることが多いです。

項目	内容
基本的な使い方	「＋」ボタンからコードブロックを追加し、ソースコードをそのまま貼り付ける
メリット	プラグイン不要で、タグが勝手に実行される心配が少ない
デメリット	色分けや行番号、コピーボタンなどは標準では付かない
おすすめの用途	サンプルコードの量が少ない記事、技術色が強くないブログ

コードブロックの中に貼ったHTMLやJavaScriptは、そのまま文字として扱われるので、安全に表示できます。まずはこの機能を使ってみて、「もっと読みやすくしたい」と感じたら、次のプラグイン導入を検討する流れがおすすめです。

プラグインでシンタックスハイライト表示にする

プログラミングの解説記事をメインで書いていきたい人や、コードをしっかり見せたい人は、ソースコード表示用のプラグインを使った方が読者に親切です。色分けや行番号があるだけでも、かなり読みやすさが変わります。

機能	説明
シンタックスハイライト	言語ごとにキーワードや文字列を色分けし、コードの構造をぱっと見で把握できるようにする
行番号表示	「◯行目を変更してください」といった説明がしやすくなる
コピーボタン	ワンクリックでコード全体をコピーでき、読者にとって扱いやすい
テーマ切り替え	ダークテーマやライトテーマなど、サイトの雰囲気に合わせて配色を選べる

Code Block ProやHighlighting Code Blockなどのプラグインは、こうした機能をまとめて提供してくれるタイプです。プラグインごとに操作方法は少しずつ違いますが、多くは「専用のブロックを追加して、言語を選んで、コードを貼る」という流れなので、慣れてしまえば難しくありません。

プラグインなしでpre・codeタグを使うときのコツ

「なるべくプラグインを増やしたくない」「ちょっとしたコードだけ見せられれば十分」という場合は、preタグとcodeタグを使って、自分でソースコードを整える方法もあります。ただ、この方法にはいくつか注意点があります。

注意点	対策
記号がHTMLとして解釈される	< や > などの記号は、HTMLエンティティに変換してから貼り付ける
長い行がはみ出してしまう	CSSで横スクロールを許可したり、適度な位置で改行を入れる
行番号や色分けがない	どうしても必要な場合は、CSSで背景色やフォントを調整して、最低限見やすくする

オンラインのエンティティ変換ツールを使えば、「危険な記号」をまとめて変換できるので、手作業よりずっと楽です。技術記事の本数がそこまで多くないサイトなら、こうした手作業ベースの運用でも十分まわると思います。

WordPressソースコード埋め込みに便利なプラグイン比較

Highlighting Code Block（HCB）

Highlighting Code Blockは、日本語の情報も多く、ブロックエディターとも相性が良いプラグインです。私も人におすすめするときは、まずこの名前を出すことが多いです。

• ブロックエディターから専用ブロックを追加するだけで使える
• 行番号やコピーボタン、テーマ変更など、基本機能が一通りそろっている
• 設定画面が比較的分かりやすく、初心者でも迷いにくい

「技術ブログをちゃんとやっていきたいけれど、あまり難しい設定はしたくない」という人には、バランスの良い選択肢です。

Code Block Pro（VS Code風の見た目）

Code Block Proは、エディタ風の見た目でソースコードを表示できるプラグインです。VS Codeのような雰囲気が好きな人にはたまりません。

• タイトルバー付きのコード枠など、ちょっと「それっぽい」見た目にできる
• ブロックエディター上で直感的に操作できる
• 機能がシンプルで、コード表示のための余計な機能が少ない

「コードをデザインの一部として見せたい」「ダークモードのサイトと雰囲気を合わせたい」といったときに、特に使いやすいと思います。

Syntax-highlighting Code Block／CodeMirror Blocks など

ほかにも、Syntax-highlighting Code BlockやCodeMirror Blocks、古くからあるSyntaxHighlighter系のプラグインなど、WordPressのソースコード埋め込みにはいくつか定番どころがあります。それぞれの特徴をざっくりまとめると、次のようなイメージです。

プラグイン名	特徴	向いているケース
Syntax-highlighting Code Block	比較的シンプルな構成で、基本的なコード表示がしやすい	必要最低限の機能で軽く運用したいブログ
CodeMirror Blocks	テーマや設定項目が豊富で、見た目を細かく作り込みやすい	コードの見た目にもこだわりたいサイト
SyntaxHighlighter系	歴史が長く、情報やサンプルがたくさんある	クラシックエディター中心のサイトや、既存記事をそのまま活かしたい場合

一方で、更新が止まってしまった古いプラグインも存在します。インストールする前に、最終更新日や対応バージョンを必ずチェックしておくと安心です。

WordPressのソースコードを整える実践チェックリスト

テーマとプラグインの整理

まずは、ソースコードを複雑にしている原因をざっくり把握します。いきなりコードをいじるより、ここを見直した方が効果が大きいことも多いです。

• 使っていないプラグインがインストールされたままになっていないか
• SEO系の機能がテーマとプラグインで二重になっていないか
• 不具合報告の多いプラグインや、かなり前から更新されていないプラグインがないか

必要のないプラグインは思い切って停止・削除し、テーマ側で代用できる機能はなるべくテーマに任せていくと、ソースコードも少しずつすっきりしていきます。

記事内ソースコードの書き方をそろえる

記事ごとに別の方法でソースコードを埋め込んでいると、後から手直しするときに苦労します。新しく書く記事からで構わないので、ある程度のルールを決めておくと管理が楽になります。

ルール例	内容
表示方法を統一	「ソースコードはすべてHCBで表示する」など、使う方法を1つに決める
フォントの指定	等幅フォント（monospace系）を使い、コードと本文の見た目をはっきり分ける
行の長さ	なるべく80文字前後で改行して、横に長くなりすぎないようにする
言語の指定	HTML、CSS、PHPなど、プラグイン側で指定できる言語タグは必ず選ぶ

全部を一度に直そうとすると大変なので、「新規記事からルールを適用し、余裕があるときに過去記事も少しずつ直す」というスタンスがおすすめです。

表示崩れやパフォーマンスをチェックする

最後に、「見た目」と「速さ」の2つを簡単にチェックしておきます。ここまでできれば、WordPressのソースコードの埋め込み周りはかなり整っているはずです。

チェック項目	OKの状態	NGのサイン
レイアウト	コードが他の要素とぶつからず、はみ出さずに表示されている	ソース部分だけ横幅が極端に広がり、デザインが崩れている
読みやすさ	行間や文字サイズが適切で、スマホでも無理なく読める	文字が小さすぎたり、行間が詰まりすぎて判読しづらい
表示速度	コードが多い記事でも、体感でストレスなく表示される	コードを多く載せたページだけ、明らかに読み込みが重い

気になるところがあれば、プラグインの設定を見直したり、1ページあたりのコードブロックの数を調整したりしてみてください。小さな調整でも、意外と印象が変わります。

よくある質問（WordPressのソースコードが汚い・埋め込み編）

Q1. WordPressのソースコードが汚いと、本当にSEOにマイナスですか？

A1. 見た目として「汚いな」と感じる程度であれば、SEOに決定的なマイナスになることはほとんどありません。検索エンジンが気にしているのは、WordPressのソースコードが正しく解釈できるかどうか、見出し構造が整理されているかどうか、ページの表示が極端に遅くないか、といった点です。

むしろ、タグの閉じ忘れや重大なエラー、不要な読み込みが山ほどある、といった状態の方が問題です。そういった「危ない汚さ」がなければ、必要以上に心配しなくて大丈夫です。

Q2. プラグインでソースコードを埋め込みすぎると重くなりませんか？

A2. ソースコード表示用のプラグインは、テーマやプラグイン本体が読み込むスクリプト・スタイルが増えるため、入れすぎたり、1ページにコードブロックを大量に並べたりすると、体感で重く感じることはあります。

とはいえ、Code Block ProやHighlighting Code Blockなど、比較的シンプルな構成のプラグインも多いので、WordPressのソースコード埋め込み用プラグインを1つに絞って使うぶんには、大きな問題になりにくいです。心配なときは、テスト用のページで表示速度を見ながら、コードブロックの数やプラグインの設定を調整してみてください。

Q3. プラグインなしでWordPressにソースコードを埋め込むことはできますか？

A3. できます。preタグとcodeタグを組み合わせて使い、必要に応じて記号をHTMLエンティティに変換すれば、プラグインを使わずにWordPressにソースコードを埋め込むことも可能です。

ただ、行番号や色分けなどの便利機能は自前でCSSを書く必要があるため、設置の手間は少し増えます。「プラグインを増やしたくない」「技術記事はそこまで多くない」というサイトなら、まず1記事だけこの方法で試してみて、運用のしやすさを確認するのがおすすめです。

まとめ：WordPressのソースコードと上手につき合う

ここまでのポイントを整理しておきます

今日からできる最初の一歩としては、まず1つだけ記事を開いて、次の2つを試してみてください。

• 記事内のソースコードの埋め込み方法を、どれか1つに決めてそろえてみる
• 試してみたいソースコード表示プラグインを1つインストールし、テスト用の記事で表示を確認してみる

この小さな一歩だけでも、「WordPressのソースコードが汚い」「うまく埋め込みできない」というモヤモヤは、かなり軽くなるはずです。少しずつ整えていきながら、自分なりに気持ちよく触れるコードの状態を見つけていきましょう。