• かちびと.net

    WordPressで運営しているサイトでYoutubeを使う際に知っておくと得するっぽいTipsをいくつかご紹介します。サムネイルを取得する方法、カスタムフィールドで管理する方法など。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

なんとなく情報が少ない気がするので試しに
書いてみます。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でした。書いておいてアレですけどあんまり需要無さそうですねw他にもいろいろあるんですが、多くの場合はプラグインでどうにかなる気がします。

URL :
TRB :

Comments & Trackbacks (11)

  1. をかもと

    知ってるかもですけど WordPress 2.9 以降には oEmbed って機能が実装されました。
    http://wpdocs.sourceforge.jp/Embeds

    管理画面で、管理パネル > 設定 > メディア設定画面の「自動埋め込み」にチェックすれば、YouTube のリンクを本文に書いておくだけで、動画プレイヤーを表示させることができますぜ。

    • シロ

      知らなかった!!w
      そんな便利になってるとはw

      ドヤ顔で記事書いたのに。情報有難うございますー!改めてチェックします :D

  2. mk

    はじめまして。
    Wordpress初心者です。

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

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

    のところが分からなかったので、詳しく教えていただけないでしょうか?

    テーマはMansion(http://kachibito.net/wordpress/gallery-theme-mansion.html)を使っています。

    投稿した動画のサムネイルをサムネイル一覧に表示させたいです。

    具体的にテンプレートのどこにコードを入れればいいのでしょうか?
    functions.phpに追加するところまではできました。

    よろしくお願いします。

    • シロ

      始めまして、こんにちは。

      Mansionのテーマ構造を見ないとなんとも言えませんが、「ループ」というものを把握できれば問題なく実装出来るかと思いますー!

      以下にループの解説が載っています。

      http://wpdocs.sourceforge.jp/The_Loop

      このループ内に記事内のコードを含めれば表示出来ると思います。

      逆に言えば、ループを多少でも理解しないとテーマのカスタマイズは難しいです。
      テーマの作成法も以前ビギナーの方向けに書いたのでご参照下さい。
      http://kachibito.net/wordpress/theme-development-flow.html

      ループの説明はこの記事の「動的にしたい部分をテンプレートタグに変更していく」の辺りに書いてあります。

      ぜひチャレンジしてみてくださいー

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services