お問い合わせはコチラから

WordPressの投稿・個別ページにjavascriptを追加する方法

サイト運営

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の実行を停止するのがいいと思いますが、それが出来る状況の方が少ないと思いますので、ある程度は仕方ないのかなと思いました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました