memocarilog

WordPressの投稿でYouTube動画をiframeで埋め込んだ場合に、その埋め込みコードを利用して動画のサムネイルを、WordPress内に表示する事が可能です。その方法と参考にした記事などをまとめました。

＜目次＞
1. YouTubeのサムネイルアドレスについて
2. 投稿記事内の iframe コードの中からYouTubeのIDを取得する
3. サムネイルを表示する
4. まとめたコード
6. oEmbed の埋め込み機能を使ってアドレスを貼り付けて埋め込んだ場合のサムネイルを取得する
7. 動画URLが投稿内にない可能性がある場合
8. 関数を作成する
9. サムネイルをトリミングする

YouTubeのサムネイルアドレス

YouTubeは以下のようなアドレスよりサムネイル画像を直接リンクする事が可能になっているようです。

http://i.ytimg.com/vi/”動画のID”/”取得したいサムネ番号”.jpg

動画のID

”動画のID”はその動画のアドレスの末尾”watch?v=”よりも後にある文字列がIDです。
以下のアドレスの場合は”watch?v=”のあとに続く”cXeLPYlBFgU” がIDです。

http://www.youtube.com/watch?&v=cXeLPYlBFgU

埋め込みコードの場合は、”embed/”の後につづく文字列がIDです。

<iframe width="640" height="360" src="http://www.youtube.com/embed/cXeLPYlBFgU" frameborder="0" allowfullscreen></iframe>

サムネイルの番号

”取得したいサムネ番号”は”0.jpg”で、W320 x H240。”default.jpg”、”1.jpg”、” 2.jpg”、 “3.jpg”を指定でW120 x H90のサイズのサムネイルが表示できます。

”1.jpg”で取得した http://www.youtube.com/watch?&v=cXeLPYlBFgU のサムネイル画像が下のものです。

WordPress投稿記事内の iframe コードの中からYouTubeのIDを取得する

YouTubeのIDが分かればサムネイル表示が可能なので、投稿記事内のデータよりYouTubeのアドレスを探して、そのアドレスよりIDを取得します。

＊＊＊2013/07/19 Youtube側で発行される埋め込みコードが、アドレス部分先頭の”http:”の部分を付けない書き方へ変更された為、アドレス取得する箇所を”www”以降を取得するようにコードを書き換えました。＊＊＊

以下のコードをループ内に記入することでIDを取得できます。

<?php
$youtubePost = esc_attr(get_the_content());
// ↑get_the_content()で投稿記事のデータを取得し $youtubePost へ入れる

preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
// ↑ $youtubePost の中の ”www.youtube”の後に続く文字列が、
// 英数字と-(ハイフン)、_（アンダーバー）を含む部分を抜き取って $youtubeUrl （配列）へ入れる。

$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);
// ↑ $youtubeUrlの1つ目のデータ（YouTubeのアドレスが入ってる）から
// "www.youtube.com/embed/"の部分を取り除き、IDのみを残して $youtubeId に入れる。
?>

PHPの preg_match は、元の文字列から特定の文字列の部分のみを抜き出し、配列で変数に入れる事ができます。”特定の文字列”は正規表現で記入する必要があります。正規表現難しいですね…。

正規表現の書き方については、以下の参考サイトが読みやすくて例もわかりやすかったです。正規表現は記号が沢山なので読みやすいのはとても大事ですね。

preg_match と str_replace について

サムネイルを表示する

IDが分かれば後はサムネイルのアドレスへはめ込んで書き出すだけです。
以下のように記入すれば、サムネイルが個別記事へのアドレスになります。

<?php
echo "<a href='" .esc_url(get_permalink()). "' >";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$youtubeId/0.jpg'></a>"  ;
?>

まとめたコード

上記までのものを続けてかいたコードは以下のようになります。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php
$youtubePost = esc_attr(get_the_content());
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);

echo "<a href='" .esc_url(get_permalink()). "' >";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$youtubeId/0.jpg'></a>"  ;
?>

<?php endwhile; else: ?>
<?php endif; ?>

これを実現するのにすごく時間がかかったのですが、こうやって見返してみると短くて単純な感じですね…。正規表現をもっと理解して使いこなせればいろいろできそうで面白いですね。

(ここから下追記しました。)

oEmbed の埋め込み機能を使って、アドレスを貼り付けて埋め込んだ場合のサムネイルを取得する

oEmbed とは

