WordPress に JavaScript を埋め込む

programming WordPress

WordPress で作成したページに JavScript (HTML) を埋め込む方法についてまとめておきます。
環境： レンタルサーバー（ConoHa VPS）、WordPress 5.X

背景

WordPress でサイトを作っています。
サイトを作っていると、作ったページの記事に何か機能を追加して、サイトをより便利にしたくなることがあります。たとえば、デジタル時計といったものなどです。

JavaScript をいくらか知っているのであれば、サーバ側に複雑な処理を入れるのではなく、テキストボックスやボタンなどを JavaScript で簡単に作ってしまって、クライアント側で実行するようにすると、とても便利です。

当初、WordPress の編集画面（「テキスト」タブのクリック後の画面）で、JavaScript や HTML を直接書けば動くのかと思い、記事中に JavaScript のソースを書いてみましたが、うまく動きませんでした。
そこで、JavaScript が動く HTML ファイルを別途作成し、ページから参照するよう設定したところ、動くようになりました。
ということで、WordPress で JavaScript を動かす手順についてまとめ、公開しておくことにします。

事例　～　実際に JavaScript を埋め込んでみた例

事例を見せたほうが早いので、以下に一例を示します。たとえば、このような感じになります。

※　まずは一番簡単なデジタル時計としてみました。
設置にあたり、欄の位置や JavaScript 内の文字サイズや文字の位置などは、以下の事例を調整してみてください。

手順

①　別途、ブラウザで単独で動く HTML/JavaScript を作成しておきます。
テスト用のサンプルとして、末尾に HTML ファイルの例をアップしておきますので、javascript_clock1.html 等の名前で保存してください。
②　WordPress の編集画面で、「メディアを追加」→「ファイルをアップロード」→「ファイルを選択」を順次クリックし、①の HTML (JavaScript) を選択し、アップロードします。
③　アップロードした直後の画面で、「ファイルのURL:」となっている欄に記載された URL をコピーし、パソコンなどにいったん保存しておきます。
④　編集画面に戻り、「テキスト」タブをクリックします。
⑤　WordPress の記事の編集画面でテキストを表示させ、以下を参考に、<iframe> タグを挿入します。
<iframe width=”400px” height=”100px” src=”https:…/javascript_clock1.html” scrolling=”auto” frameborder=”no”></iframe>
※　ここで、src=”” としたところは、③の URL となるよう修正してください。
※　また、width, height の値などはサイトのデザインに応じて調整してください。

→　これで完了です！

まとめ

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をコピーしました