WoedPressに外部JSファイルを作成してのテーマファイルに追加する

今回はレンタルサーバーのロリポップに外部JSファイルを作成してみたいと思います。

外部jsファイルを作成して紐づけておけばjavascriptをwardpress側から自分だけのjsファイルとして編集できるようになるので非常に便利で重宝できるかと思います。

まずはご自身のレンタルサーバーにjsファイルを作成していかないと実現できないので、今回はその設定から確認までの解説をしたいと思います。

【作成後】

ワードプレスのテーマファイルに自分だけのjsファイルが作成できます。

それでは頑張って作成していきましょう！

レンタルサーバー【ロリポップ】の設定

まずはロリポップにログインします。

左のメニューのロリポップ！FTPをクリック

wp_contentをクリック

themesをクリック

ここはご自身のお使いのテンプレートフォルダをクリック

jsフォルダをクリック

上のメニューの新規ファイル作成をクリック

ファイル名を決めて拡張子をjsにします。

もしコードが文字化けしたらご自身の環境の文字コードに変更します。

全ての設定が終了したら保存をクリックします。

これでロリポップのサーバーにjsファイルが作成されました。

ワードプレス側の設定

外観→テーマエディタをクリック

右側のテーマファイルの中のテーマヘッダ（header.php）をクリック

header.phpが開かれるので

ショートカットキー : Ctrl + F

で検索ボックスが右上に表示されるので</head>と入力しEnterキーを押します。

header.phpのソースコードの中の</head>の文字の色が変わり表示されたかと思います。

ここで必ずheader.phpの全文をバックアップしてメモ帳などに保存してください。

※サイトが予期せぬ動きになった時に元の状態に戻すためです。

表示されたら</head>のすぐ上に下記のコードを記述します。

myFile.jsの部分に先程ロリポップで作成したご自身のjsファイル名に変更します（ロリポップで先程作成したjsファイルを読み込まれるようにするための作業です）

ファイル更新ボタンを押して、下記のようにファイルの編集に成功しましたが表示されたらワードプレスの設定は完了です。

HTMLで確認

最後にHTMLで先程ワードプレスのheader.phpで追加した内容がHTML内できちんと表示できてるかを確認します。

自分のサイトで

右クリック→ページのソースを表示をクリック

ズラズラっ～とHTMLのコードが表示されますが気にせず

ショートカットキー : Ctrl + F を押します。

右上に検索ボックスが表示されるので先程ご自身で作成したjsファイル名を検索ボックスに入力してEnterを押します。

すると下記のように一致するワードmyFileに背景色が塗られて表示されるのでファイルパスなどを確認し、きちんとあってるかを確認します。

最後に先程のワードプレスのテーマファイルのjsにmyFile.jsが追加されてれば完璧です。

これでワードプレスの画面でもmyFile.jsファイルを編集できるようになりました。

以上で全ての設定から確認までの作業はこれで完了です。

まとめ

今回はロリポップ（レンタルサーバ）に外部jsファイルを作成することにより、ワードプレスのテーマファイルに自分だけのjsファイルを作成することができました。

ここに色々なジャバスクリプトコードを記述していけば動的な動きのあるブログも作成できるようになるので、これから少しずつジャバスクリプトを学んでかっこいいブログやサイトを作成していってもらえれば幸いです(*^^)v

以上です。