WordPressのテーマ affinger4で JavaScriptが勝手に改変される

WordPressのテーマ affinger4に JavaScriptを追加するカスタマイズをしています。
その際、 JavaScriptが勝手に改変されるため、JavaScriptが動作しなくなります。
・JavaScriptが改変されるのを止める
・改変されても動作するようにする
にはどうすればいいでしょうか？

下記のテーブルソーターと言われる、表の情報を JavaScriptを使ってソートする、と言う機能の実装をしています。
http://tablesorter.com/docs/

javascript
1<script type="text/javascript" src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/js/jquery-latest.js"></script>
2<script type="text/javascript" src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/js/jquery.tablesorter.min.js"></script>
3
4<script>
5$(document).ready(function() 
6    { 
7        $("#myTable").tablesorter(); 
8    } 
9); 
10</script>
11

をテンプレート（single-type1.php）に編集しています。
ですが、実際に出力されるソースは、下記の様になります。

javascript
1<script pagespeed_orig_type="text/javascript" src="https://example.com/wp-content/themes/affinger4/js/jquery-latest.js" type="text/psajs" orig_index="14"></script>
2<script pagespeed_orig_type="text/javascript" src="https://example.com/wp-content/themes/affinger4/js/jquery.tablesorter.min.js" type="text/psajs" orig_index="15"></script>
3
4<script type="text/psajs" orig_index="16">$(document).ready(function()
5{$("#myTable").tablesorter();});</script>

出力される htmlファイルをローカルに保存し、JavaScriptのソースコードを改変される前のものに編集し直すと正しく動作しますので、JavaScriptが改変されることが動作しない原因であろうと考えています。

ちなみに、投稿画面にある「hedaに出力するコード※エスケープ処理されません」と書いてあるところに入力しても同様に改変されてしまいます。

また、テーブルのソートができればいいため、このテーブルソーターではなく、他のスクリプトを利用する方法でも全く問題はありません。

行動規範の内容に同意します

回答2件

ベストアンサー

mod_pagespeed

mod_pagespeed を導入していませんか。
「mod_pagespeed のバージョンアップで改善されるかも」という情報がありました。
バージョンアップで改善が見られないのであれば、mod_pagespeed を外してみて下さい。

ModPageSpeed's defer_javascript breaks <script> tags with inline events (for example onload=".." onerror="..") · Issue #1367 · pagespeed/mod_pagespeed

<script type="text/psajs">

mod_pagespeed の公式サイトでは、次のように説明されています。

Defer JavaScript

defer_javascript tries to defer JavaScript execution until page load. It defers this by changing the type and src attributes of <script> elements on the HTML page to data-pagespeed-orig-type and data-pagespeed-orig-src respectively. It also adds a new type attribute whose value is set to text/psajs. A window.onload handler is added to the HTML, which executes all the deferred scripts.

機械翻訳「defer_javascriptはページが読み込まれるまでJavaScriptの実行を延期しようとします。 HTMLページの<script>要素のtype属性とsrc属性をそれぞれdata-pages-peed-orig-typeとdata-pages-peed-orig-srcに変更することでこれを延期します。また、値がtext/psajsに設定された新しいtype属性を追加します。 window.onloadハンドラがHTMLに追加され、すべての遅延スクリプトが実行されます。」

mod_pagespeed はscript要素に無効な値「type="text/psajs"」を付与してスクリプトの実行を延期し、window.onload ハンドラによって、遅延されたスクリプトを元に戻して遅延実行しようとします。
挙動を伺うに、遅延されたスクリプトを元に戻す処理が正常に働いていないのでしょう。

Re: shishishi さん

投稿2017/08/05 01:34

think49

総合スコア18162

think49

2017/08/05 01:37

すみません。回答を書いている最中に投稿が寄せられたようで重複しました。

shishishi

2017/08/05 01:57

回答ありがとうございます。「mod_pagespeed」を OFFにして見ましたが、上手く動作しませんでした。ですが、表示されている HTMLのソースコードをそのままローカルにファイルとして保存して、それを表示させると正しく処理されます。ただ、ロードされるまでの時間がかかるのか、動作するようになるまでブラウザの faviconのところがぐるぐる回っています。これはどういう状況なのか、分かりますでしょうか？

行動規範の内容に同意します