Web全般 wordpress

スマホとPCの条件分岐でVEGASを切り替える方法

投稿日:

vegasスマホとPC

 

スマホと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



-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

メンバー紹介選手紹介

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた③

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

ヨーロッパwifi

ヨーロッパで携帯を使いたい「Wi-Fi」どうする?

  ヨーロッパでWi-Fiを使おう!   ヨーロッパへ行ってもインターネットがしたい!SNSがしたい! 前もって準備をしてから出かけよう!   レンタルWi-Fiルーター …