PCとmobileそれぞれのファイルを任意の場所に読み込むjQueryについて

このトピックには25件の返信、1人の参加者があり、最後にまさおにより9年、 12ヶ月前に更新されました。

25件の返信スレッドを表示中

投稿者

投稿
- 2016年9月26日 6:12 AM #45570
  
  まさお
  ゲスト
  
  度々すみません。
  
  PCとmobileそれぞれのファイルを任意の場所に読み込むjQueryについて
  
  任意の箇所にテキストをPC・MOBILEで分けて表示のサンプル
  
  上記の記事の#45201を説明通りにやったのですが、記事中に<div class=”insertText”></div>を記入してもpc.htmlファイル、mobile.htmlファイルを表示できません。
  
  libフォルダをsimplicity2-childの中に作成し、pcとmobileのそれぞれのthmlファイルを作成しました。
  
  jQueryは子テーマjavascript.jsへ記載をしました。
  
  ファイル作成や内容はjQueryはコピペをしているので内容は一切変更しておりません。
  
  どこが間違えているのかわからないのですが、上記のなかでミスが起こる可能性があるとしたらどこの箇所でしょうか？
- 2016年9月26日 9:32 AM #45571
  
  hidekichi
  ゲスト
  
  質問のやられた内容だけ見ると問題はないように思いますが、
  
  > libフォルダをsimplicity2-childの中に作成し、
  > pcとmobileのそれぞれのthmlファイルを作成しました。
  
  この部分で、libフォルダを作った時にどのように作ったか(ftpで作ったとかそのアタリ)と言うことと、そのパーミッションは正しいかが1点、htmlファイルの中身はどういうものかと言うのが1点気になるところです。
  
  <div class="insertText"></div>を挿入したページでデベロッパーツールを開いた時にconsoleにエラーは出ていないかを見ると原因がつかめるかも知れません。
- 2016年9月26日 10:48 AM #45574
  まさお
  ゲスト
  libフォルダはFTPソフトを使用して、右クリック→フォルダ作成にて直接サーバー上に作成しました。
  
  現在の属性は755となっています。
  
  htmlファイルは下記の2パターンを試しましたがいずれも表示されませんでした。
```
<html>
 <head>
   <title>テスト</title>
 </head>
  <body>
   <h1>テストh1</h1>
    PCテスト
  </body>
</html>
```
  <p>PCテスト</p>
  
  htmlファイルの現在の属性は644となっています。
  
  デベロッパーツールのconsoleを確認したら404 (Not Found)と赤文字で表示されていました。
  
  これはパーミッションが間違っているのでしょうか？
- 2016年9月26日 1:10 PM #45578
  hidekichi
  ゲスト
  not foundなら、
  
  var siteChildTheme = "./wp-content/themes/simplicity2-child/lib/"
  
  この部分のpathが正しいかどうかをまず確認してみてください。
  simplicity2-child直下にlibディレクトリがあるかどうか、等ですね。
```
simplicity2-child
├[images]
├[lib]
│　├ pc.html
│　└ mobile.html
├[skins]
├ style.css
├ javascript.js
```
  こんな感じです。
  
  また各fileのhtml部分は、
```
<h1>テスト</h1>
PCテスト
```
  これだけでよいです。なので下の方ですね。
  ページの途中で読み込むのでbodyタグやtitleタグ等はいりません。bodyタグの中身があればよいだけです。
  パーミッションも特別問題はないかと思います。
- 2016年9月26日 6:18 PM #45612
  
  まさお
  ゲスト
  
  FTPで確認すると各htmlファイルの場所は下記のとおりとなっています。
  
  /public_html/ドメイン/wp-content/themes/simplicity2-child/lib
  
  もしかして、
  
  /public_html/wp-content/themes/
  
  ここに新たにsimplicity2の子テーマを入れてlibフォルダを作成しなくてはいけないのですか？
- 2016年9月26日 11:58 PM #45619
  
  hidekichi
  ゲスト
  
  そのアドレスであればサンプルのままで問題ないと思います。
  
  ちなみに
  
  > デベロッパーツールのconsoleを確認したら
  > 404 (Not Found)と赤文字で表示されていました。
  
  これはpc.htmlやmobile.htmlが404と言うことではないんですかね？
  何が404であるのかを書いてもらうと原因がつかめるかも知れません。
- 2016年9月27日 12:53 AM #45623
  まさお
  ゲスト
```
jquery.js:4
(✕) GET http://ドメイン/archives/wp-content/themes/simplicity2-child/lib/mobile.html 404 (Not Found)
```
  ※(✕)は赤い丸に白色の✕
  
  このように表示されています。
- 2016年9月27日 1:30 AM #45626
  
  hidekichi
  ゲスト
  
  ちなみに、今サイドバースクロール追従や、トップへ戻るは動作してますか？
  
  jquery.js:4の部分で、これは新しくjquery.jsと言うファイルを作られてそこにスクリプトが書いてあるんですかね？
  このjquery.jsはどのようにして起動していますか？
