WordPress に JavaScript を埋め込む

programming WordPress

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>

★　よく使う関数はコードに埋め込んでおき、コメントアウトするようにしています。必要な部分を残して利用するようにしてください。

タイトルとURLをコピーしました