WordPressの各記事にYouTubeの関連動画を表示する方法(プラグイン改良付き)

  • hatena bookmark
  • Twitter
  • Delicious
  • Blogger Post
  • Evernote
  • Google Bookmarks
  • Share/Bookmark

WordPressの記事に関連するYoutubeの動画を貼り付ける方法を書いていきます。

記事に関連動画を掲載する素晴らしいプラグインは幾つかありますが、
今回 [GWA] Dynamic YouTube Videobar プラグインを使ってみたいと思います。

※ちなみにPHP5以上が準備されていれば、TubePressなどもう少し良いプラグインがあるかと思います。

videobar_plugin_sampleこのプラグインは、厳密に言うと記事に関連するのではなく、タグのスラッグから生成した検索ワードでGoogle AJAX Search APIAJAX Video Bar を使って実現されています。

ただ、残念ながらタグだけではカバーできない場合があるので、検索ワードの制御をカスタムフィールドで行えるよう改良する方法を後半に書いていきたいと思います。


また、AJAX Video Barについては以下のリンクに詳しい技術情報が掲載されています。
http://www.google.com/uds/solutions/videobar/index.html

それでは、以下の順に書いていきます。

  1. ダウンロードとインストール
  2. 設定画面
  3. カスタムフィールドで検索ワードを制御する改良を加える

ダウンロードとインストール

以下のリンク先の「YouTube Video Bar」より gv_gwa.zip をダウンロードします。
http://www.getwebactive.com/index-2.html

gv_gwa.zip を展開し、/wp-content/plugins/ へアップロードし、管理画面のプラグインでアクティベートを行います。

管理画面上でインストールを行う場合は「YouTube Video Bar」で検索すると出てくるので、指示に従ってインストールとアクティベートを行ってください。

設定画面

設定>YouTube より設定画面を表示します。

videobar_plugin_setup

ウィジェットを使わないのであれば、下記ソースを任意のテンプレートに貼り付けることで表示することができます。

<?php googlevideo_form_display();?>

Add custom css tag
VideoBarのレイアウトを制御するCSS

Video Bar Label
プレイヤー上部に表示されるクローズボタンを兼ねた表示ラベル

Orientation VideoBarの向き
vertical 縦向き
horizontal 横向き

Thumbnail Size サムネイルのサイズ
small (1表示:49×37px)
medium (1表示:100×75px)

Player Size 再生されるプレイヤーのサイズ
180×135px – small player
260×190px – medium player
320×260px – large player
480×380px – extra large player

Default Search Keyword
検索ワードが生成できない場合に使用される検索ワード

カスタムフィールドで検索ワードを制御する改良を加える

ここでは、任意のワードで検索をかけられるようにカスタムフィールドで制御する改良を加えたいと思います。

展開したgv_gwa.phpが格納されているので、このPHPファイルをカスタマイズしていきます。

まず任意の場所に以下のように、検索ワードの生成する関数を加えます。

function get_search_words($post){
	$custom_type = get_post_custom_values( 'youtube', $post->ID );
	if( $custom_type[0] == 'title' ) {
		$slug = get_the_title( $post->ID );
	} elseif( $custom_type > 0 ) {
		foreach( $custom_type as $tagz ) {
			$slug .= $tagz;
		}
	} else {
		$tags = wp_get_post_tags( $post->ID );
		foreach( $tags as $tagz ) {
			$tag = $tagz;
			$slug .= $tag->slug.' ';
		}
	}
	if( !$slug ){ $slug = get_option( 'defaultKeyword' ); }
	return $slug;
}

2行目のget_post_custom_valuesで「youtube」のキー値を持つカスタムフィールドの値を配列で取得します。
後は条件分岐で検索ワード生成しています。この部分は用途に応じて変更してみても良いかもしれません。

次にタグのスラッグを取得しているところを確認します。
wp_get_post_tags で取得して処理を行っている以下のソースを、122行目辺り~と320行目辺り~の2箇所で確認できると思います。

$tags = wp_get_post_tags($post->ID);
foreach($tags as $tagz){
	$tag = $tagz;
	$slug .= "\"".$tag->slug."\"".' ';
}
if(! $slug)
$slug = get_option('defaultKeyword');

この部分を先ほどの関数呼び出すため、以下に書き換えます。

$slug = get_search_words($post);

これで完成です。
あとは各記事のカスタムフィールドのキー値をyoutubeにして任意の値を挿入すれば、意図した動画が表示されると思います。

  • hatena bookmark
  • Twitter
  • Delicious
  • Blogger Post
  • Evernote
  • Google Bookmarks
  • Share/Bookmark
関連する記事:
  1. Papervision3D – primitiveとColladaファイル(.dae)の表示方法 (AS3.0)
  2. Perl/PHPでファイルのデータ内容の比較を行う方法
  3. WordPressでテンプレート/プラグイン/関数の作成方法(超簡易版)
  4. jQpie – javascriptからphpの関数(function)を呼び出すjQueryを使用したライブラリ
コメント 停止中