- 2016年9月27日 8:55 AM #45634
  まさお
  ゲスト
  サイドバースクロール追従もトップへ戻るも正常に作動しています。
  
  スクリプトは新しいjsファイルを作ったのではなく、
  
  【外観】→【テーマ編集】→【javascript.js】に書き込んでいます。
  
  スマホ表示でconsoleを確認
```
jquery.js:4
(✕) GET http://ドメイン/archives/wp-content/themes/simplicity2-child/lib/mobile.html 404 (Not Found)
```
  PC表示でconsoleを確認
```
(✕) http://ドメイン/archives/wp-content/themes/simplicity2-child/lib/pc.html
Failed to load resource: the server responded with a status of 404 (Not Found)
```
  ※(✕)は赤い丸に白色の✕
  
  このような状況です。
  
  これはlibフォルダのpc(mobile).htmlに問題があるんですかね？
- 2016年9月27日 10:55 AM #45644
  
  hidekichi
  ゲスト
  
  子テーマを利用されているんですよね？
  親テーマのみの利用の場合は、またパスが異なりますが…。
- 2016年9月27日 12:02 PM #45649
  
  まさお
  ゲスト
  
  はい、子テーマを利用しています。
  うまく標示されない原因はわからないですかね？
- 2016年9月27日 12:58 PM #45652
  hidekichi
  ゲスト
  うーむ、ここまでの流れを見ているに何一つ間違ったところがないんですよね。
  後考えられるのは、他のエラーの道連れで動かないのかと思ったりもするんですが、サイドバー追従とかは動いているんですよね？
  親テーマのjavascript.jsは動いていて、何かしらのエラーが子テーマのjavascript.jsの読み込みの前にあって、子テーマjavascript.jsが動いていないと言うのはアリえますけども。
  
  子テーマjavascript.jsに
```
(function($){
  $(function(){
    console.log("test");
  });
});
```
  と書き込んだらデベロッパーツールのコンソールに、testと表示されますよね？
- 2016年9月27日 3:01 PM #45655
  まさお
  ゲスト
  イドバースクロール追従とトップへ戻るは問題なく作動しています。
  
  子テーマjavascript.jsに
```
(function($){
  $(function(){
    console.log("test");
  });
});
```
  を記載したところ
  
  デベロッパーツールのコンソールには何も表示されませんでした。
  
  使用ブラウザはChromeでF12→Consoleを確認しました。
- 2016年9月27日 4:20 PM #45658
  
  hidekichi
  ゲスト
  
  ということは最近トピックで流行りの何かしらの機能でエラーが出ているんだろうと思います。
  テーマを最新版に変えて試してみてください。
- 2016年9月27日 10:30 PM #45672
  まさお
  ゲスト
  親テーマを最新にしてみましたがダメでした。
```
(function($){
  $(function(){
    console.log("test");
  });
});
```
  そして、やはりこちらも表示されませんでした。
- 2016年9月27日 10:42 PM #45673
  
  まさお
  ゲスト
  
  ちなみに、
  
  【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】
  
  ここからサイトを確認すると<div class=”insertText”></div>の箇所がしっかりと表示されています。
  
  やはり私の設定が悪いのですかね？
- 2016年9月27日 11:40 PM #45676
  
  hidekichi
  ゲスト
  
  最近のトピックであったのは、lazyloadを使用している場合、モバイルメニューですが、アコーディオンツーリーを使用している場合に問題が出てました。
  
  これらは最新版で解決されていると思いますが、その他の機能で問題が出ている可能性もあります。
  ご自身で解決できない場合は、2.1安定版を利用されるのが良いかと思います。それでも尚、子テーマjavascript.jsが読めないとなると、中の記述に問題があるかと思いますが、今回の質問のサンプル以外の部分かも知れませんので、さっくり行くなら該当のサイトアドレスを書いてもらえたら実際どうなっているかを見ることもできます。
  
  アドレスが公開できないようであれば、atomエディターやsublimeエディターなどと、それらのプラグインを導入してローカルで、問題点がないかどうかをチェックするべきです。
  
  質問のスクリプトのサンプルソースはコピペされたんだと思うんですが、これはうちの環境でも動作しているのでスクリプト自体は問題ないと思います。その他の部分に全角スペースや日本語がそのまま入っていたり、何かしら読み込めない問題があるのかも知れません。
  
  > <div class=”insertText”></div>が表示されている
  
  これは記事中の読み分けたいファイルを読み込む箇所に書いてもらうタグで、逆に表示されているとおかしな部分です。divの中身は何もないので表示するべきものは何もないはずです。
  ここらの記述にも全角が使われているのかも知れませんし(そのまま書いたとしたらクォートが全角になっているとか)、それよりも何よりもconsole.logでtestが表示されないことの方が僕的にはなぜだろう？と言う感じなんですよね。
