特定の固定ページやカスタム投稿ページごとにＪＳを読み込ませたい

Question

前提・実現したいこと

wordpressにてWEBサイトを制作中です。
特定の固定ページやカスタム投稿ページごとにＪＳを読み込ませたいのですが、どのように管理すべきか悩んでいます。
皆様の知恵をお貸しください。

読み込ませたいＪＳ内容は以下です。

◆特定の固定ページのみ

      $('html').click(function() {
        $('#sample1 > li > ul').slideUp()
      });
      $('#sample1  > li').click(function(ev) {
        var sub = $(this).children('ul');
        if ($(sub).is(':hidden')) {
          ev.stopPropagation();
          $('#sample1  > li > ul:visible').slideUp();
          $(sub).slideDown();
        }
      });
    });
 
    $(function() {
      $('html').click(function() {
        $('#sample2 > li > ul').slideUp()
      });
      $('#sample2  > li').click(function(ev) {
        var sub = $(this).children('ul');
        if ($(sub).is(':hidden')) {
          ev.stopPropagation();
          $('#sample2  > li > ul:visible').slideUp();
          $(sub).slideDown();
        }
      });
    });
 
</script>	

◆カスタム投稿の個別記事ページ（カスタム投稿名：area）のみ

  <script type="text/javascript" src="../js/slick/slick.min.js"></script>
  <script type="text/javascript" src="../js/wideslider.js"></script>
  <script>
    $(function() {
      $('.sp_slider').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
      });
    });

  </script>
  <script>
    $("document").ready(function() {
      $('.pc_slider').slick({
        autoplay: true,
        autoplaySpeed: 2500,
        speed: 800,
        dots: true,
        arrows: false,
        centerMode: true,
        centerPadding: '12%'
      });
    });

  </script>

試したこと

function.phpに追加記載をし、管理画面での固定ページ編集画面下部にCustum JS欄を表示させ、指定の固定ページのみこちらで管理する方法を試しましたが、カスタム投稿の個別投稿ページではどうしよう...？となってしまいました。そうなると、function.phpで一括管理が良いのでしょうか？下記コードでフッター部分に呼び出す方法は分かったのですが、ページごととなるとどのように記述してよいのかわかりません。

add_filter( 'wp_footer', function() {
    ?>
  <script type="text/javascript">
    ＪＳ内容
  </script>
    <?php
} );

Answer 1

if 文で条件分岐します。

例えば、こんな感じで...

add_filter( 'wp_footer', function() {

  if( is_admin() ){
    // 管理画面ページ
    echo '<script type="text/javascript" src="'. get_template_directory_uri() .'/js/script-admin.js"></script>'; 
  } elseif( is_page('42') ){
    // 固定ページ
    echo '<script type="text/javascript" src="'. get_template_directory_uri() .'/js/script-page.js"></script>'; 
  } elseif( is_page() ){
    // その他の固定ページ
    echo '<script type="text/javascript" src="'. get_template_directory_uri() .'/js/script-page.js"></script>'; 
  } elseif( is_single() ){
    // 投稿ページ
    echo '<script type="text/javascript" src="'. get_template_directory_uri() .'/js/script-single.js"></script>'; 
  }

  // すべてのページ
  echo '<script type="text/javascript" src="'. get_template_directory_uri() .'/js/script-all.js"></script>'; 

} );

if 文の条件判断で使用している関数は、http://wpdocs.osdn.jp/条件分岐タグ を参照してください。

もし、子テーマの場合は、get_template_directory_uri() ではなく get_stylesheet_directory_uri() を使ってください。

Comments

[mamamamamama]

お返事が遅くなり申し訳ありません。参考になりました、ありがとうございました！