oEmbed とは埋め込み用コードを返してくれる API です。パーマリンクを指定するだけで、さまざまなサービスの埋め込みコードを取得することができます。WordPress でもこの oEmbed が 2.9 から採用されており、デフォルトで以下のようなサービスのアドレスを貼り付けるだけで、コンテンツをページに埋め込むことが可能です。

Youtube アドレスから ID を取得してサムネイルを表示するコード

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php
$youtubePost = esc_attr(get_the_content());
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);

if(preg_match('/watch/', $youtubeUrl[0])){
preg_match('/www.youtube.[-_?=\/A-Za-z0-9]*/', $youtubePost, $pasteUrl);
$pasteId = str_replace("www.youtube.com/watch?v=","",$pasteUrl[0]);
echo "<a href='" .esc_url(get_permalink()). "' class='tumbnail230'>";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$pasteId/0.jpg'></a>"  ;
}
?>

<?php endwhile; else: ?>
<?php endif; ?>

動画URLが投稿内にない可能性がある場合

動画のアドレスが投稿内にない記事もある可能性がある場合は、以下のように YouTubeのアドレスがない場合には isset 関数を使って条件を分岐し、ダミーの画像を表示させることができます。

<?php
$youtubePost = esc_attr(get_the_content());
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);

if (isset($youtubeUrl[0])){
// isset関数で youtubeUrl の中身がNULLかどうかをみて、URLがあった場合は以下の処理

echo "<a href='" .esc_url(get_permalink()). "' class='tumbnail'>";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$youtubeId/0.jpg'></a>"  ;

} else {
// 中身がNULLだった場合は以下の処理でダミー画像を表示する

echo "<a href='" .esc_url(get_permalink()). "' class='noimage_tumbnail'><img src=' ".esc_html(get_bloginfo('template_url'))."/images/dammy.jpg'></a>";
}
?>

isset について

関数を作成する

コードが長くなってしまった為、表示したい箇所が複数あった場合テンプレートに全部かいていると、ファイルがゴチャゴチャしてしまって見難くなります。
上記のコードを functions.php ファイルで関数化しておくとテンプレートファイル内でも、短かいコードで呼び出せるのでコードがすっきりしてよいです。

functions.php へ以下のように記入します。

// functions.php テンプレート

function youtube_tumbnail() {
// functionの後へ 関数名を任意で記入し、関数化したいコードを{}(ブレース)で囲むだけです。

$youtubePost = esc_attr(get_the_content());
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);

if (isset($youtubeUrl[0])){
echo "<a href='" .esc_url(get_permalink()). "'>";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$youtubeId/0.jpg'></a>"  ;

// URL貼り付けで埋め込んだ投稿が含まれる場合は以下のコードも追加
} elseif(preg_match('/watch/', $youtubeUrl[0])) {
preg_match('/www.youtube.[-_?=\/A-Za-z0-9]*/', $youtubePost, $pasteUrl);
$pasteId = str_replace("www.youtube.com/watch?v=","",$pasteUrl[0]);
echo "<a href='" .esc_url(get_permalink()). "' class='tumbnail230'>";
echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$pasteId/0.jpg'></a>"  ;
// URL貼り付けで埋め込んだ投稿が含まれる場合のコードここまで

} else {
echo "<a href='" .esc_url(get_permalink()). "'><img src=' ".esc_html(get_bloginfo('template_url'))."/images/dammy.png'></a>";
}
}

あとはテンプレートファイルの呼び出したい箇所へ以下のように記入して、functions.phpに書いた関数を呼び出せます。

<?php youtube_tumbnail()?>

サムネイルをトリミングする

Youtubeから直接取得したサムネイルのままだと、サムネイルによっては黒い帯が入ってしまいます。CSSの clip プロパティを使用すれば、画像のトリミングがCSSのみで可能です。

clipプロパティは指定の仕方が少し複雑ですが、以下のように指定します。

img{
position: absolute;
clip: rect(10px 230px 160px 10px);
}

まず、possiton を absolute 又は、fixed を指定する必要があります。
rect の指定は、左から、「上からの隠す長さ/左からの表示する長さ/上からの表示する長さ/左から隠す長さ」を指定します。
参照サイトの図をみて頂くとわかりやすいと思います。

上記の rect(10px 230px 160px 10px) だと、上から10pxをカット・左から230pxの長さでカット・上から160pxの長さでカット・左から10pxの長さをカット。という形になります。