LoginSignup
ishiguro3
@ishiguro3

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

カスタム投稿ページだけに特定の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が効いているいる可能性もあるかもしれません。

また、他の自分が新規で作ったサイトは上記で記載したソースコードでカスタム投稿ページもちゃんと動いてます。

0

3Answer

wp_register_scriptなどされてる前提でしょうか。

普通wp_enqueue_scriptなどは、登録時に付けたハンドル名だけ済む関数です。

1Like

Comments

  1. @ishiguro3

    Questioner
    回答ありがとうございます。

    「wp_register_script」前提ではないと思います。
    「wp_enqueue_scriptが登録時に付けたハンドル名だけで済む関数」というのはなんとなく理解できました。

    phpの知識がないので、以下の参考記事からの引用します。

    「wp_register_script()を使わずにfunctions.phpにwp_eneueue_script()のみを使ってJavascriptファイルを読み込む」感じで作成しています。
    https://samurai-project.com/articles/373

先ほどアーカイブのみの指定に変更してみたら、js読み込んでくれたみたいです。
if (is_archive(array('car-stock'))) {

一覧ページはこれでオッケーだと思います。

あとは詳細ページのみです…

0Like

問題は解決しました。
詳細ページもfunction.phpからslickやinviewのjsとcss無事読み込んでくれました。

以下の記事を参考にしました。
「is_singleにカスタム投稿タイプは利かない」そうです。
https://php1st.com/2021

他の自分が作ったサイトは「is_single」で動いているんですけど…
素直に「is_singular」に変更してみました。

「is_singular」はこの問題に直面した当日に試していたのですが、その時はうんともすんとも読み込んでくれなかったので、違うものだと考えてました。
もしかしたら、
一覧ページを「is_archive」で指定したから「is_singular」も動いたのかもしれません。

0Like

Your answer might help someone💌