WordPressの投稿でjQueryやJavaScriptを使う方法

WordPressの投稿でjQueryやJavaScriptを使いたくなるときがあります。プラグインを使用する方法もありますが、ショートコードを使用する方法が最も手軽です。

ショートコードの書き方

functions.phpに次の内容と実行したい関数を定義するだけです。

function 実行したい関数名 (){
命令文など
}
add_shortcode(‘投稿記事に貼り付けるタグ名’, ‘実行したい関数名’);

あとは投稿記事でスクリプトを実行したい部分に次のタグをつけます。

[投稿記事に貼り付けるタグ名]

jQueryを使用するには

jQueryやJavaScriptを使用するには記事内に　scriptタグからscriptの終了タグまでを書き出す方法をとります。
クオーテーションの付け方が複雑になりますのでヒアドキュメントを使用すると便利です。
また、jQueryを使用する場合はあらかじめライブラリを用意しておく必要があります。
また＄マークが使用できませんのでjQueryで＄マークを使用するには次のような工夫が必要です。

$(function(){
  命令文など
})

を次のように変更します。

jQuery(function($){
  命令文など
})

参考例

function reguler_f() {
  $str =<<<eot
  <script type="text/javascript">
  jQuery(function($){
    $("p#first").before("<h1>sample</h1>");
  })
  </script>
eot;
  return $str;
}
add_shortcode('reguler_jquery', 'reguler_f');