WordPressのサイトにちょっとしたjavascript(jQuery)を追加したいとき、意外と手間がかかります。
この記事では、各投稿・固定ページにだけ適用可能なjavascriptを追加する方法をご紹介します。
jsファイルの読み込みを追加するのは意外と面倒
WordPressの場合、外部jsファイルになっていればfunction.phpなどで読み込む設定を追加するのは簡単です。例えば、CDNなどで公開されているjsのライブラリはscriptタグを張り付ければ終わりです。
しかし、自前で書いたちょっとしたjavascriptを追加したい場合、わざわざ外部ファイルにして追加の読み込む設定を追加するのは意外と手間で敬遠する人も多いと思います。
さらに、特定ページだけで使うjavascriptの場合は、そもそも他のページで読み込む必要も無いのでそこまでやりたくないと思うわけです。
各投稿・固定ページにだけ適用可能なjavascriptを追加するカスタマイズ
そんな中、各投稿・固定ページにだけ適用可能なjavascriptを追加できるようなformを作成する有用なカスタマイズを公開されている方がおられました。
//Custom JS Widget
add_action( 'admin_menu', 'custom_js_hooks' );
add_action( 'save_post', 'save_custom_js' );
add_action( 'wp_head','insert_custom_js' );
function custom_js_hooks() {
add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high' );
add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high' );
}
function custom_js_input() {
global $post;
echo '<input id="custom_js_noncename" name="custom_js_noncename" type="hidden" value="'.wp_create_nonce('custom-js').'" />';
echo '<textarea id="custom_js" style="width: 100%;" cols="30" name="custom_js" rows="5">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_js = $_POST['custom_js'];
update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
if ( is_page() || is_single() ) {
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<script type="text/javascript">' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
endwhile; endif;
rewind_posts();
}
}
この記述をfunction.phpに追加して、javascriptを適用したい投稿・固定ページにjavascriptを追加すれば外部ファイル化することもなく、必要ないページで読み込むこともなく希望するjavascriptを追加することができるというわけです。
今回のカスタマイズを使ったのはどんな時？
あるプラグインが出力する<p>タグで囲まれた文字列を<p>タグを残して削除したかった時に、CSSでは無理だったのでjQueryを使って、空の文字列に置き換える必要がありました。
jQuery(function ($) {
$(".クラス名").text("")
});そのプラグインが特定のページだけでしか読み込まれないので、jQueryもそのページだけに適用したいという事情がありました。
まとめ
各投稿・固定ページにだけ適用可能なjavascriptを追加するのは便利ではありますが、Autoptimizeなどでjsを最適化する際にキャッシュファイルが増える原因にもなります。なぜなら、ページごとに使用するjsが変わるとその数だけキャッシュファイルが必要になるからです。
本来であれば、共通のファイルにしておいてjsの実行を停止するのがいいと思いますが、それが出来る状況の方が少ないと思いますので、ある程度は仕方ないのかなと思いました。
