ワードプレスのソースコードの見方と編集方法｜初心者向け安全ガイド

ワードプレスでサイトを運営していると、「文字の色を変えたい」「アクセス解析用のタグを設置したい」「テーマのデザインを細かく調整したい」といった場面で、ソースコードの確認や編集が必要になることがあります。

しかし、ワードプレスのソースコードにはHTMLやCSSだけでなく、PHPやJavaScriptなども含まれています。内容を理解しないまま編集すると、レイアウトが崩れたり、管理画面に入れなくなったり、サイト全体が表示されなくなったりする可能性があるため注意が必要です。

この記事では、ワードプレスのソースコードの見方や編集場所、安全に作業するための準備、トラブルが起きた場合の対処法を初心者向けに解説します。目的に合った編集方法を選び、必ず元に戻せる状態を作ってから作業しましょう。

1. ワードプレスのソースコードとは？初心者が知っておきたい基本

1-1. ソースコードとはWebページを表示するためのHTML・CSS・PHP・JavaScriptのこと

ソースコードとは、Webページの内容やデザイン、動作をブラウザに指示するために書かれた文字列です。ワードプレスで作成されたサイトも、複数のプログラミング言語やマークアップ言語によって構成されています。

たとえば、見出しや文章、画像などの構造を指定するのがHTMLです。文字色や余白、レイアウトなどのデザインはCSSで調整します。ボタンをクリックしたときの動きやメニューの開閉にはJavaScriptが使われます。

ワードプレスでは、これらに加えてPHPが重要な役割を持っています。PHPは、データベースから投稿内容を取得したり、テーマのテンプレートを組み合わせたりして、表示するHTMLを生成するための言語です。

つまり、ブラウザに表示されているページのソースコードと、サーバー内に保存されているワードプレスのファイルは同じものではありません。ブラウザで確認できるのは、PHPによる処理が完了した後に生成されたHTMLやCSS、JavaScriptです。

1-2. ワードプレスで使われる主なソースコードの種類

ワードプレスでよく使われるソースコードは、主に次の4種類です。

HTMLは、ページの構造を作るために使用します。見出し、段落、リンク、画像、表などを記述できます。

<h2>サービスの特徴</h2><p>初心者にも分かりやすく解説します。</p><a href="/contact/">お問い合わせはこちら</a>

CSSは、HTMLで作られた要素の見た目を変更するために使用します。

