【忘備録】wordpressの カスタムフィールド（繰り返し投稿）で mp4動画と画像を表示する方法

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

WordPressカスタム投稿の管理画面から動画と画像を表示したい時はありませんか。

今回は、swiperスライダーのサムネイルとメインスライドが連動型のスライダーにて動画と画像双方を表示させる方法を紹介します。

※動画は繰り返しフィールド、画像は各画像のフィールド（繰り返しフィールドではない）を用いています。

どんな動画を埋め込む？

まず、動画と言っても、様々なファイル形式があります。
ここでは一般的に使われているファイル形式「MP4」の動画や画像をWordPressのカスタム投稿（繰り返し投稿）にて埋め込み表示する方法を解説します。

※WordPressの記事内で埋め込み表示できるファイル形式はMP4です。そのため、MP4はそのままの状態でも埋め込みできるのですが、MP4以外の動画ファイルはMP4への変換が必要です。

MP4（エムピーフォー）とは、非常に一般的な動画フォーマット 形式。拡張子は.mp4。 YouTubeやVimeoなどの大手動画共有サイトでは、ほとんどの動画がMP4形式でアップロードされています 。

手順

1. wordpressのカスタムフィールドで繰り返し投稿を作成する

WordPressのCustom Fieldsメニューにて、メニュー→カスタムフィールド→フィールドグループ→「新規追加」を押します。

フィールドを追加し、繰り返しフィールドを追加していきます。

今回は、フィールドタイプを
動画→「繰り返しフィール（mp4））」＞サブフィールドのフィールドタイプは「ファイル（mp401）」
画像→5つの「画像（img～）フィールドにしています

2. カスタム投稿の画面にてファイルをアップロードする

カスタム投稿の画面にて、動画や画像をアップロードします。

3. カスタムフィールドのmp4動画と画像を出力させる

Singleページのphpにて以下の記述をし、管理画面にて入力した繰り返しフィールドのmp4動画を出力させます。

1. <div class=“swiper swiperMain”>
2. <div class=“swiper-wrapper”>
3. <!– ループ開始 –>
4. <?php if (have_posts()): ?>
5. <?php while (have_posts()) : the_post(); ?>
6.  
7.  <!– 繰り返しフィールドを表示 –>
8.  <?php if( have_rows( ‘mp4’ ) ): ?>
9.  <?php while( have_rows( ‘mp4’ ) ): the_row(); ?>
10.  <?php
11.  $url = get_sub_field( ‘mp401’ );
12.  ?>
13.  <div class=“swiper-slide”>
14.  <video src=“<?php echo $url ?>” autoplay playsinline muted loop></video>
15.  </div>
16.  <?php endwhile; ?>
17.  <?php endif; ?>
18. <!– 画像フィールドを表示 –>
19.  <?php if( get_field(‘img1’) ) { ?>
20.  <div class=“swiper-slide”>
21.  <span style=“background-image: url(<?php the_field(‘img1’); ?>)”></span>
22.  </div>
23.  <?php } ?>
24.  <?php if( get_field(‘img2’) ) { ?>
25.  <div class=“swiper-slide”>
26.  <span style=“background-image: url(<?php the_field(‘img2’); ?>)”></span>
27.  </div>
28.  <?php } ?>
29.  <?php if( get_field(‘img3’) ) { ?>
30.  <div class=“swiper-slide”>
31.  <span style=“background-image: url(<?php the_field(‘img3’); ?>)”></span>
32.  </div>
33.  <?php } ?>
34.  <?php if( get_field(‘img4’) ) { ?>
35.  <div class=“swiper-slide”>
36.  <span style=“background-image: url(<?php the_field(‘img4’); ?>)”></span>
37.  </div>
38.  <?php } ?>
39.  <?php if( get_field(‘img5’) ) { ?>
40.  <div class=“swiper-slide”>
41.  <span style=“background-image: url(<?php the_field(‘img5’); ?>)”></span>
42.  </div>
43.  <?php } ?>
44.  
45.  
46.  <?php endwhile; ?>
47.  <?php endif; ?>
48.  
49. </div>
50. <!– ページネーションを追加するときは以下を追加 –>
51. <div class=“swiper-pagination swiper-pagination-white”></div>
52. <!– 追加ここまで –>
53. </div>
54.  
55. <div class=“swiper swiperThumbnail”>
56. <div class=“swiper-wrapper”>
57.  <!– サムネイルのループ開始 –>
58.  <?php if (have_posts()): ?>
59.  <?php while (have_posts()) : the_post(); ?>
60.  
61.  <!– 繰り返しフィールドを表示 –>
62.  <?php if( have_rows( ‘mp4’ ) ): ?>
63.  <?php while( have_rows( ‘mp4’ ) ): the_row(); ?>
64.  <?php
65.  $url = get_sub_field( ‘mp401’ );
66.  ?>
67.  <div class=“swiper-slide”>
68.  <video src=“<?php echo $url ?>” autoplay muted loop></video>
69.  </div>
70.  <?php endwhile; ?>
71.  <?php endif; ?>
72.     <!– 画像フィールドを表示 –>
73.  <?php if( get_field(‘img1’) ) { ?>
74.  <div class=“swiper-slide”>
75.  <span style=“background-image: url(<?php the_field(‘img1’); ?>)”></span>
76.  </div>
77.  <?php } ?>
78.  <?php if( get_field(‘img2’) ) { ?>
79.  <div class=“swiper-slide”>
80.  <span style=“background-image: url(<?php the_field(‘img2’); ?>)”></span>
81.  </div>
82.  <?php } ?>
83.  <?php if( get_field(‘img3’) ) { ?>
84.  <div class=“swiper-slide”>
85.  <span style=“background-image: url(<?php the_field(‘img3’); ?>)”></span>
86.  </div>
87.  <?php } ?>
88.  <?php if( get_field(‘img4’) ) { ?>
89.  <div class=“swiper-slide”>
90.  <span style=“background-image: url(<?php the_field(‘img4’); ?>)”></span>
91.  </div>
92.  <?php } ?>
93.  <?php if( get_field(‘img5’) ) { ?>
94.  <div class=“swiper-slide”>
95.  <span style=“background-image: url(<?php the_field(‘img5’); ?>)”></span>
96.  </div>
97.  <?php } ?>
98.  <?php endwhile; ?>
99.  <?php endif; ?>
100. </div>
101. </div>

