スクロール追従領域にて不具合？仕様？

デフォルトで使う分には問題ないですが、css等でfloatしている要素に高さをもたせたりすると、そうなることがあります。またリサイズ時もそうなることがあったように思います。

現在判明している問題点 2016/5/15版 | GitHub wiki
ここでも書いてますけども、まぁ誰も気がついてないでしょうね（笑）

タイムリーにも今日作ってたスクロールのスクリプトがあったりします。
オリジナルのスクロール追従を使わない方法 part1 | codepen
オリジナルのスクロール追従を使わない方法 part2 | codepen

part1はposition: fixedとabsoluteを切り替える方法、part2はtransformによる追従。
part1はスクロールしても位置が固定されるため追従と言うよりはstickyと言うタイプでしょうか。part2はfollowの方で、スクロールを追いかけてきます。

あくまで、オリジナルの親テーマjavascript.jsのスクロール追従をなんとか使わずに別のスクリプトで置き換えるためのサンプルです。なんとか使わないと言っても、基本裏で動作はしています。本来であれば、親テーマjavascript.jsのスクロール追従部分をコメントアウトするのが良いかと思うんですが、アップデートで毎回するのは面倒なのでなんとかならないものかと書いたものです。

ここは本当に課題なんですよ。追従させるのが良いのか固定するのが良いのか、またそのやり方も色々ありまして、何をどうしたいかで方法が変わったりします。
海外のサイトで、メールアドレスを登録しろだとか、オススメのサイトの案内とか出るのがありますが、邪魔ですよね。Googleもpopupする意味のない広告まがいのものが出るサイトは評価を下げるとか言ってたようですし、どうするのが良いのだろうと結構頻繁に考えていますが、まだ答えには至らずと言う感じです。

お二人ともありがとうございます。
いつのまにか直ってました。（返信通知のメールってこないんですか？）

hidekichiのサイトのGoogleCDNのJqueryを使うコードを入れると追尾しなくなるのですが、おそらくJqueryバーションが原因だと思います。
僕は3.1.1を使用しているのですがいくつを使えば正常に動くのでしょうか。

/*** GoogleCDN ***/
add_action( 'init', 'maybe_load_jquery_from_google', 1 );
function maybe_load_jquery_from_google() {
 
	if( is_admin() )
		return;
	
	$protocol = is_ssl() ? 'https:' : 'http:';
	$url = $protocol . '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js';
	$version = '2.2.0';
	
	if ( true == get_transient( 'google_jquery_available' ) ) {
		
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', $url, array(), $version );
		
	} else {
		
		$resp = wp_remote_head( $url );
		
		if ( ! is_wp_error($resp) && 200 == $resp['response']['code'] ) {
	
			wp_deregister_script( 'jquery' );
			wp_register_script( 'jquery', $url, array(), $version );
			
			set_transient( 'google_jquery_available', true, 60 * 30 );
		} 
	}
}

また、関係ない話になりますがSNSの追尾ウィジェット？がおかしいです。対処法など教えていただけると嬉しいです。

jqueryの3.0.0以上を使う場合は、親テーマjavascript.jsの追従部分と、masonryあたりの
「size()」と、「$(…).load()」を修正する必要があります。

size()は、if ( xxx.size() )とかになっていたと思うので、これを

if ( xxx.length )と修正します。

$(…).load()は、単純に、

$(...).on("load", function(){...})

