WordPressでHTMLを編集する方法

あなたのサイトをカスタマイズしたいですか？ あなたがあなたのウェブサイトとそのデザインをパーソナライズする方法を探しているなら、あなたは正しい場所に来ました。 このガイドでは、フリーランサーを雇うことなく、WordPressでHTMLファイルを編集するためのさまざまな初心者向けの方法を紹介します。

WordPressでHTMLコードを編集する理由

WordPressはコーディングの経験を必要としないすぐに使用できるCMSであり、サイトをカスタマイズするための何千ものテーマとプラグインを提供しますが、HTMLの編集を学ぶことで多くの柔軟性が得られます。

HTMLコードをカスタマイズすることで、サイトをより細かく制御できるようになり、高度なデザインのカスタマイズを実行したり、テーマにカスタム機能や効果を追加したりできるようになります。 さらに、管理ダッシュボードにアクセスできない場合の問題のトラブルシューティングを行うことができます。

HTMLコードをカスタマイズすることでできる主なことのいくつかは次のとおりです。

• テキスト、画像、動画を含める
• 機能または機能を追加する
• WordPressサイトをより細かく制御できます
• WordPress管理ダッシュボードにアクセスできない場合の問題のトラブルシューティング

全体として、WordPressでHTMLコードを編集する方法を学ぶと、サイトをカスタマイズするためのより多くのオプションがあり、サイトを次のレベルに引き上げることができます。

いつHTMLを編集すべきではありませんか？

ご存知かもしれませんが、WordPressはHTML、CSS、PHP、JavaScriptの4つの主要言語を使用しています。 つまり、いくつかの変更を加えるには、HTMLだけでなくそれ以上のことを知る必要があります。 そのため、HTMLコードをカスタマイズするのが得策ではない場合があります。

HTMLはWebページの構造化に使用されるため、サイトのデザインを変更したり、色、フォント、行の高さなどを編集したりする必要がある場合は、CSSコードを簡単にカスタマイズできます。 さらに、複数のページのレイアウトを同時に制御しようとしている場合は、HTMLを編集しないでください。

さらに、ライブ環境でコードをカスタマイズすることはお勧めしません。 間違った場所に1つのコンマまたはアポストロフィを付けると、サイトに重大な問題が発生する可能性があるため、ステージング環境ですべてをテストすることをお勧めします。

WordPressでHTMLを編集する方法

このガイドでは、WordPressでHTMLコードをカスタマイズするさまざまな方法を紹介します。

1. WordPressクラシックエディター
2. WordPressブロックエディター
3. HTMLソースコードを編集する
4. プラグイン付き
5. ウィジェット

それぞれを見て、自分に最適なものを選択してみましょう。

始める前に…

先に進む前に、子テーマを作成することを強くお勧めします。 方法がわからない場合は、このステップバイステップガイドを確認するか、これらのプラグインのいずれかを使用してください。 親テーマファイルを変更すると、テーマを更新するたびにすべてのカスタマイズが失われるため、これは重要です。

さらに、サイトの完全バックアップを作成し、安全な場所に保存してください。 このようにして、いつでもそこに戻って、問題が発生した場合にサイトを復元できます。

1）WordPressクラシックエディター

Classic Editorは、WordPressで人気のあるコンテンツエディターです。 このプラグインを使用すると、サイトのHTMLファイルを簡単に編集できます。

まず、ClassicEditorプラグインをサイトにインストールしてアクティブ化します。 次に、投稿またはページを開くと、ビジュアルとテキストの2つのモードが表示されます。

ビジュアルは、フロントエンドに表示される内容を示します。 さまざまな見出しのサイズ、画像、太字のテキストなどが表示されます。

一方、テキストエディタを使用すると、投稿のHTMLバージョンが表示されるため、ここからHTMLコードを編集できます。

良い点は、ビジュアルモードに切り替えて、何も公開しなくても、変更がフロントエンドでどのように表示されるかを確認できることです。

HTMLコードを追加またはカスタマイズしたら、投稿を更新または公開するだけです。

2）WordPressブロックエディター

最新のWordPressバージョンには、Gutenbergと呼ばれる新しいエディターが付属しています。 これは、より多くの機能を備えた高度なコンテンツエディタです。 グーテンベルクを使用している場合は、以前と同じようにHTMLコードを編集することもできます。

投稿またはページ内にカスタムHTMLセクションを追加するには、 HTMLブロックを使用してHTMLコードを追加します。 次に、投稿を更新して、準備が整いました。

