スマホと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のプレビューで変更されていない時にチェックすること
WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …
-
-
WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …