以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイックタグの追加にて簡素化しましたが、どうしても記事の最後部分に以下のスクリプトコード(<script>// <![CDATA[によるもの)をクイックタグに追加しようとしても私にはちょっと解決方法が見つけることが出来ませんでした。
(考えることができなかったというのが正解かもしれません…。)
スポンサーリンク
そして、ならばショートコードで対応と思いまして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とかの指定サイズを変更すれば投稿記事幅いっぱいに動画再生可能なのかもしれません。
関連記事
-
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
スマホでピンチアウトできないStinger6、Stinger7、StingerPLUS+でのピンチアウト方法
WordPressでのテーマとして超有名でかつ、カスタマイズ性に優れたStingerシリーズがあります。 そのStingerシリーズ(micataシリーズとAFFINGERシリーズ)では、最近(昨今流…
-
PC インターネット 伝えたいこと 備忘録 光コラボ 時事ネタ
20周年記念サイト一覧とBIGLOBE30周年記念キャンペーン
インターネットが世の中に登場したのは…。 BIGLOBEが前身の1986年にパソコン通信のPC-VANとして誕生しているので、 30年以上前ということになるのでしょう。 しかし、多くの方々はWindo…
-
新しい事を初める準備や片付けって意外と面倒で時間がかかる…。
なんでもそうですが、新たに新しいことを始める時に(家の配置替えや片付けや家電の買い替えやいろいろ)これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…
「WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
おすすめの記事一部広告
comment