スマホと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でメンバー紹介や選手一覧などを作ってみた⑤
1.選手一覧、メンバー一覧表示 選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …
-
-
固定ページにアイキャッチ画像付きの記事一覧を表示させたい そこで、やりたかった主なことは以下の部分です。 ・いろいろプラグインなどもあるが、プラ …
-
-
動画も一緒に表示させる方法 動かしてみた方法は以下の通りです。 1.先に動画を表示して、次に画像を表示する方法 jQuery(document).ready( …
-
-
自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …
-
-
便利で何かと使いやすいかな？って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル（phpファイル）を読み込みたいときに、直接書くのはやめた方が良いので、 …
