WordPress で作成したページに JavScript (HTML) を埋め込む方法についてまとめておきます。
環境: レンタルサーバー(ConoHa VPS)、WordPress 5.X
背景
WordPress でサイトを作っています。
サイトを作っていると、作ったページの記事に何か機能を追加して、サイトをより便利にしたくなることがあります。簡単な例でいえば、デジタル時計、世界時計といったものなどです。
ブラウザとサーバ間で複雑な処理をすることなく、ボタンやテキストボックスを使った JavaScript の便利ツールを入れて、サイトをより高度化したいと思うことがあると思います。
当初、WordPress の編集画面(「テキスト」タブのクリック後の画面)で、JavaScript や HTML を直接書けば動くのかと思い、記事中に JavaScript のソースを書いてみましたが、動きませんでした。
そこで、別途、JavaScript が動く HTML ファイルを作成し、ページから参照するよう設定したところ、うまく動きましたので、手順をまとめておきます。
手順
① 別途、ブラウザで単独で動く HTML/JavaScript を作成しておきます。
テスト用のサンプルとして、末尾に HTML ファイルの例をアップしておきますので、javascript_clock1.html 等の名前で保存してください。
② WordPress の編集画面で、「メディアを追加」→「ファイルをアップロード」→「ファイルを選択」を順次クリックし、①の HTML (JavaScript) を選択し、アップロードしてください。
③ アップロードした直後の画面で、「ファイルのURL:」となっている欄に記載された URL をコピーし、パソコンなどにいったん保存/確保してください。
④ 編集画面に戻り、「テキスト」タブをクリックしてください。
⑤ 以下を参考に、<iframe> タグを挿入してください。ここで、src=”” としたところは、③の URL となるよう修正してください。また、width, height の値などはサイトのデザインに応じて調整してください。
<iframe width=”400px” height=”100px” src=”https:…/javascript_clock1.html” scrolling=”auto” frameborder=”no”></iframe>
→ これで完了です!
実際に JavaScript を埋め込んでみた例
たとえば、このような感じになります。
※ まずは一番簡単なデジタル時計としてみました。
設置にあたり、欄の位置や JavaScript 内の文字サイズや文字の位置などは調整してください。
まとめ
WordPress 上で JavaScript を動かすことが可能になりました。
JavaScript に限らず、HTML で作ったグラフや表などでもすぐに使えそうです。
この手法が使えるのであれば、別途、Linux サーバーの Python を使って、指定時刻、指定場所に HTML ファイルを自動生成するように設定しておき、WordPress の各ページからはその結果を随時参照する、といった使い方も簡単に実現できそうです。
なお、<iframe> を使うというのは、以下の関連リンクと同じアイディアです。関心のある方は参考にしてみてください。
関連リンク
・ HTML ビューア 【JavaScript】
・ LED を ON/OFF する 【Raspberry Pi & Python】
★ サイトのページに、回路図となる SVG/HTML ファイルを埋め込んでみた事例です。
最初、ベクター画像である “*.svg” ファイルをサイトにアップしようとしたところ、WordPress ではアップロード自体ができませんでした。そこで、SVG ファイルを埋め込んだ HTML ファイルをアップロードしています。これにより、特に機能を追加することなく、拡大しても図形の崩れのない画像を WordPress のページに埋め込むことが可能です。
現在のところ表示サイズを数値で指定しているため、スマートフォンなどデバイスを変えるとレイアウトが変わる点は、検討する必要がありそうです。
サンプルコード HTML/JavaScript デジタル時計
<!DOCTYPE html>
<html>
<head></head>
<script>
function two_digits1( n0 ) {
var ret1;
if( n0 < 10 ) { ret1 = "0" + n0; }
else { ret1 = n0; }
return ret1;
}
function date0() {
var date1 = new Date();
var yy0 = two_digits1( date1.getFullYear() );
var mm0 = two_digits1( date1.getMonth()+1 );
var dd0 = two_digits1( date1.getDate() );
var dy0 = two_digits1( date1.getDay() );
var yyyymmdd1 = yy0 + "/" + mm0 + "/" + dd0;
document.getElementById("date1").innerHTML = yyyymmdd1;
}
function clock0() {
var date1 = new Date();
// var yy0 = two_digits1( date1.getFullYear() );
// var mm0 = two_digits1( date1.getMonth()+1 );
// var dd0 = two_digits1( date1.getDate() );
// var dy0 = two_digits1( date1.getDay() );
var hh1 = two_digits1( date1.getHours() );
var mm1 = two_digits1( date1.getMinutes() );
var ss1 = two_digits1( date1.getSeconds() );
var hhmmss1 = hh1 + ":" + mm1 + ":" + ss1;
document.getElementById("clock1").innerHTML = hhmmss1;
date0();
}
setInterval('clock0()',1000);
window.onload = function(){
clock0();
}
</script>
<body style="color:#ffffff; background-color:#111199;" >
<div style="margin-left:10px; margin-top:10px;" >
<span id="clock1" style="font-size:50px;"></span><span id="date1" style="margin-left:20px; " ></span>
</div>
</body>
</html>
★ よく使う関数はコードに埋め込んでおき、コメントアウトするようにしています。必要な部分を残して利用するようにしてください。