以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイックタグの追加にて簡素化しましたが、どうしても記事の最後部分に以下のスクリプトコード（<script>// <
スポンサーリンク
そして、ならばショートコードで対応と思いましてfunction.phpに基本的なショートコードの記述方法にて記述しました。
一応、ショートコード化は成功したのですが…。
（ソースコードにはちゃんと反映されているのですが、思うように機能せずでした。）
↑
たぶん、熟知されている方々はクイックタグへの追加やショートコード化も問題なくこなせるのかもしれません。
ちなみに、ショートコード化する際にはそのままですとサイト自体がエラーで表示されなくなってしまうので、
タグ変換サイトなどでエンコード（エンティティ？）してからfunction.php内に記述しないとなりませんでした。ました。
例えばこんな感じです。
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>
本当は以下のように表示されます。
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>
この上記コードを毎回Google日本語入力ソフトやMicrosoftIME（日本語入力）やATOKなどの辞書にて呼び出すのはちょっと面倒だし、
何より忘れてしまいがちかと思います。
なので、 それならば、そのままsingle.phpの記事本文の下部に追記しておけば良いのでは？
と考えまして、「外観」→「テーマの編集」にてphp内にそのまま記述しました。
追記場所としてはテーマによって異なるかもしれませんがおおむね同じような場所だと思います。
<?php the_content(); //本文 ?>
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 5 ) ) : else : ?>
<?php endif; ?>
<?php wp_link_pages(); ?>
上記位置・場所の下に上記してあるタグ変換（エンティティ変換？）の前のスクリプトコードを追記します。
<!--YouTube遅くならない方法スクリプトここから-->
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>
<!--YouTube遅くならない方法スクリプトここまで-->
こんな感じにです。
その結果は以下です。
重くなったり遅くなったりぜずに、ちゃんとYouTube動画がカッコいく表示されていると思います。
もう一つDAIGOさんと北川景子さんの結婚式の動画です。
ちょっと、以前の記事（上記）と動画の再生中に大きさがちっちゃくなっちゃっているかと思いますが、せっかくの良い方法を考案してくれた方々のアイデアと効率化を考えると、全く動画が再生されないわけではないので良いのではないでしょうか。
だって、 YouTubeの動画を大っきく表示するということがメインではなく、記事としての価値と記事の内容を伝えられることが一番ですから！！
※おそらくwidthとかheightとかの指定サイズを変更すれば投稿記事幅いっぱいに動画再生可能なのかもしれません。
コメント