場合によっては、既存の段落や画像を編集して、スタイルを追加する必要があります。 Gutenbergを使用してWordPressで既存のHTMLコードを編集するには、カスタマイズする要素を選択し、[その他のオプション]を押します。

その後、[ HTMLとして編集]オプションを選択します。

要素のHTMLモードが表示され、カスタマイズできます。

変更に満足したら、[視覚的に編集]をクリックして、ビジュアルエディターに簡単に戻すことができます。

ご覧のとおり、Gutenbergを使用して既存のHTMLコードを追加または編集するのは、すばやく簡単です。 公開する前に、必ずプレビューをチェックして、すべてが良好に見えることを確認してください。

3）WordPressでHTMLソースコードを編集します

もう1つの方法は、WordPressでHTMLソースコードを編集することです。 このプロセスは、自分が何をしているのかわからない場合にサイトを壊す可能性があるため、以前のプロセスよりもリスクが高くなります。 4つの異なる方法を使用してHTMLソースコードをカスタマイズする方法を見てみましょう。

1. ダッシュボードファイルエディタ
2. FTP

3.1）ダッシュボードファイルエディタ

これは、他のWebサイトにアクセスしたり、追加のツールに依存したりせずにソースコードを編集するための最も簡単な方法です。

WordPressダッシュボードで、 [外観]> [テーマエディター]に移動します。

右側には、すべてのテーマファイルが表示されます。

右上隅には、テーマディレクトリを変更するオプションもあります。

この例では、TwentyTwentyテーマを使用しています。 適切なテーマを選択したら、編集する適切なフォルダとファイルを選択します。

編集する可能性のある最も一般的なファイルのいくつかは次のとおりです。

• index.php
• header.php
• footer.php
• 関数.php
• style.css

テーマのヘッダーを編集したいとします。リストからheader.phpファイルを選択します。

通常、 .phpファイルにはPHPが含まれていますが、HTML、JavaScript（場合によっては）、CSS（場合によっては）などの他の言語も含まれています。 したがって、そこからHTMLファイルを編集できます。 上記のように、単一のコンマまたはアポストロフィはWebサイトを壊す可能性があるため、注意して続行してください。

3.2）FTP

より技術的な方法が必要な場合は、FTPクライアントを使用してHTMLコードをカスタマイズできます。 このために、最高の、安全で、ユーザーフレンドリーなFTPクライアントの1つであるFileZillaを使用できます。

まず、FileZillaをダウンロードしてアカウントを作成します。 ほとんどのWordPressホスティング会社は、cPanelを介して無料のFTPアカウントアクセスを提供します。 ホスト名、ユーザー名、およびパスワードを生成したら、サーバーに接続します。

テーマファイルを編集する場合は、 wp-content > themesフォルダーに移動します。

上のスクリーンショットでわかるように、私たちのサイトには、GeneratePress、 Twenty Nineteen、 Twenty Twenty、およびTwenty TwentyOneの4つのテーマがあります。

GeneratePressファイルを編集したいので、テーマフォルダーを開きます。

ファイルを編集するには、ファイルを右クリックして、[表示/編集]オプションを選択します。 たとえば、フッターを編集するには、 footer.phpファイルを編集する必要があります。

FileZillaは、以下に示すようにテキストエディタでファイルを開きます。

その後、変更を加え、ファイルを保存してサーバーにアップロードし直すことができます。

3.3）cPanel

ほとんどのホスティング会社は、クライアントへのcPanel（コントロールパネル）アクセスを提供しているため、WordPressでHTMLコードを編集するもう1つの優れた方法です。

これを行うには、ウェブホスティングアカウントにログインしてcPanelにアクセスします。 次に、ファイルマネージャを開きます。

その後、 wp-content > themesに移動します。

カスタマイズするテーマを開き、変更するファイルを右クリックして、[編集]を押します。

これにより、ファイルをカスタマイズできるテキストエディタで開きます。 変更を加えたら、ファイルを保存することを忘れないでください。

4）プラグイン

WordPressでHTMLコードを編集する別の方法は、プラグインを使用することです。 WPファイルマネージャーは、ダッシュボードにFTP機能をもたらす優れた無料ツールです。 使い方を見てみましょう。

まず、WordPressサイトにログインし、 [プラグイン]> [新規追加]に移動します。 ファイルマネージャを検索してインストールし、アクティブ化します。

その後、サイドバーから[WPファイルマネージャー]オプションを選択します。

次に、 wp-contentディレクトリを開きます。

次に、 themesフォルダーを開き、変更するフォルダーを選択します。 この例では、Astraテーマファイルを編集します。

