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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

4回答

4512閲覧

WordpressにてjQueryがうまく作動しない。(ログイン時は動作する)

samuraiman963

総合スコア11

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/05/06 13:36

編集2022/01/12 10:55

WordpressにてjQueryがうまく作動しない。

どうか、お知恵をお貸しくださいませ。

表題のとおりですが、
■状態
・google コンソールにてエラーはでていません。
・Wordpressにログイン中の画面では正常に動作します。
・シークレットモードや別ブラウザ、つまりログインしていない状態だと動作しません。

コンフリクトの回避のため、Wordpressでは

<?php function add_files() { wp_deregister_script('jquery'); wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "2017", false ); // サイト共通JS wp_enqueue_script( 'mat', get_template_directory_uri() . '/js/materialize.min.js', '2017', true ); wp_enqueue_script( 'ti', get_template_directory_uri() . '/js/init.js', array( 'jquery' ), '2017', false ); wp_enqueue_script( 'menuz', get_template_directory_uri() . '/js/menu.js', array( 'jquery' ), '2017', false ); wp_enqueue_script( 'smoothscroll', get_template_directory_uri() . '/js/smoothscroll.js'); wp_enqueue_script( 'adme', get_template_directory_uri() . '/js/admin-bar.min.js', '2017', true ); // サイト共通のCSSの読み込み wp_enqueue_style( 'drawer', get_template_directory_uri() . '/css/pure-drawer.min.css', "", '2017' ); wp_enqueue_style( 'suyzua', get_template_directory_uri() . '/css/style.css', "", '2017' ); wp_enqueue_style( 'mafo', get_template_directory_uri() . 'https://fonts.googleapis.com/icon?family=Material+Icons', "", '2017' ); } add_action('wp_enqueue_scripts', 'add_files');

function.phpにて読み込んでいます。

うまく動作しないコードは「menu.js」「init.js」です。
どちらも別ファイルで読み込んでおり、ログイン時は動作しています。

