エラーなしで HTML ファイルを WordPress にアップロードする 6 つの方法

公開: 2022-12-12

HTML ファイルを WordPress にアップロードすることは、ほとんどの WordPress ユーザーにとって日常的な作業ではありません。 WordPress ではコードを変更せずにコンテンツを作成できるため、カスタム HTML ファイルをアップロードする必要はありません。

ただし、WordPress サイトを構築して成長させていると、カスタム コンテンツが必要になることがあります。 そこで、HTML ファイルとページが役に立ちます。 それらをサイトにインポートすると、カスタム要素を作成してゼロから設定を構成する時間を大幅に節約できます.

この記事では、この問題と HTML ファイルを WordPress にアップロードする方法について詳しく説明します。 お見逃しなく！

  • HTML ファイルとは何ですか?
  • HTML テンプレートとは?
  • WordPress に HTML ファイルをアップロードする必要があるのはなぜですか?
  • #1 WordPress 管理ダッシュボードを使用して HTML ファイルをインポートする
  • #2 FTP クライアントで HTML ファイルをアップロードする
  • #3 cPanel 経由で HTML ファイルを WordPress に接続する
  • #4 HTML を WordPress コンバーター プラグインに適用する
  • #5 オンラインの無料ツールを使用して HTML を WordPress に変換する
  • #6 Google 検証用に HTML ファイルを WordPress にアップロードする
  • HTML ファイルとページを保護する

HTML ファイルとは何ですか?

HTML は Hypertext Markup Language の略で、電子文書や Web ページの作成と構造化に使用される言語です。 実際、現在インターネットで閲覧しているほとんどの Web ページは、HTML コードを使用して記述されています。

HTML ファイルはテキストのみのドキュメントです。 これらには、サイトのコンテンツと画像が適切にフォーマットされ、表示されるようにするためのコードが含まれています。 言い換えれば、HTML は、Web ブラウザーが訪問者のためにサイト構造を視覚化する方法を理解するのに役立ちます。

pda-upload-html-files-to-wordpress-example

HTML は Web ページの基盤を作成します。 HTML ファイルを自分で生成することも、Google ドキュメントなどの既存のファイルを取得して HTML に変換することもできます。 小さな CSS コードを挿入して、いくつかのカスタム デザイン要素を基盤に追加することができます。 このようにして、あなたのウェブサイトはサイト訪問者にとって完璧に見えます.

HTML テンプレートとは?

HTML テンプレートとは、サイトに簡単にアップロードして使用できる、事前に設計された HTML ファイルを指します。 テキスト、画像、フォント スタイル、および JavaScript が含まれます。

コーディング ベースがない場合は、作成済みの HTML テンプレートを WordPress にアップロードすることをお勧めします。 HTML テンプレートのおかげで、サイトの構造を損なうことを心配することなく、魅力的な Web ページを開発できます。

HTML テンプレートと WordPress テーマには、使用する前に知っておくべきいくつかの違いがあります。

HTML テンプレートワードプレスのテーマ
フォーマットスタンドアロンの zip ファイル。 スタンドアロンの zip ファイル。
への影響Web サイト上の 1 つの Web ページのルック アンド フィール。 Web サイト全体のルック アンド フィール。

WordPress に HTML ファイルをアップロードする必要があるのはなぜですか?

前述のように、WordPress を使用すると、コーディングなしで Web ページを作成できます。 ただし、HTML ファイルを使用する必要がある場合がある理由はいくつかあります。

時間を節約する方法:古い Web サイト用の優れた HTML テンプレートを既に作成しています。 新しいウェブサイト用にゼロから再構築するには、時間と労力がかかります。 したがって、既存のテンプレートを再利用して時間を節約し、すべてが完璧に見えるようにすることをお勧めします。

さらに、HTML ファイルを介してコンテンツをまとめてアップロードできるため、人的ミスのリスクも排除されます。

カスタム レイアウト: HTML ファイルを WordPress にアップロードするもう 1 つの利点は、高度にカスタマイズ可能なレイアウトです。 テーマのサポート外で、コンテンツを好みに合わせてカスタマイズできます。 既製の HTML ファイルを使用するか、自分で作成してサイトにアップロードするだけです。

サイトの検証:最後になりましたが、WordPress に HTML ファイルをアップロードすると、Web サイトの検証に役立ちます。 たとえば、Google Search Console ツールを使用するには、HTML 検証ファイルをサイトにアップロードする必要があります。 これにより、Google はサイトに適切にアクセスしてインデックスを作成できるようになります。

HTMLファイルをWordPressにアップロードする方法

HTML ファイルに関するすべてを学びました。 それでは、WordPress に HTML ファイルをアップロードする方法を見てみましょう。

読む！

#1 WordPress 管理ダッシュボードを使用して HTML ファイルをインポートする

組み込みの WordPress ダッシュボードを使用すると、投稿、ページ、またはメディア ライブラリから HTML ファイルを直接アップロードできます。 Gutenberg エディターを使用している場合は、まずファイルブロックを挿入する必要があります。 次に、 [アップロード]を選択して HTML ファイルを WordPress に追加します。

