WordPress(ブログ)にユーチューブを入れると、説明にボリューム感が増したり、奥行き感が深くなったりします。

ただし、youtubeを多く入れた場合は、ブログが重くなって開けなくなったり、開けてもyoutubeの再生が思うように行かないケースがあります。

このような状態になるのを避けるために、以下のコードを使用しています。

また、以下のコードはheader.phpなどに読み込ませることもOKですが、ロビンは、ブログ全体に以下のコードの効果を発生させる必要がないため、記事の投稿欄にケースに応じて、コードを貼り付けて使用しています!

このコードは、マナブログ様の下記のコードを参考にしています!



WordPressにyoutubeを入れても重くならないコード!

基本的に、下記のコードを使用しています。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/**********" frameborder="0" allowfullscreen></iframe>

WordPressにyoutubeを入れる方法は、下記のとおりです。

下の画像は、ドナサマーのホットスタッフのyoutubeです。

この文字列AqS4aNi0HQYを使います!

yputubeの=から右の部分(画像の例ですと

AqS4aNi0HQY

です!)を、embede/ここに入れる”のようにするとOKです。

*embed/ “のスラッシュからダブルクォーテーションの間に、

AqS4aNi0HQY

などの文字列を入れてください!
/embed/**********” frameborderの*********の部分です!

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/AqS4aNi0HQY" frameborder="0" allowfullscreen></iframe>

WordPress(賢威7-1)に、youtubeを4つ入れてみました!

下記のソースコードは、scriptも含めて、下記の位置に記載しました!


WordPress(ブログ)にyoutubeを埋め込む方法!

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>SCRIPTのコード記述は1つだけ!scriptの指示命令は1つだけでOKです!

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/AqS4aNi0HQY" frameborder="0" allowfullscreen></iframe>iframeのコードは必要に応じて2つ、3つと貼り付けます!1つのscriptの指示命令に対する実行すべき目的はいくつあるのか?それを記載します!

*上記コードは、コピーペーストでそのまま使用できます!

WordPressにyoutubeを実際に埋め込んだコードです!

以下のコードは、実際に埋め込んだソースコードです!

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/amFm3Ihosig" frameborder="0" allowfullscreen></iframe>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/q_oWaVDKXVQ" frameborder="0" allowfullscreen></iframe>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/UGJQPkfwlAc" frameborder="0" allowfullscreen></iframe>

<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/AqS4aNi0HQY" frameborder="0" allowfullscreen></iframe>

上から、ショッキングブルー、オリジナルキャスト、ダイアナロス、ドナサマーです!

WordPressにyoutubeを入れて、作成した記事は下記画像のとおりです。

簡単にワードプレスの投稿記事にyoutubeを入れることができます!

WordPress上で、ソースコードを表示する方法(プラグインを使用しない方法)

今日は、ワードプレス-賢威7-1上で、ソースコードを開示する方法についても、若干記載します!

ロビンは、プラグインをあまり使用したくない、かつ、function.phpもあまり変更したくないので、ソースコードを開示するにあたって、次の方法を選択しました。

ソースコードをワードプレス上で、適正に表示するにはプラグインなどの方法がありますが、頻繁にソースコードの表示を行わないならば、以下のソースコードの変換ソフトを使用しても十分OKだと思います!



WordPressにソースコードを表示!(プラグイン・php加工なし)

下記の記事で、プラグインやfunction.phpの加工をしない記事を書きました!

ご覧ください!

様々な資格学習が980円でウケホーダイ!【オンスク.JP】