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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

608閲覧

WordPressで今まで動いていたjqueryが動かなくなった

ryota0315

総合スコア25

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/31 06:34

編集2017/12/31 07:35

今まで動いていたjqueryが突如動かなくなりました。
WordPressのアップデートが原因なのでしょうか。
色々と試し5日間経ちますがまだ解決していません。

エラーコードを確認してみるとすべてのjqueryが読み込まれていませんでした。

html

1<!DOCTYPE html> 2<html lang="ja"><head> 3<meta charset="UTF-8"> 4<title> 5<?php 6if(!is_home()){ 7 wp_title(' - ', true, 'right'); 8} 9bloginfo('name'); 10?> 11</title> 12<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 13<link rel="shortcut icon" href="/favicon.ico" /> 14<meta name="keywords" content=""> 15<meta name="author" content=""> 16<meta name="description" content=""> 17<meta name="viewport" content="width=device-width,initial-scale=1"> 18<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css"> 19<script src="https://use.fontawesome.com/a53c3edc66.js"></script> 20<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> 21<link href="https://fonts.googleapis.com/css?family=Joti+One" rel="stylesheet"> 22<script src="//maps.google.com/maps/api/js?key=AIzaSyC9ZWt0QbDzOeZgfePT6VCt-zhS92KRDTc"></script> 23 24 <!-- スライドショーCSSの読み込み --> 25 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/flickity.css"/> 26 <!-- スライドショーJavaScriptの読み込み --> 27 <script src="<?php echo get_template_directory_uri(); ?>/js/flickity.pkgd.js"></script> 28 <!-- スライドショーオプションの設定--> 29<script> 30jQuery(function(){ 31 jQuery('.js-flickity').flickity({ 32 // ここでオプションを設定します。 33 wrapAround: true, 34 prevNextButtons: false, 35 autoPlay: 5000, 36 }); 37}); 38</script> 39 40<!--お知らせのスライダー--> 41 42<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 43<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/slider-pro.min.css"/> 44<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.sliderPro.min.js"></script> 45 46<script> 47if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){//スマホのみscriptを対応させる方法 無効にする場合は!navigatorとする 48 jQuery(document).ready(function($){ 49 jQuery( '#slider1' ).sliderPro({ 50 width: '200px',//横幅 51 autoHeight: true,//スライダーの高さの調整 初期:false 52 arrows: true,//左右の矢印 53 buttons: false,//ナビゲーションボタン 54 autoplay: false,//自動再生 初期:true 55 visibleSize: '100%',//前後のスライドを表示 56 loop: false, //スライドがループします。 初期:true 57 fadeArrows:false, //ボタンをホバー時に表示する 初期:true 58}); 59 }); 60 } 61</script> 62 63 64<!--特定の位置に来た時にアニメーションを実行する--> 65<script> 66jQuery(function(){ 67 var setArea = jQuery('.scrEvent'), 68 showHeight = 150; 69 70 setArea.css({display:'block',opacity:'0'}); 71 72 jQuery(window).on('load scroll resize',function(){ 73 setArea.each(function(){ 74 var setThis = $(this), 75 areaTop = setThis.offset().top; 76 77 if (jQuery(window).scrollTop() >= (areaTop + showHeight) - jQuery(window).height()){ 78 setThis.stop().animate({opacity:'1'},500); 79 } else { 80 setThis.stop().animate({opacity:'1'},500); 81 } 82 }); 83 }); 84}); 85 86</script> 87 88 89<!--トグルボタン--> 90<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--> 91<script> 92jQuery(function() { 93 jQuery('#navToggle').click(function(){//headerに .openNav を付加・削除 94 jQuery('header').toggleClass('openNav'); 95 }); 96}); 97</script> 98 99 100<script> 101//スムーズスクロール アンカーリンク 102jQuery(function(){ 103 // #で始まるアンカーをクリックした場合に処理 104 jQuery('a[href^=#]').click(function() { 105 // スクロールの速度 106 var speed = 700; // ミリ秒 107 // アンカーの値取得 108 var href= jQuery(this).attr("href"); 109 // 移動先を取得 110 var target = jQuery(href == "#" || href == "" ? 'html' : href); 111 // 移動先を数値で取得 112 var position = target.offset().top; 113 // スムーススクロール 114 jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); 115 return false; 116 }); 117}); 118</script> 119 120 121<!--GoogleMAP--> 122<script> 123function initialize() { 124var latlng = new google.maps.LatLng(34.695346, 135.742272); 125var myOptions = { 126zoom: 15,//地図の表示サイズ 127center: latlng, 128mapTypeControl: false,//地図・地形を消す 129mapTypeId: google.maps.MapTypeId.ROADMAP 130}; 131var map = new google.maps.Map(document.getElementById('campus-map'), myOptions); 132//オリジナルアイコン 133var icon = new google.maps.MarkerImage('img/fujimoto_gmap.png', 134new google.maps.Size(200,60), //アイコンサイズ 135new google.maps.Point(0,0), //起点 136new google.maps.Point(70,65) //アイコンの位置 137); 138var markerOptions = { 139position: latlng, 140map: map, 141icon: icon, 142title: '' 143}; 144var marker = new google.maps.Marker(markerOptions); 145} 146</script> 147<!--END GoogleMAP--> 148 149 150<!-- Google Analytics --> 151<!-- END Google Analytics --> <!-- スライドショーCSSの読み込み --> 152 153<?php 154wp_enqueue_script("jquery"); 155wp_head(); ?> 156 157</head>

