このサイトで使っているワードプレスという超高性能ブログシステムには、ブログ記事にYouTubeの動画リンクを1行貼り付けるだけでそれを動画プレイヤーに変換して表示してくれる oEmbed という便利な機能が備わっています（他にもTwitterやInstagramなど沢山のサービスに対応しています）。
https://wpdocs.osdn.jp/oEmbed
とても便利なのですが、表示するのがYouTubeの埋め込み動画プレイヤーだけだと、ユーザーの利用端末や環境によっては再生できなかったりYouTubeの動画ページへ移動できなかったりする恐れがあります。動画プレイヤーのそばにYouTubeページへのリンクも表示すると親切なのですが、動画プレイヤーの埋め込みがURL貼り付けだけで出来るのに同じURLのリンクを手作業でちまちまと付け足すのは面倒臭いです。まさに二度手間。
そこで投稿時にYouTube動画URL貼り付けによる動画プレイヤー埋め込みをしたとき、その動画プレイヤーの下にYouTube動画ページへのテキストリンクを自動挿入するphpコードスニペットを考えました。スニペットというのは断片という意味だそうです。
ぐるぐる風景「横浜」 – Round and Round Yokohama, Japan
PHPスクリプト
下記をテーマファイルの中にある functions.php にコピペで追加すればオッケーです。新しい画面・タブで開くのが好みでないなら「target=”_blank”」の部分を削除してください。
// WordPressでYouTubeのURLからの動画埋め込みにテキストリンクを自動挿入するphpコード
// http://temp2.henteko.net/2017/10/29/youtubelink-oembed-filter-php-snippet/
function youtubelink_oembed_filter( $html, $url ) {
if ( strstr( $url,'youtu' ) && is_singular() && in_the_loop()!== false ) {
return $html.'<p><a href="'. $url .'" target="_blank">'. $url .'</a></p>';
}else{
return $html;
}
}
add_filter( 'embed_oembed_html', 'youtubelink_oembed_filter', 10, 2 );
ただ functions.php を使うとテーマを切り替えたときに機能を持ち越せないので、Code Snippetsプラグインを利用してそちらに登録すると便利です。ワードプレスって便利な機能がたくさんありますね。ありがてぇ…。
さらにカスタマイズ 2018/7/6
YouTube動画のテキストリンクの前にFont AwesomeのYouTubeアイコン『 』を赤色で表示するカスタマイズです。
Font Awesomeを読み込んでおく
Menu Iconsプラグインを入れるのが簡単です。
スニペット書き換え
上記スニペットの<p>の部分を下記に書き換える。
<p class="youtube-play"><i class="fa fa-youtube-play fa-lg fa-fw"></i>
追加CSSを設定
赤くします。
.youtube-play{color:red;}
コメント