スマホと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の固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた③
1.プラグインAdvanced Custom Fieldsをインストール 左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …
-
-
ヨーロッパでWi-Fiを使おう！ ヨーロッパへ行ってもインターネットがしたい！SNSがしたい！ 前もって準備をしてから出かけよう！ レンタルWi-Fiルーター …
