ショートコード

複数のYouTubeの挿入方法

Gutenbergではショートコードのクイックタグはクラッシックブロックをご利用ください

WordPressはYoutubeのURLを貼るだけで自動で挿入されます。

YouTubeの動画は自サイトで動画を配信するよりもずっと軽くサーバーの負担を減らす事が出来ますが、それでも多数の動画を一度に貼り付けるとサイトの表示は一気に遅くなります。

当テーマでは専用のショートコードとプラグインを使用する事で遅くならずにYouTube動画を複数表示することができるのでその方法を説明します。

この方法で20個のYouTubeを貼った場合の結果が以下となります。

普通にYouTube動画を20個貼り付けた例

2016-11-29_10h48_42

表示に18秒、ページサイズは1.52MB

このページのように張り付けた例

2016-11-29_10h49_38

表示に4.6秒、ページサイズは602KB

なんと約5倍も速くなりました。

参考YouTube動画貼り付けテスト

重くならない複数のYouTubeの挿入方法

2016-08-22_182936

まず、任意の貼りたいYouTube動画のIDをコピーします。

上図の場合は①「共有」より②の「https://youtu.be/」以降のURL「4mYftcFqm_k」をコピーします。

エディタにペーストして選択状態にします。

②「YouTubeID」ボタンをクリックします

2016-08-22_190130

ショートコード状態になりました。

これで、YouTube動画はYouTubeページにリンクされた「YouTube画像」になります。

プラグイン「Easy FancyBox」

ただ、それでは毎回YouTubeで見る手間が生まれるのでプラグイン「Easy FancyBox」を使用します。

※「Easy FancyBox」は他社製プラグインです。動作保証などはございませんので予めご了承くださいませ

2016-08-22_190519

「Easy FancyBox」は画像をポップアップ表示するプラグインでYouTubeにも対応しています。

「メディア」に「Easy FancyBox」の設定があるので「YouTube」にチェックを入れて保存して下さい。

2016-08-22_190609

外部リンクに_blankを付与

2016-08-22_191037

テーマ管理にて「記事内の外部リンクを別ウィンドウで開く」にチェックを入れて保存。

以上で完了です。
以下のような表示になります。

※maxresdefault又はmqdefaultサイズのサムネイルが用意されていない動画では表示されません
※「記事内の外部リンクを別ウィンドウで開く」はサイト全てに適応されますのでサイトの特性に応じて利用して下さい。

解決しないことは検索もしてみてね

人気の解析ツールをセットにしたお得なパックです。サイトの状況や改善点を視覚化することで目標達成のためやるべきことが明確になります。

  • シンプルでわかりやすいアクセス解析
  • クリック計測・広告管理機能
  • ABテスト機能

今ならお得なキャンペーン中!

さらに詳しくみる

AFFINGERデザインカード

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-ショートコード

--時間---

10月のキャンペーン商品はコチラ

AFFINGER公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -

PAGE TOP