WordPressコアには投稿タイプが組み込まれているため、基本的には、カスタムHTMLファイルをアップロードすることなくても、WordPressを使用して固定ページを作成することできます。 さらに、ご利用のWordPressテーマにも、あなたのニーズを満たすウェブサイトを作成できる独自の固定ページのテンプレートセットが含まれている可能性が高いです。
それに、検索結果、メールキャンペーン、ソーシャルメディアなどからサイトにアクセスするためのカスタマイズされたランディングページのテンプレートを作成するWordPressランディングページプラグインもたくさんあります。
つまり、ウェブサイトをフォーマットするために必要なものはすべてすでに揃っているため、HTMLファイルをWordPressにアップロードする必要はほとんどありません。とはいえ、HTMLファイルをWordPressにアップロードする方法を知りたい、デザインの目的を超えた理由もいくつかあるでしょう。
そのため、本記事では、HTMLファイルをWordPressにアップロードする方法をご紹介します。また、この知識が必要な理由についても詳しく説明します。
HTMLファイルとは？
HTMLはHypertext Markup Languageの略で、1990年にTim Berners-Leeによって最初に開発されました。要するに、HTMLはWebページとして知られているインターネット上の電子文書を作成するためのコードです。インターネット上のすべてのウェブページは、HTMLコードを使用して作成されています。
サイトのウェブページ上のHTMLコードは、コンテンツや画像が正しくフォーマットされていることを担当します。
HTMLがなければ、ウェブブラウザはウェブサイトの構造をユーザーに表示することができません。ただし、ウェブページの基盤を作成する適切なHTMLコードと、デザイン要素を追加するためのCSSコードにより、ウェブサイトは完全に表示されます。
HTMLテンプレートとは？
それでは、HTMLはインターネット上のすべてのウェブページの構造を作成するコードであることを理解しました。
しかし、HTMLテンプレートとは何でしょうか？
HTMLテンプレートは、文章、画像、フォントスタイルやJavascriptのサポートファイルなどを含む、事前に設計された一連のHTMLファイルのことです。つまり、HTMLテンプレートは、Webサイトに簡単にアップロードして使用できる用意済みのHTMLコードのパッケージです。
WordPressウェブサイトでHTMLテンプレートを使用する場合、ファイルをアップロードし、サイトのフロントエンドに表示するテキストや画像などをテンプレートに入力します。
HTMLテンプレートはWordPressテーマとは異なることにご注意ください。
- WordPressのテーマ：テキストや画像をWordPressテーマに入力しても、テーマはウェブサイト全体のルックアンドフィールを設定します。サイトのテーマの要素の変更の多くはグローバルであり、ウェブサイト全体に適用されます。
- HTMLテンプレート：ウェブサイトに個別にアップロードするス個別のzipファイルです。ウェブサイト上の一つのウェブページのルックアンドフィールにのみ適用されます。つまり、アップロードされた一つのHTMLテンプレートに加えた変更は、そのウェブページにのみ適用されます。
残念ながら、テーマとHTMLテンプレートの違いを理解しておらず、「テーマ」と「テンプレート」という用語を同じ意味で使用してしまう人が多いです。
HTMLファイルをWordPressにアップロードする理由について
HTMLファイルをWordPressにアップロードする理由はいくつかあります。
-
- お気に入りがあります：以前のウェブサイトで優れたHTMLテンプレートを使用していて、新規サイトでも同じものを使用したい場合は、一から作り直すのではなく、テンプレートを新規サイトにアップロードすることをお勧めします。これにより、時間が節約されるし、新規サイトがまったく同じように表示されます。
- カスタムページレイアウトが必要です：現在使用中のWordPressテーマが特定のページレイアウトをサポートしていない場合、必要なデザインのHTMLファイルをアップロードし、必要に応じてカスタマイズできます。.
最後に、Google Search ConsoleでWordPressウェブサイトを検証する際に、Google HTML検証ファイルをアップロードするという推奨方法を使用したい場合があります。
ウェブサイトが検索エンジン、特にGoogleほど大きな検索エンジンに表示される方法は、ウェブサイト所有者としての成功に重要な役割を果たします。
これは、Google Search Consoleなどのツールが存在している理由です。 Google Search Consoleを使用すると、検索順位の改善を期待して、Googleがあなたのサイトをインデックスに登録して関連する検索結果の中で表示することを保証します。
Google Search Consoleはまた現在のSERP（検索エンジンの結果ページ）に関する情報も提供するため、SEO対策を改善し、サイトへのクリックスルーの数を増やすことができます。
ただし、Google Search Consoleを使用するには、WordPressウェブサイトを検証する必要があります。そして、これを行う最良の方法の一つは、GoogleのHTML検証ファイルをアップロードすることです。
次に、HTMLファイルをWordPressにアップロードするさまざまな手段を見てみましょう。
手段1：WordPressダッシュボードを使用してHTMLファイルをWordPressにアップロードする
HTMLファイルをWordPressにアップロードする最初の手段は、WordPressダッシュボードを使用することです。
投稿、固定ページ、またはメディアライブラリから直接にHTMLファイルをアップロードするため、この手段には、ウェブサイトのバックエンドとHTMLテンプレート以外に何も要りません。
投稿または固定ページからHTMLファイルをアップロードするには、Gutenbergエディターに「ファイル」ブロックを挿入します。次に、「アップロード」をクリックしてHTMLファイルをアップロードします。
Gutenbergを無効にし、旧エディターを使用している場合は次のようになります。HTMLファイルをアップロードするには「メディアの追加」→「アップロード」の順にクリックします。
アップロードするHTMLファイルを選択して、「投稿に挿入」をクリックします。これを行うと、ファイルのリンクが投稿または固定ページに挿入され、メディアライブラリに自動的に保存されます。
HTMLファイルをWordPressの投稿または固定ページにアップグレードせずに、直接にメディアライブラリにアップロードすることもできます。WordPressダッシュボードで「メディアライブラリ」をクリックし、「新規追加」をクリックして、保存した場所（コンピューター、ハードドライブ、外部ストレージなど）からHTMLファイルを選択します。
Gutenbergの使用中にHTMLファイルをアップロードすると、エラーが発生する可能性がありますので、ご注意ください。エラーは次のようなものです。
WordPressの「セキュリティ上の理由によりこのファイル形式は許可されません」エラーの処理方法について、こちらをご参照ください。
手段2：FTPクライアントを使用してHTMLファイルをWordPressにアップロードする
HTMLファイルをアップロードする最も簡単な手段はWordPressダッシュボードの使用です。ただし、複数のファイルの大きなテンプレートの場合は、FileZillaなどのFTPクライアントを使用することをお勧めします。
FTPクライアントというのは、変更点を本番サイトに公開する前に、ローカルのテストサイトを作成したい場合にも便利です。そうすると、問題が発生してもダウンタイムが派生しません。
HTMLファイルをサイトにアップロードするとどうなるかわからないため、開始する前にまずウェブサイトのバックアップを作成してください。
次に、FTPクライアントを開きます。
次に、FTP認証情報を入力して、ウェブホストアカウントに接続します。認証情報は通常、ウェブホスティングアカウントにあります。見つけられない場合は、ホスティング会社に連絡して助けてもらいましょう。
Kinstaのお客さまには、まずMyKinstaアカウントにログインし、ダッシュボードの「サイト」をクリックしてから「情報」をクリックしていただくと、認証情報を確認していただけます。
認証情報は「SFTP / SSH」の下にあります。ユーザー名、パスワード、ポートが必要です。
FileZillaに入力する必要がある情報は次のとおりです。
- Host: 「sftp://」が前に付くサイトのドメイン名。たとえば、sftp://www.mysite.comと入力する必要があります。
- Username: MyKinstaダッシュボードに表示されているユーザー名。
- Password: MyKinstaダッシュボードに表示されているユーザー名。
- Port: MyKinstaダッシュボードに表示されているポート。
FileZillaの画面は次のとおりです。
資格情報を入力したら、「Quickconnect」をクリックします。
次に、コンピューターからWordPressにHTMLファイルをアップロードします。まず、右側にウェブサイトのルートフォルダー（wp-contentフォルダー、wp-config.phpファイルなどを含むフォルダーのこと）に移動します。
次に、左側にHTMLファイルの保存場所を探します。ファイルを見つかったら、右クリックして「 Upload」を選択し、ウェブサイトに追加します。Filezillaですべての隠しファイルを見るには、こちらのチュートリアルをご覧ください。
これでファイルが正常にWordPressにアップロードされました。ウェブサイトに表示されていることを確認するには、ウェブサイトのHTMLファイルのファイル名を追加したURLをブラウザに入力します。たとえば、www.mywebsite.com/html-fileなどです。
そうすると、HTMLファイルで作成した新しいウェブページにリダイレクトされます。
手段3：cPanelを使用してHTMLファイルをWordPressにアップロードする
最後に、cPanelとファイルマネージャーを使用してHTMLファイルをWordPressにアップロードする手段もご紹介します。
まず、ホスティングアカウントのcPanelにログインし、ファイルマネージャーにアクセスします。
ファイルマネージャーを開いたら、次の2つのオプションがあります。
-
- 新しいフォルダーを作成する：ウェブサイトのルートフォルダーにHTMLファイルをアップロードする新しいフォルダーを作成します。
- ルートフォルダにアップロードする：新しいフォルダを作成せずにHTMLをWordPressにアップロードします。これを行うには、保存したHTMLファイルを解凍し、index.htmlフォルダーのファイル名をに変更して、ファイルを再圧縮して、WordPressにアップロードします。ファイル名をに変更しないと、HTMLテンプレートがウェブサイトのホームページを上書きします。
今回の例では、新しいフォルダーを作成します。（こちらの方は、ステップの数が多いためです。）
新しいフォルダーを作成してHTMLファイルをWordPressにアップロードする
まず、ウェブサイトのルートフォルダー（wp-contentフォルダー、wp-config.phpファイルなどを含むフォルダーのこと）に移動します。次に、「新規フォルダ」をクリックします。
新しいフォルダーに名前を付けて、「新しいフォルダーの作成」をクリックします。
作成したフォルダーをダブルクリックし、「アップロード」をクリックしてHTMLファイルを選択します。
これが完了すると、圧縮されたHTMLファイルHTMLファイルがフォルダーに表示されます。
次に、右クリックして「解凍」を選択し、HTMLファイルを解凍すします。
モーダルウィンドウが表示されたら、「ファイルの解凍」をクリックして解凍プロセスを終了します。HTMLファイルを解凍すると、テンプレートのすべてのファイルが表示されます。CSS、フォントスタイルファイル、画像、JavaScriptなどが表示されますので、ご注意ください。
HTMLテンプレートとそのファイルがアップロードされたかを確認するには、ウェブサイトの新しいフォルダーの名前を追加したURLをブラウザに入力します。
404エラーが発生しても心配する必要はありません。これはよくあるWordPressエラーで、簡単に処理できます。
サーバーがリダイレクトをサポートしておらず、URLが読み込まれるときにindex.phpファイルがリダイレクトされない場合、HTMLファイルをアップロードした後に404エラーが発生します。
これを処理するには、ファイルマネージャーを使用して、.htaccess ファイルをダブルクリックして開きます。次に、次のコードを追加して、変更を保存します。
RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]このコードは、index.phpファイルをリダイレクトし、ブラウザに読み込みます。
まとめ
WordPressは、競合他社のウェブサイトとは一線を画すサイトを作成できるためにフレキシビリティを提供してくれるため、世界一普及しているコンテンツ管理システムです。上記の手段のいずれかを使用してHTMLファイルをWordPressにアップロードできることは、WordPressがサイト所有者のニーズに対応し、必要に応じてサイトを自由にカスタマイズできることの一例です。
さらに、HTMLファイルをWordPressにアップロードする手段を知っることは、万が一の場合に備えておくと良いスキルです。結局のところ、好きなHTMLテンプレートを見つけたり、現在利用中のテーマがサポートしない特定のページレイアウトが必要になったりする場合があるかもしれません。
