デイトラweb制作（Word Press化その2）

公開日 2026/9/4 最終更新日 2026/9/4

デイトラの卒業課題を1日（1〜2時間）行なっています。

front-page.phpに画像、CSS、JSのパスを通す

画像のパス

これは下記の様に変更すればOK！

<img src="<?php echo get_template_directory_uri() ?>/img/logo-pc.png" alt="">

CSS側で画像を読み込んでいる部分はテーマ内の画像パスに合わせます。

my-theme/
├── css/
│   └── style.css  ← CSSファイルの位置
└── img/
    └── bg-case.png  ← 画像の位置

.bg-case {
  /* css/ から見て一つ上の階層の img/bg-case.png を指定 */
  background-image: url('../img/bg-case.png');
}

functions.phpからCSSやJavaScriptを読み込む

ここで1つ問題が発生、Java ScriptとSwiperのCDNが読み込まれない。

funtions.phpを修正

<?php
function my_script_init() {
    // Font Awesome
    wp_enqueue_style("font-awesome", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css", array(), "5.8.2", "all");

    // Swiper (CSS)
    wp_enqueue_style("swiper", "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css", array(), "12.0.0", "all");

    // テーマの CSS（Swiperのスタイルに上書きできるよう Swiper を依存指定）
    wp_enqueue_style("my", get_template_directory_uri() . "/css/style.css", array("swiper"), filemtime(get_theme_file_path('css/style.css')), "all");

    // Swiper (JS)
    wp_enqueue_script("swiper", "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js", array(), "12.0.0", true);

    // テーマの JS（Swiperを使用するため Swiper と jQuery を依存指定）
    wp_enqueue_script("my", get_template_directory_uri() . "/js/script.js", array("jquery", "swiper"), filemtime(get_theme_file_path('js/script.js')), true);
}
add_action("wp_enqueue_scripts", "my_script_init");
?>

変更のポイントは2つ

SwiperのCSSを追加：Swiperを動かすにはJSだけではなくCSSも必須になるのでswiper-bundle.min.cssを合わせて読み込ませる
依存関係：自分のscript.jsが実行される前に必ずSwiper本体が読み込まれる

JavaScriptを修正

jQuery(function ($) {
  // --------------------------------------------------
  // 1. ドロワーメニュー
  // --------------------------------------------------
  $("#js-drawer-icon").on("click", function (e) {
    e.preventDefault();
    $(this).toggleClass("is-checked");
    $("#js-drawer-content").toggleClass("is-checked");
  });

  // --------------------------------------------------
  // 2. Swiperの初期化
  // --------------------------------------------------
  if ($('.swiper').length) {
    const swiper = new Swiper('.swiper', {
      loop: true,
      slidesPerView: 1,
      speed: 500,
      allowTouchMove: false,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  }

  // --------------------------------------------------
  // 3. ページトップスクロール
  // --------------------------------------------------
  $('#js-pagetop a').on('click', function (event) {
    event.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 500);
  });

  // --------------------------------------------------
  // 4. FAQ アコーディオン
  // --------------------------------------------------
  $('.p-service-faq__question').on('click', function () {
    const $button = $(this);
    const $item = $button.closest('.p-service-faq__item');

    const isOpen = $button.attr('aria-expanded') === 'true';
    $button.attr('aria-expanded', !isOpen);
    $item.toggleClass('is-open');
  });
});

4.の項目は別のページなので気にしないで下さい。

結果

JavaScriptを修正の際にデベロッパーツールのコンソール（Console）タブにUncaught TypeError: $ is not a functionとエラーが表示されていました。

これはWordPress標準のjQueryは競合を防ぐためセーフモード（＄エイリアスが無効化された状態）で読み込まれます。そのため、コード内で＄（）をそのまま使うとエラーになります。

最初のコードは$(function () { … });と記述してましたが、jQuery(function ($) { … });に変更したら解決しました！

以上、デイトラweb制作（Word Press化その2）の状況でした。

疑問等ありましたら、下記のURLにお問い合わせ下さい。

お問い合わせはこちら

ポートフォリオサイトはこちらになります。

ポートフォリオサイトはこちら

タグ