注意点
WordPressでBrythonを使うとき、以下の点に気を付けなければならない。
- brython.jsを読み込むのは
headセクションだが、カスタムセクションにこれを書くなど、WordPressとしての扱いが必要 - onload時に
brython()を実行させる処理が必要 - スクリプトをHTML内に直接書くときに、WordPressのエディタの仕様が問題になる(勝手に
<p>タグがつけられる)。
Brythonの読み込み
通常はHTMLドキュメントのheadセクションでbrython.jsを読み込むが、WordPressの場合は別途処理しなければならない。
このページでは、Custom CSS and JavaScriptでターゲットを指定している。
onload時の処理
<body>タグがPHPに含まれているので触り難いが、以下のようなjavascriptファイルをheadセクションで読み込んでおけば、onload時に関数が呼ばれてbrython()が実行される(WordPressでのonload処理を参照)。
|
1 2 3 4 5 6 7 |
function onload_brython() { brython() } window.onload = function() { onload_brython(); } |
このページでは、上記ファイルをonload_brython.jsとしてサーバ上に置き、先のBrythonの読み込みの後に、Custom CSS and JavaScriptで読み込んでいる。
スクリプトを直接書く時の注意
Brythonを展開するのに、直接HTMLファイルにスクリプトを書く方法と、外部スクリプトファイルに分ける方法の2つがあるのは他のスクリプトと同じ。
ただしWordPressのエディタのテキストモードでスクリプトをHTML内に直接書く場合、スクリプト中に空行があると勝手に<p>タグが挿入されるので、実行時にエラーとなる。<p>タグを付加するのを抑制するか、あるいは空行なしで書けば正常に実行される。
以下の例は、このページ中に直接Brythonのスクリプトを書いたもの。
|
1 2 3 4 5 6 |
<script type="text/python"> from browser import alert, document def html_direct(): alert("これはHTML内に直接書いたスクリプトです。") document['btn-html-direct'].bind("click", html_direct) </script> |
あるいは下の例のように、スクリプトを外部ファイルにすれば、問題なく実行される。
|
1 |
<script type="text/python" src="./startup-outer-script.py"></script> |
|
1 2 3 4 5 6 |
from browser import alert, document def outer_script(): alert("こちらは外部スクリプトファイルです。") document['btn-outer-script'].bind("click", outer_script) |