Wordpressカスタマイズ

YouTubeを埋め込んでも重くならないようにする方法を『ショートコード』で使えるようにしたよ!

投稿日:2016年10月28日 更新日:

シェアする

スポンサーリンク

こんちゃす、たけ氏でっす!

 

昨日こんな記事を書きまして、そこそこYouTube動画を埋め込んだんです

[blc url="http://30cm.xyz/yu-gi-oh-oped/"]

 

なのでこの機会に『YouTubeを埋め込んでも重くならないようにする方法』を導入したのですが、ぼくは思いました。

 

『凄くイイ!!』
『でも…やっぱり手順多いなあ…』
(ゴメンナサイ)

ぼくも何とか手順を減らしたく思い Wordpressの便利機能『ショートコード』で簡単に使えるようにカスタマイズしてみました!

最終的に [youtube url="動画のURL"] と入力するだけでYouTube動画を埋め込めるようになりますっ!

WordPressブログの方はぜひ使ってみてください◎

 

 

ショートコードを使う準備&カスタマイズ

WordPressの内部をいじりますので必ずバックアップを取ってから追記・変更してください。何かトラブルが起こっても筆者は責任を負えません。

(実際カスタマイズの過程で何度かWordpressぶっ壊しました。笑)

 

『function.php』に追記するコード

hs4

 

外観→テーマの編集 から、function.phpを選択し以下を追記します。

// タイトル取得コード
function getPageTitle( $url ) {
 $html = file_get_contents($url); //(1)
 $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); //(2)
 if ( preg_match( "/<title>(.*?)<\/title>/i", $html, $matches) ) { //(3)
   return $matches[1];
 } else {
 return false;
 }
}
// YouTubeショートコード
function youtubeFunc( $atts ) {
 extract(shortcode_atts(array(
   'url' => 'https://youtu.be/R8-wmToW39Q',
   'id' => 'R8-wmToW39Q',
  ), $atts));
  $title = getPageTitle($url);
  $id = substr($url, 17);

 return '<div class="youtube" data-video="http://www.youtube.com/embed/' . $id . '?autoplay=1" data-name="' . $title . '"><img src="http://img.youtube.com/vi/' . $id . '/0.jpg" alt="" width="640" height="380"></div>';
}
add_shortcode('youtube', 'youtubeFunc');

オレンジ文字部分はデフォルトの動画URLです(テキトーです)

赤文字部分は画像のサイズです。widthが横幅、heightが縦幅なのでサイトデザインに合わせて変更してください。

ピンク文字部分はサムネイルのサイズです。こちらもサイトに合わせて変更してください。

入れる文字  サイズ
default.jpg 120×90
mqdefault.jpg 320×180
0.jpg 480×360

他にもあるようですが、大きいサイズのサムネイルなどは動画によって無いものもあるみたいですので、↑表くらいのサイズがちょうどいいかと。

 

このコードの『// タイトル取得コード』部分は以下のサイト様からまるパクリさせて頂きました(懺悔)

[blc url="http://creazy.net/2008/05/php_get_page_title_sample.html"]

 

// YouTubeショートコード』のreturn部はBackflow・Liabさんの『ようつべタグぽん ver.2.0』で出力されるコードを参考にさせて頂きました

[blc url="http://youtubetagupon.web.fc2.com/ytp.html"]

 

 『style.css』に追記するコード

Backflow・Liabさんの記事を勝手に参照させていただき、CSSコードをstyle.css内に貼り付けます。

[blc url="http://blog.kaerucloud.com/entry/youtubetagupon-2"]

 

まるパクリです。すみません

 

『footer.php』に追記するコード

ここも、Backflow・Liabさんの記事を勝手に参照させていただきます。
『最後に、コチラのコードを記事の一番下に貼り付けて終了です。』部分のコードをfooter.phpの</body>より上にまるまる貼り付けます。

[blc url="http://blog.kaerucloud.com/entry/youtubetagupon-2"]

 

まるパクリですみません…!

 

準備は終わり、実際に使ってみる!

早速使ってみます! 今回はこの動画でやってみます

(↑は標準の埋め込み機能を使ってます)

 

まず動画にアクセス、

youtubeshort

そしてタイトルの下にある『共有』をクリックし表示されるURLをコピー!

(必ず共有のURLでやってください。省略URL以外だと正常に動作しません。)

 

そして入力

[youtube url="https://youtu.be/jqk0jwNs2Ew"]

これでサムネイルが表示され、クリックで再生できます

 

ちなみに[youtube]と入力すると、デフォルトに設定した動画が表示されます

fooさんが出るハズ!

 

3つのコードを貼り付けておくだけでめちゃくちゃ便利なショートコードの完成ですっ

 

色んなサイト様を参考(&まるパクリ)させて頂きました

各章で紹介させていただきましたが、色んなサイト様を(勝手に)参考にさせて頂きました。ありがとうございます!!

(お気に触るようでしたら対象部分を削除したり対処いたしますのでお声掛けください)

 

おわりに

YouTube動画は標準の埋め込み機能でもテキストモードにして張り付ける必要があったので、これでめちゃくちゃ便利になりました!!

昨日書いた記事もすっきり! いやー導入してよかった~~

 

[blc url="http://30cm.xyz/yu-gi-oh-oped/"]

[amazonjs asin="4798130931" locale="JP" title="一歩先にいくWordPressのカスタマイズがわかる本"]

 

以上っ!!

この記事をシェアする!

おすすめ記事

1

こんちゃす、たけ氏でっす! 『メジャーな漫画はもう読んだ、次はちょっとマイナー漫画だ!』という方におすすめの、超面白い漫画を紹介します! マイナーの基準が難しいですけど メジャーでない なんか読んでる ...

2

こんちゃす、たけ氏でっす!   何度も繰り返して読んだり、本棚から引っ張り出して読み返しちゃう漫画ってありますよね! 今回はぼくが何度も読んだ漫画を紹介してみますっ ルールは 2回以上読み返 ...

3

こんちゃす、たけ氏でっす! 知り合いに必ず1人はいる『たけし』 かく言うぼくもたけしです そんなぼくがある日『アニメに出てくるたけしってどれだけ居るんだろう』と思い立ったのが地獄の始まり。まさかこんな ...

-Wordpressカスタマイズ

Copyright© 人生あと30cm! , 2024 AllRights Reserved Powered by AFFINGER4.