試したこと

  • wp_enqueue_script("jquery"); を追記しコードの中の<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>を削除した
  • $をjQueryに変更しいろいろなパターンを試した
  • function.phpに以下のコードを追加した

php

1function my_scripts() { 2wp_enqueue_script( 'jquery' ); 3} 4add_action( 'wp_enqueue_scripts', 'my_scripts' );
  • .htaccessに以下のコードを追加した(httpsにする対応)
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>

なぜ今まで動いていたのにも関わらず動かなくなったのでしょうか。

解決方法を教えて頂ければと思います。

よろしくお願い致します。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.htaccessに以下のコードを追加した(httpsにする対応)

これが原因ではないですか?
HTTPとHTTPSが混在していますが、全てHTTPSにするかプロトコルを削除して<script src="//~のようにしたら直りませんか?

投稿2017/12/31 07:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryota0315

2017/12/31 08:15

アドバイスを頂きありがとうございます。 対応を致しましたがまだうまく動きません。 私の試し方が悪いのかもしれません。 少し詳細にご教授を頂けますと幸いです。 よろしくお願い致します。
退会済みユーザー

退会済みユーザー

2017/12/31 08:21

ブラウザのキャッシまたはキャッシュ系プラグインがあればキャッシュの削除をしてみてください。 また、ブラウザでソースを見てHTTPが無いか確認してみてください。 あとブラウザの開発者ツールでJS絡みのエラーが無いかも確認してみてください。
ryota0315

2018/01/01 08:23 編集

アドバイスを頂きありがとうございます。 どうしてもエラーが解消できません。 jsのエラーを確認致しました。 下記の内容でエラーがでておりましたが、どのように対応すべきがアドバイスを頂けると幸いで。 ・<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> (エラー内容)→Failed to load resource: the server responded with a status of 404 () ・<script> jQuery(function(){ jQuery('.js-flickity').flickity({ // ここでオプションを設定します。 wrapAround: true, prevNextButtons: false, autoPlay: 5000, }); }); </script> (エラー内容)→Uncaught ReferenceError: jQuery is not defined ・jQuery( '#slider1' ).sliderPro({ (エラー内容)→Uncaught TypeError: jQuery(...).sliderPro is not a function お手数ですがアドバイスのほどよろしくお願い致します。
退会済みユーザー

退会済みユーザー

2018/01/01 07:31

コロンが無いようなのでファイルにアクセスできず404エラーになるのでは? <script src="https//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> ↓ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
kei344

2018/01/01 07:35

jQueryを合計3回も呼んでいるのもそもそも問題だと思いますよ。
ryota0315

2018/01/01 08:22

ありがとうございます。 アドバイスを頂いた内容でうまくいきました。 大変助かりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問