- 2016年9月28日 11:34 PM #45701
  
  まさお
  ゲスト
  
  > <div class=”insertText”></div>の箇所がしっかりと表示
  
  紛らわしい書き方をしてしまってすみません。
  このタグがそのまま表示されているわけではなく、【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】からサイトを確認すると、このタグを記述した箇所にしっかりとPC.thml、MOBILE.htmlファイルの内容が表示されているということです。
  
  javascript.jsに記述した他のプログラムはしっかりと作動しているので、
  試しに今回質問しているもの以外はすべて削除してやってみたのですが、
  それでもダメでした。
  
  全角表記がないかもう一度しっかりと確認してみたいと思います。
- 2016年9月29日 12:02 AM #45702
  
  hidekichi
  ゲスト
  
  プレビュー画面で表示されているなら、単純にブラウザとかのキャッシュじゃないですかね？
  プラベートウィンドウとか、シークレットウィンドウで試してみましたか？
- 2016年9月29日 12:09 AM #45703
  
  まさお
  ゲスト
  
  キャッシュ削除もプライベートウィンドウもダメでした。
  
  http://juggler-meshi.com/
  
  このサイトの【RSSスクリプトのテスト】という記事で確認をしていただいてもよろしいでしょうか？
- 2016年9月29日 12:54 AM #45704
  
  hidekichi
  ゲスト
  
  サイトの記事をトップページから開くと、
  
  サイトアドレス/archives/なんちゃら
  
  と言う形式になりますが、このarchivesが必ず入るなら、スクリプトのパスを変えないといけないかと思います。
  
  #45578 ここで書いたとおり、パスを変更すれば表示できるかも。
  
  例えば、
  var siteChildTheme = "./archives/wp-content/themes/simplicity2-child/lib/",
  
  このように変更したりでしょうか。
- 2016年9月29日 10:54 AM #45710
  まさお
  ゲスト
  パスを
  
  var siteChildTheme = "./archives/wp-content/themes/simplicity2-child/lib/",
  
  に変更をしてキャッシュを削除してしばらく時間をおいてアクセスしてみましたが、やはり表示されませんでした。
```
(function($){
  $(function(){
    console.log("test");
  });
});
```
  こちらもコンソールには何も表示されません。
  
  また、こちらのサイトに関しては【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】よりサイトの表示を確認しても<div class=”insertText”></div>を記述した箇所には何も表示されません。
- 2016年9月29日 11:38 AM #45713
  hidekichi
  ゲスト
  正しいパスは、
  サイトアドレス/wp-content/themes/simplicity2-child/lib/pc.html
  
  で間違いないことが判明しました。で現在送信されているパスは、
  
  サイトアドレス/archives/arcechives/wp-content/themes/simplicity2-child/lib/pc.html
  
  になっています。ということは、例えば、
  
  ./wp-content/...../pc.html
  
  と設定していたパスは、htaccess等のリライトルールで、勝手に
  サイトアドレス+archives+パス
  と言う事になってしまうんでしょう。そうなると相対アドレスは使えないので、
  
  http://サイトアドレス/wp-content/...略.../...略.../pc.html
  
  というような完全なパスに変更しないといけませんね。
  他の方法として、
```
var domain = location.protocol + "//" + location.host;
var siteChildTheme = "/wp-content/themes/simplicity2-child/lib/",
    pcFile = domain + siteChildTheme + "pc.html",
    mobileFile = domain + siteChildTheme + "mobile.html";
```
  こんなんでどうでしょうか？
- 2016年9月29日 12:41 PM #45714
  まさお
  ゲスト
```
var domain = location.protocol + "//" + location.host;
var siteChildTheme = "/wp-content/themes/simplicity2-child/lib/",
    pcFile = domain + siteChildTheme + "pc.html",
    mobileFile = domain + siteChildTheme + "mobile.html";
```
  こちらで試したところしっかりと表示されました！
  
  しかし文字化けをしてしまっているのですが、これはpc.html(mobile.html)のファイル内にて文字コード指定の記述をしなければならないのでしょうか？
- 2016年9月29日 1:48 PM #45716
  
  hidekichi
  ゲスト
  
  文字化けしているのは、例えばpc.htmlをwindowsの何かしらのエディターで書くとsjis(shift-jis)になっているからではないですかね？
  
  文字コードをutf-8にして書けばよいのではなかろうかと。
  そこらは色々とぐぐってみてください。
  
  例えばwindowsを利用されている場合は、「windows テキストエディター utf8」とか。メモ帳でも設定できますよ。utf-8 改行コードはLFにしておけば間違いありません。改行コードはFTPのソフトで自動で変換してくれるものもあるかと思いますが、エディターで設定しておくほうが良いかと思います。
  
  文字コードの指定をすると言うよりは、その文字コードでファイルを作ると言うことです。ATOMエディターとかは指定しなければ基本utfで作られると思います。
- 2016年9月29日 9:10 PM #45720
  
  まさお
  ゲスト
  
  文字化けもなくしっかりと表示されるようになりました！
  この度は本当にありがとうございました！
  
  ちょっとしたことで色々と変わってしまうんですね。
投稿者

投稿