pda-gutenberg-ファイルブロック

あるいは、Gutenberg エディターもカスタム HTMLブロックを提供します。 HTML コードを手動でコピーして、このブロックに貼り付けることができます。 ただし、大きなファイルをアップロードする場合は、 [ファイル]オプションを使用する方が簡単で効果的です。

pda-custom-html-block

従来のエディタを使用している場合は、投稿、ページ、またはメディア ライブラリで[メディアを追加]ボタンを押します。 その後、 [アップロード]をクリックして HTML ファイルをアップロードします。

pda-wordpress-add-media-button

ちょっと注意:管理ダッシュボードを使用して HTML ファイルを WordPress にアップロードすると、エラーが発生することがあります。 最も一般的な問題は、「申し訳ありませんが、セキュリティ上の理由により、このファイルの種類は許可されていません」です。

この問題は、WordPress サイトが現在 .html ファイル タイプをサポートしていないために発生します。 WordPress でフィルタリングされていないアップロードを許可するには、ガイドで詳細を確認してください。

#2 FTP クライアントで HTML ファイルをアップロードする

FTP クライアントを使用して HTML ファイルをアップロードすると、テスト サイトでローカルに作業したい場合に役立ちます。 ウェブサイトを公開する前に、行った変更をテストするのに役立ちます。 また、これにより、何かがスリップした場合の不要なダウンタイムを防ぐことができます。

このセクションでは、FileZilla を使用して HTML ファイルを WordPress にアップロードする方法について説明します。 開始するには、次の手順に従ってください。

  1. サイトをバックアップします。
  2. 資格情報を入力したら、FileZilla を開き、 [クイック接続]を選択します。

pda-upload-html-files-to-wordpress-using-filezilla

3. Web サイトのルート フォルダーに移動します。

4. コンピュータからアップロードする HTML ファイルを見つけて右クリックします。 次に、 [アップロード]をクリックして Web サイトに追加します。

ファイルが正常にアップロードされたら、Web サイトに正しく表示されるかどうかを確認します。 これを行うには、Web サイトの URL の末尾に HTML ファイルの名前を付けて、ブラウザーに入力します。 たとえば、 www.pdagold.com/html-fileです。 動作する場合は、HTML ファイルで作成した新しい Web ページにリダイレクトされます。

#3 cPanel 経由で HTML ファイルを WordPress に接続する

最後に紹介する方法は、cPanel を使用することです。 まず、ホスティング アカウントの cPanel にログインし、ファイル マネージャーツールを選択します。

pda-cpanel-file-manager-upload-html-files-to-wordpress

2 つのオプションがあります。

  • HTML ファイルをルート フォルダーに直接アップロードします。
  • 新しいフォルダーを作成し、そこに HTML ファイルをアップロードします。

最初の手法では、HTML ファイルを保存した場所に解凍する必要があります。 次に、 index.htmlフォルダーを新しいものに変更します。 最後に、ファイルを再圧縮して WordPress へのアップロードを続行します。 これらの手順に厳密に従わないと、HTML テンプレートがサイトのホームページを上書きします。

ウェブサイトを台無しにしないようにするには、2 番目の手法を強くお勧めします。

  1. サイトのpublic_htmlフォルダーに移動します。

pda-upload-html-files-wordpress-public-html-folder

2. [新しいフォルダー]を選択します。

pda-create-new-folder-upload-html-file-to-wordpress-cpanel

3. 新しいフォルダに名前を付けて、 [Create New Folder]をクリックします。

4. 作成したフォルダをダブルクリックし、 [アップロード] を選択して HTML ファイルを選択します。

pda-upload-html-files-to-wordpress-cpanel

5. 圧縮された HTML ファイルがフォルダに表示されます。 HTML ファイルを右クリックして[抽出] を選択するだけで解凍できます。

pda-extract-html-file-cpanel

6. [ファイルの抽出]を選択して、ファイルの解凍プロセスを完了します。

7. 方法 2 のガイドに従って、ファイルが正常にアップロードされたかどうかを確認します。

404 エラーが発生した場合、サーバーがindex.phpリダイレクトをサポートしていない可能性があります。 この場合、ファイル マネージャーに戻り、 .htaccessファイルにアクセスします。 次に、次のコードを挿入して変更を保存します。

 RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

このコードは、 index.phpファイルをリダイレクトしてブラウザーにロードするのに役立ちます。 その結果、404 エラーが表示されなくなります。

#4 HTML を WordPress コンバーター プラグインに適用する

この方法は、コーディングのスキルを必要としないため、初心者に適しています。 あなたの仕事は、選択したプラグインを有効にすることであり、残りはプラグインが処理します。

利用可能な多数のプラグインを使用すると、コードに触れることなく、HTML をアップロードして WordPress コンテンツに変換できます。 コーディングの心配はもうありません。 あなたの便宜のために、リストを7つの最高のプラグインに絞り込みました.

それらを見てみましょう！

プラグインの推奨事項

HTML スニペットの挿入: HTML、CSS、および JavaScript コードをショートコードに変換し、スニペットを WordPress ページおよびウィジェットに統合します。

シンプルなサイトマップ: レスポンシブ HTML サイトマップを作成し、複雑なショートコードなしでエディター内で直接プレビューします。

生の HTML: 投稿で生の HTML またはその他のコードを有効にし、スマート クォートと自動書式設定を無効にします。

WP コード: PHP コード スニペット、ヘッダーとフッター スクリプト、および広告ピクセル コードを、条件付きロジックを使用して WordPress に挿入します。

WP Coder: カスタム CSS、HTML、および JavaScript を Web ページに追加します。

カテゴリの説明に HTML を許可する: 選択した WordPress フィルタを無効にすることで、カテゴリの説明にフィルタリングされていない HTML を適用できます。

コードの埋め込み: 投稿やページに JavaScript や HTML などのコードを埋め込むためのシンプルで効率的な方法を提供します。

プラグインの説明

このチュートリアルでは、WP Coder プラグインを使用してカスタム HTML コードとファイルを挿入する方法について説明します。

pda-wp-coder-upload-html-to-wordpress

仕組みは次のとおりです。

  1. プラグインをインストールして有効化します。
  2. WordPress 管理ダッシュボードで、 Wow Plugins → WP Coderに移動します。
  3. 新しい HTML コードを追加するには、それをコピーして [新規追加]タブの[HTML コード]セクションに貼り付けます。

pda-wp-coder-html-コード

または、 [ファイルを含める]メニューに移動することもできます。 メディア ライブラリにアップロードした HTML ファイルの URL をコピーして、 [ファイルへの URL]ボックスに貼り付けます。 次に、 [新規追加]をクリックして終了します。

pda-wp-coder-plugin-upload-html-file-to-wordpress

4. [保存]ボタンをクリックして、 [公開]セクションで生成されたショートコードをコピーします。

pda-wp-coder-copy-ショートコード

5. ショートコードをページの好きな場所に貼り付けて、結果を楽しんでください。

#5 オンラインの無料ツールを使用して HTML を WordPress に変換する

オンライン ツールを使用して HTML を WordPress に変換するには:

  1. htmltowordpress の Web サイトにアクセスします。
  2. ウェブサイトの HTML zip ファイルをボックスにアップロードします。

pda-upload-html-file-to-wordpress-online-tool

3. WordPress Web サイトをプレビューできるようになります。 ページ上部の[カスタマイズ]ボタンを押します。

pda-wordpress-theme-preview

4. Web サイトを好みに合わせて変更します。

5. [保存して公開]をクリックして終了します。

#6 Google 検証用に HTML ファイルを WordPress にアップロードする

HTML 検証ファイルを WordPress にアップロードする方法を紹介します。 ルートは次のとおりです。

  1. Google Search Console に移動し、 [今すぐ開始]をクリックします。
  2. Gmail アカウントのユーザー名とパスワードを入力します。
  3. ドメイン名またはURL プレフィックスを使用してウェブサイトを確認します。 ドメインオプションは、DNS 検証のみをサポートします。 HTML ファイルのアップロードの場合は、 URL プレフィックスを選択してください。 ウェブサイトの URL を入力し、 [続行]をクリックします。

pda-google-search-console

4. HTML ファイルセクションで、ファイルのダウンロードを求めるボタンを選択します。

pda-google-search-console-upload-html-verification-file

5. HTML ファイルをローカル コンピューターにダウンロードしたら、そのファイルを WordPress Web サイトにアップロードします。

HTML ファイルとページを保護する

HTML ファイルの保護が不可欠な時が来ます。 たとえば、管理者または特定のユーザー ロールのみがファイルにアクセスできるようにする場合です。 このような状況では、PDA Gold がお客様のニーズを満たします。

pda-アップロード-html-ワードプレス

プラグインを使用すると、WordPress ルート ディレクトリの下のフォルダーにアップロードされた HTML ファイルを保護できます。 保護されると、許可されていない訪問者がファイルにアクセスしようとすると、エラー ページにリダイレクトされます。

最もクールな点は、保護された HTML ファイルを iFrame タグを使用してコンテンツに挿入できることです。 このようにして、訪問者は iFrame 経由で HTML を表示できますが、同時にファイルに直接アクセスすることはできません。

詳細な手順については、iFrame 内に表示される WordPress HTML ファイルを保護する方法に関するガイドをご覧ください。

HTMLファイルを今すぐフル活用！

HTML ファイルを WordPress にアップロードする際に知っておくべきことは以上です。 最後に、カスタム ページ レイアウトが必要な場合に HTML ファイルが役立ちます。 古いサイトを新しいサイトに移行する場合にも最適なオプションです。

最良の部分は、WordPress での HTML ファイルのアップロードと使用が難しい作業ではないことです。 いくつかの簡単な手順で、美しい Web ページを作成できます。 だから、待ってはいけない。 今すぐ HTML ファイルを使い始めましょう!

WordPress での HTML 編集の詳細については、こちらの記事を参照してください。

最後に、私たちのウェブサイトを購読して、より役立つ説明を入手することを忘れないでください!