カスタム投稿ページだけに特定のcssやjsを読み込ませたい
解決したいこと
ワードプレスの新規カスタム投稿ページを、function.phpで指定して[slick.js]と[jquery.inview.min.js]を読み込ませること。
上記がなかなかうまいこと読み込んでくれません。
head内にあるcssやjsなどは読み込んでくれてデザイン自体は形作られてページも問題なく表示されています。
カスタムフィールドも使用しています。
できればfunction.phpで読み込ませたいです。
もし何かわかる方がいましたら何かしらアドバイスや指摘があれば教えていただけますでしょうか。
以下、該当する問題のfunction.phpのソースコード
function car_stock_css() {
if (is_single(array('car-stock'))) {
wp_enqueue_style( 'slick_css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
wp_enqueue_style( 'slick_theme_css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css');
}
}
add_action( 'wp_enqueue_scripts', 'car_stock_css' );
function car_stock_js() {
if (is_single(array('car-stock'))) {
wp_enqueue_script( 'ver03_js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
wp_enqueue_script( 'slick_js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.9.0/slick/slick.min.js');
wp_enqueue_script( 'car_slide', get_template_directory_uri() . '/js/car_slide.js');
wp_enqueue_script( 'inview', get_template_directory_uri() . '/js/jquery.inview.min.js');
}
}
add_action( 'wp_enqueue_scripts', 'car_stock_js' );
'car-stock'の名前が間違っているのでしょうか。ハイフンが駄目とは思えないし……
カスタム投稿のページはちゃんと表示されているし投稿もできますけど……
以下、新規カスタム投稿を作成したソースコード
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type('car-stock', array(
'labels' => array(
'name' => '車テスト',
'singular_name' => '車テスト',
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title', 'editor', 'thumbnail'),
'menu_icon' => 'dashicons-edit'//追記
));
// 追加した箇所
register_taxonomy('tax_car-stock',array('car-stock'), array(
'hierarchical' => true,
'label' => 'カテゴリー',
'show_ui' => true,
'public' => true
));
register_taxonomy_for_object_type( 'tax_car-stock', array('car-stock') );
// 追加した箇所
//car-stock（ここまで）
}
//カスタム投稿（記事の表示数）
add_action('pre_get_posts', 'my_pre_get_posts');
function my_pre_get_posts($query) {
if (!is_admin() && $query->is_main_query() && is_post_type_archive('car-stock')) {
$query->set('posts_per_page', 9);
}
}
function add_post_tag_archive( $wp_query ) {
if ($wp_query->is_main_query() && $wp_query->is_tag()) {
$wp_query->set( 'post_type', array('tax_car-stock','article'));
}
}
add_action( 'pre_get_posts', 'add_post_tag_archive' , 9 , 1);
自分で試したこと
現在、head内に直接slick関係は読み込ませて動作していることを確認。他のページは影響なし。
inviewの方をhead内に設置すると新規のカスタム投稿ページは反映されてフェードインの動きができますが、
他の固定ページが影響を受けて動作しなくなります。（固定ページもfunction.phpからすでにinviewを読み込ませているので
）
又、固定ページに読み込ませてあるinviewを外してheadで共通にしようとしても動かなくなる。
検証で確認するとinviewの設置箇所が問題で動いたり動かなくなったりしているので、
共通として扱えないのかなと思ってます。
なので、カスタム投稿ページもfunction.phpで指定させて読み込ませたい。
又、
singleページ内で必要なjsを直接読み込ませて反映していることを確認済。
でも、ここにinviewを設置しても反応なし。
ちなみに、検証のConsoleはエラーは一切なし。
※追記
もともと古いサイトで、各ページを徐々に部分的にリニューアルしたり新規ページを追加していったり、昔のコードがそのままだったりごちゃごちゃしていて、知らない何かjsが効いているいる可能性もあるかもしれません。
また、他の自分が新規で作ったサイトは上記で記載したソースコードでカスタム投稿ページもちゃんと動いてます。
