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

Simplicityの特徴 フォーラム 不具合報告 スクロール追従領域にて不具合?仕様?

  • このトピックには23件の返信、2人の参加者があり、最後に2001Yにより5年、 6ヶ月前に更新されました。
23件の返信スレッドを表示中
  • 投稿者
    投稿
    • #44976 返信
      2001Y
      ゲスト

      スクロール追従領域で指定したウィジェットがフッターに若干かぶるのですが、仕様なのでしょうか。
      もし仕様なようでしたら、どうしたら横の記事に揃えられるのでしょうか。

    • #44979 返信
      わいひら
      キーマスター

      ちょっと見てみた感じ、当サイトはかぶってないのですが、
      不具合ページのURLを掲載していただいていいですか。

    • #44983 返信
      hidekichi
      ゲスト

      デフォルトで使う分には問題ないですが、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する意味のない広告まがいのものが出るサイトは評価を下げるとか言ってたようですし、どうするのが良いのだろうと結構頻繁に考えていますが、まだ答えには至らずと言う感じです。

    • #46052 返信
      2001Y
      ゲスト

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

      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の追尾ウィジェット?がおかしいです。対処法など教えていただけると嬉しいです。

    • #46058 返信
      わいひら
      キーマスター

      返信通知のメールってこないんですか?

      もしかして、トピックの購読をして返信がついても、メールが来ませんでしたか?
      なんか、最近メールを送信する機能が機能していないかもしれません。Jetpackのメール送信機能とかも。
      今のところ原因は分かっていません。(時期的には、クラウドフレアを導入したあたりからかも。関係あるのかはわからないのですが)
      メールが届かないようなら、紛らわしいので「購読」の表示部分はオフにしておこうと思います。

    • #46059 返信
      わいひら
      キーマスター

      また、関係ない話になりますがSNSの追尾ウィジェット?がおかしいです。

      不具合を確認しました。
      とりあえずは、子テーマのstyle.cssに以下を貼り付けると改善されるかと思います。

      #sharebar .sns-group-viral ul.snsb li{
        width: 100%;
      }
      
      #sharebar .sns-group-viral ul.snsb li a{
        width: 80px;
      }
      
      #sharebar .sns-group-viral ul.snsb li a {
          width: 80px;
      }

      次のバージョンで修正されると思います。(バージョンアップすると、子テーマのstyle.cssの追加したスタイルは削除しておいたほうがいいかもしれません。)

    • #46060 返信
      hidekichi
      ゲスト

      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のスクリプトで指定すればよいかと思います。

    • #46207 返信
      2001Y
      ゲスト

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

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

    • #46208 返信
      2001Y
      ゲスト

      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 );
      		} 
      	}
      }
    • #46210 返信
      hidekichi
      ゲスト

      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で動作しています。

    • #46212 返信
      2001Y
      ゲスト

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

    • #46238 返信
      2001Y
      ゲスト

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

    • #46240 返信
      hidekichi
      ゲスト

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

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

    • #46251 返信
      わいひら
      キーマスター

      #46207
      なんかbbPressに限らず、Jetpackのメール購読何の全てのメール送信において、調子が悪いようです。
      今のところ原因もちょっとわかってないです。

    • #46258 返信
      2001Y
      ゲスト

      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');
    • #46260 返信
      2001Y
      ゲスト

      わいひらさん

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

    • #46265 返信
      hidekichi
      ゲスト

      #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にしろキャッシュにしろは有効にするべきです。

    • #46311 返信
      2001Y
      ゲスト

      hidekichiさん

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

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

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

    • #46314 返信
      2001Y
      ゲスト

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

    • #46316 返信
      hidekichi
      ゲスト

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

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

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

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

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

    • #46317 返信
      hidekichi
      ゲスト

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

    • #46328 返信
      2001Y
      ゲスト

      なるほど、わざわざ検証していただいてありがとうございました。
      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');

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

    • #46340 返信
      hidekichi
      ゲスト

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

      単純に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');

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

    • #46425 返信
      2001Y
      ゲスト

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

23件の返信スレッドを表示中
返信先: スクロール追従領域にて不具合?仕様?
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)