Loading…

記事内にプロモーションが含まれています。

フォレスト出版
¥2,047 (2024/03/15 08:52時点 | Amazon調べ)

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

YouTube動画が重い時や遅い時に遅くならない簡単解決方法(続)

YouTube

所要時間目安:3

This session is using  IPv4  is established in

この記事は2016年5月27日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

目次に行く・戻る

メルカリ招待コード:

以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイックタグの追加にて簡素化しましたが、どうしても記事の最後部分に以下のスクリプトコード(<script>// <![CDATA[によるもの)をクイックタグに追加しようとしても私にはちょっと解決方法が見つけることが出来ませんでした。
(考えることができなかったというのが正解かもしれません…。)

 

 

アドセンス336pxPC閲覧記事下表示1つ目コード

 


この記事を読む方へのオススメ


そして、ならばショートコードで対応と思いましてfunction.phpに基本的なショートコードの記述方法にて記述しました。

 

一応、ショートコード化は成功したのですが…。
(ソースコードにはちゃんと反映されているのですが、思うように機能せずでした。)

たぶん、熟知されている方々はクイックタグへの追加やショートコード化も問題なくこなせるのかもしれません。

 

ちなみに、ショートコード化する際にはそのままですとサイト自体がエラーで表示されなくなってしまうので、

 

タグ変換サイトなどでエンコード(エンティティ?)してからfunction.php内に記述しないとなりませんでした。ました。

例えばこんな感じです。

 

&lt;script&gt;// &lt;![CDATA[
 $('.youtube').click(function(){
 video = '&lt;iframe src=&quot;'+ $(this).attr('data-video') +'&quot; frameborder=&quot;0&quot; width=&quot;480&quot; height=&quot;270&quot;&gt;&lt;/iframe&gt;';
 $(this).replaceWith(video);
 });
 // ]]&gt;&lt;/script&gt;

 

本当は以下のように表示されます。

 

<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とかの指定サイズを変更すれば投稿記事幅いっぱいに動画再生可能なのかもしれません。

あなたにおすすめ

20周年サイトとBIGLOBE30周年記念サイト

PC インターネット 伝えたいこと 備忘録 光コラボ 時事ネタ

20周年記念サイト一覧とBIGLOBE30周年記念キャンペーン

インターネットが世の中に登場したのは…。BIGLOBEが前身の1986年にパソコン通信のPC-VANとして誕生しているので、 30年以上前ということになるのでしょう。しかし、多くの方々はWindows…

もっと読む

インフィード広告アドセンス

Windows10スタートメニューやタスクバー部分などがクリック出来ない時の対処方法

PC Windows10 不具合 伝えたいこと 備忘録 設定

Windows10スタートボタン効かない,タスクバークリック出来ない対処方法

今日パソコンを立ち上げた所デスクトップの下部に表示されているタスクバー部分の、 クイック起動メニューはクリックできました。 しかし…。 パソコンをシャットダウンしようとスタートボタン・スタートメニュー…

もっと読む

インフィード広告アドセンス

Windows10無償アップグレード後もアップグレードが可能でする方法

PC Windows10 アップグレード 伝えたいこと 備忘録 時事ネタ

Windows10無償アップグレード期間過ぎてもアップグレード方法(今のところ可能)

以前に、Windows10の無償アップグレード期間が昨年2015年7月29日にWindows10がリリースされてから、 1年間は無償アップグレード期間となっていました。 実際に、 その通りに終了した模…

もっと読む

インフィード広告アドセンス

WordPress カスタマイズ カスタマイズ ツール ブックマークレット 伝えたいこと 備忘録

カエレバアフィリエイトリンク作成ツールでpochippポチップみたいなAmazonメインで作成方法

ここ数年の間に物販系アフィリエイト作成ツールに複数のツールが出てきました。大元はかん吉さんが作成したカエレバというwebツールが元祖ですが、AmazonのPA-APIが使用制限や国内企業応援ということ…

もっと読む

インフィード広告アドセンス

アドセンス新コード遅延読み込みモバイルでページスピード最高値

AdSense WordPress カスタマイズ 伝えたいこと 備忘録

AdSense(アドセンス)新コードの遅延読み込み2つの方法

Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス(Google AdSense)の新しいコードの遅延読み込みコードの2種類の方法につい…

もっと読む

インフィード広告アドセンス

SNS終わりの始まり

SNS 伝えたいこと 備忘録

SNS終わりの始まり…。それは何なのか。ソーシャルとは何なのか。

SNS(ソーシャル・ネットワーキング・サービス)・・・。 個人情報保護法・・・。 個人情報保護法ができたはずなのに、SNSというソーシャル・ネットワーキング・サービスと横文字を連ねたことにより比較的抵…

もっと読む

おすすめの記事一部広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

お小遣い稼ぎにアンケート。

Multiplex 広告

Googleニュース

2024-04-19

秦の始皇帝陵1号銅馬は18日、3年にわたるメンテナンスを経て、秦の始皇帝陵銅馬博物館に運ばれ、展示スペースに設置されました。秦の始皇帝陵1号、2号銅 ...

2024-04-19

自動車保険や自動車税、メンテナンス費用を含む月額利用料で、中途解約可能なサービスを通じて、手軽にドレスアップを楽しむことができる。 情報提供元 ...

2024-04-19

また、自動車保険には代理店型と通販型の2種類あり、通販型のほうが保険料が安い傾向にあります。 定期的にメンテナンスを行う. 定期的にメンテナンスを行 ...

2024-04-19

リコールとは、クルマの設計・製造段階において部品や構造の問題があり、これを自動車メーカー自らの判断によって修理・部品交換などを行う制度。 該当する ...

2024-04-19

単に電動を売り出すだけでなく、メンテナンスアプリによる健全な中古市場の育成やバッテリー交換ステーションの整備など、大きなエコシステムを構築 ...

Total212


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください