wordpressにて、プラグイン「コンタクトフォーム7」と用意したjQueryプラグインを一緒に使用したいです。

Question

こんにちは。

ワードプレスにてプラグインのContact Form 7とこちらが用意したjQueryプラグインが競合し、Contact Form 7の方で「フォームの送信ボタンクリック後、回転する矢印のアイコンは現れるがその状態がずっと続きメッセージを送れない」という状況になってしまいます。

過程として、まず「jquery.toc.js」というファイルにコードを記入し、FTPソフトにて「/wp-content/themes/使用しているテーマ/js」に入れました。「jquery.toc.js」は記事中の見出しを集めて目次にするプラグインです。

コードを記入した場所は「jquery.toc.js」と「header.php」内で記入した内容は以下になります。

◆jquery.toc.js内（）

jQuery.fn.toc = function(depth) {
	return this.each(function() {
		var headers, re, i;
		headers = [];
		re = new RegExp("h([3-" + depth + "])", "i");
		i = 0;
		jQuery("*").each(function() {
			var ms;
			ms = jQuery(this).get(0).tagName.match(re);
			if(ms) {
				jQuery(this).prop("id", "header" + i);
				headers.push([
					parseInt(ms[1]),
					"<a href='#header" + i + "'>" + jQuery(this).html() + "</a>"
				]);
				i++;
			}//if(ms) {
		});//jQuery("*").each(function() {
		jQuery(this).append(array2ul(headers));
	});//return this.each(function() {
}//function(depth)

function array2ul(a) {
	var t, exlevel, level, i, j;
	t = "";
	exlevel = 0;
	for(i = 0; i <= a.length; i++) {
		level = i < a.length ? a[i][0] : 0;
		for(j = 0; j < Math.abs(exlevel - level); j++) {
			t += exlevel < level ? "<ul>" : "</ul>";
		}
		t += i < a.length ? "<li>" + a[i][1] + "</li>" : "";
		exlevel = level;
	}
	return t;
}

header.php内

<script type="text/javascript" src="http://xn--eckvb0amy1cyjzaet8p0156agg9b1cwgxxxb.net/wp-content/themes/tplzanmai_3cr_biz_v1.1/js/jquery.toc.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery("#mokuji").toc(6);
});
</script>
	
<!-- 以下は目次をクリックした時に自動スクロールしながらその見出しまで飛ばすためのコードです -->
<script>
jQuery(function(){
   jQuery('a[href^=#]').click(function() {
      var speed = 400;
      var href= jQuery(this).attr("href");
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top - 60;
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

---

「jquery.toc.js」ファイルとheaderに記載したコードを削除する事によってコンタクトフォーム7が問題なく動作し、コンタクトフォーム7を無効化すると上記のjQueryプラグインが問題なく動作するので、上記の記述が問題だと考えました。

---

試したことやその他状況
・上記のようにコードの$をjQueryに変えた。
・目次を作っていない記事でも同様の問題が起こる。
・chromeの要素検証のconsoleタブの状況

問題の解決をしたいです。ご助力お願い致しますm(_ _)m

Answer 1

コンタクトフォーム7を使うページでjquery.toc.jsを読み込まないようにすればいいと思います。

大抵、問い合わせフォームは固定ページで使うと思うので

<?php if( is_page( '問い合わせページのIDなど' ) ) { ?>
<script type="text/javascript" src="http://xn--eckvb0amy1cyjzaet8p0156agg9b1cwgxxxb.net/wp-content/themes/tplzanmai_3cr_biz_v1.1/js/jquery.toc.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#mokuji").toc(6);
});
</script>
<?php } ?>

とすればいいと思いますが、header.phpにベタ書きするのは不細工だしメンテナンス性に欠けるのでfunctions.phpに定義する方が好ましいです。

例

function theme_name_scripts() {
    if( is_single() ) { 
        wp_enqueue_script( 'toc', get_template_directory_uri() . '/js/jquery.toc.js' );
    }
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

こうすることでheadre.phpに書き込まなくても<script type="text/javascript" src="http://xn--eckvb0amy1cyjzaet8p0156agg9b1cwgxxxb.net/wp-content/themes/tplzanmai_3cr_biz_v1.1/js/jquery.toc.js"></script>をヘッダに出力します。

関数リファレンス/wp enqueue script
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

子テーマの場合は
関数リファレンス/get stylesheet directory uri
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_stylesheet_directory_uri

尚、自動スクロールを記事ページでしか使わないのであれば

<?php if( is_single() ) { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#mokuji").toc(6);
});
</script>

<!-- 以下は目次をクリックした時に自動スクロールしながらその見出しまで飛ばすためのコードです -->
<script>
jQuery(function(){
   jQuery('a[href^=#]').click(function() {
      var speed = 400;
      var href= jQuery(this).attr("href");
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top - 60;
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
<?php } ?>

こんな風にしておけば不必要に出力しません。

条件分岐タグ
https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

Comments

[tokumei_a]

回答有り難うございます。
頂いたfunctions.phpに記入するコードをそのままコピーして更新しようとした所、
wp_enqueue_script( 'toc', get_template_directory_uri() . '/js/jquery.toc.js, array(), '1.0.0', true );
の行のところがエラーと出て更新できませんでした。
詳しくないので、自力では解決できません…
ご助言お願い致します。

[tokumei_a]

> 尚、自動スクロールを記事ページでしか使わないのであれば

以降に書かれたコードは大変参考になりました！
ありがとうございます。

[退会済みユーザー]

良く見たら余計なことを書いていたので訂正しました。

[tokumei_a]

エラーは無くなりました！

ただ、言葉足らずで申し訳ありません、固定ページ以外で質問欄に記載したコードを出力したいのですが（目次は固定ページ以外で出力し、コンタクトフォーム7を固定ページのみで使用する場合です。）、固定ページ以外のページにこれらコードを出力する方法があれば教えていただきたいです！

[退会済みユーザー]

意味は分かってましたがそのままコピペで変なことになってたので修正しました。