WordPressコードエディタでHTMLを編集する方法(初心者ガイド)

あなたのWordPressのウェブサイト上のHTMLを編集する簡単な方法をお探しですか?

ハイパーテキストマークアップ言語またはHTMLは、webページ上のコンテンツを表示する方法をwebブラウザに指示するコードです。 HTMLの編集は、高度なカスタマイズや問題のトラブルシューティングに便利です。

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

WordPressのコードエディタでHTMLを編集する方法

WordPressコードエディタでHTMLを編集する方法

WordPressでHTMLを編集する必要があるのはなぜですか?

WordPressは、あなたのウェブサイトの外観を変更し、コードの単一行に触れることなく、異なる要素をカスタマイズするためのテーマやプラグインの数千を提供

しかし、プラグインやテーマには制限があり、探している正確な機能を提供していない可能性があります。 その結果、あなたのウェブサイトにあなたが見てほしい方法を様式してないかもしれない。

これは、HTMLの編集が本当に便利な場所です。 HTMLコードを使用して高度なカスタマイズを簡単に実行できます。 それはあなたの場所がいかに見、作用するか多くの柔軟性そして制御を提供する。

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

注:HTMLを編集したくないが、完全なカスタマイズオプションが必要な場合は、SeedProdのようなWordPressページビルダーをドラッグアンドドロップで使用することをお勧めします。

そうは言っても、WordPressのウェブサイトでHTMLを編集するさまざまな方法を見てみましょう。

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

  • WordPressのブロックエディタでHTMLを編集する方法
  • WordPressのクラシックエディタでHTMLを編集する方法
  • WordPressのウィジェットでHTMLを編集する方法
  • WordPressのテーマエディタでHTMLを編集する方法
  • FTPを使用してWordPressでHTMLを編集する方法
  • WordPressでコードを追加する簡単な方法

wordpressのブロックエディタでHtmlを編集する方法

wordpressのブロックエディタでは、あなたの投稿やページのHtmlを編集するには、複数の方法があります。

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

開始するには、あなたのWordPressのダッシュボードに頭の上に、新しい投稿/ページを追加するか、既存の記事を編集します。 その後、左上隅にあるプラス(+)記号をクリックし、「カスタムHTML」ブロックを追加します。

WordPressにカスタムHTMLブロックを追加する

WordPressにカスタムHTMLブロックを追加する

次に、ブロックにカスタムHTMLコードを入力します。 また、”プレビュー”オプションをクリックして、HTMLコードが正常に動作しているかどうか、コンテンツがライブwebサイトでどのように表示されるかを確認

WordPressエディタでのカスタムHTMLコード

WordPressエディタでのカスタムHTMLコード

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

それを行うには、単にあなたのコンテンツ内の既存のブロックを選択し、三点メニューをクリックします。 次に、先に進み、「HTMLとして編集」オプションをクリックします。

三つのドットをクリックし、HTMLとして編集を選択します

3つのドットをクリックし、[HTMLとして編集]を選択します

これで、個々のブロックのHTMLが表示されます。 先に行き、あなたの内容のHTMLを編集しなさい。 たとえば、nofollowリンクを追加したり、テキストのスタイルを変更したり、他のコードを追加したりできます。

個々のブロックのHTMLを編集する

個々のブロックのHTMLを編集する

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

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

コードエディタへのアクセス

コードエディタにアクセスする

WordPress Classic EditorでHTMLを編集する方法

WordPress classic editorを使用している場合は、テキストビューでHTMLを簡単に編集できます。

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

クラシックエディタのテキストをクリックしてHTMLを編集します

クラシックエディタのテキストをクリックしてHTMLを編集します

その後、コンテンツのHTMLを編集できます。 たとえば、別の単語を太字にして目立つようにしたり、テキスト内で斜体スタイルを使用したり、リストを作成したり、目次を追加したりすることがで

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

あなたはあなたのサイトのウィジェット領域にHTMLコードを追加し、編集できることを知っていましたか?

WordPressでは、カスタムHTMLウィジェットを使用すると、サイドバー、フッター、およびその他のウィジェット領域をカスタマイズするのに役立ちます。 たとえば、コンタクトフォーム、Googleマップ、cta(call to action)ボタン、その他のコンテンツを埋め込むことができます。

あなたはあなたのWordPressの管理パネルに上の見出しで開始し、外観”ウィジェットに行くことができます。 その後、先に行くと”追加”ボタンをクリックして、カスタムHTMLウィジェットを追加します。

