ホームページにYouTube動画を掲載したいというご相談は多くありますが、毎回ソースコードを書き換える運用では更新の手間がかかり、管理もしづらくなってしまいます。特に学校や企業のホームページでは、担当者が簡単に動画を差し替えられる仕組みがあると安心です。

今回は、専門学校様のWordPressサイトで、カスタム投稿からYouTube動画を登録できるようにする対応を行いました。サムネイルを表示し、クリックすると動画が再生される仕様とすることで、見た目と表示速度にも配慮した実装となっています。

今回のご相談内容

専門学校様より、「カスタム投稿ごとにYouTube動画を1件登録できるようにしたい」というご相談をいただきました。

ご希望の仕様は、YouTubeのサムネイルを表示し、利用者がクリックしたタイミングで動画を再生するというものです。管理画面から簡単に動画を設定できる形をご希望されていました。

発生していた症状・エラー内容

対象のページはカスタム投稿で管理されていましたが、現在の投稿にはYouTubeを登録するためのカスタムフィールドが存在していませんでした。

そのため、新しい動画を表示したい場合でも管理画面から設定できず、動画を埋め込む仕組み自体が用意されていない状態でした。

原因の特定ポイント

サイトの構成を確認したところ、カスタムフィールドには Smart Custom Fields が利用されていました。

既存の管理方法に合わせることで、運用方法を大きく変更することなく機能を追加できると判断し、新たにYouTube用のカスタムフィールドを追加する方針としました。

実際に行った対応内容

現在利用されているカスタム投稿へ、新しくYouTubeのURLを登録できるフィールドを追加しました。

表示側では、登録されたURLから動画IDを取得し、まずはYouTubeのサムネイル画像を表示します。そして、サムネイルをクリックすると埋め込みプレイヤーへ切り替わり、そのまま動画が再生されるよう実装しました。

この方法にすることで、ページを開いた直後からYouTubeプレイヤーを読み込まないため、表示速度にも配慮した構成となっています。

対応後の結果・改善点

YouTube動画は管理画面からURLを入力するだけで表示できるようになり、ご希望どおりサムネイル表示からクリック再生の動作を確認しました。

また、パソコンだけでなくスマートフォンなどのレスポンシブ表示でもレイアウトが崩れないことを確認し、問題なくご利用いただける状態となりました。

今回の対応から分かったこと

WordPressでは、カスタム投稿を活用している場合でも、必要な項目が用意されていなければ管理画面から更新することはできません。

一方で、サイト全体の構成を確認し、既に導入されているカスタムフィールドプラグインに合わせて実装することで、管理画面の使い勝手を変えずに機能を追加できるケースも多くあります。既存の運用方法を活かしながら改善を行うことは、長期的な保守性の面でも大切なポイントです。

同様のトラブルを防ぐために

動画を掲載するたびにHTMLを編集する運用は、更新作業の負担が増えるだけでなく、誤ってレイアウトを崩してしまう原因にもなります。

更新頻度が高いコンテンツは、管理画面から必要な情報だけを入力すれば反映される仕組みにしておくことで、担当者が変わった場合でも安心して運用を続けられます。また、サムネイル表示からクリック時に動画を読み込む構成は、ページの表示速度にも配慮しやすい方法の一つです。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、WordPressの不具合対応だけでなく、「管理画面でもっと更新しやすくしたい」「今の運用に合わせて機能を追加したい」といったご相談にも対応しています。

既存サイトの仕組みを確認したうえで、できるだけ現在の運用を活かしながら改善方法をご提案しております。WordPressのカスタマイズや保守管理でお困りのことがございましたら、お気軽にご相談ください。