となるように、修正します。4つか5つぐらい修正点があったと思いますが定かではありません。何かしらのエディターの検索機能で、「.size()」、「).load(」みたいのを検索すると修正点がすぐにわかるようになるかと思います。

3.0.0以上にすると、問題となる箇所はデベロッパーツールのコンソールで、何かしら今までとは違うエラーのような多分黄色っぽいメッセージが表示されると思います。そこで何が問題かを見てその箇所を3.0.0でも動作するようにすればokです。
$.size()と、$.loadは3から廃止になりました。

これらがよくわからないと言う場合は、「google cdn」とググって出てくるGoogleのライブラリで、jQueryから2系の最終バージョンを #46052のスクリプトで指定すればよいかと思います。

わいひらさん
どうやらそのようです。何度もメール購読しているつもりなのですが。。。

不具合でしたかありがとうございます。
現在のところ、きちんと表示されていますが教えていただいたコードは追加しておきたいと思います。

hidekichiさん
詳しく教えていただきありがとうございます。
親テーマを変更するのには抵抗があるので、2.2.4として設定したいと思います。
SimplicityがjQuery3.1.1になったら3.1.1にすればいいんですね。
どこかでjQuery3.1.1の方が軽いと聞いたような気がするのですがどうなのでしょうか。

/*** GoogleCDN ***/
add_action( 'init', 'maybe_load_jquery_from_google', 1 );
function maybe_load_jquery_from_google() {
 
	if( is_admin() )
		return;
	
	$protocol = is_ssl() ? 'https:' : 'http:';
	$url = $protocol . '//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js';
	$version = '2.2.4';
	
	if ( true == get_transient( 'google_jquery_available' ) ) {
		
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', $url, array(), $version );
		
	} else {
		
		$resp = wp_remote_head( $url );
		
		if ( ! is_wp_error($resp) && 200 == $resp['response']['code'] ) {
	
			wp_deregister_script( 'jquery' );
			wp_register_script( 'jquery', $url, array(), $version );
			
			set_transient( 'google_jquery_available', true, 60 * 30 );
		} 
	}
}

jQuery3.1.1が前の2系に比べて軽くなったかどうかは定かではありませんが、マイクロソフトがIEの古いバージョンのサポートを終えたことでそれら互換性が必要なくなり、不要な関数の削除やら最適化が行われたと思うので微量ながら軽くはなっているだろうと思います。

確実に軽くなったのはスリムビルドというajaxを除いたバージョンが出たため、ajaxを利用しない場合はそれで軽いバージョンを利用することができます。gzipでだいたい普通のが30kbぐらいかと思いますが、スリムビルドは6kbぐらいだったと思います。

若干挙動が変わりる場合がありますがzepto.jsというのであればjQueryとほぼ同じ使い方でより軽く利用することも可能です。またカスタムビルドで必要な機能だけ利用することもできるので、jQueryの重さが気になるようなサイトではモバイルの場合だけzepto.jsを利用すると言うサイトもあるようです。

まぁよほどjQueryを多用しない限りそこまで気にすることはないですけどね。
一番軽く速くするためには生のjavascript、いわゆるvanilla jsで書くことです。一般的なブラウザなら100%動作して最軽量です（笑）

jQueryは、生のjavascriptを便利に使うためだけではなく、各ブラウザの挙動を同一に動作させるような事をしているわけです。これを自身で書くとなると案外面倒くさいですよ。

ちなみにうちのサイトはjQuery3.1.1で動作しています。

hidekichiさん
なるほど（全然理解してないですが笑）
なかなかzepto.jsへ対応するのも大変そうなので、jQuery2.4.1でいきたいと思います。
毎回詳しく説明していただいて本当にありがとうございます。
ところでメールが来ているのでしょうか。Gmailでは受け取れないなんてことはあるのでしょうか。

2.2.4でも動作してないのですがどういうことでしょうか。。。

デベロッパツールでhtmlを見て、footerあたりのスクリプトにdeferなりasyncが入ってるものがあったらそれが何か書いてもらっても良いですか？
スクリプトタグをここに書くと投稿できないと思うので、xxx.min.js deferみたいな感じで良いです。

何もそれらがない場合は、コンソールでエラーがでてないかを確認して出てたら書いてください。
サイトアドレス書いてもらえれば見に行きますけども。

hidekichiさん

あ。。。async deferはfunctions.phpにこのようなコードを入れて入れさせてます。。。
PhotoとLightboxが併用で聞くなってたのもこのせいでしょうか。

あ、URLは
http://2001y.jpn.org

/*** JS async defer ***/
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
function replace_script_tag ( $tag ) {
    return str_replace( "type='text/javascript'", 'async defer', $tag );
}

add_filter( 'script_loader_tag', 'replace_script_tag' );

function autoblank($text) {
$return = str_replace('<a', '<a target="_blank"', $text);
return $return;
}
add_filter('the_content', 'autoblank');

わいひらさん

そうですか。。。復旧応援してますw

#46258のを見ると、jQuery以外はasyncが入るっぽいですが、asyncが入れられるのはそれ単体で、仮にそのスクリプトがページのどこで読み込まれたとしても動作するスクリプトのみです。

asyncは読み込めるようになったら読み込むと言う、読み込み順を考慮しないので、それ単体で動作しないと読み込み順で問題が出ます。
deferは遅延読み込みで、DOMのレンダリング後読み込むため一応順番通りに読み込まれるわけですが、deferもasyncもついていないスクリプトがあると順番がおかしくなります。

async deferとスクリプトタグに書いた場合は、ブラウザがasyncをサポートしていない場合にdeferで読み込むと言うことになると思うので、大抵の場合はasyncで読み込もうとします。するとまぁ順番の保証はされないわけです。
最低限jQueryが読み込まれてからその他を動作させるためには、その他もdeferでjQueryより後に記述がないといけないと言うことです。

またdeferはDOMのレンダリング完了後、つまりドキュメントの読み込みができたらと言うことなのでつまりはfooterでスクリプトを読み込むのと同じようなことです。多くの場合、jQueryはDOMの操作をすることが目的ですからjQueryを読み込むのは基本deferの方が良いように思います。ただjQuery自体は単なるライブラリでそれがasyncで読まれたから問題が出ると言うわけではありません。

問題となるのはjQueryが読み込まれないと動作しないスクリプトです。つまりはjQueryに依存しているスクリプトですね。これらスクリプトにjQueryが読み込まれていなかった場合、何秒後に再度読み込むと言うような仕組みがあれば何も問題ではないのですがたいていはそんなことをしませんから、jQueryに依存しているスクリプトは基本deferで、かつjQueryより後で読み込まないといけません。

wordpressのwp_enqueue_scriptはjQueryに依存していると設定されるスクリプトはjQueryよりも後で書き込まれます。ヘッダで読み込むにせよ、フッタで読み込むにせよ必ずjQueryよりも後に書き込まれるわけですが、asyncやdeferが入るとその順番が保証されなくなってしまうため、それらを統一する必要があります。

手でスクリプトタグを書けば何も問題ないわけですが、自動でやっているwordpressの場合はどれをasyncにしてどれをdeferにするかを指定しなければならず、全体的にasync deferを入れる設定と言うのは動作が保証されるわけではありません。
で、どうしてもasync、deferを入れたいのであれば多分まだ親テーマにあると思いますが(なければこの記事で)、親テーマfunctions.phpのfunction defer_async_scripts( $tag, $handle, $src )部分でハンドルを調べて登録してください。

ハンドルはwp_enqueue_scriptで自身が指定したものはわかると思いますが、プラグインで読み込んでいるものはわからないかも知れないので、上記リンクからそれらを表示するプラグインをダウンロードしてハンドルを調べてください。

もしこれらがわからない場合は、今現在利用されているasync deferを入れるスクリプトを一旦外してどうなるかを確認してみてください。

サイトを見せてもらった所エラーは出ていませんが、autoptimizeが使われているので、どのようなスクリプトがどのようにというのはわかりません。async deferを入れるスクリプトを外した後、まだ問題があるようならautoptimizeもキャッシュをクリアして、一旦停止で確認したほうが良いです。

完全に動作するようになってからautoptimizeにしろキャッシュにしろは有効にするべきです。

hidekichiさん

などほど、実はこの記事を見ていたようでプラグインは導入済みでしたw
使い方がわからず入れっぱなしですが。autoptimizeキャッシュをクリアにするとこんな感じになりました。

無事に追尾するようになりました。

（なんかホームズれてますね。。。。。。。。）
こちらは確認用のプラグインなだけなら終わったら抜いてしまってよろしいのでしょうか。

autoptimizeをぬしたら再発してしまいました。
ホームの位置がずれるのもautoptimizeが理由でした。

ハンドルを調べるプラグインは調べるためだけなので、確認が終わったら削除しても問題ありません。

ホームがずれているのはおそらくブラウザがIEだからかと思います。
firefoxやchromeではズレません。

ちなみに、2001Yさんのサイトでfirefoxのスクラッチパッドにて、
document.querySelector("script").removeAttribute("async");

として、スクリプトタグからasycを取れば試行回数は少ないですがjQueryは100%動作しました。

jQueryが動作しない原因はasyncにあるようです。

ただし、asyncでも動作しないわけではないので、様子を見ながら問題が頻発するようであれば色々考慮してみてください。

なるほど、わざわざ検証していただいてありがとうございました。
document.querySelector("script").removeAttribute("async");
こちらをfunctions.phpに追加すればいいのでしょうか。それとも

/*** JS async defer ***/
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
function replace_script_tag ( $tag ) {
    return str_replace( "type='text/javascript'", 'async', $tag );
}

add_filter( 'script_loader_tag', 'replace_script_tag' );

function autoblank($text) {
$return = str_replace('<a', '<a target="_blank"', $text);
return $return;
}
add_filter('the_content', 'autoblank');

こうすればいいのでしょうか。初めの方の管理者の対象外なのは必要ないのですが。

いや、そのスクリプトはなんにも関係ないです。

単純にasyncではなくdeferでやれば間違いないと言う話で、レンダリングブロックや読み込み速度を気にする前にまずは正しく動作する環境でそれぞれのスクリプトをテストしてみて動作するのを確認した後に、asyncなりdeferなりでレンダリングブロックを回避して、そこでも正しく動作するのであればAutoptimizeなりキャッシュなりを使うと言う事なんですが、自動で縮小化、結合と言うのは意図とせぬ動作をする場合があるので、なるべく自分で手動でやるほうが良いです。

手動でやる場合はnode.jsを入れてgulpなどで縮小を自動でやる場合に、エラーをチェックしながらやるべきです。縮小化できないエラーがでると言うことは元のスクリプトに何かしら不備があり、それを修正しないといけないわけなので。
もしエラーが出ずに縮小化できたとしても、それをブラウザで読み込んだら動作しない場合もあります。事前チェックはプログラムの構文的に問題がないかどうかをチェックしているだけで、プログラム自体に問題がある場合もあるわけですので実際に試してみないとわかりません。

/*** JS async defer ***/

/*
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
function replace_script_tag ( $tag ) {
    return str_replace( "type='text/javascript'", 'async', $tag );
}

add_filter( 'script_loader_tag', 'replace_script_tag' );
*/

function autoblank($text) {
$return = str_replace('<a', '<a target="_blank"', $text);
return $return;
}
add_filter('the_content', 'autoblank');

とりあえず、ここら(コメントアウト部分)は現段階では不要かと。

hidekichiさん
ありがとうございます！