カスタムHTMLウィジェットを追加する

カスタムHTMLウィジェットを追加する

次に、カスタムHTMLウィジェットを追加する場所を選択し、位置を選択する必要があります。 ウィジェット領域は、使用しているWordPressのテーマに依存します。 たとえば、フッター、ヘッダー、またはその他の領域に追加できる場合があります。

カスタムHTMLウィジェットの領域と位置を選択します

カスタムHTMLウィジェットの領域と位置を選択します

ウィジェットの領域と位置を選択したら、先に進み、”ウィジェットを保存”ボタンをクリックします。

その後、カスタムHTMLウィジェットをクリックし、HTMLコードを入力し、”保存”ボタンをクリックすることができます。

カスタムHTML

を入力します。

カスタムHTMLプレビュー

カスタムHTMLプレビュー

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

あなたのウェブサイトのHTMLを編集する別の方法は、WordPressのテーマエディタ(コードエディタ)を

ただし、テーマエディタでコードを直接編集することはお勧めしません。 コードを入力するときのわずかな間違いは、あなたのウェブサイトを壊し、WordPressのダッシ

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

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

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

ワードプレスでのテーマエディタの警告

WordPressのテーマエディタの警告

「理解しています」ボタンをクリックすると、テーマファイルとコードが表示されます。 ここから、編集したいファイルを選択して変更を加えることができます。

WordPressテーマエディタ

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

WordPressテーマファイルでHTMLを編集する別の方法は、ファイル転送プロトコルサービスとも呼ばれるFTPを使用することです。

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

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

起動するには、まずFTPソフトウェアを選択する必要があります。 それは、Windows、Mac、およびLinux用の無料でユーザーフレンドリーなFTPクライアントだとして、我々は、このチュートリアルでFileZillaを使用することがあります。

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

ログインすると、”リモートサイト”列の下にウェブサイトの異なるフォルダとファイルが表示されます。 先に行くとwp-コンテンツ”テーマに行くことによって、あなたのテーマファイルに移動します。

あなたは今、あなたのウェブサイト上で異なるテーマが表示されます。 先に行くと、あなたが編集したいテーマを選択します。

FTPクライアントでテーマファイルに移動します

FTPクライアントでテーマファイルに移動します

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

多くのFTPクライアントでは、ファイルを表示および編集し、変更を行った後に自動的にアップロードすることができます。 FileZillaでは、「表示/編集」オプションをクリックしてこれを行うことができます。

テーマファイルをダウンロードして編集します

テーマファイル

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

HTMLを編集した後、元のファイルを置き換えることができます。 詳細については、WORDPRESSでファイルをアップロードするためにFTPを使用する方法についてのガイドに従うことをお勧めします。

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

WordPressにコードを追加する最も簡単な方法は、Insert Headers and Footers WordPressプラグインを使用することです。

WPBeginnerのチームがこのプラグインを設計したので、あなたは簡単に数分であなたのサイトにコードを追加することができ、私たちはそれを100%無料で使用す

また、コードが一箇所に格納されているため、コードを整理するのにも役立ちます。 さらに、コードを手動で編集するときに発生する可能性のあるエラーを防止します。

もう一つの利点は、テーマを更新または変更する場合にコードが消去されることを心配する必要がないことです。

最初に行う必要があるのは、ウェブサイトにInsert Headers and Footersプラグインをインストールして有効にすることです。 詳細については、WordPressのプラグインをインストールする方法についての詳細なチュートリアルに従うことができます。

プラグインがアクティブになったら、管理パネルから”ヘッダーとフッターを挿入”の設定に向かうことができます。

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

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

ヘッダーとフッターの挿入プラグインを使用してHTMLコードを追加する

ヘッダーとフッターの挿入プラグイン

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

詳細については、WordPressでヘッダーとフッターのコードを追加する方法についてのガイドを見ることができます。

この記事がWordPressのコードエディタでHTMLを編集する方法を学ぶのに役立つことを願っています。 また、WordPressウェブサイトを構築するのにどれくらいの費用がかかるかについてのガイドを見たり、ウェブサイトにWordPressを使用する最も重要な理由を見

この記事が好きなら、WordPressのビデオチュートリアルのためのYouTubeチャンネルを購読してください。 また、TwitterやFacebook上で私たちを見つけることができます。

Leave a Reply

コメントを残す

メールアドレスが公開されることはありません。