Q&A
>を入れる必要があると記事で読んだため
出典を明示してください。
あと、それぞれのバージョンも追記してください。
ワードプレス は標準でjQueryを装備してるため
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery-3.2.1.min.js"></script>を消して、
<?php wp_enqueue_script('jquery'); ?>を入れる必要があると記事で読んだため、そのようなことを行ったのですがjQueryが動かなくなりました。
jQueryの＄も全てjQueryに直しています。
に戻したらjQueryは動くようになりました。
<?php wp_enqueue_script('jquery'); ?>をうまく機能させるにはどうすれば良いでしょうか？
<!DOCTYPE html> <html lang="ja"> <head> <title>広告運用.com</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(); ?>/vendor/jquery/jquery-3.2.1.min.js"></script> <!-- <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> <!-- Vendor --> <!--Main Menu File--> <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> <!--Main Menu File--> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/mystyle.css"> <!-- <link rel="stylesheet" href="webslidemenu/demo.css" /> <script type='text/javascript'> $(document).ready(function () { $("a[data-theme]").click(function () { $("head link#theme").attr("href", $(this).data("theme")); $(this).toggleClass('active').siblings().removeClass('active'); }); $("a[data-effect]").click(function () { $("head link#effect").attr("href", $(this).data("effect")); $(this).toggleClass('active').siblings().removeClass('active'); }); }); </script> --> <!--For Demo Only (Remove below css and Javascript) --> <!-- <?php wp_enqueue_script('jquery'); ?> --> <?php wp_enqueue_script('bootstrap-js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array('jquery')); ?> <?php wp_head(); ?> </head>
出典はこちらです。
https://webst8.com/blog/wordpress-theme-howto-make/
バージョンは3.2.1ではないですか？
質問本文に記載してください。
「それぞれの」バージョンです。WordPress、PHP
可能ならサーバーOS
回答2件
0
wp_enqueue_scriptしたjsはwp_head()かwp_footer()のタイミングでscriptタグが出力されます
なので
php
1<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/my_script.js"></script> 2 3... 4 5<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/webslidemenu/webslidemenu.js"></script> 6
このあたりの時点でjqueryがなくて詰まります
WPが依存関係を適切に解決できるようにjqueryに依存するjsはscriptタグを直書きするのでなく
同じくwp_enqueue_scriptでWPに出力させるようにしましょう
ついでに、わざわざ<?php wp_enqueue_script('jquery'); ?> は書かなくても
php
1<?php wp_enqueue_script('bootstrap-js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array('jquery')); ?>
みたいにjqueryに依存するwp_enqueue_scriptがあればjqueryのscriptタグは出力されます
投稿2020/09/18 07:29
総合スコア7819
0
jQueryはネットで公開されているんのでスタティックに
指定してやるとよいでしょう。
外部ネットを参照できない環境なら、公開パスにわかりやすい
パスを切って入れ込んでファイルを保存して参照してください
投稿2020/09/18 02:21
総合スコア116724
あなたの回答
tips
プレビュー
