質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

ホームページのwordpress化でjavascript(jquery含め)が読み込まれない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 588

mcy

score 22

ホームページ(1画面のLP)のwordpress化でjavascript(jquery含め)が読み込みがうまくいきません。
functions.php内のfunction twpp_enqueue_scripts以下の記述でmain.jsが呼び出される認識だったのですが、その他にも必要な記述はありますでしょうか。

どなたかご教授いただければと思います。
ローカル環境(MAMP)で動かしています。

'use strict';
{
  //query,ID,class取得
  const body = document.querySelector("body");
  const head = document.getElementById('head')
  const headLogo = document.getElementById('headLogo');
  const menuWrapper = document.getElementById('menuWrapper');
  const menuButton = document.getElementById('menuButton');
  const nav = document.getElementById('nav');
  const moveTop = document.getElementById('moveTop');
  const moveAbout = document.getElementById('moveAbout');
  const moveProduct = document.getElementById('moveProduct');
  const moveContact = document.getElementById('moveContact');

  //ページ読み込み時処理
  window.onload = function(){
    head.classList.remove('before');
    head.classList.add('after');
    headLogo.classList.remove('logoHide');
    headLogo.classList.add('after');
  }

  //読み込み時とリサイズ時、高さを画面いっぱいにする
  jQuery(function () {
    jQuery("#head").css("height",jQuery(window).outerHeight());
    jQuery(window).resize(function(){
      jQuery("#head").css("height",jQuery(window).outerHeight());
    });
  });

  //ハンバーガーボタンのアニメーション処理
  document.addEventListener('DOMContentLoaded', function () {
    menuButton.addEventListener('click', function (ev) {
      ev.preventDefault();
      this.classList.toggle('active');
    });
  });

  //メニューボタン押下時処理
  menuWrapper.addEventListener('click', function (event) {
    //メニューが隠れている場合
    if (nav.classList.contains('close')){
      //メニューを開く
      nav.classList.remove('close');
      nav.classList.add('open');
      //背景を固定する
      body.classList.add('fixed');
    //メニュー表示中の場合
    } else {
      //メニューを閉じる
      nav.classList.add('close');
      nav.classList.remove('open');
      //背景固定を解除
      body.classList.remove('fixed');
    }
  });

  //スクロール処理
  jQuery(function(){
    // #で始まるリンクをクリックしたら実行されます
    jQuery('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = 300; // ミリ秒で記述
      var href= jQuery(this).attr("href");
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });

  /********** サブメニュー処理ここから **********/
  //Top押下時処理
  moveTop.addEventListener('click', () => {
    nav.classList.add('close');//メニューを閉じる
    body.classList.remove('fixed');//背景固定を解除
    menuButton.classList.remove('active');//メニューボタンを戻す
  });

  //about押下時処理
  moveAbout.addEventListener('click', () => {
    nav.classList.add('close');//メニューを閉じる
    body.classList.remove('fixed');//背景固定を解除
    menuButton.classList.remove('active');//メニューボタンを戻す
  });

  //Servive押下時処理
  moveProduct.addEventListener('click', () => {
    nav.classList.add('close');//メニューを閉じる
    body.classList.remove('fixed');//背景固定を解除
    menuButton.classList.remove('active');//メニューボタンを戻す
  });

  //Contact押下時処理
  moveContact.addEventListener('click', () => {
    nav.classList.add('close');//メニューを閉じる
    body.classList.remove('fixed');//背景固定を解除
    menuButton.classList.remove('active');//メニューボタンを戻す
  });
  /********** サブメニュー処理ここまで **********/

}
//functions.php
<?php

add_theme_support('menus');

function twpp_enqueue_scripts() {
  wp_enqueue_script(
    'main-script',
    get_template_directory_uri() . '/js/main.js'
  );
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
//index.php
<!DOCTYPE html>
<html>
<head>
    省略
    <?php wp_head(); ?>
</head>
<header>
省略
</header>
<main>
省略
</main>
<footer>
省略
</footer>
<?php wp_footer(); ?>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/09/04 21:53

    「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • mcy

    2019/09/04 22:21

    その通りですね。
    少し記述を変えました。
    助言いただきありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

wp_enqueue_scriptsの書き方は特に大きくは間違っていないので、テーマディレクトリ内にjsというディレクトリがあるか、またをの中にmain.jsが於かれているかを確認してください。

【テーマにJavaScript(jsファイル)を正しい方法で読み込む | The WordPress Press】
https://thewppress.com/libraries/enqueue-scripts/


wp_footer以降に相対パスを用いてスクリプトを読み込もうとしていますが、絶対パスに変えるかhttpから始まるURLに書き直す必要があります。(wp_enqueue_scriptsを使うなら直接script要素を書き込むのはやめておきましょう)
jQuery本体を読み込もうとしていますが、WordPressは明示的に除外しない限りjQueryは自動で読み込まれます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/05 06:50

    ご回答ありがとうございました。
    絶対パスに変更したら読み込まれました。
    本当に助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る