WordPressコードエディターでHTMLを編集する方法（初心者向けガイド）

WordPressサイトのデザインと機能について、より詳細な制御が必要ですか？HTMLの編集を学ぶことがその答えです。

HTML（HyperText Markup Language）は、コンテンツを構造化し、ウェブブラウザにページの表示方法を指示するコードです。これを直接編集することは、高度なカスタマイズ、特定の機能の追加、問題のトラブルシューティングに役立ちます。

WPBeginnerのユーザーからは、コードに触れることに不安を感じているという声をよく聞きますが、WordPressでHTMLを編集することは、あなたが思っているよりも簡単です。

この記事では、いくつかの異なる方法を使用して、WordPressコードエディターでHTMLを編集する方法を紹介します。

WordPressでHTMLを編集する理由

WordPress は、ウェブサイトの外観を変更したり、コードに一切触れることなくさまざまな要素をカスタマイズしたりするための、何千ものテーマとプラグインを提供しています。

ただし、プラグインやテーマには限界があり、探している正確な機能を提供していない場合があります。その結果、ウェブサイトを希望通りの見た目にスタイル設定できない可能性があります。

ここで HTML の編集が非常に役立ちます。HTML コードを使用して高度なカスタマイズを簡単に実行できます。サイトの外観と機能の方法について、多くの柔軟性と制御を提供します。

さらに、HTML の編集方法を学ぶことは、ダッシュボードにアクセスできない場合に、WordPress ウェブサイトのエラーを特定して修正するのにも役立ちます。

とはいえ、WordPress ウェブサイトで HTML を編集するさまざまな方法を見てみましょう。

ブロックエディターとクラシックエディターを使用してHTMLを編集する方法を説明し、サイトにコードを追加する簡単な方法も紹介します。下のリンクをクリックすると、お好みのセクションにジャンプできます。

WordPressブロックエディターでHTMLを編集する方法

WordPress ブロックエディターでは、投稿またはページの HTML を編集する方法がいくつかあります。

まず、コンテンツ内のカスタムHTMLブロックを使用してHTMLコードを追加できます。

まず、WordPressダッシュボードに移動し、新しい投稿/ページを追加するか、既存の記事を編集します。その後、左上隅のプラス（+）記号をクリックして、「カスタムHTML」ブロックを追加します。

次に、ブロックにカスタムHTMLコードを入力します。

「プレビュー」オプションをクリックして、HTMLコードが正しく機能しているか、コンテンツがライブウェブサイトでどのように表示されるかを確認することもできます。

WordPressブロックエディターでHTMLコードを追加または変更する別の方法は、特定のブロックのHTMLを編集することです。

これを行うには、コンテンツ内の既存のブロックを選択し、3つのドットメニューをクリックします。次に、「HTMLとして編集」オプションをクリックします。

これで、個々のブロックのHTMLが表示されます。コンテンツのHTMLを編集してください。

たとえば、nofollow リンクを追加したり、テキストのスタイルを変更したり、その他のコードを追加したりできます。

投稿全体のHTMLを編集したい場合は、WordPressブロックエディターの「コードエディター」を使用できます。

右上にある3つの点のオプションをクリックすると、コードエディターにアクセスできます。次に、ドロップダウンオプションから「コードエディター」を選択します。

WordPressクラシックエディターでHTMLを編集する方法

WordPress クラシックエディターを使用している場合は、テキストビューで簡単に HTML を編集できます。

テキストビューにアクセスするには、ブログ投稿を編集するか、新しい投稿を追加するだけです。クラシックエディターにいる場合は、「テキスト」タブをクリックして、記事のHTMLを表示します。

その後、コンテンツの HTML を編集できます。たとえば、さまざまな単語を太字にして目立たせたり、テキストにイタリック体を使用したり、リストを作成したり、目次を追加したりできます。

WordPressウィジェットでHTMLを編集する方法

サイトのウィジェットエリアにHTMLコードを追加・編集できることをご存知でしたか？

WordPress では、カスタム HTML ウィジェットを使用すると、サイドバー、フッター、その他のウィジェットエリアをカスタマイズできます。たとえば、お問い合わせフォーム、コールトゥアクション（CTA）ボタン、Google マップなどを埋め込むことができます。

WordPress管理パネルに移動し、外観 » ウィジェットに移動することから始めることができます。その後、HTMLコードを追加したいウィジェットエリアの「プラス」アイコンをクリックします。

利用可能なウィジェットエリアは、使用しているWordPress テーマによって異なります。たとえば、フッター、ヘッダー、またはその他のエリアに追加できる場合があります。

次に、ウィジェットブロックメニューでカスタムHTMLウィジェットを検索し、クリックしてウィジェットエリアに自動的に追加します。

