モバイルでアイキャッチ画像や記事サムネイルを非表示にする方法

2017年9月12日

お洒落なアイキャッチ画像やサムネイル付きタイトルのリストなどは見栄えもよく、訪問者の興味を引きますが、モバイルでは逆に読み込みを遅延し、うざいと嫌われる原因になります。(サムネイル画像の大半は自己満足)

wp_is_mobile() を使った条件分岐タグを使えば、モバイルでは、アイキャッチ画像を非表示にしたり、サムネイル付き記事一覧を単純なテキストリンクに置き換えることができますので、モバイルの表示スピードを速めたい方はぜひお試し下さい。

is_mobile 条件タグの使い方は、こちらに詳しい解説があります。

表示の切り替えを有効にするには、下記サイトで紹介されている function is_mobile() をfunctions.php に付け加えるだけ。非常に簡単です。

https://ruuski.net/web/how-smartphone-friendly-function-is_mobile-works/

モバイルでアイキャッチ画像を非表示にする

お使いのテーマ・テンプレートで、アイキャッチ画像を表示しているテンプレート・タグを探します。

たいてい、single.php や content.php に記載されています。

私が使っているテーマ・テンプレートの一例。

the_post_thumbnail でアイキャッチ画像を呼び出しています。

モバイル アイキャッチ画像 非表示

これを is_mobile タグで条件分岐します。

	
モバイルに表示する要素
  
PCに表示する要素

応用の一例。モバイルには何も表示しないので、空白のまま、行を詰めておけばOK。
テストの際は、簡単に文字など入れて、サムネイル画像と置き換わるか、実験してみるといいですよ。

モバイル アイキャッチ画像 非表示

サムネイル付き関連記事のリストを非表示

これも同じ要領です。

PCの場合、中サイズのサムネイル付き関連記事のリストがボックス表示されますが、モバイルだと遅延の原因になるので、いさぎよく非表示にします。

こちらはテーマ・テンプレート独自の「サムネイル付き関連記事ボックス」を、is_mobile では読み込まないように設定しています。

モバイル 関連記事 非表示

代わりに、シンプルなテキストリンクを記事後方に自動表示しています。

関連記事を表出するプラグインもいろいろありますが、これが一番軽量で、精度も高いです。

Related Posts by Taxonomy

他にも、モバイル専用のサイドバーを作成して、PCとモバイルで表示する要素を切り替える方法もあります。

圧縮やキャッシュで軽量化する方法もありますが、表示する要素を最小限にとどめるのが一番効果がありますので、興味のある方はトライして下さい。

https://sanmarie.me/word/mobile-sidebar/

Posted by 阿月まり