WordPressでHTMLやJavaScriptを公開する方法

1,はじめに

本稿では、WordPressでHTMLやJavaScriptを使用して作成したアプリをホスティングする方法について述べます。

とはいえ、慣れた人なら、WordPressサイトではなく、ApacheなりNginxを使用して別途Webサーバーを作成したり、Heroku等を使用することが多いでしょう。

これは、あくまでも、技術力を伸ばしている段階の人向けの記事である事に留意してほしいです。

では、語らさせて頂きます。

2,HTMLファイルのアップロード方法

(1)概要

まずは、HTMLファイルをWordPressにアップロードし、公開する方法の概略を説明いたします。

それは、下記の通り行います。

  1. WordPressにログインし、ダッシュボードを表示
  2. メディアからHTMLファイルのアップロード
  3. アップロードしたHTMLファイルのURLを確認
  4. 公開

(2)WordPressにログインする

さて、本稿を読まれている方はWordPressにログインする、と聞いて何をするかわかりますでしょうか?

WordPressで記事を書いたりする画面が表示されていれば、ログインはできたといえます。

本稿の読者はそれを卒業したレベルの方だと思うので、割愛させていただきます。

(3)HTMLファイルのアップロード

では、HTMLファイルのアップロードを行いましょう。

(ア)ダッシュボード内のメディアをクリック

wordpress-on-html-1
「メディア」をクリック

(イ)新規追加をクリック

wordpress-on-html-2
「新規追加」をクリック

(ウ)ファイルを選択ボタンをクリック

wordpress-on-html-3
「ファイルを選択」ボタンをクリック

(エ)アップロードしたいファイルを選択

wordpress-on-html-4
アップロードしたいファイルを選択

(オ)怒られる

wordpress-on-html-5
セキュリティ上の理由によりこのファイル形式は許可されていません。

(4)それでもHTMLファイルをアップロードする場合

なるほど、君がHTMLファイルをアップロードできなかったと言っていたわけが分かりました。

正攻法だと、FTPで放り込む、という方法があるのですが、まだ難しいでしょう。

(ア)プラグインを導入する

ネット上を検索したところ、同じようなことで悩まれた方の記事を発見しました。

方法2:プラグイン「WP Add Mime Types」を利用する
アップロードの頻度が多い場合は、プラグインを入れてしまうのが簡単でおすすめです。

【WordPress】セキュリティ上の理由によりこのファイル形式は許可されていません。 | SEO白書

では、 「WP Add Mime Types」の導入を行いましょう。

(イ)「プラグイン」をクリックする

wordpress-on-prg-1
「プラグイン」をクリックする

(ウ)「新規追加」をクリックする

wordpress-on-prg-2
「新規追加」をクリックする

(エ)プラグインの検索で「WP Add Mime Types」を検索する。

wordpress-on-prg-4
「WP Add Mime Types」を検索する。

(オ) 「今すぐインストール」をクリックする

wordpress-on-prg-4
「今すぐインストール」をクリックする

(カ)接続情報を入力する

wordpress-on-prg-5
接続情報を入力する

少し難しい操作になるので、補足しますね。

レンタルサーバーを契約した時に、FTPサーバーのホスト名やユーザー名などを教えてもらっているはずです。

その情報を、ここで入力します。

入力が完了したら「開始」ボタンをクリックします。

wordpress-on-prg-6
インストール中

(キ)「有効化」ボタンをクリックする

「有効化」ボタンをクリックする
wordpress-on-prg-8
有効化しました

(5)HTMLファイルをアップロードする

(ア) WP Add Mime Types の動作確認

メディアからファイルの選択までは、上記で述べたのと同じなので、割愛します。

wordpress-on-prg-9
あ?

WP Add Mime Typesをインストールしてもセキュリティエラーが出る。

これは、WP Add Mime Typesがうまく動いていないことが原因です。

(イ) WP Add Mime Types の不具合を直す

wordpress-on-prg-10
設定をクリックし、表示される Mime Type設定をクリック
wordpress-on-prg-11
「設定を保存」をクリック

一度、設定から「設定を保存」ボタンを押さないと、うまく動作しないみたいです。

これで、WP Add Mime Typesが正常に動作するようになりました。

(ウ)HTMLファイルのアップロード

wordpress-on-html-6
アップロードできました。

3,JavaScriptファイルのアップロード方法

(1)JavaScript をアップロードできるようにする

ダッシュボードの設定から、Mime Type設定をクリックする。

そして、追加の項目に「js = application/javascript」を記入し、設定を保存ボタンをクリックする。

JavaScript をアップロードできるようにする

(2)JavaScript ファイルのアップロード

プラグインの設定が完了したら、メディアの新規追加から、JavaScriptファイルをアップロードしよう。

wordpress-on-javascript-2
JavaScriptファイルのアップロードが出来た。

4,アドレスの確認

アップロードしたHTMLファイル等をメディアからクリックしてみましょう。

wordpress-on-html-7
メディアファイルの詳細からURLがわかる

このURLにアクセスすると、メディアファイルが表示されます。

5,おわりに

プラグインが動作しなかったのは焦ったが、動いてよかった。

Yahooジオシティーズが閉鎖されるので、2011年に作成したHTMLゲームを、本稿を書きながらこのサイトに持ってきました。

NumberOfTouch

懐かしいものです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA