この記事ではWordPressでソースコードを表示したり確認したりする方法を丁寧に解説していきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
WordPressのソースコード表示・確認の4パターンを整理しよう
最初に、これから説明する「ソースコードの表示・確認シーン」をざっくり整理して、この記事の全体像をつかんでもらいたいと思います。
まずは目的別にWordPressのソースコード表示と確認を整理
あなたがソースコードを扱いたい場面は、意外とパターンが限られています。
目的とだいたいのやり方を表にまとめると、こんなイメージになります。
| 目的 | 具体的な例 | 主なやり方 |
|---|---|---|
| 記事内でソースコードを表示 | ブログ記事にHTMLやPHP、CSSのサンプルコードを載せたい | コードブロックや整形済みテキスト、プラグインを使って表示 |
| テーマファイルのソースを確認 | functions.phpやstyle.cssを見たい・少し編集したい | テーマファイルエディターやFTPでソースコードを確認 |
| ページのHTMLソースを確認 | 今開いているページの構造を知りたい | ブラウザの「ページのソースを表示」や開発者ツール |
| 他サイトのWordPressやテーマを調査 | 参考サイトのテーマ名や構成を知りたい | HTMLソースのパスをチェックし、必要に応じて診断ツールも利用 |
このあと、表にある4つのパターンそれぞれについて、具体的な手順を深掘りしていきます。
WordPress記事内にサンプルコードを表示したいとき
技術ブログやカスタマイズ記事を書くときに、一番よく出てくるのがこのパターンです。
読者にとって読みやすい形でソースコードを表示できると、記事の信頼感もぐっと上がります。
- ブロックエディターなら「コード」ブロックや「整形済みテキスト」ブロックを使う
- クラシックエディターなら、テキストモードに切り替えてコードを貼り付ける
- 見た目や機能にこだわるなら、専用プラグインでハイライトや行番号を付ける
このあたりの具体的な操作は、次の見出しで詳しく説明していきます。
テーマやテンプレートファイルのソースコードを確認したいとき
次に多いのが、「テーマの細かいところを変えたいから、元のソースコードを確認したい」というパターンです。
私も最初にやらかしたのは、functions.phpを直接編集して、画面を真っ白にしてしまったことでした。
- WordPress管理画面の「外観」→「テーマファイルエディター」から確認する
- カスタマイズは子テーマ側で行うのが基本
- FTPやサーバーのファイルマネージャーでファイルをダウンロードし、ローカルで編集する
便利さとリスクの両方がある部分なので、安全な進め方をこのあと整理します。
ブラウザで表示中ページのHTMLソースコードを確認したいとき
「このボタンはどんなHTMLで出しているのか知りたい」「このクラス名はどこで設定しているのか知りたい」といったときは、ブラウザの機能でページのソースコードを確認します。
- 右クリックから「ページのソースを表示」でHTML全体を開く
- 開発者ツールで、特定のパーツだけピンポイントで確認する
- class名やid名をメモして、後でテンプレートファイルを探す手がかりにする
こうやってブラウザ側からコードを追いかけると、どのテンプレートファイルが出力しているかの見当もつきやすくなります。
他サイトがWordPressかどうか、テーマ名を確認したいとき
競合サイトや好きなデザインのサイトを見つけると、「これWordPressかな？どんなテーマだろう？」と気になることがあると思います。
- ページのソースを表示して、「wp-content」「wp-includes」といった文字列を検索する
- /wp-content/themes/テーマ名/ というパスを見つけてテーマ名をメモする
- テーマ名やプラグインを調べる診断ツールを、補助的に使ってみる
すべてを完璧に特定できるわけではありませんが、ざっくりとした構成や使っているテーマの方向性はつかめるようになります。
WordPress記事内でソースコードをきれいに表示する基本
ここからは、「記事の中にソースコードを載せたい」人向けに、WordPressでソースコードを表示する具体的な手順を説明します。
ブロックエディターの「コード」ブロックでソースコードを表示
ブロックエディターを使っているなら、まず試してほしいのが「コード」ブロックです。
余計な装飾が入らず、そのままの形でソースコードを表示できるので、シンプルなサンプルコードにはぴったりです。
- 投稿画面で「＋」ボタンから「コード」と検索する
- 「コード」ブロックを追加して、ソースコードを貼り付ける
- インデントや改行を整えて、読みやすい形にする
「整形済みテキスト」ブロックとの違いは、意味づけの部分です。コードブロックは「ここはコードです」と明示する役割を持つので、読者にも検索エンジンにも意図が伝わりやすくなります。
整形済みテキストとHTMLタグでシンプルにソースを表示
もう少し柔軟に表示したいときは、「整形済みテキスト」ブロックや、HTMLのpreタグとcodeタグを使った方法も便利です。
私も、短いCSSだけ見せたいときや、装飾を極力減らしたいときは、このシンプルな方法を使うことがよくあります。
- 整形済みテキストブロックは、スペースや改行をそのまま表示してくれる
- HTMLでは、preタグとcodeタグで囲むことで、コードらしい表示になる
- 余計な枠や背景がいらない場合は、この方法が一番すっきりする
ただし、HTMLのタグをそのまま貼ると、ブラウザが「本物のタグ」として解釈してしまうことがあります。そのときは、記号をエンティティに変換するなど、表示用の工夫が必要になります。
プラグインでソースコード表示をもっと便利に
「行番号を付けたい」「色分けしたい」「コピー用ボタンも欲しい」といった要望が出てきたら、専用プラグインの出番です。
私もプログラミング系の記事を書くときは、ほぼ必ずコード表示用プラグインを入れています。
| プラグイン名 | 特徴 | 向いている人 |
|---|---|---|
| Highlighting Code Block | 行番号、コピー、シンタックスハイライトなど機能が豊富 | 技術ブログで長めのコードを載せたい人 |
| Code Block Pro などの拡張系 | エディター風のデザインなど、見た目にこだわった表示が可能 | デザイン性を重視したい人 |
| シンプルなコードハイライター | 機能は最低限で軽量、表示速度に優れる | できるだけ負荷を抑えたい人 |
プラグインを選ぶときは、次のポイントも意識してみてください。
- ブロックエディターに対応しているかどうか
- HTML、CSS、PHP、JavaScriptなど、扱いたい言語に対応しているか
- スマホ表示で横スクロールしやすく、文字が小さすぎないか
- 使っているテーマのデザインと調和するか
コードの見た目にこだわると、記事全体の印象がグッと引き締まります。時間をかけて整える価値がある部分です。
テーマファイルのWordPressソースコード確認と編集の基本
ここからは、テーマのfunctions.phpやstyle.cssなど、テンプレートファイルのソースコードを確認したい人向けに、基本的な手順と注意点をまとめます。
管理画面のテーマファイルエディターで確認する手順
手早くテーマのソースコードを確認したいときは、WordPress管理画面の「テーマファイルエディター」が一番簡単です。
私も最初の頃は、ほぼこの画面だけでソースコードを眺めていました。
- 管理画面の「外観」→「テーマファイルエディター」を開く
- 右側のファイル一覧から、functions.phpやstyle.cssなどをクリックする
- 中央のエディター画面で、ソースコードをスクロールしながら確認する
よく使う代表的なファイルと役割を、ざっくり表にまとめておきます。
| ファイル名 | 主な役割 |
|---|---|
| style.css | サイト全体のデザイン（色、余白、フォントなど）を指定する |
| functions.php | 機能の追加、カスタム投稿タイプ、スクリプトの読み込みなど |
| header.php | ページ上部の共通部分、ヘッダーのHTML |
| footer.php | ページ下部の共通部分、フッターのHTML |
| single.php / page.php | 投稿ページや固定ページのレイアウト |
【稼げるキーワード教えます】
▼ ▼ ▼
テーマファイルエディターはとても便利ですが、直接書き換えて保存すると、その瞬間に本番サイトへ反映されます。一文字のミスで画面が真っ白になることもあるので、「ここではまず確認だけ」「編集は別の方法で」という使い分けもおすすめです。
子テーマを作ってソースコードを安全にカスタマイズする
テーマのデザインや動きを本格的に変えたいときは、子テーマを作ってカスタマイズするのが基本です。
私も親テーマを直接いじっていて、アップデートのタイミングで変更が消えてしまったことがあります。それ以来、なるべく子テーマを使うように意識しています。
- 親テーマをそのまま編集すると、アップデートで変更が上書きされてしまう
- 子テーマを作れば、変更内容をそちらにまとめておける
- style.cssとfunctions.phpだけ用意したシンプルな子テーマからでも始められる
最初は少しハードルが高く感じるかもしれませんが、仕組みを一度理解してしまえば、ソースコードの確認も編集もかなり安心して行えるようになります。
FTPやファイルマネージャーでソースコードを確認する流れ
より安全に編集したい、作業前にしっかりバックアップを取りたいという場合は、FTPソフトやサーバーのファイルマネージャーを使う方法がおすすめです。
私もある程度慣れてからは、この方法をメインにしています。
- FTPソフトでサーバーに接続する
- wp-content/themes/フォルダの中から、使用中のテーマのフォルダを開く
- 編集したいファイルをパソコンにダウンロードし、テキストエディターで開く
- 変更内容を保存してから、上書きアップロードする
この方法なら、元ファイルを手元に残しておけるので、万が一のときも戻しやすくなります。作業前にテーマファイル一式をローカルにコピーしておけば、安心して試行錯誤できます。
ブラウザからWordPressのソースコードを確認する方法
この見出しでは、ブラウザの機能を使ってHTMLソースやCSSを確認する方法をまとめます。テーマファイルの確認と組み合わせると、どのコードがどこに効いているのかが見えやすくなります。
ページのソースを表示してHTML全体を確認
まずは定番の「ページのソースを表示」です。今開いているページ全体のHTMLを一気に表示してくれる機能です。
- ページ上で右クリックして「ページのソースを表示」を選ぶ
- 別タブで長いHTMLコードが表示される
- Ctrl + F（またはCommand + F）で、class名やid名、wp-contentなどを検索する
ブラウザごとの代表的なショートカットを、簡単にまとめておきます。
| 操作内容 | Windows系 | Mac系 |
|---|---|---|
| ページのソースを表示 | Ctrl + U | Command + Option + U など |
| ページ内検索 | Ctrl + F | Command + F |
| 開発者ツールの起動 | F12 または Ctrl + Shift + I | Option + Command + I |
ショートカットを覚えておくと、ソースコードを確認する作業がかなり快適になります。私も作業中はほとんど無意識で押しているくらいです。
開発者ツールで特定のパーツのソースを確認
ページ全体ではなく、「このボタンだけ」「この見出しだけ」といったピンポイントでソースコードを見たいときは、開発者ツールが便利です。
- ページ上で右クリックして「検証」や「要素を検証」を選ぶ
- 画面の下や横に、HTMLとCSSが並んだパネルが表示される
- マウスカーソルで要素をなぞると、対応するHTMLやCSSがハイライトされる
ここでクラス名やid名、構造をメモしておくと、あとでテーマファイルのソースコードを探すときの手がかりになります。私も分からないパーツがあるときは、まず開発者ツールからチェックするようにしています。
他サイトがWordPressかどうかをソースコードから判断
気になるサイトを見つけたとき、そのサイトがWordPressで作られているかどうか、ソースコードからある程度推測できます。
- ページのソースを表示して、「wp-content」「wp-includes」といった文字列を検索する
- /wp-content/themes/テーマ名/ の部分を探し、使われているテーマ名をメモする
- ヘッダーのメタタグやパスの形から、WordPressかどうかのヒントを得る
このような情報に、テーマやプラグインを調べる外部ツールを組み合わせれば、おおよその構成が見えてきます。ただし、診断結果はあくまで参考程度にとどめて、自分でもソースを確認するのがおすすめです。
WordPress本体のソースコード確認とトラブル対策
この見出しでは、WordPress本体のソースコードを確認したい人や、ソース編集でトラブルが起きたときの考え方を整理します。
公式のWordPressソースコードを確認する方法
コアの動きを詳しく知りたい場合は、WordPress本体のソースコードに目を通してみるのも一つの方法です。
- 公式サイトからWordPressのパッケージをダウンロードする
- ローカルで展開し、wp-includesやwp-adminフォルダなどをテキストエディターで開く
- 特定の関数名で全文検索し、どこで定義・呼び出しされているかを追いかける
<pここまで行うのはやや開発者寄りの世界ですが、ソースコードに慣れてきたら、少しずつ触れてみると理解が深まりやすくなります。
ソース編集で起こりがちなトラブルと対処法
残念ながら、ソースコードの編集にはトラブルがつきものです。私も過去に何度か、冷や汗をかいたことがあります。
代表的なトラブルと対処の方向性を、表にまとめておきます。
| 症状 | 原因の例 | 対処のポイント |
|---|---|---|
| 画面が真っ白になった | functions.phpなどのPHPファイルで文法エラーが発生 | 直前に触ったコードをコメントアウトする、バックアップに差し替える |
| レイアウトが崩れた | CSSの指定ミス、HTMLのタグ閉じ忘れ | 開発者ツールでどのCSSが効いているか確認する |
| ソースが元に戻せない | テーマファイルを直接編集し、バックアップを取っていなかった | サーバー側の自動バックアップや、テーマの再インストールを検討する |
こうしたトラブルを減らすために、ソースコードを表示・確認・編集する前には、次のような習慣をつけておくと安心です。
- 必ずファイルのバックアップを取ってから編集する
- 一度に大きく変えず、小さな単位で変更して動作確認する
- 本番環境とは別にテスト用の環境を用意する
安全にソースコードを扱うための心構え
最後に、ソースコードと付き合うときの心構えについて少しだけ触れておきます。
- 「一発で完璧に書こう」とせず、いつでも戻せる状態で少しずつ進める
- よく分からないコードを見つけたら、そのままにせずコメントやメモを残す
- やりたいことを日本語で整理してから、どのファイルをどのように触るかを決める
私も、いきなりコードから入って迷子になることがよくありました。今は「目的」「触ったファイル」「変えた内容」をセットでメモしておくようにしてから、トラブルがかなり減りました。
よくある質問：WordPressのソースコード表示・確認
ここでは、よくある質問をQ&A形式でまとめます。気になっているところを先に解消してから、実際の作業に進んでください。
Q1. 記事内のソースコード表示にプラグインは必須ですか？
A. プラグインが必須というわけではありません。
ブロックエディターの「コード」ブロックや「整形済みテキスト」ブロックを使えば、プラグインなしでもソースコードを読みやすく表示できます。
ただ、行番号や色分け、コピー用ボタンなどを付けたい場合は、専用プラグインを入れた方が手早く整えられることが多いです。
Q2. テーマのソースコードを確認するとき、どこから触ればいいか分かりません。
A. まずは「確認」と「編集」を分けて考えるのがおすすめです。
確認だけなら、「外観」→「テーマファイルエディター」でstyle.cssやfunctions.phpを眺めるところから始めて問題ありません。
編集するときは、いきなり大きく書き換えず、子テーマやFTPを使ってバックアップを取りながら、少しずつ変更していくと安心です。
Q3. 他サイトのソースコードを確認するのは問題ありませんか？
A. 一般的には、ブラウザで通常の範囲でページのソースを表示したり、HTMLやCSSの書き方を学ぶ目的で眺めたりする行為は、多くの人が行っています。
私もデザインや構造の勉強として、よくHTMLソースを見ています。ただし、ソースコードをそのままコピーして自分のサイトに流用すると、著作権や利用規約の問題になることがあります。
あくまで参考にとどめ、構成や考え方だけを自分のWordPressサイト作りに活かすのがおすすめです。
まとめ：WordPressのソースコード表示と確認の最初の一歩
この記事のポイントを整理します
- ソースコードを扱う目的は「記事内表示」「テーマ編集」「HTML確認」「他サイト調査」の4パターンに分けて考えると分かりやすい
- 記事内の表示は、まず「コード」ブロックや整形済みテキストで試し、必要に応じてプラグインを追加する
- テーマのソースコード確認と編集は、「テーマファイルエディターで確認」「子テーマやFTPで編集」の二段構えが安全
- ブラウザの「ページのソースを表示」や開発者ツールを使えば、HTMLやCSSの構造を効率よく調べられる
- トラブルを避けるには、バックアップ、小さな変更、テスト環境の3つを習慣にすることが大切
今日からの最初の一歩としては、まず自分のサイトで、短いコードを1つだけコードブロックに貼ってみるところから始めてみてください。
「貼ってみた」「ちゃんと表示できた」という小さな成功体験を重ねていくと、WordPressのソースコードを表示したり確認したりする作業への苦手意識は、少しずつ薄れていきます。
記事を読んだらコチラ
▼ ▼ ▼
