スマホとPCの条件分岐でVEGASを切り替える方法
投稿日：
スマホとPCの条件分岐でVEGASを切り替える方法
表示したいところに以下を記述します。
<div class="img-movie">
<?php
if ( is_front_page() && !is_mobile() ) {
echo '<div class="top-img"></div>';
} elseif ( is_front_page() && is_mobile() ) {
echo '<div class="top-img-mo"></div>';
} else {
// それ以外
}
</div>
上記の簡単な説明ですが、
今回は、【header.php】に記述しました。
<div class="img-movie">
<!-- このクラス名は自由です -->
<?php
if ( is_front_page() && !is_mobile() ) { //front_pageでpcなら
echo '<div class="top-img"></div>'; //.top-imgを読み込む
} elseif ( is_front_page() && is_mobile() ) { //front_pageでスマホなら
echo '<div class="top-img-mo"></div>'; //.top-img-moのbackground指定で画像を読み込む
} else {
// それ以外
}
</div>
echo '<div class="top-img-mo"></div>';
は、
echo '<div><img src="○○○△△△"></div>';
でもOK!
これは、PCなら「VEGAS」を動かし、スマホでは静止画を見せるというやり方です。
まとめ
今回は、「VEGAS」を使ってみましたが、他にも似たようなプラグインがたくさんあります。
jQuery系のプラグインも大事ですが、使用する画像や動画のファイルサイズに気をつけてサイト作りをしたいですね。
前回の記事はこちら→画像と動画を混合させて表示VEGAS
関連記事
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …
-
-
ホームページから予約が取れる時代が当たり前になってきたんですねー 私もお客様からお問い合わせがあり、「予約が取れるようにして欲しい」っていうことで、数件取り入れたことがあります。 でも、 …
-
-
Browser Shots WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。 & …
-
-
グーグルマップでいろんなルートを作成しました。 例えば、１コース（ルートAAA）・２コース（ルートBBB）・３コース（ルートCCC）といったように複数のパターンを作り、それぞれ地図にマー …
-
-
以前、パソコンを購入するときは近くの電気屋さんに行っていましたが、のちにDELLのオンラインショップで購入するようになりました。 最近では、オリジナルのパソコンを取り扱っているオンライン …
