WordPressでのjQueryの実装

いろいろな記事を読んだのですが、WordPressでのjQueyの実装が上手くいってるか分かりません。
一応Helloというアラートは表示されるようにはなったのですが、
ワードプレスではもともと実装されてるjQueryがある？という記事を見つけたり、
どんな順番で書けば良いのかなどが分からず混乱してきてしまいました。
お手数ですが、どんな風に書けば良いのか教えて頂けると助かります。
よろしくお願いします。

以下header.phpの内容です。

<!DOCTYPE html>
<html lang="ja">

<head>
  <title><?php bloginfo('name'); ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Vendor -->
    <!-- jQuery -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>
    <!-- ブートストラップjs -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/bootstrap.min.js"></script>
    <!-- ブートストラップcss -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/bootstrap.min.css" />
    <!-- フォントオウサム -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <!-- javascript -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/my_script.js"></script>
    <!-- lottie -->
    <script type="text/javascript" src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  <!-- Vendor -->

  <!--メガメニュー -->
  <link id="effect" rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/webslidemenu/dropdown-effects/fade-down.css" />
  <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/webslidemenu/webslidemenu.css" />
  <link id="theme" rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/webslidemenu/color-skins/white-pink.css" />

  <!-- Include Below JS After Your jQuery.min File -->
  <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/webslidemenu/webslidemenu.js"></script>
  <!--自分のCSS-->
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/mystyle.css">
  <?php wp_head(); ?>
</head>

以下はmy_script.jsに書いた内容です。

jQuery(function(){
          alert("Hello")
     });

行動規範の内容に同意します

回答3件

ワードプレスではもともと実装されてるjQueryがある？という記事を見つけたり、

はい。
WordPress は、初期状態で jQuery が読み込まれまれています。

最初から読み込まれているjQuery の読み込みを停止せずに個々のテンプレートの中で、jQuery の読み込みを記載すると二つのjQuery が、読み込まれることになります。

WebブラウザのデベロッパーツールでHTML を確認すると jQuery の読み込みが2行あったりしないでしょうか。

また、プラグイン等が jQuery を使っている場合は、WordPress 標準で用意されているjQuery を想定していることが多いので、複数のjQuery が読み込まれているあ場合は、動作しなかったり、エラーが発生する場合がありますので注意が必要です。

WordPress で推奨されている JavaScript の読み込み方法は、functions.php に記載した wp_enqueue_scripts フックの中でwp_enqueue_script を用いる方法がよく使われているのではないかと思います。

投稿2021/01/14 22:18

編集2021/01/14 22:20

CHERRY

総合スコア25218

takawork

2021/01/15 07:32

もともとワードプレスに入ってる標準jQuery使った方が良いと言うことは分かりました。ということは <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script> は消した方が良いと言うことですか？

行動規範の内容に同意します

上記の方で述べられてる通り、コンフリクトとか起きたりすると嫌なので、個人的には2つ読み込みたくないです。

けど、ダッシュボードでワードプレスjqueryは必要なのでfunctions.phpで

php
1function load_script()
2{
3    if (!is_admin()) {
4        wp_deregister_script('jquery');
5    }
6}
7add_action('wp_enqueue_scripts', 'load_script');