ビジネス向けWEBサイトをつくる

WordPressテーマTCD「UNIQUE」のトップページヘッダーの動画をランダムに表示させる

本ページはプロモーションが含まれています

弊社コーポレートサイトのトップに動画を配置することを決めてから、とても苦労することになりました。
動画の圧縮を行ってもなかなかデータ量が減らないのです。

そこで、動画を2つに分割し静止画とともに3パターンのトップページをランダムに表示することにしました。

動画の分割はQuickTime Player 7で簡単にできます。
その後は、このテーマのhead.phpを書き換えればOKです。

これで1度に読み込まれる動画の重さはほぼ半分になります。

このページでは主にランダム関数(Math.random())の使い方を紹介します。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

WordPressテーマTCD「UNIQUE」の動画設定

WordPressテーマTCD「UNIQUE」の動画設定はfunctionsフォルダーの中のhead.phpにあります。

以下のようになっています。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/vegas.min.css?ver=<?php echo version_num(); ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/vegas.min.js?ver=<?php echo version_num(); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  $("#header_video").vegas({
    timer: false,
    slides: [{
      <?php if($image) { ?>
      src: '<?php echo esc_attr($image[0]); ?>',
      <?php }; ?>
      video: { src: ['<?php echo esc_attr($video); ?>'], loop: true, mute: true }
    }]
  });
});
</script>

この部分にランダム変数を発生させて3つのパターンの設定を配置します。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Math.random()によってvegasの設定をランダムに変更

Math.random()によってランダムに変数を発生させます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/vegas.min.css?ver=<?php echo version_num(); ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/vegas.min.js?ver=<?php echo version_num(); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  var random = Math.round( Math.random()*1 ); //0〜1
  if (random) {
  	$("#header_video").vegas({
    	timer: false,
		slides: [{
		<?php if($image) { ?>
		src: '<?php echo esc_attr($image[0]); ?>',
		<?php }; ?>    
    	}]
  	});
  } else { //0のみ
	  var random2 = Math.round( Math.random()*3 );
	  if (random2) {
	  	$("#header_video").vegas({
	  		timer: false,
	  		slides: [{
	  		<?php if($image) { ?>
	  		src: '<?php echo esc_attr($image[0]); ?>',
	  		<?php }; ?>
	  		video: { src: ['<?php echo esc_attr($video); ?>'], preload: true, loop: true, mute: true }
    		}]
  		});
  	  } else {
	  	$("#header_video").vegas({
	  		timer: false,
	  		slides: [{
	  		<?php if($image) { ?>
	  		src: '<?php echo esc_attr($image[0]); ?>',
	  		<?php }; ?>
	  		video: { src: ['https://www.slashd.com/○○○.mp4'], preload: true, loop: true, mute: true }
    		}]
  		});
	  }
  }
});
</script>

Math.random()によって発生する変数をJavaScriptで判定すると0の場合のみがfalseの判定となります。

Math.round( Math.random()*3 )は0、1、2、3をランダムに発生させるので、もっとも表示したくない動画をfalse判定としました。
この動画については直接URL指定してあります。

静止画はvideo:を削除するだけです。

この結果、静止画と動画がほぼ半分の確立で表示されるはずです。
また、お楽しみ動画が一つあるといったロジックです。

ところが、一番出にくいはずの動画がよく表示されます。
ランダムなので、正確な確率でコントロール出来ませんでした。

……

head.phpのカスタマイズについては以下のページも参照してください。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

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

12 + 5 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。