フォルダを開くと、利用可能なすべてのファイルが表示されます。 編集するものが見つかったら、それを右クリックして[コードエディタ]オプションを選択します。

ほとんどのFTPプログラムと同様に、このプラグインでは、ラップトップにテキストエディタソフトウェアをインストールする必要はありません。 その場合、プラグインはWebベースのテキストエディタでファイルを開き、そこからコードを編集できます。

ファイルの変更が完了したら、保存します。これで完了です。

5）ウィジェット

次に、ウィジェット領域にHTMLコードを追加する方法を見てみましょう。

まず、 [外観]> [ウィジェット]に移動します。

そこに、すべてのウィジェット領域が表示されます。

次に、任意のウィジェット領域にHTMLウィジェットを追加します。 このチュートリアルでは、サイドバーを選択します。

コードにタイトルを追加し、そこにカスタムHTMLコードを含めることができます。

コードを追加したら、ウィジェットを保存して準備完了です。

ボーナス：WordPressでCSSとPHPを編集する

WordPressは4つの主要言語を使用しています：

• PHP
• HTML
• CSS
• JavaScript

これまで、WordPressでHTMLコードを編集する方法を学びました。 このセクションでは、サイトのCSSおよびPHPコードをカスタマイズし、カスタムスクリプトを追加する方法を示します。

CSSコードの編集と追加

上記の方法とは別に、WordPressカスタマイザーを使用してカスタムCSSコードをサイトに追加できます。 そのためには、 WordPressダッシュボードで[外観]> [カスタマイズ]に移動します。

カスタマイザーに入ったら、追加のCSSに移動します。

そこで、CSSコードを入力するだけです。

最良の部分は、ライブプレビューモードですべての変更を確認できることです。

変更に満足したら、投稿またはページを更新/公開します。

これは、CSSコードをWebサイトに追加する最も簡単な方法の1つです。 このコードは、テーマのstyle.cssファイルの上に階層化されることに注意してください。

注： DiviやAvadaなどの一部のWordPressテーマには、CSSコードを追加する機能が組み込まれているため、カスタマイザーを使用する代わりに、テーマパネルを使用してCSSコードを含めることができます。

PHPコードの編集/追加

PHPはWordPressのコア言語です。 HTMLの編集と同様に、既存のPHPコードのカスタマイズは簡単です。 これは、テーマエディタまたは上記の任意の方法を使用して行うことができます。 このセクションでは、コードスニペットと呼ばれるプラグインを使用してPHPスニペットを追加する方法を示します。

まず、サイトにコードスニペットをインストールしてアクティブ化します。

その後、プラグインの設定に移動し、[新規追加]をクリックして、サイトに新しいスニペットを含めます。

スニペットに名前を付けて、追加する内容を記憶し、PHPコードを貼り付けて、スニペットを保存します。

このチュートリアルでは、サイトにカスタム画像サイズを追加するための簡単なスニペットを使用しました。 その後、[保存]をクリックすると、完了です。

このようにして、無制限のPHPコードをWordPressサイトに追加し、必要に応じてカスタマイズすることができます。

結論

全体として、HTMLコードをカスタマイズすると、サイトをより細かく制御できるだけでなく、機能を追加したり、問題をトラブルシューティングしたりするのに役立ちます。 最良の部分は、WordPressで、HTMLコードを簡単に編集し、サイトをパーソナライズできることです。

このガイドでは、それを行うためのさまざまな方法を見てきました。

1. WordPressクラシックエディタを使用
2. ブロックエディタの使用
3. HTMLソースコードを編集する
4. プラグインの使用
5. ウィジェットにHTMLを追加する

HTMLコードをカスタマイズする最も簡単な方法は、WordPressテーマエディターを使用することです。 より高度なソリューションを探している場合は、FileZillaなどのFTPクライアントを使用してHTMLソースコードを編集することをお勧めします。 コンピューターにソフトウェアをインストールしたくない場合は、cPanelメソッドを使用できます。

一方、プラグインが必要な場合は、WPファイルマネージャーを使用して、他のFTPソフトウェアやテキストエディターに依存せずにHTMLコードを含めたり編集したりできます。

最後に、WordPressカスタマイザーまたはコードスニペットプラグインの両方を使用して、CSSまたはPHPを含めて編集することもできます。

この記事がお役に立てば、サイトのカスタマイズに役立つことを願っています。 WordPressでHTMLファイルを編集する他の方法を知っていますか？ どちらを使いますか？ 以下のコメントセクションでお知らせください。