(function($) { $(function() { var $header = $('#top-head'); $(window).scroll(function() { if ($(window).scrollTop() > 50) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); }); })(jQuery);

(function($){ $(function(){ $('.button-collapse').sideNav(); $('.parallax').parallax(); }); // end of document ready })(jQuery); // end of jQuery name space

■試したこと
・jqueryのver変更
・jqueryの記述変更
・ログイン中とのソースや内容の比較

ログイン中の状態とログアウトの状態で、何が異なるのか
調べてもまったく情報がありませんでした。
なにか違い、注意すべきことがあるのでしょうか??

ちなみに独自テーマで、プラグインはほとんどいれておらず、
停止しても解決いたしませんでした。

ログイン状態で通常のTOPでは動作しますが、
カスタマイズを押し、カスタマイズ画面にはいると、ログアウト時と同様動きませんでした。

■追記
ログイン状態で読み込まれる、admin-bar.min.jsを、
ログアウト時でも読み込まれるようにしましたが、改善しませんでした。

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答4

0

何点か気になった点について。

  • テンプレートファイルで**wp_head(),wp_footer()**はコールしていますか。
  • 以下の処理はwp_enqueue_scriptsにフックして実行していますか。

PHP

1wp_deregister_script('jquery'); 2wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', "", "2017", false );

投稿2017/05/06 14:41

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

samuraiman963

2017/05/06 14:46

ご返信ありがとうございます。 おそらく、上記2つは満たしていると思います。 ・header.php、footer.phpにてコールしています。 ・wp_enqueue_scriptsにフックして実行しています。 <?php function add_files() { ~~ add_action('wp_enqueue_scripts', 'add_files'); にてフックしています。 どうぞよろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2017/05/06 14:59

追加で確認ですが、 「うまく動作しないコード」のファイルもwp_enqueue_script関数で登録、wp_enqueue_scriptsアクションにフックしていますか。 また、wp_enqueue_script関数で登録する際には、依存するスクリプトのハンドル(今回の場合はjQuery)を指定していますか。
samuraiman963

2017/05/06 15:01

ありがとうございます。 おそらく、できていると思います。(独学初心者につき、理解できていない場合が申し訳ございません。) 「うまく動作しないコード」を「menu.js」とした場合、以下のように記述しています 。 wp_enqueue_script( 'menu', get_template_directory_uri() . '/js/menu.js', array( 'jquery' ), '2017', true );
退会済みユーザー

退会済みユーザー

2017/05/06 15:06

上記の確認で問題が見つからないのであれば、私からはこれ以上アドバイスできることはありません。お力になれずすみません。 ちなみに、自分の確認結果について不安な点があるのであれば、functions.phpに書かれているそのあたりの処理(wp_enqueue_scriptしたり、add_actionしている箇所)をまるまる質問文に追記されてみてはいかがでしょうか。
samuraiman963

2017/05/06 15:12

お力添え、ありがとうございます。 ご指摘のとおり、追記させていただきました。 お忙しい中、ありがとうございました。
guest

0

とりあえず外部スクリプトに console.log を仕込んで、読み込まれているか確認してみてください。

JavaScript

1console.log( 'A Script' );

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

読み込まれていたら、次はHTMLを取得できているか($('#top-head'); とか)を確認し、ブラウザで「ページのソースを表示」で閉じタグ忘れや""の閉じ忘れなどを確認するなどでしょうか。

投稿2017/05/06 14:05

kei344

総合スコア69366

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

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

samuraiman963

2017/05/06 14:10

ご返信ありがとうございます。 ログの読み込み早速ためさせていただきました。 読み込みは行えているようです。 ちなみに、通常のwordpress、jquery読み込み時は、 コンフリクトエラーが起きていたので、読み込みは他のも含めてできていると思います。(あせっており、記載がもれていました。申し訳ございません。) また、HTMLの取得もできております。 ログイン中の画面では、検証をしながら、スクロールすると、 classが付与され、正常に動作することを確認しております。 なぜか、ログアウト環境だと動かないのです。。。。 すみません、お知恵をお借りできればと思います!!
kei344

2017/05/06 14:23

ソースは確認していますか? デベロッパーツールでの確認でなく、ブラウザで「ページのソースを表示」で表示した上で、差分を取って確認してみてください。 【Webでdiff! - ウェブ上ですぐに使えるdiffツールです|株式会社エン・PCサービス】 https://www.en-pc.jp/tech/diff.php 【Web Diff】 http://labs.ceek.jp/diff/ 【difff《デュフフ》】 http://difff.jp/
samuraiman963

2017/05/06 14:35

ご返信ありがとうございます。 ご指摘のとおり、ページのソースを表示から確認いたしました。 また、以下にて、ログイン時とシークレットモード時で、 差分を検索しましたが、「top-head」 等のキーポイントの周辺は差異がありませんでした。 http://labs.ceek.jp/diff 引き続き、差分等の検証を続けさせていただきますが、 ログイン時、wordpressのツールバーの読み込みをONにしている状態だと、 動作し、OFFにするとログイン時でも動作しないことを確認いたしました。 その周辺も探索いたします。 他にも何かございましたらどうぞお力添えくださいませ。
guest

0

javascript

1(function($) { 2$(function() {

2つもいらないんじゃないかな?
通常は

javascript

1$(function() {

だけでよいと思います

javascript

1(function($) {

はライブラリ作る時使いますね

投稿2017/05/06 13:55

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

samuraiman963

2017/05/06 14:02

アドバイス、ありがとうございます。 早速試しましたが、だめでした。。。 JSの記述自体は汚いかもしれませんが、動作するようです。。 たったいま、wordpressログイン中の上部ツールバーを消す、 オプションをOnにしたところ、動作しないことが確認できました。 つまり、ツールバーのjsか何かを読み込めは動くのかと思い、奮闘中です。 何かお気づきの点ございましたらなにとぞご教授くださいませ。
退会済みユーザー

退会済みユーザー

2017/05/06 14:34

別々に表記以外で 2つ使う表記は見たことないので これ以外はわからないです
samuraiman963

2017/05/06 14:42

かしこまりました。 お忙しい中、ご助言ありがとうございました。 お気づきの点ございましたら、再度アドバイスいただきたく存じます。 どうもありがとうございました。
guest

0

header.phpもしくはfooter.phpに、scriptタグで直書きした時の挙動はどうでしょうか?

投稿2017/05/08 22:31

yukikp

総合スコア797

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

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

samuraiman963

2017/05/09 01:37

ありがとうございます。 一度じか書きしたのですが、ダメでした。 <div> <script type="text/javascript" src="/js/menu.js"></script> </div> といった記述で問題ありませんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問