WWordPressカスタマイズ事例

動画コンテンツ集ページを作る（一覧ページ・詳細ページ・自動再生あり）テーマ販売あり

いまやウェブの世界では主流コンテンツとなった「動画」。
それにともない動画制作業が大きな市場となり、動画に携わる事業をする人も多くなったのではないでしょうか？
そんな中で、自社のサイトに動画の実績を掲載したり、アーカイブしたりするニーズも多くなっています。
そこで今回は、WordPressのサイトに動画コンテンツ集を作る方法についてご紹介します。
なお、YouTubeなどの動画サービスサイトにアップした動画コンテンツのHTMLタグをただサイトに貼り付けるような動画コンテンツ集は、簡単すぎてノウハウでもなんでもないのでここでは対象外です。
そうではなく、自社の環境（あるいは自社契約のAWS）に動画をアップし、それをサイトに掲載していく方法についての紹介です。
　
できあがりはこんな感じになります。（CSSは掲載しないので、みなさん自由に組んでください）

【動画一覧ページ】

【動画詳細ページ】

　
それでは手順とコードの紹介です。

まずはどこかのウェブサーバーにmp4ファイルをアップしましょう。
普通にWordPressの「メディア」を使ってmp4ファイルをアップしても良いのですが、動画はファイルサイズが大きいのでそもそもサーバーの制限でアップロードができなかったり、アップロードできたとしても普通のレンタルサーバーとかですと再生にかなり負荷がかかるなど問題も発生する可能性がありますので、AWSのS3に上げてCDNを参照する方法のほうが最適です。

※ファイルのアップロードサイズを上げるにはいくつかの方法がありますが、php.iniの編集権限があるならphp.iniの記述で以下を追記すればOKです。
（ファイルアップロード上限を10MBにする場合）
```
upload_max_filesize = "10M"
post_max_size = "10M"
```
AWSを使う場合はこちらの事例を参考にしてください。
WordPressサイトでAWS S3とCloudFrontをつかってCDNを実現する

カスタム投稿タイプを用意：
functions.php に以下を記述します。

/* カスタム投稿タイプの追加 */
add_action('init', 'create_post_type');
function create_post_type()
{
  register_post_type('movies', /* post-type */
    array(
      'labels' => array(
        'name' => '動画',
        'singular_name' => '動画',
        'all_items' => '動画一覧',
        'add_new' => '動画追加',
        'add_new_item' => '動画の追加',
        'edit_item' => '動画の編集',
        'new_item' => '動画追加',
        'view_item' => '動画を表示',
        'search_items' => '動画を検索',
        'not_found' => '動画が見つかりません',
        'not_found_in_trash' => 'ゴミ箱内に動画が見つかりませんでした。',
        'parent_item_colon' => ''
      ),
      'public' => true,
      'publicly_queryable' => true,
      'show_ui' => true,
      'query_var' => true,
      'rewrite' => true,
      'hierarchical' => false,
      'supports' => array('title', 'editor', 'thumbnail'),
      'menu_position' => 5,
      'has_archive' => true,
      'rewrite' => array(
        'slug' => 'movies', 'with_front' => false)
    )
  );
}

動画を上げるためのカスタムフィールドをアドバンストカスタムフィールドで用意します。
- フィールドラベル：動画
  フィールド名：results_movie
  フィールドタイプ：ファイル
  返り値：ファイルURL
- フィールドラベル：動画URL
  フィールド名：results_movie2
  フィールドタイプ：URL
  ※ メディアアップロードができなかった場合に、直接サーバーに上げた動画のパスを参照できるようにするためのフィールドです。
- ルールで、上のfunctions.php で登録したカスタム投稿タイプ「movies（ラベル名：動画）」に紐づけることをお忘れなく

archive-movies.php をテーマファイル直下に作成し、以下を記述

<?php
get_header();

$html = '';
while (have_posts()) : the_post();
  $results_movie = '';
  if (get_field('results_movie', $post->ID)) {
    $results_movie = get_field('results_movie', $post->ID);
  } elseif (get_field('results_movie2', $post->ID)){
    $results_movie = get_field('results_movie2', $post->ID);
  }
  $image_id = get_post_thumbnail_id($post->ID);
  $image_url = wp_get_attachment_image_src($image_id, 'large');
  $html .= '<div class="stage">
    <a href="' . get_the_permalink($post->ID) . '">
    <video class="v" width="100%" height="100%" loop muted playsinline poster="' . $image_url[0] . '">
      <source type="video/mp4" src="' . $results_movie . '" />
    </video>
  </a></div>';
endwhile;

echo $html;

get_footer();
 ?>

single-movies.php をテーマファイル直下に作成し、以下を記述

<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<?php
$html='';
while ( have_posts() ) : the_post();
  $results_movie='';
  if (get_field('results_movie', $post->ID)) {
    $results_movie = get_field('results_movie', $post->ID);
  } elseif (get_field('results_movie2', $post->ID)){
    $results_movie = get_field('results_movie2', $post->ID);
  }
  $image_id = get_post_thumbnail_id($post->ID);
  $image_url = wp_get_attachment_image_src($image_id, 'large');
  $html.='<div>
    <video width="100%" height="100%" muted playsinline controls poster="'.$image_url[0].'">
      <source type="video/mp4" src="'.$results_movie.'" />
    </video>
  </div>';
  $html.= get_the_content($post->ID);
endwhile;

echo $html;

get_footer();
 ?>

一覧ページの動画サムネイルをホバーしたら自動再生するような Javascript：script.js を用意し、テーマフォルダに収めます。
```
$(document).on({
  mouseenter:function(){
    $(this).find('.v')[0].play();
  },
  mouseleave:function(){
    $(this).find('.v')[0].pause();
  }
},'.stage');
```

最後に上のJavascriptファイルを読み込むために、header.php のheadタグ内に記述を追加します。
※ jqueryファイルの参照より下に置きましょう。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script.js"></script>
<!-- これはテーマディレクトリの直下に script.js を置いた場合の記述です。ディレクトリはご自身のサイトのディレクトリに変更してください。-->

これで完成です。
管理画面の「動画」メニューから動画を登録しましょう。
「動画」の項目でメディアから動画を設定できますが、動画をアップロードできないなどの理由でそれが登録できなければ、動画ファイルは別途FTPで上げるなどして、「動画URL」で動画ファイルのURLを直接入力してください。
　
サイトのmoviesページに一覧が現れて来ます。
　
　
ちなみに、100ウェブでは動画制作もおこなっております。
動画制作サービス →
WordPressでサイトを作ったら、100人のデザイナーを活用して動画も作っちゃいましょう。

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格（事例の難易度により200円～1.3万円）です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください