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を編集する方法
• WordPressウィジェットでHTMLを編集する方法
• WordPressテーマエディターでHTMLを編集する方法
• FTPを使用してWordPressでHTMLを編集する方法
• WordPressにコードを簡単に追加する方法

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を編集するもう一つの方法は、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 Analyticsのトラッキングコード、Facebookピクセル、TikTok広告ピクセルをヘッダーに追加できます。または、プラグインを使用してウェブサイトのフッターにPinterestボタンを追加することもできます。

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。