PCとモバイルを別のスタイルシートにする試み
※このページにはプロモーションが含まれています。
このブログを作る際にPCとモバイルでの表示を変える方法を知りました。ここでモバイルと呼ぶものはスマートフォンとタブレットを含みます。
PCで表示するサイドバーをモバイルでは表示させなかったり、画像の形を変えることが簡単にできます。
今まではスタイルシートで行っていましたが、この方法を使うことでコードの量が減り、テーマが軽量化できます。
fanctions.phpに記述するコード
下のコードを使うとPCとモバイルで読み込むスタイルシートを変えることができます。
スタイルシート以外でも使えます。このブログのテーマでは、header・sidebar・サムネイルなどに使い表示を変化させています。
if (wp_is_mobile()) {
//スマートフォンとタブレットで読み込まれる
} else {
//PCで読み込まれる
}下のコードは実際にスタイルシートを読み込むためのコードです。PCのときはpc.cssを読み込み、モバイルのときはmobile.cssを読み込みます。
if (wp_is_mobile()) {
function enqueue_styles() {
wp_enqueue_style( 'style',get_stylesheet_directory_uri(). '/mobile.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function update_styles( $styles ) {
$mtime = filemtime( get_stylesheet_directory() . '/mobile.css' );
$styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'update_styles' );
} else {
function enqueue_styles() {
wp_enqueue_style( 'style',get_stylesheet_directory_uri(). '/pc.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function update_styles( $styles ) {
$mtime = filemtime( get_stylesheet_directory() . '/pc.css' );
$styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'update_styles' );
}Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りスタイルシートを分ける利点
- 1つのスタイルシートのサイズが小さくなる
- 打ち消しが不要になり分かりやすくなる
メディアクリエを使う場合はPC用とモバイル用のスタイルシートは1つになります。PC用のCSSを記述した後にモバイル用の変更を書き足していました。
一方、別のスタイルシートにする場合は1つのスタイルシートは小さくなります。
メディアクリエを使ってモバイルにCSSを適応する場合には、一度PCのスタイルを打ち消してからモバイルのスタイルを記述する必要がある場合があります。
モバイル専用のスタイルシートを用意すれば、その記述が不要になるのでよりサイズを小さくできます。
スタイルシートを分ける際の注意
- モバイル環境を表示するのに手数がかかる
- 変更する手間が倍かかる
メディアクリエはコンテンツの幅によって適応させるCSSを変化させますが、wp_is_mobile関数はデバイスの種類によって動作を変えます。
PCのローカル環境で作業をする場合はPCの表示しかされないので、関数の先頭に！をつけて、PCでモバイルを表示させます。具体的にはif (wp_is_mobile())をif (!wp_is_mobile())に変更します。
if (wp_is_mobile()) {
//スマートフォンとタブレットで読み込まれる
} else {
//PCで読み込まれる
}！は逆を表して、if (wp_is_mobile())がモバイルの場合はという意味で、if (!wp_is_mobile())はモバイルでない場合を指します。モバイルでない場合はPCしか無いので、PCのローカル環境でモバイルが表示されます。
phpでモバイルを表示させた上でモバイルのスタイルシートを読ませると、PCでモバイル環境の作業が進められます。
スタイルシートをサーバーにアップロードする前に圧縮をすると、PageSpeed Insightsの測定でスコアの低下を防ぐことができます。不要なスペースや改行を消して一行にすることで読み込みのが速くなるようです。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。