mp4動画の次に画像が表示されるようにしています。

swiperスライダーを使いたかったので、swiperMain と swiperThumbnailに分けて記述しています。

4. swiperスライダー本体を読み込む

swiper-bundle.min.cssとswiper-bundle.min.jsを設置します。

5. custom.jsを作成する

メインのSwiperにthumbsをサムネイルとして使用すると指定するだけでサムネイルとして認識してくれます。

1. var swiperThumbnail = new Swiper(“.swiperThumbnail”, {
2. slidesPerView: 5,
3. spaceBetween: 8,
4. freeMode: true,
5. watchSlidesProgress: true,
6. });
7.  
8. var mySwiper = new Swiper (‘.swiperMain’, {
9. effect: “fade”, // フェードさせる
10. direction: ‘horizontal’,
11. loop: false,
12.  
13. // Navigation
14. pagination: {
15. el: ‘.swiper-pagination’,
16. type: ‘bullets’,
17. clickable: true,
18. },
19. thumbs: {
20. swiper: swiperThumbnail,
21. },
22.  
23. on: {
24. transitionStart: function(){
25.  
26. var videos = document.querySelectorAll(‘video’);
27.  
28. Array.prototype.forEach.call(videos, function(video){
29. video.pause();
30. });
31. },
32.  
33. transitionEnd: function(){
34.  
35. var activeIndex = this.activeIndex;
36. var activeSlide = document.getElementsByClassName(‘swiper-slide’)[activeIndex];
37. var activeSlideVideo = activeSlide.getElementsByTagName(‘video’)[0];
38. activeSlideVideo.play();
39. },
40. }
41.  
42. })

以上でスライダーの作成は完了です。これまでの内容を実装すると、動画と画像の両方のswiperスライダーが完成します。

あとは、cssでスライダーの調整をすればOK！

おわりに

今回はカスタム投稿の個別ページでの、 swiperスライダーを用いた動画と画像の出力方法をご紹介しましたが、この実装方法を応用することで、個別ページだけではなく一覧ページでもアイキャッチ画像のように動画を表示させることが可能です。

今後も動画を扱う機会が増えると思うので、忘れないためのメモ。