(WP)ValidなYouTubeのタグを出力するショートコードのプラグイン

YouTubeの個々のビデオのページでは、ビデオをブログの記事等に埋め込むコードが提供されています。
ただ、そのコードにはembedタグが含まれていて、XHTMLではValidになりません。

そこで、WordPressのショートコードの機能を使って、Validなコードを貼り付けられるようにするプラグインを作りました。

1.ダウンロード

プラグインは以下からダウンロードします。

ValidYouTube_1_01.zip

プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション(寄付)を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。

WordPress関連書籍また、WordPressをPHPでカスタマイズすることについて書いた書籍「PHPによるWordPressカスタマイズブック」と、WordPressを通してPHPとMySQLの基本をマスターする「WordPressで学ぶPHPとMySQL」というPDFも販売しています。
これらもぜひよろしくお願いいたします。

ダウンロードしたZipファイルを解凍すると、「ValidYouTube」というフォルダができます。
このフォルダを、WordPressの「wp-content」→「plugins」ディレクトリの中にアップロードします。

その後、WordPressにログインして、プラグイン一覧のページを開くと、「Valid YouTube Shortcode」というプラグインが追加されています。
他のプラグインと同様の手順で、このプラグインを有効化します。

2.ショートコードの書き方

投稿に以下のようなショートコードを貼り付けると、その部分がYouTube埋め込み用のValidなXHTMLに変換されます。

[youtube id="xxxxxxxxxx" width="www" height="hhh" rwidth="rrr"]

ショートコードのパラメータの内容は、以下の通りです。

パラメータ内容
id="xxxxxxxxxx"埋め込みたい動画のIDを指定します。
width="www"動画の元々の幅を指定します。
height="hhh"動画の元々の高さを指定します。
rwidth="rrr"動画の幅と高さの比を保ったまま、指定した幅まで動画を縮小して表示します。

3.GreaseMonkeyを使う

上の手順で、ショートコードの書き方を示しました。
ただ、動画のIDを調べたりして手作業でショートコードを入力するのは、かなり面倒です。
そこで、GreaseMonkeyやブックマークレットを使って、ショートコードを自動的に生成できるようにしました。

Firefoxユーザーの方は、GreaseMonkeyを使うと簡単です。

3-1.GreaseMonkeyのインストールと使い方

以下のリンクをクリックすると、Valid Youtubeプラグイン用のGreaseMonkeyをインストールすることができます。

GreaseMonkeyのインストール

3-2.ショートコードの生成

GreaseMonkeyのインストール後は、YouTubeの個々の動画のページにアクセスすると、埋め込み用のコードの下に、このプラグイン用のショートコードも表示されるようになります。
ショートコードの欄をクリックすると、ショートコード全体が選択された状態になります。
後は、ショートコードをコピーして、投稿に貼り付けるだけです。

ショートコード(赤枠で囲んだ部分)を選択する

ショートコードには、id/width/heightのパラメータが設定された状態になります。
動画のサイズを変えたい場合は、rwidthパラメータを手動で指定します。

4.ブックマークレットを使う

Firefox以外の場合は、ブックマークレットでショートコードを生成することができます。

4-1.ブックマークレットをWebブラウザに登録

まず、以下のリンクを、Webブラウザのブックマークに追加します。
例えば、Internet Explorer 8なら、リンクを右クリックして、「お気に入りに追加」のメニューを選びます。

Valid YouTube Bookmarklet

4-3.ブックマークレットを使う

次に、YouTubeの動画のページを表示してから、ブックマークレットを起動します。
すると、別ウィンドウが開いて、このプラグイン用のショートコードが表示されます。
後は、ショートコードをコピーして、投稿に貼り付けます。

別ウィンドウにショートコードが表示される

ショートコードには、id/width/heightのパラメータが設定された状態になります。
動画のサイズを変えたい場合は、rwidthパラメータを手動で指定します。