はじめに
現在、「JavaScript」を使用してパラパラ漫画を作成しています。
「JavaScript」の便利なライブラリである「jQuery」を使用するために、「HTML」で読み込むコードを書く必要があります。
ローカルの環境での「jQuery」の導入方法は過去にご紹介しました。
〇【JQuery入門】環境構築の方法。
今回はワードプレスを使用して「HTML」を記述して、アップロードした「JavaScriptファイル」を読み込むように設定したいと思います。
読み込みたいファイルをアップロードして、ファイル場所のパスを記述すれば誰でも簡単に読み込むことがてまきます。
アップロード方法
私はFTPソフトである「FileZilla」を使用していますが、エックスサーバーの方も分かりやすそうだったのでエックスサーバーでファイルをアップロードしてみます。
以下のエックスサーバーのページからログインします。
〇Xserverアカウント – ログイン
「サーバー管理」→「サブFTPアカウント設定」→「ドメインを選択」→「ログイン」で以下のようなページを開きます。
子テーマフォルダ（私は「the-thor-child」）より下の階層の任意の場所に「JSファイル」をアップロードしてください。
今回は子テーマフォルダに「para」というフォルダを作成し、「test.js」をアップロードしました。
アップロードした「test.js」のコードは以下になります。
document.getElementById("aaa").onclick =function(){
//alert("fda");
console.log("Ok");
}
console.log("読み込み成功");パスの指定方法
読み込みのテストコードは以下になります。＜scrip＞タグ内のパスを適宜設定ブラウザでHTMLファイルを開いてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<button id="aaa">デベロッパーツールで「Console」を開いてからクリックしてね</button>
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\test.js"></script>
</body>
</html>
はじめはサーバーにあるファイルの階層が「public-html」から始まっていので、私のブログのURLの後に以下のようにパスを設定していましたが、うまく読み込むことができませんでした。
https://lifeinfo-navi.com/public_html/wp-content/themes/the-thor-child/para/test.jsワードプレスにおけるファイルの指定は「URL/wp-content/・・・」とすると読み込むことができました。
https://lifeinfo-navi.com/wp-content/themes/the-thor-child/para/test.jsCSSファイルの読み込み方法
「JSファイル」と同様に子テーマより下の階層に「CSSファイル」をアップロードします。
HTMLの<head>タグ内に以下のコードを記述すれば、読み込みが可能です。
<link rel="stylesheet" href="パスの指定">さいごに
ワードプレスの投稿編集ページを開いて、「カスタムHTML」より「JSファイル」や「CSSファイル」を読み込むことができました。
