Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › PCとmobileそれぞれのファイルを任意の場所に読み込むjQueryについて
- このトピックには25件の返信、1人の参加者があり、最後にまさおにより7年、 6ヶ月前に更新されました。
-
投稿者投稿
-
-
まさおゲスト
度々すみません。
PCとmobileそれぞれのファイルを任意の場所に読み込むjQueryについて
任意の箇所にテキストをPC・MOBILEで分けて表示のサンプル
上記の記事の#45201を説明通りにやったのですが、記事中に<div class=”insertText”></div>を記入してもpc.htmlファイル、mobile.htmlファイルを表示できません。
libフォルダをsimplicity2-childの中に作成し、pcとmobileのそれぞれのthmlファイルを作成しました。
jQueryは子テーマjavascript.jsへ記載をしました。
ファイル作成や内容はjQueryはコピペをしているので内容は一切変更しておりません。
どこが間違えているのかわからないのですが、上記のなかでミスが起こる可能性があるとしたらどこの箇所でしょうか?
-
hidekichiゲスト
質問のやられた内容だけ見ると問題はないように思いますが、
> libフォルダをsimplicity2-childの中に作成し、
> pcとmobileのそれぞれのthmlファイルを作成しました。この部分で、libフォルダを作った時にどのように作ったか(ftpで作ったとかそのアタリ)と言うことと、そのパーミッションは正しいかが1点、htmlファイルの中身はどういうものかと言うのが1点気になるところです。
<div class="insertText"></div>
を挿入したページでデベロッパーツールを開いた時にconsoleにエラーは出ていないかを見ると原因がつかめるかも知れません。 -
まさおゲスト
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)と赤文字で表示されていました。
これはパーミッションが間違っているのでしょうか?
-
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タグの中身があればよいだけです。
パーミッションも特別問題はないかと思います。 -
まさおゲスト
FTPで確認すると各htmlファイルの場所は下記のとおりとなっています。
/public_html/ドメイン/wp-content/themes/simplicity2-child/lib
もしかして、
/public_html/wp-content/themes/
ここに新たにsimplicity2の子テーマを入れてlibフォルダを作成しなくてはいけないのですか?
-
hidekichiゲスト
そのアドレスであればサンプルのままで問題ないと思います。
ちなみに
> デベロッパーツールのconsoleを確認したら
> 404 (Not Found)と赤文字で表示されていました。これはpc.htmlやmobile.htmlが404と言うことではないんですかね?
何が404であるのかを書いてもらうと原因がつかめるかも知れません。 -
まさおゲスト
jquery.js:4 (✕) GET http://ドメイン/archives/wp-content/themes/simplicity2-child/lib/mobile.html 404 (Not Found)
※(✕)は赤い丸に白色の✕
このように表示されています。
-
hidekichiゲスト
ちなみに、今サイドバースクロール追従や、トップへ戻るは動作してますか?
jquery.js:4の部分で、これは新しくjquery.jsと言うファイルを作られてそこにスクリプトが書いてあるんですかね?
このjquery.jsはどのようにして起動していますか? -
まさおゲスト
サイドバースクロール追従もトップへ戻るも正常に作動しています。
スクリプトは新しい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に問題があるんですかね?
-
hidekichiゲスト
子テーマを利用されているんですよね?
親テーマのみの利用の場合は、またパスが異なりますが…。 -
まさおゲスト
はい、子テーマを利用しています。
うまく標示されない原因はわからないですかね? -
hidekichiゲスト
うーむ、ここまでの流れを見ているに何一つ間違ったところがないんですよね。
後考えられるのは、他のエラーの道連れで動かないのかと思ったりもするんですが、サイドバー追従とかは動いているんですよね?
親テーマのjavascript.jsは動いていて、何かしらのエラーが子テーマのjavascript.jsの読み込みの前にあって、子テーマjavascript.jsが動いていないと言うのはアリえますけども。子テーマjavascript.jsに
(function($){ $(function(){ console.log("test"); }); });
と書き込んだらデベロッパーツールのコンソールに、testと表示されますよね?
-
まさおゲスト
イドバースクロール追従とトップへ戻るは問題なく作動しています。
子テーマjavascript.jsに
(function($){ $(function(){ console.log("test"); }); });
を記載したところ
デベロッパーツールのコンソールには何も表示されませんでした。
使用ブラウザはChromeでF12→Consoleを確認しました。
-
hidekichiゲスト
ということは最近トピックで流行りの何かしらの機能でエラーが出ているんだろうと思います。
テーマを最新版に変えて試してみてください。 -
まさおゲスト
親テーマを最新にしてみましたがダメでした。
(function($){ $(function(){ console.log("test"); }); });
そして、やはりこちらも表示されませんでした。
-
まさおゲスト
ちなみに、
【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】
ここからサイトを確認すると<div class=”insertText”></div>の箇所がしっかりと表示されています。
やはり私の設定が悪いのですかね?
-
hidekichiゲスト
最近のトピックであったのは、lazyloadを使用している場合、モバイルメニューですが、アコーディオンツーリーを使用している場合に問題が出てました。
これらは最新版で解決されていると思いますが、その他の機能で問題が出ている可能性もあります。
ご自身で解決できない場合は、2.1安定版を利用されるのが良いかと思います。それでも尚、子テーマjavascript.jsが読めないとなると、中の記述に問題があるかと思いますが、今回の質問のサンプル以外の部分かも知れませんので、さっくり行くなら該当のサイトアドレスを書いてもらえたら実際どうなっているかを見ることもできます。アドレスが公開できないようであれば、atomエディターやsublimeエディターなどと、それらのプラグインを導入してローカルで、問題点がないかどうかをチェックするべきです。
質問のスクリプトのサンプルソースはコピペされたんだと思うんですが、これはうちの環境でも動作しているのでスクリプト自体は問題ないと思います。その他の部分に全角スペースや日本語がそのまま入っていたり、何かしら読み込めない問題があるのかも知れません。
> <div class=”insertText”></div>が表示されている
これは記事中の読み分けたいファイルを読み込む箇所に書いてもらうタグで、逆に表示されているとおかしな部分です。divの中身は何もないので表示するべきものは何もないはずです。
ここらの記述にも全角が使われているのかも知れませんし(そのまま書いたとしたらクォートが全角になっているとか)、それよりも何よりもconsole.logでtestが表示されないことの方が僕的にはなぜだろう?と言う感じなんですよね。 -
まさおゲスト
> <div class=”insertText”></div>の箇所がしっかりと表示
紛らわしい書き方をしてしまってすみません。
このタグがそのまま表示されているわけではなく、【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】からサイトを確認すると、このタグを記述した箇所にしっかりとPC.thml、MOBILE.htmlファイルの内容が表示されているということです。javascript.jsに記述した他のプログラムはしっかりと作動しているので、
試しに今回質問しているもの以外はすべて削除してやってみたのですが、
それでもダメでした。全角表記がないかもう一度しっかりと確認してみたいと思います。
-
hidekichiゲスト
プレビュー画面で表示されているなら、単純にブラウザとかのキャッシュじゃないですかね?
プラベートウィンドウとか、シークレットウィンドウで試してみましたか? -
まさおゲスト
キャッシュ削除もプライベートウィンドウもダメでした。
このサイトの【RSSスクリプトのテスト】という記事で確認をしていただいてもよろしいでしょうか?
-
hidekichiゲスト
サイトの記事をトップページから開くと、
サイトアドレス/archives/なんちゃら
と言う形式になりますが、このarchivesが必ず入るなら、スクリプトのパスを変えないといけないかと思います。
#45578 ここで書いたとおり、パスを変更すれば表示できるかも。
例えば、
var siteChildTheme = "./archives/wp-content/themes/simplicity2-child/lib/",
このように変更したりでしょうか。
-
まさおゲスト
パスを
var siteChildTheme = "./archives/wp-content/themes/simplicity2-child/lib/",
に変更をしてキャッシュを削除してしばらく時間をおいてアクセスしてみましたが、やはり表示されませんでした。
(function($){ $(function(){ console.log("test"); }); });
こちらもコンソールには何も表示されません。
また、こちらのサイトに関しては【外観】→【カスタマイズ】→【レイアウト(全体・リスト)】よりサイトの表示を確認しても<div class=”insertText”></div>を記述した箇所には何も表示されません。
-
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";
こんなんでどうでしょうか?
-
まさおゲスト
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)のファイル内にて文字コード指定の記述をしなければならないのでしょうか?
-
hidekichiゲスト
文字化けしているのは、例えばpc.htmlをwindowsの何かしらのエディターで書くとsjis(shift-jis)になっているからではないですかね?
文字コードをutf-8にして書けばよいのではなかろうかと。
そこらは色々とぐぐってみてください。例えばwindowsを利用されている場合は、「windows テキストエディター utf8」とか。メモ帳でも設定できますよ。utf-8 改行コードはLFにしておけば間違いありません。改行コードはFTPのソフトで自動で変換してくれるものもあるかと思いますが、エディターで設定しておくほうが良いかと思います。
文字コードの指定をすると言うよりは、その文字コードでファイルを作ると言うことです。ATOMエディターとかは指定しなければ基本utfで作られると思います。
-
まさおゲスト
文字化けもなくしっかりと表示されるようになりました!
この度は本当にありがとうございました!ちょっとしたことで色々と変わってしまうんですね。
-
-
投稿者投稿