日々のの出来事やニュースなど更新する雑記ブログです

Setirsブログ

雑学

WordPressヘッダーへYoutube動画設置

更新日:





こんにちはSetirです



更新がの間がだいぶ空いてしまいました(汗)

というのも今回他のサイトを作っていたんですが

私はデザイン系の専門知識がほとんどないのに

「WordPressヘッダーにYoutube動画」を設置したい!

と思い頑張ってました(かなり無謀)





WordPressヘッダーにYoutube動画で検索しても

難しいやり方しか出てこないんです(涙)

それでも四苦八苦して挑戦してみたもののほぼ撃沈

色々と調べた結果、これが一番簡単に出来そうだな

という方法を紹介したいと思います^^

※テーマの編集をしますので作業は自己責任でお願いします。

WordPressヘッダーにYoutube動画設置手順


結論から言いますと

膨大な検索の末たどり着いたサイトからの引用です

WordPressのテーマカスタマイザーからヘッダーにYoutubeを設置できるようにする

こちらのサイトにたどり着いたきっかけは

WordPress 4.7 でカスタムヘッダーに

ビデオがサポートされたという内容のサイトに遭遇して

検索の方法を変えたらやっと見つかった感じです^^

上記のサイトを参考にして頂ければいいと思いますが

簡単な手順を紹介すると

・テーマカスタマイザーを有効にする

・メインビジュアルに動画を設置する

・レスポンシブになるようにスタイルを指定する

たったこれだけの手順でサイトのヘッダー(メインビジュアル)に

Youtubeの動画を設置できるようになります。



・テーマカスタマイザーを有効にする


functions.phpにソースを追加
※ソースはリンク先のサイトからコピーしてください

追加する部分は一番最後の部分でOKです

追加するとテーマカスタマイザーに

Youtube動画に関する設定ができるように変わります


・メインビジュアルに動画を設置する


「front-page.php」「home.php」もしくは「index.php」

にソースを追加
※私の場合は「header.php」のの手前へ追加しました
※追記(2/13)TOPページのみに表示をしたかったので
「index.php」のheader直下へ追加しました
※ソースはリンク先のサイトからコピーしてください

ここが一番気をつけるところです

ソースを張る前に必ず

編集前のソースのコピーを
テキストファイルなどで保存しておいてください


・レスポンシブになるようにスタイルを指定する




style.cssにソースを追加
※ソースはリンク先のサイトからコピーしてください

こちらも追加する部分は一番最後の部分でOKです

メインビジュアルYoutubeの設定の使い方



まずYoutubeのIDですが

「https://www.youtube.com/watch?v=gCk6TMOMO6o」

※この動画はお笑い芸人アイデンティティの私のお気に入りの動画ですw

「=」のあとのgCk6TMOMO6oの部分がIDです

あとの設定は「0」と「1」なのでお好みでどうぞ

まとめ


ぶっちゃけてクールな感じの設定ではないんですが

ソースを追加するだけで行けちゃうんで

専門的な知識がなくても導入できるところが魅力的ですね^^

WordPress 4.7 でカスタムヘッダーにビデオがサポートされたことで
今後専用のプラグインなんかも出てくれば

簡単に動画を導入できるサイトが出来るようになりますね^^

おすすめ記事

1

こんにちはsetirです。 私は山梨県に在住しておりますが、山梨県の住民は自家用車の所有率が高く 一家に一台ではなく 一 ...

2

こんにちはSetirです 前回の歯周病治療 根治に向けて(治療編3 フラップ手術後~)に続き 今回は新しい部位の切開手術 ...

3

Hulu【無料】2週間トライアル こんにちはSetirです 私の子供たちはアンパンの大ファンです 特に一番下の子供は毎日 ...

4

パルシステム・生協(コープ/COOP)について こんにちはsetirです 食材のデリバリーって便利ですよね。私が良く利用 ...

5

こんにちはSetirです 私はsoftbankからmineo(マイネオ)へMNP(乗り換え)しましたが 手続きや、解約手 ...

-雑学

Copyright© Setirsブログ , 2021 All Rights Reserved.