wordpressの投稿内でJavascriptをつかう

サイト上でSHA256を試すページを作りたくて、やってみた。

javascriptファイル調達

使いたいjavascriptファイルが有名どころで、CDNで参照できるなら、こちらの作業は不要です。

今回SHA256計算のために、jsSHAをつかいました。ダウンロード、展開すると、ファイル群がでてきます。今回は/src/sha256.jsを抜き出しました。

配置

自サイトのwp-content/themes/[自分が使っているテーマ名] 配下に、jsファイルを配置します。twentyseventeenを使っているなら、こうなります。

wp-content/thmes/twentyseventeen/sha256.js

子テーマを設定しているなら、子テーマのディレクトリに配置します。

記事側にjavascriptを書く

ポイントは3つあります。
1. <script>タグを<div>で囲う
2. <script>タグ内部に空の改行を入れない


<div><script type="text/javascript">
function calcHash() {
try {
var hashInput = document.getElementById("hashInputText");
var hashOutput = document.getElementById("hashOutputText");
var hashObj = new jsSHA("SHA-256","TEXT",{numRounds: 1});
hashObj.update(hashInput.value);
var hexValue = hashObj.getHash("HEX");
var hexText=hexValue;
hashOutput.value = hexText + " (256bit)";
} catch(e) {
hashOutput.value = e.message
}
}
</script></div>

3.ビジュアルモードにして、テキストモードに再び戻すとタグの属性が消えることがある。気をつけろ!

私の環境では、なぜか<input type=”text” onkeyup=”calcsha()”/>のonkeyup部分が消えました。何の警告もなく。