その後、カスタムHTMLウィジェットをクリックしてHTMLコードを入力できます。

終了したら、画面の右上にある「更新」ボタンをクリックすることを忘れないでください。

これで、ウェブサイトにアクセスして、カスタムHTMLウィジェットが機能していることを確認できます。

WordPressテーマエディターでHTMLを編集する方法

ウェブサイトの HTML を編集するもう 1 つの方法は、WordPress テーマエディター（コードエディター）を使用することです。

ただし、テーマエディターで直接コードを編集することは推奨しません。コードを入力する際にわずかな間違いでも、ウェブサイトが破損し、WordPressダッシュボードにアクセスできなくなる可能性があります。

また、テーマを更新すると、すべての変更が失われます。

とはいえ、テーマエディターを使用して HTML を編集することを検討している場合は、変更を加える前にウェブサイトをバックアップすることをお勧めします。

次に、WordPressダッシュボードから外観 » テーマエディターに移動します。テーマファイルを直接編集することに関する警告メッセージが表示されます。

「理解しました」ボタンをクリックすると、テーマファイルとコードが表示されます。

ここから、編集したいファイルを選択し、変更を加えることができます。

FTPを使用してWordPressでHTMLを編集する方法

WordPressテーマファイルをHTMLで編集する別の方法として、FTP（ファイル転送プロトコルサービス）を使用する方法もあります。

これは、すべてのWordPress ホスティングアカウントに付属する標準機能です。

コードエディターの代わりにFTPを使用する利点は、FTPクライアントを使用して問題を簡単に修正できることです。これにより、HTMLを編集中に何か問題が発生しても、WordPressダッシュボードからロックアウトされることはありません。

まず、FTP ソフトウェアを選択する必要があります。このチュートリアルでは、Windows、Mac、Linux 用の無料の使いやすい FTP クライアントである FileZilla を使用します。

FTPクライアントを選択した後、サイトのFTPサーバーにログインする必要があります。ログイン詳細は、ホスティングプロバイダーのコントロールパネルダッシュボードで見つけることができます。

ログインすると、「リモートサイト」列の下にウェブサイトのさまざまなフォルダとファイルが表示されます。wp-content » theme に移動して、テーマファイルに移動してください。

ウェブサイトにさまざまなテーマが表示されます。編集したいテーマを選択してください。

次に、テーマファイルを右クリックして HTML を編集できます。たとえば、フッターを変更したい場合は、footer.php ファイルを右クリックします。

多くのFTPクライアントでは、ファイルを閲覧・編集し、変更後に自動的にアップロードすることができます。FileZillaでは、「表示/編集」オプションをクリックすることでこれが可能です。

ただし、編集したいファイルは、変更を加える前にデスクトップにダウンロードすることをお勧めします。

HTML を編集した後、元のファイルを置き換えることができます。詳細については、WordPress でファイルをアップロードするために FTP を使用する方法に関するガイドを参照してください。

WordPressにコードを簡単に追加する方法

WordPress にコードを追加する最も簡単な方法は、市場で最高のコードスニペットプラグインであるWPCodeを使用することです。

WPBeginner のチームは、このプラグインを設計したため、初心者でも数分でカスタムコードをサイトに追加できます。さらに、プラグインには完全に無料で利用できるライト版もあります。

コードが一箇所に保存されるため、コードの整理に役立ちます。さらに、コードを手動で編集する際に発生する可能性のあるエラーを防ぎます。

もう1つの利点は、テーマを更新または変更してもコードが消去される心配がないことです。

まず、無料のWPCodeプラグインをウェブサイトにインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する詳細なチュートリアルをご覧ください。

プラグインが有効になったら、管理パネルから Code Snippets » Header & Footer に移動できます。

次に、ヘッダー、本文、フッターのボックスにHTMLコードをウェブサイトに追加できます。

たとえば、ウェブサイトにアラートバーを表示したいとします。HTMLコードを「本文」ボックスに入力し、「変更を保存」ボタンをクリックするだけです。

それに加えて、ヘッダーにGoogleアナリティクストラッキングコード、Facebookピクセル、TikTok広告ピクセルを追加できます。または、プラグインを使用してウェブサイトのフッターにPinterestボタンを追加することもできます。

WPCodeを使えば、コードをどこに出力するかを簡単に決定できます。例えば、すべての投稿の先頭または末尾にHTMLコードを自動的に表示させることができます。

詳細については、WordPressでヘッダーとフッターのコードを追加する方法に関するガイドをご覧ください。

この記事がWordPressコードエディターでHTMLを編集する方法を学ぶのに役立ったことを願っています。また、WordPressにHTMLフォームを追加する方法に関するガイドをご覧になるか、WordPressをウェブサイトに使用すべき最も重要な理由を確認することもできます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。