.example-text {color: #333;margin-bottom: 20px;font-weight: bold;}

JavaScriptは、ページに動きを加えるために使用します。メニューの開閉、スライダー、ポップアップ、入力フォームの確認などに利用されます。

document.addEventListener('DOMContentLoaded', function () {console.log('ページが読み込まれました');});

PHPは、ワードプレスの投稿データを取得したり、テンプレートを制御したりするために使用します。

<?phpif ( have_posts() ) {while ( have_posts() ) {the_post();the_title();the_content();}}?>

初心者が最初に扱う機会が多いのはHTMLとCSSです。PHPやJavaScriptは記述ミスによる影響が大きくなることがあるため、基本を理解してから編集しましょう。

1-3. 固定ページ・投稿・テーマ・プラグインで編集できる範囲の違い

ワードプレスでは、編集する場所によって変更できる範囲が異なります。

投稿や固定ページで編集できるのは、基本的にそのページの本文です。文章、見出し、画像、リンク、表などをHTMLで調整できます。特定の記事だけを変更したい場合に向いています。

テーマファイルには、サイト全体のデザインやページ構成に関係するコードが保存されています。ヘッダーやフッター、投稿ページ、固定ページなどの共通部分を変更できますが、編集内容がサイト全体に影響する可能性があります。

プラグインは、ワードプレスに機能を追加するための仕組みです。お問い合わせフォーム、SEO設定、アクセス解析、セキュリティ対策などを管理できます。プラグイン本体のファイルを直接編集するのではなく、基本的にはプラグインの設定画面を利用します。

編集範囲の目安は次のとおりです。

編集場所主な対象影響する範囲
投稿・固定ページ本文のHTML編集したページ
追加CSSデザイン指定した要素またはサイト全体
テーマファイルページ構造や機能サイト全体
プラグイン設定追加機能プラグインが管理する範囲
プラグイン本体機能の内部処理サイト全体に影響する可能性あり

変更したい内容に対して、必要以上に広い範囲を編集しないことが安全な運用につながります。

1-4. ソースコードを見る目的と編集する目的の違い

ソースコードを見るだけであれば、通常はサイトに変更が加わりません。ページのHTML構造や適用されているCSSを確認し、エラーの原因やカスタマイズ方法を調べるために利用できます。

一方、ソースコードの編集は、サイトの表示や機能を実際に変更する作業です。保存した瞬間に本番サイトへ反映される場合もあります。

たとえば、文字色を変えるために対象要素のクラス名を調べる作業は「見る」に該当します。そのクラスに対してCSSを追加する作業は「編集」です。

初心者は、最初にブラウザのデベロッパーツールで変更内容を試し、問題がないことを確認してからワードプレス側へ反映すると安全です。デベロッパーツール上の変更は一時的なもので、ページを再読み込みすれば元に戻ります。

2. ワードプレスのソースコードを見る方法

2-1. ブラウザでページのソースコードを表示する方法

公開されているWebページのHTMLは、ブラウザの「ページのソースを表示」機能で確認できます。

Google Chromeでは、ページ内の何もない場所を右クリックし、「ページのソースを表示」を選択します。Windowsでは「Ctrl＋U」、Macでは「Option＋Command＋U」でも表示できます。

表示された画面では、ブラウザへ送信されたHTML、CSSファイルやJavaScriptファイルの読み込み先、画像のURL、metaタグなどを確認できます。

特定のコードを探す場合は、Windowsでは「Ctrl＋F」、Macでは「Command＋F」を押して検索します。タイトルタグを探したい場合は<title>、メタディスクリプションを確認したい場合はdescriptionなどの文字列で検索すると見つけやすくなります。

ただし、この方法で確認できるのは、サーバーでPHPの処理が終わった後のコードです。header.phpやfunctions.phpに書かれているPHPコードそのものは表示されません。

2-2. デベロッパーツールでHTMLやCSSを確認する方法

HTMLの構造や適用されているCSSを詳しく確認する場合は、ブラウザのデベロッパーツールが便利です。

Google Chromeでは、調べたい場所を右クリックして「検証」を選択します。画面の横や下にデベロッパーツールが表示され、選択した要素のHTMLとCSSを確認できます。

「Elements」または「要素」パネルではHTML構造を確認でき、「Styles」パネルでは、その要素に適用されているCSSが表示されます。文字色、背景色、余白、文字サイズなどを一時的に変更して、表示結果を試すことも可能です。

たとえば、見出しの文字色を変更したい場合は、対象の見出しを右クリックして検証し、クラス名を確認します。

<h2 class="article-heading">見出しの例</h2>

この場合、次のCSSをデベロッパーツールで試せます。

.article-heading {color: #1e73be;}

デベロッパーツールでの変更は保存されません。再読み込みすると元の状態へ戻るため、本番サイトを直接変更せずにデザインを試せます。

2-3. ワードプレス管理画面からコードを確認する方法

投稿や固定ページのコードは、ワードプレス管理画面から確認できます。

ブロックエディターでは、編集画面右上にあるメニューから「コードエディター」を選択すると、ページ全体をHTML形式で確認できます。個別のブロックだけを編集したい場合は、対象ブロックのメニューから「HTMLとして編集」を選択します。

カスタムHTMLブロックを追加すれば、任意のHTMLを入力することも可能です。

<div class="notice-box"><p>こちらは重要なお知らせです。</p></div>

ただし、ワードプレス独自のブロック情報がHTMLコメントとして記述されていることがあります。

<!-- wp:paragraph --><p>本文の例です。</p><!-- /wp:paragraph -->

ブロックを管理するために必要な情報なので、意味が分からない部分は削除しないようにしましょう。記述を大きく変更すると、ブロックが無効と判定される場合があります。

2-4. テーマファイルエディターでPHPやCSSを見る方法

環境によっては、ワードプレス管理画面の「外観」に「テーマファイルエディター」が表示されます。ここでは、現在インストールされているテーマのPHPやCSSを確認できます。

代表的なテーマファイルには、次のようなものがあります。

ファイル主な役割
style.cssテーマのスタイル
functions.phpテーマの機能追加や設定
header.phpヘッダー部分
footer.phpフッター部分
single.php投稿ページ
page.php固定ページ
archive.php一覧ページ
404.php404エラーページ

テーマファイルエディターで保存した内容は、すぐにサイトへ反映されます。記述ミスによってサイトが表示されなくなる危険があるため、確認用途にとどめ、編集には子テーマやFTPを利用する方法が安全です。

なお、使用しているテーマの種類やサーバー設定、セキュリティ設定によっては、テーマファイルエディターが表示されないことがあります。

2-5. FTP・サーバーファイルマネージャーでソースコードを見る方法

サーバー上のワードプレスファイルを直接確認する方法として、FTPソフトやレンタルサーバーのファイルマネージャーがあります。

一般的なワードプレスのファイル構成は次のとおりです。

public_html/├── wp-admin/├── wp-content/│   ├── plugins/│   ├── themes/│   └── uploads/├── wp-includes/├── wp-config.php└── index.php

テーマファイルは、通常、次の場所に保存されています。

/wp-content/themes/テーマ名/

プラグインのファイルは、次の場所にあります。

/wp-content/plugins/プラグイン名/

FTPやファイルマネージャーを使うと、編集前のファイルをパソコンへダウンロードしてバックアップできます。また、PHPエラーによって管理画面に入れなくなった場合でも、サーバー側から修正したファイルを元に戻せます。

ただし、wp-adminやwp-includesにあるワードプレス本体のファイルは、原則として編集しないでください。アップデートで上書きされるうえ、サイト全体の動作に重大な影響を与える可能性があります。

3. ワードプレスで編集できるソースコードの場所

3-1. 投稿・固定ページのHTMLコードを編集する場所

投稿や固定ページのHTMLを編集する場合は、ブロックエディターの「HTMLとして編集」または「コードエディター」を利用します。

一部分だけにHTMLを追加したい場合は、カスタムHTMLブロックが便利です。たとえば、補足情報を囲むボックスは次のように記述できます。

<div class="supplement-box"><p><strong>ポイント：</strong>編集前にはバックアップを取りましょう。</p></div>

見た目を整えるには、別途CSSを追加します。

.supplement-box {padding: 16px;margin: 24px 0;border: 1px solid #ccc;border-radius: 6px;}

投稿本文に<style>タグを直接記述する方法もありますが、管理が難しくなります。CSSは追加CSSや子テーマのCSSファイルへまとめ、HTMLと分けて管理するのがおすすめです。

3-2. 外観カスタマイズでCSSを追加する場所

クラシックテーマでは、管理画面の「外観」からカスタマイザーを開き、「追加CSS」にコードを入力できる場合があります。

たとえば、記事内の見出しデザインを変更するCSSは次のとおりです。

.entry-content h2 {padding: 12px 16px;border-left: 5px solid currentColor;}

追加CSSは、テーマ本体のファイルを直接変更せずにスタイルを上書きできるため、初心者にも比較的安全です。変更内容をプレビューで確認してから公開できます。

ブロックテーマでは、カスタマイザーではなく「外観」内のエディターやスタイル設定を利用する場合があります。管理画面の構成はテーマによって異なるため、追加CSSの場所が見つからないときは、使用中のテーマのマニュアルも確認しましょう。

また、追加CSSのコードはテーマを変更すると引き継がれない場合があります。テーマ変更前には必ずコードをコピーして保存してください。

3-3. テーマファイルでheader.php・footer.php・functions.phpを編集する場所

クラシックテーマでは、header.phpにページ上部やheadタグ周辺の処理、footer.phpにページ下部の処理が記述されています。

functions.phpは、テーマの機能を設定するファイルです。CSSやJavaScriptの読み込み、ウィジェットエリアの登録、独自機能の追加などに使われます。

ただし、テーマによってファイル構成は異なります。すべてのテーマにheader.phpやfooter.phpがあるとは限りません。特にブロックテーマでは、HTMLテンプレートやブロックパターンを中心とした構成になっていることがあります。

親テーマのファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。テーマをカスタマイズするときは、原則として子テーマを作成し、必要なファイルだけを子テーマ側へ追加します。

3-4. プラグインの設定画面でコードを追加する場所

アクセス解析タグやサイト認証コード、広告タグなどは、専用プラグインの設定画面から追加できる場合があります。

たとえば、次のような用途では、テーマファイルを直接編集するよりプラグインを利用したほうが管理しやすくなります。

  • headタグ内への計測コードの追加

  • body開始直後へのタグの追加

  • フッターへのJavaScriptの追加

  • 投稿や固定ページごとのCSS追加

  • PHPスニペットの管理

  • リダイレクト設定

プラグインを利用すれば、テーマを変更してもコードを保持しやすくなります。コードの有効化と無効化を管理画面から切り替えられる点もメリットです。

ただし、似た機能のプラグインを複数導入すると、同じタグが重複して出力される可能性があります。導入前に、使用中のテーマやSEOプラグインに同様の機能がないか確認しましょう。

3-5. ブロックエディターとクラシックエディターでの違い

ブロックエディターは、文章、画像、見出し、ボタンなどをブロック単位で管理します。個別ブロックのHTML編集やカスタムHTMLブロックの追加が可能です。

一方、クラシックエディターでは、ビジュアル編集とテキスト編集を切り替えて本文のHTMLを確認します。テキスト編集画面では、記事本文全体のHTMLが表示されます。

ブロックエディターでは、ワードプレスがブロック構造を維持するためのコメントを自動的に追加します。コードエディターでこれらを削除したり、対応関係を崩したりすると、ブロックエラーが発生する場合があります。

単純な文章装飾やリンクの追加であれば、コードを編集せず、エディターの標準機能を使うほうが安全です。HTML編集は、標準機能では実現できない場合に限定しましょう。

4. ワードプレスのソースコードを安全に編集する準備

4-1. 編集前に必ずバックアップを取る

ワードプレスのソースコードを編集する前には、必ずバックアップを取りましょう。

最低限バックアップしておきたいものは、次の2つです。

  • サーバー上のファイル

  • ワードプレスのデータベース

テーマファイルだけを編集する場合でも、変更対象のファイルをパソコンへダウンロードしておくと、問題が起きたときにすぐ戻せます。

サイト全体に関わる作業では、ファイルとデータベースの両方を保存してください。投稿や固定ページの内容、各種設定、ユーザー情報などは、主にデータベースへ保存されています。

バックアップ機能付きのプラグインや、レンタルサーバーの自動バックアップも利用できます。ただし、自動バックアップが有効になっているだけで安心せず、復元方法まで確認しておくことが重要です。

4-2. 子テーマを使ってテーマ更新による上書きを防ぐ

子テーマとは、親テーマの機能やデザインを引き継ぎながら、独自の変更を追加するためのテーマです。

親テーマのstyle.cssやfunctions.phpを直接編集すると、テーマを更新した際に変更内容が消える可能性があります。子テーマ側にカスタマイズを記述すれば、親テーマを更新しても変更を維持しやすくなります。

子テーマの基本的な構成例は次のとおりです。

child-theme/├── style.css└── functions.php

style.cssには、子テーマとして認識させるための情報を記述します。

/*Theme Name: Sample ChildTemplate: sample-parent*/

Templateには親テーマのフォルダー名を指定します。表示名ではなく、wp-content/themes内にある実際のディレクトリ名を使う点に注意してください。

テーマによっては公式の子テーマが提供されています。自作する前に、使用しているテーマの公式サイトやマニュアルを確認しましょう。

4-3. 本番サイトではなくテスト環境で編集する

ソースコードの変更は、できる限りテスト環境で確認してから本番サイトへ反映します。

テスト環境とは、本番サイトを複製して、一般ユーザーに影響を与えずに変更を試せる環境です。「ステージング環境」や「検証環境」と呼ばれることもあります。

レンタルサーバーによっては、管理画面からステージングサイトを作成できる機能があります。機能がない場合は、ローカル環境やサブドメインにワードプレスを複製する方法もあります。

テスト環境では、次の項目を確認しましょう。

  • パソコンとスマートフォンで表示が崩れていないか

  • 投稿、固定ページ、一覧ページに問題がないか

  • お問い合わせフォームが動作するか

  • JavaScriptのエラーが発生していないか

  • 管理画面へ正常にログインできるか

  • PHPエラーや警告が表示されていないか

一つのページだけを見て判断せず、変更の影響を受ける可能性があるページを一通り確認することが大切です。

4-4. functions.phpを直接編集するときの注意点

functions.phpは、記述ミスによる影響が大きいファイルです。括弧やセミコロンが一つ抜けただけでもPHPエラーが発生し、サイトや管理画面が表示されなくなることがあります。

特に注意したいのが、次のような構文ミスです。

function sample_function() {echo 'サンプル'}

上記では、echo 'サンプル'の後ろにセミコロンがありません。正しくは次のとおりです。

function sample_function() {echo 'サンプル';}

また、コピーしたコードに<?phpが含まれている場合、すでにPHPタグ内であるにもかかわらず、そのまま貼り付けるとエラーになる可能性があります。

functions.phpを編集する場合は、子テーマを使用し、FTPやファイルマネージャーですぐ元に戻せる状態にしてください。小さな機能追加であれば、コードスニペットを管理できるプラグインを使う方法もあります。

4-5. エラー発生時に元に戻せる状態を作る

編集前には、単にバックアップを取るだけでなく、復旧手順を決めておきましょう。

たとえば、テーマのPHPファイルを編集する場合は、次の準備を行います。

  1. 編集対象ファイルをパソコンへ保存する

  2. FTPまたはファイルマネージャーへログインできることを確認する

  3. 編集前のファイル名と保存場所を記録する

  4. 一度に複数箇所を変更しない

  5. 変更内容をメモする

  6. 保存後すぐにサイトと管理画面を確認する

コードの変更履歴を残すことも大切です。変更前と変更後のコードをテキストファイルへ保存しておけば、問題のある箇所を特定しやすくなります。

複数のコードをまとめて追加すると、エラーの原因を判断しにくくなります。一つ追加するたびに表示と動作を確認しましょう。

5. 初心者向け｜目的別ソースコードの編集方法

5-1. 文章内にHTMLタグを追加する方法

文章内にHTMLタグを追加する場合は、ブロックエディターのカスタムHTMLブロックや「HTMLとして編集」を利用します。

たとえば、一部の文章を強調する場合はstrongタグを使います。

<p>編集前には<strong>必ずバックアップ</strong>を取りましょう。</p>

別のページへのリンクはaタグで作成できます。

<a href="/contact/">お問い合わせページへ</a>

外部サイトへのリンクを新しいタブで開く場合は、次のように記述できます。

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">参考サイトを見る</a>

ただし、見出し、太字、リンク、リストなどは、ブロックエディターの標準機能でも追加できます。標準機能で対応できる場合は、無理にHTMLを記述する必要はありません。

HTMLタグは開始タグと終了タグを正しく対応させましょう。閉じタグが不足すると、後ろの文章まで装飾が適用され、レイアウトが崩れる場合があります。

5-2. CSSで文字色・余白・デザインを変更する方法

CSSを使うと、文字色、背景色、余白、枠線、文字サイズなどを変更できます。

たとえば、特定の文章だけを装飾したい場合は、HTMLにクラス名を付けます。

<p class="important-message">重要なお知らせです。</p>

続いて、追加CSSへ次のコードを入力します。

.important-message {padding: 16px;margin: 20px 0;border: 2px solid currentColor;font-weight: bold;}

クラス名の先頭には半角のピリオドを付けます。HTML側ではclass="important-message"、CSS側では.important-messageと記述します。

CSSがほかの場所にも影響する場合は、対象範囲を限定します。

.entry-content .important-message {padding: 16px;}

スマートフォンだけ文字サイズを変更したい場合は、メディアクエリを使います。

@media (max-width: 767px) {.important-message {font-size: 14px;}}

CSSを追加する前に、デベロッパーツールで対象要素のクラス名と既存スタイルを確認すると、意図しない上書きを防ぎやすくなります。

5-3. headタグ内に計測タグや認証コードを追加する方法

アクセス解析、広告計測、検索エンジンの所有権確認などでは、headタグ内にコードを追加するよう指定される場合があります。

初心者は、header.phpへ直接貼り付けるのではなく、次の方法を優先しましょう。

  • 使用中のテーマにあるタグ設置機能

  • SEOプラグインの認証コード入力欄

  • アクセス解析サービスと連携できるプラグイン

  • head・body・footerへコードを挿入する専用プラグイン

テーマファイルへ直接追加すると、テーマ変更や更新によってコードが消える可能性があります。また、同じ計測タグをテーマとプラグインの両方に設定すると、アクセス数が二重計測されることがあります。

設置後は、公開ページのソースコードでタグが出力されているか確認します。計測サービス側のリアルタイムレポートや確認機能も利用し、正常に動作しているか確かめましょう。

認証用のmetaタグを設置する場合は、指定されたコードを改変しないことが重要です。

<meta name="example-verification" content="xxxxxxxxxxxx">

引用符や属性を削除すると、認証に失敗する可能性があります。

5-4. footerにJavaScriptコードを追加する方法

JavaScriptは、ページの読み込み速度やHTMLの解析を妨げないよう、フッター付近で読み込むことがあります。

単純なタグであれば、footerへコードを追加できる専用プラグインを利用する方法が簡単です。

テーマからJavaScriptファイルを正しく読み込む場合は、functions.phpでワードプレスの読み込み機能を使います。

function sample_enqueue_scripts() {wp_enqueue_script('sample-script',get_stylesheet_directory_uri() . '/js/sample.js',array(),'1.0.0',true);}add_action( 'wp_enqueue_scripts', 'sample_enqueue_scripts' );

最後のtrueは、スクリプトをフッター側で読み込む指定です。

JavaScriptをfooter.phpへ直接貼り付ける方法もありますが、テーマ更新による上書きやコード管理の難しさがあります。子テーマや専用プラグインを利用し、どこに何を追加したか分かる状態にしておきましょう。

JavaScriptを追加した後は、ブラウザのデベロッパーツールにある「Console」を確認します。赤いエラーメッセージが出ている場合は、記述ミスやほかのスクリプトとの競合が考えられます。

5-5. PHPコードを編集してテーマ機能を調整する方法

PHPを使うと、ワードプレスの表示や機能を細かく調整できます。ただし、HTMLやCSSと比べて、記述ミスがサイト全体のエラーにつながりやすいため注意が必要です。

たとえば、特定の条件で文章を表示するコードは次のようになります。

<?phpif ( is_front_page() ) {echo '<p>トップページにだけ表示される文章です。</p>';}?>

PHPコードを追加するときは、次の点を確認してください。

  • 子テーマを使用しているか

  • コードの目的を理解しているか

  • 使用中のPHPやワードプレスで動作するか

  • 同じ関数名がすでに使われていないか

  • 入力値の検証や出力時のエスケープが行われているか

  • FTPで元のファイルへ戻せるか

テーマの見た目を少し変えるだけなら、PHPではなくCSSで対応できる可能性があります。PHP編集は、表示条件や機能そのものを変更する必要がある場合に限定しましょう。

6. ソースコード編集でよくある失敗と対処法

6-1. 画面が真っ白になった場合の対処法

ソースコードの編集後に画面が真っ白になった場合は、PHPの構文エラーや重大なエラーが発生している可能性があります。

直前にfunctions.phpなどを編集したのであれば、FTPまたはサーバーのファイルマネージャーを使い、バックアップしたファイルへ戻してください。

管理画面にも入れない場合は、サーバー側から操作します。変更したテーマが原因と考えられる場合は、該当テーマのフォルダー名を一時的に変更すると、別の利用可能なテーマへ切り替わる場合があります。

sample-theme↓sample-theme-disabled

プラグインが原因の場合は、該当プラグインのフォルダー名を変更して無効化します。

sample-plugin↓sample-plugin-disabled

原因を確認するためにデバッグ機能を使う方法もありますが、エラー情報を公開ページへ表示すると、サーバー内部の情報が第三者に見える恐れがあります。本番環境ではログへ記録し、画面には表示しない設定が基本です。

6-2. レイアウトが崩れた場合の確認ポイント

レイアウトが崩れた場合は、まず直前に追加したHTMLやCSSを元に戻します。

HTMLでは、次の点を確認してください。

  • divやpの閉じタグが不足していないか

  • タグの入れ子が不自然になっていないか

  • クラス名の引用符が閉じられているか

  • ブロックエディターの管理用コメントを削除していないか

CSSでは、次の点を確認します。

  • 波括弧{}が正しく閉じられているか

  • セレクターの指定範囲が広すぎないか

  • 単位が抜けていないか

  • 別のCSSに上書きされていないか

  • パソコン用の変更がスマートフォンにも影響していないか

たとえば、すべてのpタグに指定すると、サイト全体の段落へ影響します。

p {margin: 0;}

特定の記事本文だけを対象にする場合は、範囲を限定します。

.entry-content p {margin-bottom: 1.5em;}

デベロッパーツールで対象要素を調べ、どのCSSが適用されているか確認すると原因を見つけやすくなります。

6-3. 追加したコードが反映されない原因

コードを追加しても表示が変わらない場合、必ずしも記述内容が間違っているとは限りません。

主な原因には次のものがあります。

  • ブラウザキャッシュが残っている

  • キャッシュプラグインのデータが残っている

  • サーバーやCDNのキャッシュが残っている

  • 別のCSSに上書きされている

  • 編集しているテーマが有効化されていない

  • 対象ページのクラス名が想定と異なる

  • コードを追加した場所が間違っている

  • 保存や公開が完了していない

  • JavaScriptエラーが発生している

まずはブラウザでスーパーリロードを行い、シークレットウィンドウでも確認します。その後、ワードプレス、サーバー、CDNのキャッシュを順番に削除します。

CSSが反映されない場合は、デベロッパーツールの「Styles」で該当コードが表示されているか確認します。コード自体が表示されていなければ、CSSファイルが読み込まれていない可能性があります。コードに取り消し線が付いていれば、別のCSSに上書きされています。

6-4. WordPress管理画面に入れなくなったときの復旧方法

管理画面に入れなくなった場合は、直前に変更した内容を確認します。

テーマファイルを編集した直後であれば、FTPやファイルマネージャーから元のファイルをアップロードします。プラグインを有効化した直後であれば、プラグインフォルダーの名前を変更して無効化します。

すべてのプラグインを一時的に無効化する場合は、pluginsフォルダー自体の名前を変更する方法があります。

wp-content/plugins↓wp-content/plugins-disabled

ログイン画面だけが表示されない場合は、セキュリティプラグインによってログインURLが変更されていないか、アクセス制限が設定されていないかも確認してください。

復旧後は、原因となったコードをそのまま再度追加しないことが重要です。テスト環境で構文や互換性を確認し、問題点を修正してから本番環境へ反映しましょう。

6-5. キャッシュやプラグインが原因の場合の確認方法

ワードプレスでは、表示速度を上げるために複数の場所でキャッシュが使われることがあります。そのため、ソースコードを修正しても古い内容が表示される場合があります。

次の順番で確認すると効率的です。

  1. ブラウザキャッシュを削除する

  2. シークレットウィンドウで確認する

  3. キャッシュプラグインのキャッシュを削除する

  4. レンタルサーバーのキャッシュを削除する

  5. CDNを利用している場合はCDNキャッシュを削除する

プラグイン同士の競合が疑われる場合は、バックアップを取ったうえで、プラグインを一つずつ停止します。問題が解消した時点で、直前に停止したプラグインが原因の候補になります。

ただし、本番サイトで決済、会員機能、予約機能などを運用している場合、プラグインの停止によってサービスへ影響する可能性があります。テスト環境で確認するか、利用者の少ない時間帯に慎重に作業してください。

7. ソースコードを編集しないほうがよいケース

7-1. テーマやプラグインの仕組みを理解していない場合

どのファイルが何を制御しているのか分からない状態で、テーマやプラグインのソースコードを編集するのは避けましょう。

同じコードが複数のファイルから呼び出されている場合や、フックを利用して処理が追加されている場合もあります。一見関係がなさそうなファイルを変更しただけで、複数ページに影響することがあります。

まずはブラウザのデベロッパーツールでHTMLとCSSを確認し、管理画面の標準機能で変更できないか検討してください。テーマの公式マニュアルやサポート情報を確認することも大切です。

7-2. functions.phpに不明なコードを貼り付ける場合

インターネット上で見つけたPHPコードを、内容を理解せずにfunctions.phpへ貼り付けるのは危険です。

コードが古く、現在のワードプレスやPHPで動作しない可能性があります。また、使用中のテーマやプラグインと同じ関数名が使われていると、エラーが発生することがあります。

悪意のあるコードが含まれている可能性にも注意が必要です。外部へ情報を送信する処理、管理者ユーザーを追加する処理、不審なファイルを作成する処理などが含まれていても、初心者には判断できないことがあります。

コードの出所、更新日、目的、処理内容を確認できない場合は使用しないでください。

7-3. ネット上のコードをそのまま使うリスク

ネット上の解説記事に掲載されたコードが、すべてのサイトで正しく動作するとは限りません。

動作条件は、次の要素によって変わります。

  • ワードプレスのバージョン

  • PHPのバージョン

  • 使用中のテーマ

  • 使用中のプラグイン

  • サーバー環境

  • コードを追加する場所

  • サイト固有の設定

コードを利用する場合は、何をする処理なのか一行ずつ確認し、テスト環境で動作を検証しましょう。サイトURL、投稿ID、クラス名、ファイルパスなどは、自分の環境に合わせて変更する必要があります。

コードの掲載日が古い場合は、現在も推奨される方法なのか確認することも重要です。

7-4. 更新頻度の高いテーマファイルを直接編集するリスク

テーマ本体のファイルを直接編集すると、アップデートで変更内容が上書きされる可能性があります。

セキュリティ修正や不具合修正のためにテーマを更新したくても、カスタマイズが消えることを恐れて更新できなくなるケースもあります。更新を長期間避けることは、セキュリティ上のリスクにつながります。

テーマのカスタマイズには子テーマを使い、CSSだけの変更であれば追加CSSを利用しましょう。テーマ独自のカスタマイズ機能で対応できる場合は、そちらを優先します。

7-5. プラグインやカスタムCSSで代替できるケース

テーマファイルを編集しなくても、プラグインや追加CSSで実現できることは少なくありません。

たとえば、次のような変更は直接編集を避けられる可能性があります。

  • 文字色や余白の変更は追加CSS

  • アクセス解析タグの設置は専用プラグイン

  • リダイレクト設定はリダイレクト管理機能

  • 簡単なPHP追加はスニペット管理プラグイン

  • ボタンや囲み枠の追加はブロック機能

  • ヘッダーやフッターのレイアウト変更はサイトエディター

ただし、プラグインを増やしすぎると、管理が複雑になったり、サイトの動作へ影響したりする場合があります。必要な機能だけを選び、長期間更新されていないものや出所が不明なものは避けましょう。

8. ワードプレスのソースコード編集におすすめの方法

8-1. HTML編集はブロックエディターのコードエディターを使う

投稿や固定ページのHTMLを編集する場合は、ブロックエディターの機能を利用する方法がおすすめです。

一部分だけ変更するなら「HTMLとして編集」、独自のコードを追加するならカスタムHTMLブロック、ページ全体を確認するならコードエディターを使います。

ただし、ページ全体のコードエディターでは、ブロックを管理するコメントも表示されます。必要な箇所以外は変更せず、保存後にビジュアルエディターでブロックエラーが発生していないか確認してください。

8-2. CSS編集は追加CSSを使う

文字色や余白などのデザイン変更は、テーマファイルを直接編集せず、追加CSSを利用する方法が比較的安全です。

追加CSSでは、公開前にプレビューできる場合があります。変更内容を一か所で管理できるため、後から修正や削除もしやすくなります。

ただし、テーマを変更したときにコードが引き継がれない可能性があるため、定期的に内容をコピーして保管しましょう。大規模なCSSを管理する場合は、子テーマのstyle.cssを利用するほうが整理しやすくなります。

8-3. head・bodyへのタグ追加は専用プラグインを使う

計測タグや認証コードは、専用プラグインやテーマの設定機能を利用して追加しましょう。

専用機能を使うメリットは、テーマファイルを触らずに済むこと、テーマ更新で消えにくいこと、有効化と無効化を管理しやすいことです。

設置時には、コードを挿入する位置を間違えないようにします。サービスによって、head内、body開始直後、body終了直前など、指定される場所が異なります。

タグの重複にも注意してください。過去にテーマへ直接追加したコードが残っていないか、ページのソースコードで確認しましょう。

8-4. テーマ編集は子テーマを使う

テーマのPHPやテンプレートを変更する場合は、子テーマを利用します。

子テーマでは、変更が必要なファイルだけを管理します。親テーマにあるすべてのファイルをコピーする必要はありません。不要なコピーを増やすと、親テーマの更新内容が子テーマへ反映されにくくなることがあります。

また、親テーマのテンプレート構造が更新されると、古い子テーマのファイルとの間に差が生じる可能性があります。子テーマを使っていても、親テーマ更新後には表示や動作を確認しましょう。

8-5. 大きな改修は専門家に依頼する

次のような作業は、ワードプレスやPHPに詳しい専門家へ依頼することを検討しましょう。

  • テーマ全体の大幅な変更

  • 独自の検索機能や会員機能の開発

  • 決済システムとの連携

  • データベースを直接扱う処理

  • サイト表示速度の大規模な改善

  • セキュリティに関わる修正

  • 複数のプラグインにまたがる不具合対応

  • サイトを停止できない環境での改修

誤った編集によってサイトが停止すると、復旧費用や機会損失が発生する可能性があります。自分で対応できる範囲を見極め、リスクの高い作業は専門家へ任せることも安全な選択です。

9. ワードプレスのソースコードに関するよくある質問

9-1. ワードプレスのソースコードはスマホでも見られる？

スマートフォンでも、方法によってはワードプレスのソースコードを確認できます。ソース表示に対応したブラウザやアプリ、外部のソース確認サービスなどを利用する方法があります。

また、ワードプレスの管理画面へスマートフォンからログインし、投稿や固定ページのHTMLを編集することも可能です。

ただし、スマートフォンの小さな画面ではコード全体を確認しにくく、入力ミスにも気づきにくいため、本格的な編集には向いていません。特にPHPやテーマファイルの編集は、パソコンでバックアップを用意してから行うことをおすすめします。

9-2. ソースコードを編集するとSEOに影響する？

ソースコードの編集内容によっては、SEOに良い影響も悪い影響も与える可能性があります。

たとえば、適切な見出し構造、画像の代替テキスト、構造化データ、表示速度の改善などは、検索エンジンや利用者がページ内容を理解しやすくすることにつながります。

一方、次のような編集はSEOへ悪影響を与える可能性があります。

  • titleやmetaタグを誤って削除する

  • 見出し構造を不自然にする

  • 重要な本文をJavaScriptだけで表示する

  • 内部リンクを削除する

  • ページ表示速度を大きく低下させる

  • スマートフォンのレイアウトを崩す

  • 検索エンジン向けの設定を重複させる

  • 構文エラーでページを表示できなくする

SEO目的でコードを変更するときは、検索順位だけでなく、ページの読みやすさ、表示速度、モバイルでの使いやすさも確認しましょう。

9-3. HTML・CSS・PHPのどれから学べばいい？

初心者は、HTML、CSS、PHPの順番で学ぶと理解しやすくなります。

最初にHTMLを学ぶと、見出し、段落、リンク、画像など、Webページの基本構造を理解できます。次にCSSを学ぶことで、文字色や余白、レイアウトを調整できるようになります。

PHPは、HTMLとCSSの基本を理解した後に学ぶのがおすすめです。ワードプレスではPHPがHTMLを生成するため、HTMLの知識がない状態では処理内容を理解しにくくなります。

JavaScriptは、メニューの開閉や画面上の動きなどを追加したい段階で学ぶとよいでしょう。

まずはデベロッパーツールを使い、既存ページのHTMLとCSSがどのように対応しているか確認すると、実践的に学べます。

9-4. テーマファイルエディターが表示されない原因は？

テーマファイルエディターが表示されない主な原因として、次のものが考えられます。

  • 設定ファイルで管理画面からのファイル編集が禁止されている

  • セキュリティプラグインが編集機能を無効化している

  • 利用しているユーザーに管理者権限がない

  • サーバーや管理サービス側で機能が制限されている

  • 管理画面の構成が通常のワードプレスと異なる

  • マルチサイト環境で権限が制限されている

テーマファイルエディターが表示されなくても、FTPやサーバーのファイルマネージャーからファイルを確認できます。

管理画面からの直接編集を無効化する設定は、セキュリティ対策として行われている場合があります。表示されないからといって、無理に有効化する必要はありません。むしろ、FTPでバックアップを取りながら編集するほうが安全です。

9-5. 編集したコードを元に戻す方法は？

編集したコードを元に戻す最も確実な方法は、事前に保存したバックアップファイルを復元することです。

投稿や固定ページであれば、リビジョン機能から過去の内容へ戻せる場合があります。編集画面にリビジョンが表示されていれば、変更前の状態を選択して復元します。

追加CSSの場合は、追加した部分を削除するか、保存しておいた変更前のコードへ戻します。テーマファイルの場合は、FTPまたはファイルマネージャーからバックアップファイルを上書きします。

バックアップがない場合は、テーマを再インストールすることで元のファイルを取得できる場合があります。ただし、テーマ本体へ直接加えたほかの変更も消えるため注意が必要です。

元に戻す作業を簡単にするためにも、変更前のコード、変更後のコード、編集日時、編集したファイル名を記録しておきましょう。

まとめ

ワードプレスのソースコードは、HTML、CSS、JavaScript、PHPなどで構成されています。投稿や固定ページの本文を変更するだけなら、ブロックエディターのHTML編集機能で対応できます。文字色や余白の変更には追加CSS、計測タグの設置には専用プラグインを利用する方法が安全です。

テーマのPHPファイルを編集すると、サイト全体に影響する可能性があります。特にfunctions.phpの記述ミスは、サイトや管理画面が表示されなくなる原因になります。編集前には必ずファイルとデータベースのバックアップを取り、FTPやファイルマネージャーから元に戻せる状態を作りましょう。

親テーマを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。継続的なカスタマイズには子テーマを使い、本番サイトへ反映する前にテスト環境で表示と動作を確認してください。

ワードプレスのソースコード編集では、目的に対して最も影響範囲の小さい方法を選ぶことが重要です。標準機能、追加CSS、専用プラグインで対応できないかを先に確認し、PHPやテーマファイルの編集は必要な場合だけ慎重に行いましょう。