ワードプレスでコードを編集・追加する方法｜HTML・CSS・PHPを安全にカスタマイズする初心者向けガイド
はじめに
ワードプレスでサイトを運営していると、「文字の色を変えたい」「ボタンを追加したい」「広告タグや計測コードを設置したい」「PHPで機能を追加したい」など、コードを編集・追加したくなる場面があります。
ワードプレスは初心者でも使いやすいCMSですが、HTML・CSS・PHP・JavaScriptなどのコードを直接編集できるため、使い方を間違えるとデザインが崩れたり、サイトが表示されなくなったりすることがあります。
特にPHPファイルやテーマファイルを直接編集する場合は注意が必要です。たった1文字のミスでもエラーが発生し、管理画面に入れなくなることもあります。
この記事では、「ワードプレス コード」というテーマで、WordPressでコードを編集・追加する方法を初心者向けにわかりやすく解説します。HTML、CSS、PHP、JavaScriptの違いから、安全な編集方法、よくあるトラブルの対処法、実用的なコード例までまとめて紹介します。
1. ワードプレスで編集・追加できるコードの種類
ワードプレスでは、サイトの見た目や機能を変更するためにさまざまなコードを編集できます。主に使われるのは、HTML、CSS、PHP、JavaScriptの4種類です。
それぞれ役割が異なるため、「何を変更したいのか」によって編集すべきコードも変わります。
1-1. HTML・CSS・PHP・JavaScriptの違い
HTMLは、ページの構造を作るためのコードです。見出し、文章、画像、リンク、表、ボタンなどを配置するときに使います。
CSSは、デザインを変更するためのコードです。文字色、背景色、余白、枠線、フォントサイズ、レイアウトなどを調整できます。
PHPは、ワードプレスの動作や機能を制御するためのコードです。記事一覧の表示、ショートコードの追加、テーマの機能変更、条件分岐などに使われます。
JavaScriptは、ページに動きを加えるためのコードです。クリック時の動作、スライダー、ポップアップ、入力フォームの制御、広告タグやアクセス解析タグなどにも使われます。
簡単にまとめると、HTMLは「構造」、CSSは「見た目」、PHPは「仕組み」、JavaScriptは「動き」を担当します。
1-2. 記事本文・固定ページ・テーマファイルで編集できる範囲
ワードプレスでコードを編集できる場所は、大きく分けて3つあります。
まず、投稿や固定ページの本文です。ここでは、主にHTMLコードを追加できます。たとえば、リンク、ボタン、表、囲み枠などを記事内に挿入できます。
次に、外観カスタマイズや追加CSSです。ここではCSSコードを追加して、サイト全体や特定のページのデザインを変更できます。
最後に、テーマファイルです。style.css、functions.php、header.php、footer.php、single.phpなどのファイルを編集することで、サイト全体の構造や機能を変更できます。
ただし、テーマファイルの編集は初心者にとってリスクが高いため、いきなり本番サイトで直接編集するのはおすすめできません。
1-3. 初心者がまず触るべきコードと避けるべきコード
初心者が最初に触るなら、HTMLとCSSがおすすめです。
HTMLは投稿や固定ページの中で使えるため、比較的安全に試せます。CSSも「追加CSS」から編集すれば、テーマファイルを直接触らずにデザインを変更できます。
一方で、PHPは慎重に扱う必要があります。functions.phpやテーマファイルのPHPコードを間違えると、サイト全体にエラーが出ることがあります。
JavaScriptも、設置場所や記述方法を間違えると、ページの表示速度や動作に影響することがあります。特に広告タグや計測コードは、設置位置を確認してから追加しましょう。
初心者は、まず投稿画面のHTML編集と追加CSSから始め、PHPやJavaScriptはプラグインを使って管理する方法がおすすめです。
1-4. 「コードを追加したい」目的別の最適な編集方法
記事内にボタンや表を追加したい場合は、ブロックエディターの「カスタムHTML」ブロックを使うのが簡単です。
文字色や余白、見出しデザインを変えたい場合は、「外観」から「カスタマイズ」を開き、「追加CSS」にコードを入力する方法が安全です。
サイト全体に広告タグやアクセス解析タグを入れたい場合は、ヘッダー・フッター管理プラグインを使うと管理しやすくなります。
functions.phpにPHPコードを追加したい場合は、直接編集するよりもコード管理プラグインを使うと、エラー時に無効化しやすく安全です。
テーマの構造を大きく変えたい場合は、子テーマを作成し、必要なテンプレートファイルだけを編集する方法が基本です。
2. コード編集前に必ずやる安全対策
ワードプレスでコードを編集する前に、必ず安全対策を行いましょう。コード編集は便利ですが、ミスをするとサイトが崩れたり、管理画面に入れなくなったりする可能性があります。
2-1. バックアップを取ってから作業する
コードを編集する前には、必ずバックアップを取ります。
バックアップすべきものは、ワードプレスのファイルとデータベースです。テーマファイルやプラグインファイルだけでなく、記事データや設定情報もデータベースに保存されています。
バックアップには、サーバーのバックアップ機能やバックアップ用プラグインを使えます。編集前の状態に戻せるようにしておけば、万が一エラーが起きても復旧しやすくなります。
特にfunctions.php、header.php、footer.php、style.cssなどを編集する場合は、編集前のコードをメモ帳などにコピーしておくことも大切です。
2-2. 子テーマを使ってテーマ更新による上書きを防ぐ
テーマファイルを直接編集する場合は、子テーマを使うのが基本です。
親テーマのファイルを直接編集すると、テーマ更新時にカスタマイズ内容が上書きされることがあります。せっかく追加したコードが消えてしまう原因になるため、テーマのカスタマイズは子テーマで行いましょう。
子テーマを使えば、親テーマの機能を引き継ぎながら、必要な部分だけを安全に変更できます。
CSSやPHPのカスタマイズを長期的に管理するなら、子テーマは必須と考えておくとよいでしょう。
2-3. 本番サイトではなくテスト環境で確認する
可能であれば、本番サイトではなくテスト環境でコードを確認してから反映しましょう。
テスト環境とは、実際に公開されているサイトとは別に用意した確認用の環境です。ステージング環境とも呼ばれます。
テスト環境であれば、コードを間違えても訪問者に影響が出ません。デザイン変更やPHPカスタマイズ、JavaScriptの動作確認を安心して行えます。
サーバーによっては、簡単にステージング環境を作れる機能が用意されている場合もあります。
2-4. functions.phpやPHP編集で起こりやすいエラー
functions.phpは、ワードプレスの機能を追加・変更できる重要なファイルです。しかし、記述ミスがあるとサイト全体に影響します。
よくあるエラーには、セミコロンの付け忘れ、括弧の閉じ忘れ、全角文字の混入、PHPタグの重複、関数名の重複などがあります。
たとえば、以下のようなミスはエラーの原因になります。
PHPfunction my_custom_code() {
echo 'Hello WordPress'
}
このコードでは、echo文の最後にセミコロンがありません。正しくは次のように書きます。
PHPfunction my_custom_code() {
echo 'Hello WordPress';
}
PHPは小さなミスでもエラーになるため、追加する前にコード全体を確認しましょう。
2-5. 画面が真っ白になったときの復旧方法
コード編集後にサイトが真っ白になった場合、PHPエラーが起きている可能性があります。
まず、直前に編集したファイルを元に戻します。管理画面に入れない場合は、FTPソフトやサーバーのファイルマネージャーから該当ファイルを開き、追加したコードを削除します。
functions.phpを編集してエラーが出た場合は、追加した部分を削除するだけで復旧できることが多いです。
プラグインで追加したコードが原因の場合は、該当プラグインを無効化します。管理画面に入れないときは、FTPでプラグインフォルダ名を変更すると無効化できます。
バックアップを取っていれば、編集前の状態に戻すこともできます。
3. 投稿・固定ページでHTMLコードを編集・追加する方法
投稿や固定ページでは、HTMLコードを使って文章の構造を整えたり、ボタンや表、囲み枠などを追加したりできます。
ワードプレスでは、ブロックエディター、カスタムHTMLブロック、クラシックエディターなどからHTMLを編集できます。
3-1. ブロックエディターのコードエディターに切り替える方法
ブロックエディターでは、通常はビジュアル編集画面で記事を作成しますが、コードエディターに切り替えることでHTMLを直接確認・編集できます。
投稿編集画面の右上にあるメニューから「コードエディター」を選ぶと、記事全体のHTMLを編集できます。
ただし、ブロックエディターではワードプレス独自のコメントコードも表示されます。
HTML<!-- wp:paragraph -->
<p>これは段落です。</p>
<!-- /wp:paragraph -->
このようなコードはブロックを管理するために使われているため、不要に削除するとブロックが崩れることがあります。
記事全体を編集する場合は、必要な部分だけを慎重に変更しましょう。
3-2. カスタムHTMLブロックでコードを追加する方法
特定の場所にHTMLコードを追加したい場合は、「カスタムHTML」ブロックを使うのがおすすめです。
ブロック追加ボタンから「カスタムHTML」を選び、そこにHTMLコードを入力します。
たとえば、リンクボタンを追加したい場合は次のように書けます。
HTML<a href="https://example.com" class="custom-button">詳しく見る</a>
カスタムHTMLブロックは、通常の文章ブロックと分けて管理できるため、初心者でも扱いやすい方法です。
3-3. クラシックエディターでHTMLを編集する方法
クラシックエディターを使っている場合は、「ビジュアル」タブと「テキスト」タブを切り替えてHTMLを編集できます。
HTMLを直接編集したいときは「テキスト」タブを開きます。そこにHTMLコードを入力すれば、記事本文に反映されます。
ただし、ビジュアルタブとテキストタブを何度も切り替えると、コードが自動整形されたり、一部のタグが消えたりすることがあります。
複雑なHTMLを使う場合は、カスタムHTMLブロックや専用プラグインを使う方が安定します。
3-4. HTMLコードが崩れる・消えるときの原因と対処法
HTMLコードが崩れたり消えたりする原因はいくつかあります。
よくある原因は、ワードプレスの自動整形機能、使用できないタグの削除、ビジュアルエディターによる変換、テーマやプラグインの影響です。
たとえば、scriptタグやiframeタグなどは、ユーザー権限や環境によって保存時に削除されることがあります。
対処法としては、カスタムHTMLブロックを使う、管理者権限で編集する、専用プラグインを使う、ショートコード化する、といった方法があります。
複雑なコードを記事本文に直接入れるより、CSSやJavaScriptは別の場所で管理した方がトラブルを防ぎやすくなります。
3-5. よく使うHTMLコード例
リンクを追加するHTMLコードです。
HTML<a href="https://example.com">公式サイトを見る</a>
新しいタブで開くリンクにする場合は、次のように書きます。
HTML<a href="https://example.com" target="_blank" rel="noopener">公式サイトを見る</a>
画像を表示するHTMLコードです。
HTML<img src="https://example.com/image.jpg" alt="画像の説明">
表を作成するHTMLコードです。
HTML<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>HTML</td>
<td>ページの構造を作る</td>
</tr>
<tr>
<td>CSS</td>
<td>デザインを変更する</td>
</tr>
</table>
囲み枠を作るHTMLコードです。
HTML<div class="box">
<p>ここに強調したい文章を入れます。</p>
</div>
このように、HTMLだけでも記事内の表現を広げることができます。
4. ワードプレスにCSSコードを追加してデザインを変更する方法
CSSコードを追加すると、文字色、背景色、余白、ボタン、見出し、表、囲み枠などのデザインを変更できます。
ワードプレスでCSSを追加する方法はいくつかありますが、初心者には「追加CSS」を使う方法がもっとも簡単です。
4-1. 外観カスタマイズの「追加CSS」を使う方法
管理画面から「外観」へ進み、「カスタマイズ」を開きます。その中にある「追加CSS」にCSSコードを入力すると、サイトに反映できます。
たとえば、本文の文字色を変更する場合は次のように書きます。
CSSbody {
color: #333;
}
見出しのデザインを変更する場合は、次のようなCSSを追加できます。
CSSh2 {
border-left: 5px solid #333;
padding-left: 12px;
}
追加CSSは管理画面から簡単に編集でき、テーマファイルを直接触らないため初心者にも扱いやすい方法です。
4-2. テーマファイルのstyle.cssを編集する方法
テーマのCSSファイルであるstyle.cssを編集してデザインを変更する方法もあります。
ただし、親テーマのstyle.cssを直接編集すると、テーマ更新時に変更内容が消えることがあります。そのため、style.cssを編集する場合は子テーマを使いましょう。
子テーマのstyle.cssにCSSを追加すれば、親テーマを更新してもカスタマイズを残せます。
ただし、少しだけCSSを追加したい場合は、style.cssよりも追加CSSの方が簡単です。
4-3. プラグインでCSSを追加する方法
CSS管理用プラグインを使ってコードを追加する方法もあります。
プラグインを使うと、テーマに依存せずCSSを管理できます。テーマを変更してもCSSを残せる場合があり、複数のコードを整理しやすいのもメリットです。
また、ページごとにCSSを分けたり、コードの有効・無効を切り替えたりできるプラグインもあります。
頻繁にCSSを追加する場合や、複数のカスタマイズを管理したい場合は、プラグインを使うと便利です。
4-4. 特定のページだけにCSSを適用する方法
特定のページだけにCSSを適用したい場合は、ページ固有のclassを利用します。
ワードプレスでは、bodyタグにページIDなどのclassが自動で付与されます。たとえば、特定の固定ページにだけCSSを適用したい場合は、次のように書けます。
CSS.page-id-123 h2 {
color: #0066cc;
}
この場合、ページIDが123のページにあるh2だけにCSSが適用されます。
投稿ページの場合は、postidを使うこともあります。
CSS.postid-456 .custom-button {
background: #333;
}
ページIDは、投稿や固定ページの編集画面URLなどから確認できます。
4-5. CSSが反映されないときのチェックポイント
CSSを追加しても反映されない場合は、まずキャッシュを確認しましょう。ブラウザキャッシュ、ワードプレスのキャッシュプラグイン、サーバーキャッシュ、CDNキャッシュなどが原因になることがあります。
次に、CSSの優先順位を確認します。テーマ側のCSSが強く指定されている場合、自分で追加したCSSが上書きされることがあります。
また、セレクタが間違っている、括弧が閉じられていない、全角文字が混ざっている、ページIDが違うといった単純なミスもよくあります。
どうしても反映されない場合は、ブラウザの検証ツールを使って、どのCSSが適用されているか確認しましょう。
5. PHPコードを安全に編集・追加する方法
PHPは、ワードプレスの機能をカスタマイズするために使われる重要なコードです。
ただし、HTMLやCSSよりもエラーの影響が大きいため、初心者が直接編集する場合は十分に注意が必要です。
5-1. PHPでできるカスタマイズ内容
PHPを使うと、ワードプレスにさまざまな機能を追加できます。
たとえば、ショートコードの作成、記事一覧の表示変更、カスタム投稿タイプの追加、ウィジェットエリアの追加、ログイン画面の変更、管理画面のカスタマイズなどができます。
また、テーマテンプレートを編集すれば、記事ページ、固定ページ、アーカイブページ、ヘッダー、フッターなどの表示内容を変更できます。
ただし、PHPはサイト全体の動作に関わるため、目的が明確でないまま編集するのは避けましょう。
5-2. functions.phpにコードを追加する方法
functions.phpは、テーマに機能を追加するためのファイルです。
管理画面から「外観」内のテーマファイルエディターを開き、functions.phpを選んで編集できます。ただし、この方法はエラー時のリスクが高いため、初心者にはあまりおすすめできません。
functions.phpにコードを追加する場合は、ファイルの一番下に追加することが多いです。
たとえば、ショートコードを追加するPHPコードは次のようになります。
PHPfunction my_sample_shortcode() {
return '<p>これはショートコードで表示された文章です。</p>';
}
add_shortcode('sample_text', 'my_sample_shortcode');
このコードを追加すると、投稿本文に次のショートコードを書けます。
[sample_text]
すると、指定した文章が表示されます。
5-3. テーマファイルエディターでPHPを編集する方法
ワードプレス管理画面には、テーマファイルを直接編集できるテーマファイルエディターがあります。
ここからheader.php、footer.php、single.php、page.php、functions.phpなどを編集できます。
ただし、テーマファイルエディターでPHPを直接編集する方法は、初心者にはリスクがあります。保存した瞬間にエラーが発生し、管理画面に入れなくなることがあるためです。
どうしても編集する場合は、必ずバックアップを取り、編集前のコードを保存してから作業しましょう。
また、親テーマではなく子テーマのファイルを編集することが大切です。
5-4. PHP追加にはコード管理プラグインを使うべき理由
PHPコードを追加する場合は、functions.phpに直接書くよりもコード管理プラグインを使う方法がおすすめです。
コード管理プラグインを使えば、追加したPHPコードを管理画面から有効・無効にできます。エラーが起きた場合でも、該当コードだけを停止できることがあります。
また、複数のコードを目的別に分けて管理できるため、後から見直しやすくなります。
テーマを変更してもコードを引き継ぎやすい点もメリットです。
初心者がPHPを追加するなら、テーマファイルを直接編集する前に、コード管理プラグインの利用を検討しましょう。
5-5. PHPエラーを防ぐ書き方と確認方法
PHPエラーを防ぐには、まずコピーしたコードをそのまま貼り付ける前に内容を確認することが大切です。
特に、開始タグと終了タグ、セミコロン、括弧、引用符、関数名の重複に注意しましょう。
functions.phpの中では、PHP開始タグがすでに書かれていることがあります。その場合、追加コードに余計な開始タグを入れるとエラーの原因になることがあります。
また、同じ関数名を複数回使うとエラーになります。関数名には、自分のサイト用の接頭辞を付けると重複を避けやすくなります。
PHPfunction mysite_custom_message() {
return 'こんにちは';
}
PHPを追加した後は、サイトの表示、管理画面、該当機能の動作を必ず確認しましょう。
6. JavaScript・広告タグ・計測コードを追加する方法
JavaScriptや広告タグ、アクセス解析コードは、サイトのheadタグ内、bodyタグ直後、footerなどに追加することが多いです。
ただし、設置場所を間違えると正しく動作しないことがあります。
6-1. headタグ内にコードを追加する方法
headタグ内には、アクセス解析タグ、認証タグ、メタタグ、外部スクリプトなどを設置することがあります。
テーマファイルで直接追加する場合は、header.php内の</head>の直前にコードを入れることが多いです。
ただし、header.phpを直接編集するとテーマ更新で上書きされる可能性があります。また、コードのミスで表示に影響することもあります。
初心者は、ヘッダー・フッター管理プラグインを使ってhead内にコードを追加する方法がおすすめです。
6-2. bodyタグ直後やfooterにコードを追加する方法
広告タグや計測タグの中には、bodyタグ直後に設置するものや、footerに設置するものがあります。
bodyタグ直後に入れるコードは、テーマによって編集場所が異なります。footerに入れるコードは、footer.php内の</body>直前に追加することが多いです。
ただし、これもテーマファイルを直接編集するより、プラグインで管理する方が安全です。
プラグインによっては、head内、body直後、footerの3か所を分けてコード追加できるものもあります。
6-3. Googleアナリティクス・サーチコンソール・広告タグの設置方法
Googleアナリティクスの計測タグは、通常headタグ内に設置します。プラグインやタグ管理ツールを使えば、テーマファイルを編集せずに設置できます。
Googleサーチコンソールの所有権確認では、HTMLタグをhead内に追加する方法があります。これも、ヘッダーにコードを追加できるプラグインを使えば対応できます。
広告タグは、広告サービスごとに指定された場所へ設置します。記事内に表示する広告であればカスタムHTMLブロック、サイト全体に設置するタグであればプラグインやテーマ設定を使うと管理しやすくなります。
タグを設置した後は、各サービス側の確認画面やブラウザの検証ツールで正しく読み込まれているか確認しましょう。
6-4. テーマに直接書かずプラグインで管理する方法
JavaScriptや広告タグ、計測コードは、テーマファイルに直接書かずプラグインで管理するのがおすすめです。
理由は、テーマ更新による上書きを防げること、設置場所を選びやすいこと、コードを一覧で管理できることです。
また、テーマを変更した場合でも、プラグイン側にコードが残るため再設定の手間を減らせます。
複数の広告タグや解析タグを扱う場合は、どのコードが何の目的で入っているのかメモしておくと、後から管理しやすくなります。
6-5. コードが動作しないときの確認ポイント
JavaScriptやタグが動作しない場合は、まず設置場所が正しいか確認します。head内に必要なコードをfooterに入れてしまうと、正しく動かない場合があります。
次に、コードが途中で改変されていないか確認します。ビジュアルエディターに貼り付けたことで、記号が変換されることがあります。
また、キャッシュや遅延読み込み、JavaScript最適化プラグインが影響することもあります。
広告ブロッカーやブラウザ拡張機能が原因で、自分の環境だけタグが動作していないように見える場合もあります。
複数の環境で確認し、必要に応じてキャッシュを削除しましょう。
7. ワードプレスでコードを編集する主な方法の比較
ワードプレスでコードを編集する方法はいくつかあります。それぞれメリットとデメリットがあるため、目的に合わせて選ぶことが大切です。
7-1. ブロックエディターで編集する場合
ブロックエディターでは、記事本文や固定ページ内にHTMLコードを追加できます。
カスタムHTMLブロックを使えば、特定の場所にコードを挿入できるため、ボタン、表、埋め込みコードなどを追加しやすいです。
ただし、サイト全体のデザインや機能を変更するには向いていません。記事内だけで使うHTMLコードに適しています。
7-2. 外観カスタマイズから追加する場合
外観カスタマイズの追加CSSは、CSSコードを安全に追加できる方法です。
テーマファイルを直接編集しないため、初心者でも使いやすいのがメリットです。変更内容をプレビューしながら確認できる場合もあります。
ただし、大量のCSSを管理するにはやや不向きです。CSSが増えてきたら、子テーマのstyle.cssやプラグインで整理するとよいでしょう。
7-3. テーマファイルエディターを使う場合
テーマファイルエディターでは、管理画面からテーマファイルを直接編集できます。
style.css、functions.php、header.php、footer.phpなどを編集できるため、自由度は高いです。
しかし、PHPエラーが発生するとサイトが表示されなくなるリスクがあります。また、親テーマを編集するとテーマ更新で変更が消えることがあります。
初心者にはあまりおすすめできない方法です。
7-4. FTP・ファイルマネージャーで編集する場合
FTPソフトやサーバーのファイルマネージャーを使うと、ワードプレスのファイルを直接編集できます。
管理画面に入れない場合でもファイルを修正できるため、トラブル復旧にも役立ちます。
ただし、誤って重要なファイルを削除したり、別の場所にアップロードしたりするとトラブルになる可能性があります。
FTPで編集する場合も、必ずバックアップを取ってから作業しましょう。
7-5. プラグインでコードを追加する場合
コード追加用プラグインを使うと、HTML、CSS、PHP、JavaScriptなどを管理しやすくなります。
コードを目的別に分けられる、有効・無効を切り替えられる、テーマ変更の影響を受けにくい、といったメリットがあります。
特にPHPや広告タグ、計測コードの追加にはプラグインが便利です。
ただし、プラグインを増やしすぎると管理が複雑になったり、サイトの表示速度に影響したりすることがあります。必要なものだけを選んで使いましょう。
7-6. 初心者におすすめの方法と避けたい方法
初心者におすすめなのは、HTMLならカスタムHTMLブロック、CSSなら追加CSS、PHPやJavaScriptならコード管理プラグインを使う方法です。
避けたいのは、本番サイトでfunctions.phpやテーマファイルを直接編集することです。
特にバックアップなしでPHPを編集するのは危険です。エラーが出たときに復旧できる準備をしてから作業しましょう。
まずは安全な方法で小さく変更し、慣れてきたら子テーマやテスト環境を使って本格的なカスタマイズに進むのがおすすめです。
8. よくあるコード編集トラブルと解決方法
ワードプレスでコードを編集すると、さまざまなトラブルが起こることがあります。原因を知っておけば、落ち着いて対処できます。
8-1. コードを追加したらサイトが表示されない
コード追加後にサイトが表示されない場合、PHPエラーやJavaScriptエラー、HTMLの記述ミスが原因の可能性があります。
特にfunctions.phpを編集した直後に表示されなくなった場合は、追加したPHPコードが原因であることが多いです。
FTPやファイルマネージャーで該当ファイルを開き、追加したコードを削除して保存しましょう。
コード管理プラグインで追加した場合は、そのコードを無効化します。
8-2. CSSを変更してもデザインが変わらない
CSSを変更しても反映されない場合は、キャッシュが原因のことがよくあります。
ブラウザキャッシュ、キャッシュプラグイン、サーバーキャッシュ、CDNキャッシュを削除して確認しましょう。
また、CSSの指定が弱く、テーマ側のCSSに負けている場合もあります。
たとえば、以下のようにより具体的なセレクタを使うと反映されやすくなります。
CSS.entry-content h2 {
color: #333;
}
それでも反映されない場合は、検証ツールでCSSの適用状況を確認しましょう。
8-3. HTMLコードが自動で書き換わる
HTMLコードが自動で書き換わる場合、エディターの自動整形やワードプレスのセキュリティ機能が影響している可能性があります。
特にscriptタグ、iframeタグ、styleタグなどは、環境によって保存時に削除されることがあります。
対処法としては、カスタムHTMLブロックを使う、ショートコードにする、専用プラグインで管理する、といった方法があります。
複雑なコードは記事本文に直接入れず、プラグインやテーマ側で管理する方が安定します。
8-4. PHPの構文エラーが出る
PHPの構文エラーは、セミコロンの付け忘れ、括弧の閉じ忘れ、引用符の不一致、関数名の重複などで発生します。
エラー文には、問題が起きているファイル名や行番号が表示されることがあります。その情報を手がかりに、該当箇所を確認しましょう。
PHPコードを追加するときは、一度に大量のコードを入れず、少しずつ追加して確認するのがおすすめです。
8-5. キャッシュが原因で変更が反映されない
ワードプレスでは、表示速度を上げるためにキャッシュが使われることがあります。
キャッシュが残っていると、コードを変更しても古い表示のままになることがあります。
変更が反映されないときは、まずブラウザの再読み込みを行います。それでも変わらない場合は、キャッシュプラグインやサーバー側のキャッシュを削除しましょう。
スマホで確認する場合も、端末側にキャッシュが残っていることがあります。
8-6. WordPress更新後にカスタマイズが消えた
WordPress本体やテーマを更新した後にカスタマイズが消えた場合、親テーマのファイルを直接編集していた可能性があります。
テーマ更新では、親テーマのファイルが新しいものに置き換わるため、直接書いたコードが消えることがあります。
これを防ぐには、子テーマを使う、追加CSSを使う、コード管理プラグインを使うといった方法があります。
今後の更新に備えて、カスタマイズ内容はテーマに直接依存しない形で管理しましょう。
9. 初心者向けコード追加の実用例
ここでは、初心者でも使いやすいワードプレスのコード追加例を紹介します。HTMLとCSSを組み合わせることで、記事内の見た目を簡単に整えられます。
9-1. ボタンをHTMLとCSSで追加する
まず、投稿や固定ページのカスタムHTMLブロックに次のHTMLを追加します。
HTML<a href="https://example.com" class="my-button">詳しく見る</a>
次に、追加CSSに次のCSSを入力します。
CSS.my-button {
display: inline-block;
padding: 12px 24px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 6px;
}
.my-button:hover {
opacity: 0.8;
}
これで、クリックできるボタン風のリンクを作成できます。
9-2. 文字色や余白をCSSで変更する
特定の文章に色を付けたい場合は、HTMLにclassを付けます。
HTML<p class="red-text">この文章を赤色で表示します。</p>
追加CSSには次のように書きます。
CSS.red-text {
color: red;
margin-bottom: 20px;
}
classを使うことで、特定の部分だけにCSSを適用できます。
9-3. 見出しデザインをカスタマイズする
記事内のh2見出しをカスタマイズする例です。
CSS.entry-content h2 {
border-left: 6px solid #333;
padding: 10px 0 10px 15px;
background: #f5f5f5;
}
このCSSを追加すると、記事本文内のh2見出しに左線と背景色を付けられます。
テーマによって見出しのclassが異なる場合があるため、反映されないときは検証ツールで確認しましょう。
9-4. 表や囲み枠を追加する
表を追加するHTML例です。
HTML<table class="custom-table">
<tr>
<th>方法</th>
<th>おすすめ度</th>
</tr>
<tr>
<td>追加CSS</td>
<td>初心者向け</td>
</tr>
<tr>
<td>functions.php</td>
<td>中級者向け</td>
</tr>
</table>
表のデザインを整えるCSSです。
CSS.custom-table {
width: 100%;
border-collapse: collapse;
}
.custom-table th,
.custom-table td {
border: 1px solid #ccc;
padding: 10px;
}
.custom-table th {
background: #f5f5f5;
}
囲み枠を追加するHTML例です。
HTML<div class="note-box">
<p>コード編集前には必ずバックアップを取りましょう。</p>
</div>
CSSは次のように書きます。
CSS.note-box {
border: 1px solid #ccc;
padding: 15px;
background: #fafafa;
border-radius: 6px;
}
9-5. ショートコードを使ってコード記述を減らす
同じHTMLを何度も使う場合は、ショートコードを作ると便利です。
たとえば、functions.phpやコード管理プラグインに次のPHPを追加します。
PHPfunction mysite_note_shortcode($atts, $content = null) {
return '<div class="note-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('note', 'mysite_note_shortcode');
投稿本文では、次のように書くだけで囲み枠を表示できます。
[note]ここに注意書きを入れます。[/note]
同じデザインを何度も使う場合は、HTMLを毎回書くよりショートコード化した方が効率的です。
10. ワードプレスのコード編集に関するよくある質問
最後に、ワードプレスでコードを編集・追加するときによくある質問に答えます。
10-1. WordPressでHTMLコードはどこに書く？
記事や固定ページにHTMLコードを追加したい場合は、ブロックエディターのカスタムHTMLブロックを使うのがおすすめです。
記事全体のHTMLを編集したい場合は、コードエディターに切り替えて編集できます。
クラシックエディターを使っている場合は、「テキスト」タブでHTMLを編集できます。
10-2. CSSは追加CSSとstyle.cssのどちらに書くべき？
初心者は、まず追加CSSに書くのがおすすめです。
追加CSSは管理画面から編集でき、テーマファイルを直接触らずに済むため安全です。
一方、カスタマイズ量が多い場合や長期的に管理したい場合は、子テーマのstyle.cssに書く方法が向いています。
親テーマのstyle.cssを直接編集するのは、テーマ更新で上書きされる可能性があるため避けましょう。
10-3. functions.phpを編集しても大丈夫？
functions.phpは編集できますが、初心者が直接編集する場合は注意が必要です。
PHPコードにミスがあると、サイトが表示されなくなったり、管理画面に入れなくなったりすることがあります。
編集する場合は、必ずバックアップを取り、子テーマのfunctions.phpを使いましょう。
より安全に管理したい場合は、コード管理プラグインを使う方法がおすすめです。
10-4. コード編集におすすめのプラグインは？
コード編集には、目的に応じたプラグインを使うと便利です。
PHPコードを追加したい場合は、コードスニペットを管理できるプラグインが向いています。
CSSやJavaScriptを追加したい場合は、カスタムCSS・JSを管理できるプラグインが便利です。
広告タグやアクセス解析タグを追加したい場合は、ヘッダー・フッターにコードを挿入できるプラグインを使うと管理しやすくなります。
ただし、プラグインを入れすぎると管理が複雑になるため、必要なものだけを選びましょう。
10-5. スマホからコード編集はできる？
スマホからでもワードプレスの管理画面にログインすれば、コード編集は可能です。
ただし、スマホ画面ではコードが見づらく、入力ミスも起こりやすいためおすすめはできません。
特にPHPやテーマファイルの編集は、スマホでは避けた方が安全です。
HTMLの簡単な修正やCSSの確認程度なら可能ですが、本格的なコード編集はパソコンで行いましょう。
10-6. 初心者でもPHPを編集してよい？
初心者でもPHPを編集することはできますが、HTMLやCSSよりリスクが高いことを理解しておく必要があります。
最初は、functions.phpを直接編集するのではなく、コード管理プラグインを使う方法がおすすめです。
また、ネット上のコードをコピーして使う場合でも、内容がわからないまま貼り付けるのは避けましょう。
PHPを編集するときは、バックアップ、テスト環境、復旧方法の確認を済ませてから作業することが大切です。
まとめ
ワードプレスでは、HTML、CSS、PHP、JavaScriptなどのコードを編集・追加することで、サイトの見た目や機能を自由にカスタマイズできます。
記事内にボタンや表を追加したい場合はHTML、デザインを変えたい場合はCSS、機能を追加したい場合はPHP、動きや計測タグを追加したい場合はJavaScriptを使います。
初心者におすすめなのは、HTMLならカスタムHTMLブロック、CSSなら追加CSS、PHPやJavaScriptならコード管理プラグインを使う方法です。
一方で、functions.phpやテーマファイルを直接編集する場合は注意が必要です。コードのミスによってサイトが表示されなくなることがあるため、必ずバックアップを取り、可能であればテスト環境で確認してから本番サイトに反映しましょう。
また、テーマを直接編集すると更新時にカスタマイズが消えることがあります。長期的に安全に管理するためには、子テーマやプラグインを活用することが重要です。
ワードプレスのコード編集は、正しい方法を知っていれば初心者でも十分に取り組めます。まずはHTMLやCSSの簡単なカスタマイズから始め、少しずつ安全な編集方法に慣れていきましょう。