目次
はじめに
実務案件で実装をしたサンプルデモを記事で更新する時に、特定の投稿記事に対してのみjsのライブラリを読み込ませたいと思う時があります。
それはパフォーマンスの低下や、検証ツールで見たときにコンソールエラーが出るのを防ぐためです。
しかしis_singleの条件分岐がうまく効かない時があります。今回は条件分岐が効かない原因と対処法について紹介します。
is_singleを使用して特定の投稿記事のみに条件分岐をしたいとき
投稿idを指定して特定の投稿記事に条件分岐をする
例 記事idが「1000」の場合
if(is_single(1000)) {
//中身
}「1000」の部分はクオーテーションで囲んで「’1000’」でも大丈夫です。
投稿のスラッグを指定して特定の投稿記事に条件分岐をする
例 スラッグが「post_name」の場合
if(is_single('post_name')) {
//中身
}is_singleを使用して特定の投稿記事のみにjsのライブラリを読み込ませたいとき
では上の例に従って、jsを読み込ませるためのソースコードを書きます。
例 記事id「1000」の記事に以前紹介した下記記事の「MixItUp」のjsライブラリを読み込ませるためのソースコード
MixItUp
実務経験でクリックした項目に関するもののみを表示するフィルター機能を「MixItUp」ライブラリで実装しました。今回の記事はそのデモになります。
functions.php
if(is_single(1000)) {
wp_enqueue_script('mixItUp', 'https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.js', array(), null, true);
wp_add_inline_script('mixItUp', "
document.addEventListener('DOMContentLoaded', function() {
const mixContainer = document.getElementById('mix-container');
const mixer = mixitup(mixContainer);
});
");
}しかしこれだと読み込みません！
is_singleを使用して特定の投稿記事のみにjsのライブラリを読み込ませたいとき正しい版
PR
functions.php
function enqueue_mixItUp_script() {
if (is_single(1000)) {
wp_enqueue_script('mixItUp', 'https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.js', array(), null, true);
wp_add_inline_script('mixItUp', "
document.addEventListener('DOMContentLoaded', function() {
const mixContainer = document.getElementById('mix-container');
const mixer = mixitup(mixContainer);
});
");
}
}
add_action('wp_enqueue_scripts', 'enqueue_mixItUp_script');まとめ
一番上の行と一番下の「add_action」の行を追加したら条件分岐が効くようになります。
条件分岐が効かなくて困っている方はチェックしてみてください。
