WordPressの記事にiframeタグでPythonコードを埋め込む

WordPressのサイト上にPHPを使用して動的なコンテンツを表示することは可能ですが、PythonでもWordPressのサイト上で動的なコンテンツの表示ができるのでしょうか。

調べてみたところ、WordPressはPHPで開発されたプラットフォームですが、Pythonを導入することも可能なようです。

その手法として、PythonをインストールしてWebサーバーを設定する方法や、Pythonコードを実行できる外部サービス（例：Trinket）を利用する方法等が紹介されていました。しかし、いずれも専門的知識や、手間がかかりそうです。

そこでこの記事では、簡単にPythonを利用できる「PyScript」を使用して、PythonのコードをHTMLの中に埋め込んでiframeタグで実行してみたいと思います。（→関連記事）

今回実施すること
まとめ

今回実施すること

PyScript（パイスクリプト）を知る

PyScript（パイスクリプト）とは、Anaconda社が開発した、HTMLファイル内にPythonコードを記述してブラウザ上で実行可能にするフレームワークです。これにより、JavaScriptの代わりにPythonを使ってWebアプリケーションを開発できます。

PyScriptのコードをiframeタグで実行

PyScriptのコードをiframeタグで実行してみました。次のような内容になります。

▼iframeタグ用コード(ファイル名は「test_PyScript.html」で保存)

<!-- //////////////////////////////////////
//
//　test_PyScript.html
//
/////////////////////////////////////// -->

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>PyScript</title>
        <!-- PyScript CSS -->
        <link rel="stylesheet" href="https://pyscript.net/releases/2025.8.1/core.css" />
        <!-- PyScriptの読み込み -->
        <script type="module" src="https://pyscript.net/releases/2025.8.1/core.js"></script>

</head>
<body>
    <h1>PyScript表示テスト</h1>

        <!-- テスト１ -->
        <py-script>
            from pyscript import display
            from datetime import datetime

            print("テスト1ー1")
            display("テスト1ー2")
            now = datetime.now()
            display(now.strftime("%m/%d/%Y, %H:%M:%S"))

            import js
            js.console.log("テスト1ー3")

        </py-script>

        <!-- テスト２ -->
        <script type="py">
            from pyscript import display
            from datetime import datetime

            print("テスト2ー1")
            display("テスト2ー2")
            now = datetime.now()
            display(now.strftime("%m/%d/%Y, %H:%M:%S"))

            import js
            js.console.log("テスト2ー3")

        </script>

        <!-- テスト３ -->
        <py-config>
          packages = ["pandas", "numpy"]
        </py-config>
        <p>Pandasのデータフレームを表示</p>
        <py-script>
          import pandas as pd
          import numpy as np

          df = pd.DataFrame(np.random.randn(6, 4), columns=list("ABCD"))
          display(df)
        </py-script>

</body>
</html>

<!-- //////////////////////////////////////

//　test_PyScript.html

/////////////////////////////////////// -->

<!DOCTYPE html>

<head>

<title>PyScript</title>

</head>

<body>

<h1>PyScript表示テスト</h1>

<py-script>

from pyscript import display

from datetime import datetime

print("テスト1ー1")

display("テスト1ー2")

now = datetime.now()

display(now.strftime("%m/%d/%Y, %H:%M:%S"))

import js

js.console.log("テスト1ー3")

</py-script>

from pyscript import display

from datetime import datetime

print("テスト2ー1")

display("テスト2ー2")

now = datetime.now()

display(now.strftime("%m/%d/%Y, %H:%M:%S"))

import js

js.console.log("テスト2ー3")

</script>

<py-config>

packages = ["pandas", "numpy"]

</py-config>

<p>Pandasのデータフレームを表示</p>

<py-script>

import pandas as pd

import numpy as np

df = pd.DataFrame(np.random.randn(6, 4), columns=list("ABCD"))

display(df)

</py-script>

</body>

</html>

▼「test_PyScript.html」の解説

HTMLファイルの<head>内にPyScript実行に必要なコードを記述します。
- <link>タグで、PyScriptのCSSを読み、基本的なスタイルを適用します。
- <script>タグで、PyScript本体のJavaScriptファイルを読み込みます。（注１）
HTMLファイルの<body>内に直接Pythonコードを記述します。
- 2つの方法があります。
  1. <py-script>タグ内に直接Pythonコードを書く方法
  2. <script type=”py”>タグ内に直接Pythonコードを書く方法
- <py-script>タグはブラウザ上でPythonを実行するためのフレームワークであり、<script type=”py”>タグはHTMLのscriptタグにtype属性を指定する方法です。
- テストプログラムでは、この２つの方法で、表示内容が異なるか試すために<py-script>タグを「テスト１」として、<py-script>タグを「テスト２」として、同じ内容のプログラムを実行してみました。
- サードパーティ製のライブラリを使用する場合は<py-config>タグの中に使用するライブラリを指定します。
  - 「テスト３」としてpandasとnumpyをパッケージとして指定しています。
  - <py-script>の中でこの2つのライブラリを使用してPandasのDataFrameを生成しています。

（注１）「 <script defer src=”https://pyscript.net/latest/pyscript.js”></script>」と紹介しているサイトもありますが、こちらは既に閉鎖しているようです。

▼記事に記述するコード

<iframe
 width="900"
 height="600"
 frameborder="0"
 allow="fullscreen"
 src="https://newrongo55.hopto.org/test_PyScript.html">
</iframe>

<iframe

width="900"

height="600"

frameborder="0"

allow="fullscreen"

src="https://newrongo55.hopto.org/test_PyScript.html">

</iframe>

iframeタグで「test_PyScript.html」を呼び出して表示します。

結果を表示する

下のように表示されました。

▼iframeタグで「test_PyScript.html」を呼び出したときの表示
<br />

▼解説

<py-script>タグと<script type=”py”>タグでは、同じように表示されています。
表示の方法は、print、display、js.console.logの３つの方法を試してみましたが、display以外は、ブラウザのコンソールに表示されました。（注２）
サードパーティ製のライブラリも使用できて、PandasのDataFrameが生成されています。

（注２）ブラウザのコンソールの開き方・・・Google Chromeの場合は、右上のボタンから「その他のツール」>「デベロッパーツール」を選びます。

まとめ

今回は、PyScriptを使用して、PythonのコードをそのままHTMLの中に埋め込んで実行してみました。

これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。

参考