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

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

新規登録して質問してみよう
ただいま回答率
85.48%
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

解決済

1回答

1121閲覧

WordpressでjQueryがうまく動かない

nohohon

総合スコア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クリップ

投稿2018/09/11 05:48

編集2018/09/11 07:14

前提・実現したいこと

当方HTML・CSS程度しか分からない初心者なので、説明の不備があった申し訳ありません。
WordpressのTDCテーマ(OOPS!)を利用してサイトを作っているのですが、エラーにより動的な部分(自動で浮かび上がってくるはずの部分)の表示がされません。
スマホやタブレットではエラーが出ませんが、パソコンでの表示の場合のみ以下のようなエラーがデベロッパーツールで確認できました。

発生している問題・エラーメッセージ

jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1 Uncaught ReferenceError: init_post_list is not defined at HTMLDocument.<anonymous> ((index):330) at i (jquery.js?ver=1.12.4:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2) at Function.ready (jquery.js?ver=1.12.4:2) at HTMLDocument.K (jquery.js?ver=1.12.4:2)

(補足:関数の定義箇所/infinitescroll.js)

function init_post_list(target, maxPage, finishedMsg, imgPath) { var $container = jQuery('#js-infinitescroll'); $container.imagesLoaded(function(){ jQuery(target, '#js-infinitescroll').each(function(i){ jQuery(this).delay(i*150).queue(function(){ jQuery(this).addClass('is-active').dequeue(); }); }); $container.infinitescroll({ navSelector : '#js-load-post', nextSelector : '#js-load-post a', itemSelector : target, animate : true, extraScrollPx: 150, maxPage: maxPage, loading: { msgText : 'LOADING...', finishedMsg : finishedMsg, img: imgPath } }, // callback function(newElements, opts) { var $newElems = jQuery(newElements); $newElems.imagesLoaded(function(){ $newElems.each(function(i){ jQuery(this).delay(i*150).queue(function(){ jQuery(this).fadeTo('slow', 1).dequeue(); }); }); }); if (opts.maxPage && opts.maxPage <= opts.state.currPage) { jQuery(window).off('.infscr'); jQuery('#js-load-post').remove(); } }); }); }

(補足:関数の定義箇所/infinitescroll.min.js)

function init_post_list(e,i,t,a){var n=jQuery("#js-infinitescroll");n.imagesLoaded(function(){jQuery(e,"#js-infinitescroll").each(function(e){jQuery(this).delay(150*e).queue(function(){jQuery(this).addClass("is-active").dequeue()})}),n.infinitescroll({navSelector:"#js-load-post",nextSelector:"#js-load-post a",itemSelector:e,animate:!0,extraScrollPx:150,maxPage:i,loading:{msgText:"LOADING...",finishedMsg:t,img:a}},function(e,i){var t=jQuery(e);t.imagesLoaded(function(){t.each(function(e){jQuery(this).delay(150*e).queue(function(){jQuery(this).fadeTo("slow",1).dequeue()})})}),i.maxPage&&i.maxPage<=i.state.currPage&&(jQuery(window).off(".infscr"),jQuery("#js-load-post").remove())})})}

(補足:関数の呼び出し/(index))
呼び出しているのはここでしょうか…
この一文がうまく機能していないようです。
エラーメッセージにあった
at HTMLDocument.<anonymous> ((index):330)
の(index)の箇所をクリックすると、以下の一文がマークされたソースコードが出てきます。

init_post_list('.p-blog-list__item', 1, 'これ以上記事はございません', 'http://略');

試したこと

TDCテーマのほうに問い合わせ、原因の可能性となっている
・PHPのバージョンアップ
・プラグインの停止
・テーマの再インストール

は試しましたが、うまくいきませんでした。

補足情報(FW/ツールのバージョンなど)

Wordpressのバージョン 4.9.8–ja(最新)
テーマ「OOPS!」バージョン: 1.1.5(最新)
→デモサイト「http://tcdwp.info/tcd048/」を見ていただけると分かりやすいかと思いますが、トップページの最上部や途中にある製品が出てくるスライダーが動かず、何も表示されない状態になっています。

何か解決へのアドバイスをいただけるとありがたいです。
宜しくお願いいたします。

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

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

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

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

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

m.ts10806

2018/09/11 06:43

init_post_list()はどこに定義されていてどこから呼び出されているのでしょうか。
nohohon

2018/09/11 07:15

分かる範囲でそれらしいところを追記いたしました。宜しくお願いいたします。
guest

回答1

0

自己解決

エラーを起こしている文の消去と、スマホ、タブレット時のコードにあった関数の追加で一応形上は求めていた動きになりました。

投稿2018/09/12 06:46

nohohon

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問