このブログはWordpressの有料テーマAffinger（アフィンガー）というものを使っています。ブロガーが御用達で、とにかくいろいろなことができるとても素晴らしい有料テーマです。
そんなAffingerは常にアップデートがあるのですが、僕が望む機能の一つが今の所アップデートされないため、自分で改造することにしました。
今回改造するのは、AffingerのYouTubeサムネイルを改造するというものです。
同様の不満を抱えている人で、実践してみたい人は、function.phpをいじるので自己責任でよろしくおねがいします。
AffingerのYouTubeを高解像度化させたい
通常、Wordpressでは、YouTubeのURLをそのまま乗せると、自動的にYouTubeの動画が埋め込まれます。他にもYouTubeが用意した「埋め込みコード」でYouTube動画をブログで紹介できたりするのですが、Affingerはナイスな感じで装着できます。
↑こんなかんじで、YouTubeサムネイルを表示させて、YouTubeの動画を乗せるれるんです。
PC表示だと、コレをタップするとポップアップでYouTubeが表示されると思います。
こんな感じですね。
これは、Affingerの機能「YouTubeをサムネイル表示で埋め込み」ってのと、Wordpressのプラグイン「Easy FancyBox」を組み合わせてそのようにできています。ちなみにコレの利点は、YouTubeの埋め込みで起きる読み込み時間の解消…つまりサイト表示の高速化が行えるということです。
・
・
・
WordPress表示的にメリットはあるものの「YouTubeをサムネイル表示で埋め込み」がちょっと不満だったんです。
現在はYouTubeのサムネイル表示は僕が思った解像度になってますが、実は、それより前はこんな画像だったんです。
うーん小さい。A
ffingerのデフォルトでは、この小さい画像が表示されます。実際にはこれを更に引き伸ばしたものなので非常に汚い画像に見えます。スマホ表示だとコレでもいいんでしょうけどね。
いちおう写真系ブログのつもりですので、できればサムネイルもしっかりきれいに見せたい。ってことでこの「YouTubeをサムネイル表示で埋め込み」のサムネイル表示を改造しました。
Affingerのfunction.phpを改造
※冒頭でも書きましたがfunction.phpを書き換えるため自己責任です もしやるならバックアップを 治せる自身がないならやらないのが無難
※子テーマが存在すること前提で書きます
まず、Affinger子テーマのfunction.phpにアクセスします。Wordpressからは、「外観」→「テーマエディタ」に入ります。
その後、右側にある「テーマファイル」という欄から「function.php」を選択。
その下部に以下を追加します。
if ( !function_exists( 'st_youtube_img' ) ) {
function st_youtube_img( $youtube_id ) {
extract(shortcode_atts(array(
'id' => '',
), $youtube_id), EXTR_SKIP);
$youtube_link = '<div class="st-youtube"><a href="//www.youtube.com/watch?v='.$id.'" target="_blank" rel="nofollow"><i class="fa fa-youtube-play"></i><img src="//img.youtube.com/vi/'.$id.'/maxresdefault.jpg" alt="" width="100%" height="auto" /></a></div>';
return $youtube_link;
}
add_shortcode( 'youtube', 'st_youtube_img' );
}
こちらのソースコード内の赤文字になっている部分（maxresdefault）を書き換えてあげると思った解像度になります。Affingerのデフォルト（2020年1月公開バージョンの場合）では、YouTubeのサムネイルサイズは「mqdefault」となっているところを、上記コードをfunction.phpに書き込むことで「maxresdefault」サイズを取得します。
なおサイズについては以下のとおりです。
- default(120×90)
- mqdefault(320×180)
- hqdefault(480×360)
- sddefault(640×480)
- maxresdefault(1280×720)
自分の思ったサイズを取得できるのでぜひとも改造してほしい。
スポンサーリンク
function.phpの改造は自己責任で
何度もいいますが、たとえ子テーマをいじるにしてもfunction.phpの改造は自己責任でお願いします。上記コードを追加して、何かしら不都合、最悪の場合はWordPressに入れない、サイトが表示されないなんてことになっても自己責任です。それの対処ができない人はいじらないほうが良いと思います。
ただ、今回紹介したものはすぐにでも対応できそうなので、Affinger側で何かしらYouTubeのサムネイルを選べるようにしてほしいなとは思います。
