WordPressの投稿記事内に直接Javascriptを書いてみる

WordPressの投稿記事内でJavaScriptを書くと、自動整形が働いて、
改行や””などが自動的に書き換えられたり、pタグが入ったりしちゃいます。

divタグで囲むとか、自動整形をoffにする(ハック)とか、カスタムフィールドに書いちゃうとかいろいろ方法はあったんですけど、どれも一長一短でしっくりきてませんでした。

そこで投稿記事内のPHPを実行するプラグインと合わせて強引にやってみました。

▼サンプルJavaScript
クリックで表示／非表示

EOF;
?>

▼投稿時の記述

<?php
echo <<<EOF
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function () {
    $("#sample").toggle(1000);
  });
});
</script>
EOF;
?>

(GoogleのjQuery参照は、Nishiaki’s Log: そろそろみんなでGoogle AJAX Libraries API使いませんか？を参考にしました。)

導入方法

※投稿記事内でのPHP実行は、個人の責任の範囲でお願いします。

1. PHPを投稿記事内で実行できるようにするプラグライン「runPHP」を導入する
2. WordPress管理画面で runPHP を有効にする

参考サイト)

• runPHP:wordpress記事内でphpを実行する | ああwordpress
• WordPress自分の定番プラグイン(1)runPHP — The Fool On The Web
• no sq – runPHP

投稿方法

HTMLモードで記述します。
※必ず記事毎に 「run PHP code?」にチェックしてrunPHPを有効にする事！

チェックは投稿画面の一番下にあります。
特にWP2.7になって投稿画面が長くなって、気づきにくいので注意してください。

また、HTMLモードからビジュアルモードに切り替えないこと。
切り替えると、”<?php”→”&lt;?php” みたいに勝手に変換されてしまいます。
（ここがWordpressの嫌いな所だ）

投稿記事内でPHP内でのJavaScriptを書くのにはヒアドキュメントで書くのが一番簡単です。

<?php
echo <<<EOF
(ここに好きなJavaScriptやらHTMLやら書くと自動整形されずに済みます)
EOF;
?>

ヒアドキュメントの書き方は、「PHP ヒアドキュメントで出力の記述をスッキリさせる | JUGEMの自作テンプレートを配布 Show-U」や「RedLine Magazine : PHP ヒアドキュメント」を参考にしてください。

余談）
生徒が頑張ってWordpressをカスタマイズしてて、そこから挙ってきた質問がきっかけでした。