WordPress

WordPress JavaScriptプログラムを記事に挿入、実行するには

JavaScript を利用したページ作りは、WordPress ではどのように実現するか? について、探し方が悪かったのか良い方法が見つけられなかった。そこで自分なりに考え、以下の方法で解決することにした。

実現方法の概要

  1. JavaScript のプログラムは、投稿記事やページに直接記述しても実行できないので、カスタムフィールドに登録する。
  2. 登録したプログラムが(X)HTMLのhead部に読み込まれるように、テンプレートを変更する。
  3. jQueryのようなライブラリを読み込んで利用できるように、1,2と同じ方法を行なう。

カスタムフィールドの登録

post(実際はpostmetaテーブル)データにカスタムフィールドが登録できる、と言う機能には正直感心した。これのおかげで、非常に拡張性 に富んだ作業が行なえると感じたからだ。今回カスタムフィールドに登録するデータは、ライブラリ読み込みの例としてjQueryを読み込むためのデータ と、プログラムを読み込む例としてjQueryを利用したプログラムである。

それぞれのキーを、ライブラリは「js」、プログラムは「script」とする。

ところで外部ライブラリの読み込みは、テンプレートに直接書けば可能だ。が、利用しない表示ページにも読み込まれてしまうので、あまり嬉しくない。 ここはライブラリを利用する投稿またはページを表示するときだけ、必要なライブラリを読み込むようにしたいので、カスタムフィールドを利用することにし た。

ライブラリを読み込むためのカスタムフィールドの値

ライブラリの読み込みは、WordPress で用意されている「wp_enqueu_script()」関数を利用するので、その関数に必要なパラメータを、カンマ区切りで登録する。パラメータは、 ハンドル名、ソースのURL、依存するライブラリのハンドル名、バージョンとなる。

jQueryの読み込みを例に取ると

wp_enqueue_script('jquery','/js/jquery/jquery-1.3.2.min',false,'1.3.2');

とすれば良い。WordPress 側は、同じライブラリが登録されても2重に読込みしないようにしてくれる。また、テンプレート上の「wp_head()」を記述したところに、ライブラリを読み込むHTMLを挿入してくれる。

カスタムフィールドの値は、「jquery,/js/jquery/jquery-1.3.2.min,0,1.3.2」とする。

余談だが、jQueryはデフォルトでWordPressのシステムに登録されているため、上のように記述しても、WordPress の方からロードする。また、「jQuery.noConflict();」も追加されているので、そのままでは「$()」を利用できない。

テンプレートへの追加・編集

ヘッダ部のテンプレートは、デフォルトで「header.php」ファイルである。「</head>」タグの上を見ると、 「<?php wp_head(); ?>」があるので、この上にライブラリを読み込むPHPのソース、この下にプログラムを読み込むためのPHPのソースを、それぞれ追加する。

<?php
  if (is_singular()) {
    $src = get_post_meta($post->ID, 'js');
    if (!empty($src)) {
      $opt = explode(',', $src[0]);
      wp_enqueue_script($opt[0],$opt[1],$opt[2]==0?false:true,$opt[3]);
    }
  }
?>

投稿記事またはページを表示するときだけ、そのページのライブラリ情報のカスタムフィールドを取得し、その情報を元に WordPress に読込みの登録をする。

次に、プログラムの読込みである。「<?php wp_head(); ?>」と「</head>」の行間に以下のPHPソースを挿入する。

<?php
  if (is_singular()) {
    $script = get_post_meta($post->ID, 'script');
    if (!empty($script)) { ?>
<script type="text/javascript">
//<![CDATA[
<?php echo $script[0]; ?>
//]]>
<?php }} ?>

上と同様、投稿記事またはページを表示するときだけ、そのページに登録されたプログラムのカスタムフィールドを取得し、(X)HTMLにタグで囲んだプログラムを挿入するようにする。

実験したプログラムは、次のものを試してみた(scriptキーに登録した値)。

jQuery(document).ready(function() {
  $ = jQuery;
  $("p").click(function() {
    alert("キタ━━━━(ﾟ∀ﾟ)━━━━ !!!!!");
  });
});

動作が確認できたときは、少し嬉しかった。自分で作ったブログシステムを捨てて WordPress へ置き換えるのは寂しいが、WordPress の持つCMSとしての未来にはワクワクするものを感じる。ので、相殺と言うことで(^_^;)。

WordPress のバージョンは、2.8.4。

Firefoxを利用してフォームのtextareaにタブを挿入したい場合、「Tab in Textarea(tabinta)」アドオンを利用すると良い。フォーム表示画面でのタブキーは、項目移動に使われるので、「shift+tab」でタ ブが挿入されるように設定して使っており、便利いいです、hai。

アーカイブ