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

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

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

プレビュー

WordPressのプレビューで変更されていない時にチェックすること

WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …

フォトギャラリー

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

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

wordpress

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …