WordPressで運営しているサイトでYoutubeを使う際に知っておくと得するっぽいTips

Ads

なんとなく情報が少ない気がするので試しに
書いてみます。WordPressで運営している
サイトでYoutubeをよく貼るようなことが多い
ならちょっとお得、というか管理が楽になる
かも知れないTipsをいくつかご紹介。自分
でも動画を使うサイトには取り入れたいカス
タマイズです。

Youtubeをよくはってるサイトやブログを良く見かけますので少しでも効率が良くなればなぁと思ってTipsをいくつか書いてみました。コードばかりで何があるか分かりくいですが内容は以下になります。

  1. ショートコードで動画を貼る
  2. カスタムフィールドで管理する
  3. z-indexが自動で効くようにしてあげる
  4. レスポンシブWebデザインに対応させる
  5. Youtubeのサムネイルを取得する
  6. 管理画面で固定の動画を管理する
  7. ショートコードで動画一覧をドバッと出せるプラグイン・TubePress

ショートコードで動画を貼る

ショートコードでYoutubeを手軽に貼れる様にします。functions.phpに以下を追加

function youtube($atts) {
	extract(shortcode_atts(array(
		"value" => '',
		"width" => '649',
		"height" => '395',
	), $atts));
	return '<iframe width="'.$width.'" height="'.$height.'" src="http://www.youtube.com/embed/'.$value.'" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode("youtube", "youtube");

ショートコードは以下のように指定します。

[youtube value="rTUwqxHpXMY"]

ID入れるだけ。幅も指定したいときは

[youtube width="200" value="rTUwqxHpXMY"]

のようにすれば指定されますが未入力ならデフォルト値が使われます。

カスタムフィールドで管理する

動画ばっかりのサイトならカスタムフィールドで管理しちゃったほうが楽です。

<?php if(get_post_meta($post->ID, 'YTid', true)): ?> 
 
<iframe width="649" height="395" src="http://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'YTid', true); ?>?rel=0" frameborder="0" allowfullscreen></iframe>
 <?php endif; ?>

上記コードをsingle.phpなどに埋め込んで記事投稿時にカスタムフィールドの名前の部分にYTid、IDにYoutubeのIDを入れれば動画を簡単に実装できます。条件分岐を使っているのでカスタムフィールドを使わなければ表示されません。

この場合、テンプレートファイルに貼ることになるので場所は固定されます。サイズなどはレイアウトに応じて変更してください。

z-indexが自動で効くようにしてあげる


少し前にYoutubeにz-indexが効かないのを効くようにする方法を書きました。重複しますが・・

Youtube（というか、embedを使った動画全般）には通常z-indexが効きません。Lightboxとかposition: fixed;とかでご経験されてる方も多いかと思いますが、この場合は?wmode=transparentというパラメーターを付ければz-indexを適応できます。

しかし、WordPressのようなブログサイトで毎回手動で入れるのは面倒なのでjQueryで自動挿入します。

$('iframe').each(function(){
      $(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})

コードはiframe全般にしているのでサイトに応じて工夫してみてください。以下デモです。再生ボタンで確認できます。

灰色の部分にz-indexが指定されています。

レスポンシブWebデザインに対応させる


Media Queriesを使って様々なデバイスに対応させるレスポンシブWebデザインに動画を対応させるには以下のようにしてあげます。

動画をdivで囲みます。

<div class='medias'>
<iframe src="http://player.vimeo.com/video/25945509?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="649" height="395" frameborder="0"></iframe>
</div>

で、css

	.medias {
		position: relative ; 
		padding-bottom: 51% ; 
		height: 0 ; 
		overflow: hidden ; 
		width: 100% ; 
		height: 100% ;
		}
		.medias iframe,
		.medias object,  
		.medias embed { 
			position: absolute ; 
			top: 0 ; 
			left: 0 ; 
			width: 100% ; 
			height: 100% ;
			}

responsivetwentytenのようにiframeにwidth: 100%;、height: auto ;としても、縦が自動調整されないので、アスペクト比を保つためにはdiv等で囲ってあげる必要があります。

あとは普通にMedia Queriesで親要素の幅かなんかをゴニョゴニョすればいいんですが、これもいちいちiframeを手動でdivで囲うのは面倒なので自動的に囲ってあげます。

    $("iframe").wrap("<div class='medias'></div>");

管理が楽なのでこうしてますけどもっとスマートな方法あると思います。

デモ　（動作確認はresponsivepxをご利用下さい）

Youtubeのサムネイルを取得する


動画のサムネイルが欲しいときはありませんか？いちいちキャプチャ撮るのは面倒です。以下のコードで手軽に取得出来ますよ。

functions.phpに以下を追加

add_action("admin_init", "youtube_init");
    add_action('save_post', 'save_youtube_link');
    function youtube_init(){
        add_meta_box("youtube", "Youtube thumbnail code", "youtube_link", "post", "normal", "high");
    }
    function youtube_link(){
        global $post;
        $custom  = get_post_custom($post->ID);
        $link    = $custom["link"][0];
?>

<div class="link_header">
    <input name="link" class="form-input-tip" value="<?php echo $link; ?>" /><br />
</div>

<div class="yt-thumb"><img src="http://img.youtube.com/vi/<? echo $custom['link'][0]; ?>/0.jpg" width="30" height="30" /></div>

<p>ボックスの中にYoutubeのIDを入力して下さい。あかい文字の場所がIDです。 <br /> http://www.youtube.com/watch?v=<span class="yt-id">oHg5SJYRHA0</span>&feature=player_embedded</p><div class="yt-clear"></div>

<?php
    }
function save_youtube_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
    update_post_meta($post->ID, "link", $_POST["link"]);
}
function youtube_thumb($w,$h,$t){
     $custom = get_post_custom($post->ID);
     return '<img src="http://img.youtube.com/vi/'.$custom['link'][0].'/'.$t.'.jpg" width="'.$w.'" height="'.$h.'" />';
}
add_action('admin_head', 'youtube_css');
function youtube_css() {
    echo'
    <style type="text/css">
        .link_header{margin:0px 5px 0px 0px;}
        .link_header input{
            font-size:13px;

            color:#666;
            border:solid 1px #ccc;
            -moz-border-radius:3px;
            padding:2px;
            margin:0px 10px 0px 0px;
            width:100%;
            }
        .yt-clear{clear:both;}
        .yt-id{color:#ff0000;font-weight:bold;}
        .yt-thumb{
            float:left;
            margin:6px 6px 0px 0px;
            border:solid 1px #ccc;
            }
    </style>
    ';
}

で、サムネイルを表示させたい場所（ループ内）に以下のコードを含めます。

<? echo youtube_thumb('480','360','0'); ?>

サイズは調整してください。
via:Add youtube thumbnail posts with custom metabox

管理画面で固定の動画を管理する

WP-Tubularで使った方法を使います。まず、以下のコードでsettings.phpというファイルを作り、テーマファイルの中に含めてあげてください。

<?php

$settings = array(
	'youtube' => '_VKW_M_uVjw'
);

# Settings

$themename = "Youtube ";
$shortname = "YT";
$options = array (
	array(	"name" => "Main Settings",
			"type" => "header"
	),
	array(  "name" => "Youtube Video ID",
            "id" => $shortname."_youtube",
            "std" => $settings['youtube'],
            "type" => "text",
			"note" => "<strong>Example: </strong> http://www.youtube.com/watch?v=<strong style='color: #ff0000;'>_VKW_M_uVjw</strong>")
);
function mytheme_add_admin() {
    global $themename, $shortname, $options;
    if ( $_GET['page'] == basename(__FILE__) ) {
        if ( 'save' == $_REQUEST['action'] ) {
                foreach ($options as $value) {
					if ($value['type']!='header') {
						update_option( $value['id'], $_REQUEST[ $value['id'] ] );
					}
				}
                foreach ($options as $value) {
                    if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
                header("Location: themes.php?page=settings.php&saved=true");
                die;
        } else if( 'reset' == $_REQUEST['action'] ) {
            foreach ($options as $value) {
                delete_option( $value['id'] ); }
            header("Location: themes.php?page=settings.php&reset=true");
            die;
        }
    }
    add_theme_page($themename." Settings", "Youtube Settings", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
function mytheme_admin() {
    global $themename, $shortname, $options;
    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
<style type="text/css">
th {text-align: left;}
td {padding: 5px 10px !important;}
tr.header {background-color: #1a1a1a !important;color: #ffffff;}
.header td {padding: 2px 10px !important;font-size: 14px !important;font-weight: bold !important;}
</style>
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
<form method="post">
<table class="form-table">
<?php foreach ($options as $value) { 
if ($value['type'] == "text") { ?>
<tr> 
    <th scope="row" style="width: 25%"><?php echo $value['name']; ?>:</th>
    <td>
        <input onfocus="this.select();" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />
		&nbsp; &nbsp; <?php echo $value['note']; ?>
    </td>
</tr>
<?php } elseif ($value['type'] == "select") { ?>
    <tr> 
        <th scope="row"><?php echo $value['name']; ?>:</th>
        <td>
            <select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
                <?php foreach ($value['options'] as $option) { ?>
                <option value="<?php echo $option; ?>" <?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option>
                <?php } ?>
            </select>
			&nbsp; &nbsp; <?php echo $value['note']; ?>
        </td>
    </tr>
<?php 
} elseif ($value['type'] == "header") {?>
	<tr class="header"><td colspan="2"><?php  echo $value['name'] ?> &nbsp; &nbsp; <span style="font-size: 11px; font-weight: normal;"><?php echo $value['note']; ?></span></td></tr>
<?php 
} }
?>
</table>
<p class="submit">
<input name="save" type="submit" value="Save changes" />    
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit" style="border: 0;">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<?php
}
add_action('admin_menu', 'mytheme_add_admin');
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }

# Set Values
foreach ($settings as $k=>$v) {
	$var = $shortname.'_'.$k;
	if (!empty($$var)) $settings[$k] = $$var;
}
?>

さらに、functions.phpに以下のコードを追記してsetting.phpをincludeします。

include("settings.php");
function dp_settings($key) {
	global $settings;
	return $settings[$key];
}

これでテーマに以下のようなオプション機能が加わりました。

あとは、サイドバーやTOPページのスライドとかで見かけるような場所に動画を貼れば管理画面で動画を変更できるようになります。

<iframe width="300" height="100" src="http://www.youtube.com/embed/<?php echo dp_settings("youtube") ?>" frameborder="0" allowfullscreen></iframe>

dp_settings(“youtube”)に、管理画面でセットしたYoutubeのIDが入る、という仕組みです。

実際にこの方法でYoutubeを管理するのは実はあまり意味が無いのですが、この方法を覚えておくと他にもいろいろと応用できるので挙げてみました。

TubePress


以前ご紹介したプラグインです。これが凄いんです。ショートコード貼るだけで、Youtubeの検索結果をドバッとページングつきで出してくれるプラグイン。ぜひ一度お試しいただきたいです。

TubePress

以上、Youtubeを使うなら知っておくと得っぽいTipsでした。書いておいてアレですけどあんまり需要無さそうですねｗ他にもいろいろあるんですが、多くの場合はプラグインでどうにかなる気がします。

Resources & Tools

Resource全記事 →

OSS

OSS全記事 →

AI

AI全記事 →

CSS snippet

CSS全記事 →

JavaScript snippet

JavaScript全記事 →

WordPress Code

WordPress全記事 →