次のページ、前のページの表示崩れについて

PR 2015/3/26

このトピックには5件の返信、2人の参加者があり、最後にhidekichiにより11年、 2ヶ月前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2015年3月26日 7:46 PM #24723
  
  さかも
  ゲスト
  
  Twitterで質問させて頂いた、さかもです。
  症状がでるページは、全ページです。
  
  使っている端末とブラウザは、iPhone6のSafariです。
  スマホ表示ではどのブラウザから見ても同じようになります。
- 2015年3月26日 9:53 PM #24728
  
  わいひら
  キーマスター
  
  もちろん、投稿ページで症状が出るのはわかるのですが、
  キャプチャーのページはこのページで良いですよね？
  http://skmoo.moo.jp/wp/post-693
  （Twitterにサイトが公開されていたのでURLを掲載しましたが、不都合がありましたら削除します。）
  
  とりあえず、autoptimizeプラグインを切ってもらって良いでしょうか？
- 2015年3月27日 12:03 AM #24738
  
  さかも
  ゲスト
  
  ああ！回答ありがとうございます！
  
  アドバイス通り、プラグインを切ったら治りました。
  CSS OptionsのOptimize CSS Code?だけを切っても症状は治りました。
  
  このプラグインの役目をあまりわかっていないのですが、上記の部分だけをオフにして使用するのと、プラグイン自体を停止してしまうの、どちらが良いのでしょうか？
- 2015年3月27日 11:33 AM #24778
  
  hidekichi
  ゲスト
  
  Autoptimizeは、例えばcssやjavascript、htmlを縮小化して圧縮しつつ、期限付きのキャッシュとしてファイルをまとめて、更に<head>にあるそれらをフッターに移動したりして、軽量・最適化するプラグインです。
  
  本当にキャッシュを最適化するためには、super-cacheとかhyper-cacheとかを使うべきなんでしょうけれども、例えばhtaccessをセキュリティのため一部機能制限しているようなサーバー(Xdomainなど)はキャッシュプラグインがhtaccessを書き変えてしまうので使用することができなかったりします。
  
  そういう時(キャッシュプラグインが使えない時)のために使うと良いのですが、cssやjavascriptに間違いがあるとそのまま縮小化してしまうので何かしらおかしくなります。
  
  ちなみにXdomainはリバースプロキシで高速に動作するので特にAutoptimizeを使わなくても(海外サーバーに比べて)さほど気にするほどではありませんが、Googleの評価などには影響が出るかも知れません。とにかくモバイルファーストで高速に表示することがGoogleの「良し」とする所なので、まずはcssやjavascriptのエラーを取り除いてからAutoptimizeを利用するのが良いと思います。
  
  エラーが出てレイアウトが崩れる、javascript部分が動作しない(SNSボタンのカウントなど)が見れる時はひとまずプラグインを停止しておくのが原因発見に繋がると思います(Autoptimizeはファイルをまとめてしまうため)。
  ひとまずcssは問題ないようなので(表示はされているので)、javascriptを縮小化しない(チェックを外す)で様子を見てはいかがでしょうか？
  
  ちなみに、sliderのプラグインを利用されているためか、あるいはwordpressのバージョンが低いのか、はたまたその他の理由でからかはわかりませんが、jQuery1.6バージョンを利用されているようです。
  現在、wordpressの自前jQueryは1.9だったか1.11だったか忘れましたが動作に問題なければ自前のjQueryを利用されたほうが何かとセキュリティ的にも速度的にも捗ると思います。
  ウチのサイトではIEや古いブラウザはサポートしない方向なので2.1.xを利用しています。
- 2015年3月27日 1:17 PM #24790
  
  さかも
  ゲスト
  
  すごく丁寧な返信、本当に感謝します。
  さっそくアドバイス通り、色々と試して様子を見てみます！
  本当にありがとうございました！
- 2015年3月27日 2:40 PM #24791
  hidekichi
  ゲスト
  Autoptimizeはたぶん検索で引っかかるキーワードだと思うのでついでに書いておくと、キャッシュプラグインと併用ももちろんできます。wp-super-cacheやらhyper-cacheあたりはAutoptimizeを(あるいは「が」)補完するようなのでAutoptimizeを利用できるなら利用した方がベターです。
  
  いわゆるjQueryを読み込む前に何かしらのjQueryが動作してエラーが出る場合があります。そんな時は、Autoptimizeのadvanced設定で、Exclude scripts from Autoptimize:と言う欄があるので、その最後に「,jquery」(あるいはjQiery?)とでも入れておけばヘッダにjQueryを読み込むようになります。Uncaught ReferenceError: jQuery is not definedだったかな。
  
  この間ウチでもやってしまいましたがcrayonがどうやってもjQueryより先に読み込まれて、動作はしてるけれどもエラーが取れないと言ってたら、crayonの設定に「フッターで読み込む」という設定を見つけて、「あるじゃん!!」とつい声に出してしまいました（笑）そりゃヘッダで読み込む方が動作も速いんですけどね。エラーが出てたらしょうがないということで。
  
  ちょっと古い情報ですが、おそらく現在も以下の記事のようにWordpressの自前のjQueryは「jQuery.noConflict();」が入っていると思います。ProtoType,mootool,jQueryはどれも「$」で動作するのでコンフリクトを回避するために入っているわけです。そうするとスクリプトによってはコンフリクトによって動作しないものも出てくるかも知れません。
  なので、jQueryのCDN等から読み込むほうが汎用性がある場合もあるのです。
  以下の記事では管理画面では自前のjQueryを使い、それ以外は外部からjQueryを読み込むと言うやり方が書いています。先に書いたようにちょっと古い記事なので、新たに検索して最新のやり方で同様のjQueryを外部(Google CDNや本家CDN等)から読み込む方法を調べてみると良いと思います。
  
  WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例(kachibito.net)
  
  ウチのサイトでアレですが http://blazechariot.wp.xdomain.jp/%E6%B5%B7%E5%A4%96%E9%AB%98%E6%80%A7%E8%83%BD%E3%83%AC%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BChostinger%E3%81%A7wordpress%E3%82%92%E4%BD%95%E3%81%A8%E3%81%8B%E3%81%99%E3%82%8B ここで色々説明しています。ただし、実際は以下のように子テーマfunctions.phpに追記しています。
```
if(!is_admin()){
    function register_jQuery(){
      wp_deregister_script( 'jquery' ); //あらかじめ登録されているjQueryを登録解除する
      $url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
      wp_register_script('jquery', $url);
      wp_enqueue_script('jquery'); //登録し直したjQueryを読み込む
    }
    add_action('wp_enqueue_scripts', 'register_jQuery');
  }
add_filter(
  'script_loader_tag',
  function ( $tag, $handle ) {
    if ( 'jquery' !== $handle ){ return $tag; }
    return str_replace( ' src', ' defer async src', $tag );
  },
  0,
  2
);
```
  jQueryの最新バージョンを常に利用する方法もありますが、公式で「最善は尽くしてるけども、場合によっては最新バージョンを配信できない場合もあるのでバージョンを固定して読み込んでくれ」みたいなアナウンスがあったようです。2014/7/3あたりのアナウンス。
投稿者

投稿