概要

 ワードプレス(WordPress)で気軽にプログラミングを始める場合、「カスタムHTML」に「JavaScript」を打ち込む方法があります。

 これにより、投稿ページごとに好きなプログラムを書くことができます。

解説

 ワードプレスで作ったホームページでプログラミングを行いたい。
 そのような場合、オーソドックスな方法としては「テーマの編集」にて直接ファイルを編集する方法があると思います。
 しかしながら、テーマファイルを直接編集する場合はレンタルサーバーにログインして必要なファイルを子テーマに入れ直すなど若干ながら手間もかかります。

 そうではなく、ワードプレスの投稿ページにてプログラミングをして、特定のページで特定の動作をするプログラムを作りたい。そのような場合は、投稿ページにてJavaScriptを打ち込むといいでしょう。

方法と例

テキストを表示する(Hello World)

 ワードプレスの「投稿」にて新規投稿を作成します。
 そして「カスタムHTML」のブロックを挿入します。(カスタムHTMLはデフォルトであるブロックです)
 そして以下のコードをコピペします。

<p id="tekisuto"></p>
<script>
    document.getElementById("tekisuto").textContent = "ここの文字が表示されます";
</script>

 すると上記のように文字が表示されます。
 これがワードプレスにてJavaScriptを打つ基本になります。

 もちろん、ただ文字を表示するだけならプログラミングをする必要はないでしょう。
 このため、もう少し実用的なコードを書いてみます。

今日の日付を表示する

<p id="nichiji"></p>

<script>
    var hizuke=new Date(); 
    document.getElementById("nichiji").textContent = hizuke
</script>

 上記のようなコードをコピペすると、今の日時を表示することができます。
 ただしこのままでは月が英語表記だったり日が年より先に表記されるなど、いわゆる海外的な表記で日本に馴染みのある形式ではありません。
 「〇年〇月〇日〇曜日」のような表記にするには、少しコードを書き足して工夫します。これについては以下で見ていきます。

JavaScriptのサンプルコード一覧