特定のページで、javascriptを実行したい時、スクリプトへのリンク、インラインのスクリプト、CSSの追加の3つがたいていの場合必要になります。
テンプレートを編集したり、固定ページを作成したりしてもいいのですが、手間のかかる割には、柔軟性に欠けるという事があります。
下のスクリプトは、functions.phpにコードを追加するだけで、この3種の作業を行ってしまおうとする試みです。
投稿やページを作成したら、[myscripts] というショートコードを記述するだけで、スクリプトを追加することが出来ます。
<?php
add_action( 'after_setup_theme', 'my_scripts_setup' );
function my_scripts_setup() {
add_action( 'wp_footer', 'my_add_inline_script', 99 );
add_action( 'wp_enqueue_scripts', 'my_add_inline_style' );
add_shortcode( 'myscripts', 'my_add_script_source' );
}
function my_add_inline_style() {
global $post;
if ( has_shortcode( $post->post_content, 'myscripts' ) && is_singular() ) {
$my_css= '/*something inline css*/';
//twentytwelve-style は テーマにより異なります。
// link 要素のIDから -css を取り除いたもの
wp_add_inline_style( 'twentytwelve-style', $my_css );
// jquery plugin等、依存関係があるときには、配列に handle を入れてください
wp_enqueue_script( 'myfancyboxjs', 'http://www.example.com/js/jquery.fancybox.js', array( 'jquery' ), '1.0', true );
}
}
function my_add_script_source() {
// 空のショートコードで、スクリプトをロードするかどうかのマーカーにします
return;
}
function my_add_inline_script() {
$scripts= '/* something inline script */';
if ( wp_script_is( 'myfancyboxjs', 'done' ) ) {
$html= '<script type="text/javascript">%1$s</script>' . "\n";
printf( $html, $scripts );
}
}
?>
11/19 コードを修正しました。