WordPress | 外部JavaScriptファイルを使う方法

WordPressで外部JavaScriptファイルを使う方法を説明する。

結論

通常のHTMLと全く同じ方法で「カスタムHTML」にscriptタグで外部JavaScriptファイルを読み込んで使う。

具体例

外部JavaScriptファイルとして、”https://wordpress.kazunoriri.com/wp-content/uploads/2022/09/test.js”というファイルを準備する。ファイルの中身は以下の通り。

function 俺の名前を表示する() {
  alert('俺はヨシヒコだ。');
}

WordPressのカスタムHTMLブロックを配置し

• この外部JavaScriptを読み込む。
• ボタンを配置する。
• ボタンをクリックすると外部JavaScript内の関数を実行する。

というコードを記述する。

<script src="https://wordpress.kazunoriri.com/wp-content/uploads/2022/09/test.js"></script>
<input type="button" value="ここをクリック" onclick="俺の名前を表示する()">

すると以下のボタンが生成される。

このボタンをクリックすると外部JavaScriptに記述した関数俺の名前を表示する()が実行されアラートが表示される。

まとめ

WordPressに外部JavaScriptファイルを使う方法を説明した。