WordPressにHTMLを埋め込む(Google Map, Youtube, Facebook, Twitter)

WordPressにHTMLを埋め込む(Google Map, Youtube,  Facebook, Twitter)

こんばんは。のるぼるのんです。

今回はWordPressの投稿画面から、HTMLを埋め込む方法を説明しようかな、と思います。

というのも、前回の記事でGoogle Mapを記事中に埋め込んだのですが、HTMLの知識があまりない方はもしかしたら戸惑うかもなー、と思ったので、初歩的ですが記事にしようかな、と思ったわけです。(簡単な内容って意外と記事無いしね。)

それだけですと微妙ですので、他にGoogle MapやYoutubeなどを埋め込む概略を紹介したいと思います。

タイトルではiframeとしていますが、もちろんscriptタグも埋め込み可能です。

それでは夢と冒険の世界へ、レッツゴー!

 

記事投稿画面からHTMLを埋め込む方法

まずは基本の操作を確認しましょう。記事投稿画面のテキストエディターの右上の見ると、「ビジュアル」「テキスト」があると思います。

まず、HTML(Iframe)を埋め込む位置にポインタを合わせ、画面右上「テキスト」をクリックします。

画像はこの記事の編集画面のスクショです。今この文章の下にポインタがあります。

「テキスト」をクリックでこんな感じ。

<img>や<h4>, <h5>などがありますね。これがHTMLのタグです。

ここに任意のコードを貼り付ければ良い訳ですね。それでは、太文字、赤字で「あいうえお」と入力してみましょう。

あいうえお

できました!今回は<b style=”color: red;”>あいうえお</b>を入力したのでこの様な感じになります。bはBold(太文字)、style=”color: red”で色を調整、という感じですね。

基本的にはこの埋め込んだ、

の代わりに埋め込みたいiframeやscriptタグを貼り付ければ良い訳ですね!

では、次からGoogle Mapなどを埋め込んでいきましょう!

 

Google Mapを埋め込む

まずはGoogle Mapを開き、表示したい地点を検索、確認します。

画面左、「共有」をクリックし、「地図を埋め込む」をクリックします。サイズを選択するドロップダウンと、HTMLコードが表示されるので、サイズを選択し「HTMLをコピー」をクリックします。

あとは上記の流れでコピーしたHTMLコードを貼り付けましょう。出来ましたか?

Youtubeを埋め込む

次はYoutubeを埋め込んでみましょう。

任意の動画で「共有」→「リンクの共有」→「埋め込む」をクリックしましょう。

iframeコードが表示されました。あとはオプションを選択して、コードをコピー、埋め込みます。

Youtubeの埋め込みコードはこんな感じです。

iframeの「LrXHizFao10」文字列を変更すると別の動画を埋め込む事が出来ます。開発の際はiframeの他の部分は最初から埋め込み、IDのみ編集呼び出しにするとXSS攻撃を防げます。

 

ここからはサイドバーに埋め込んでみよう!

ここまでは記事本文に埋め込んでみました。次は、サイドバーなどにTwitterなどの情報を埋め込んでみましょう。

基本的な埋め込み方法は、WordPressメニューから「外観」→「カスタマイズ」→「カスタムHTML」などを選択し、そこにIframeを埋め込んでいきます。

 

Twitterを埋め込む(簡単)

https://publish.twitter.com/#にアクセスし、自分のtwitterアカウントのページを打ち込みます。(https://twitter.com/ユーザーIDです)

「Embedded Timeline」をクリックし、表示されたコードを埋め込みます。

あとは環境に合わせて、オプションを変更してください。

Facebookを埋め込む(開発者登録が必要)

Facebookを埋め込むには個人ページではなく、Facebook開発者登録をする必要があります。(詳しくはこちら

開発者登録が終了しましたら、https://developers.facebook.com/docs/plugins/page-plugin/にアクセス、「FacebookページのURL」を入力してHTMLコードを取得、貼り付けます。

「Instagramも乗せてよ!」っていう方多いと思うんですけど、あれはAPI使用認可がかなり重くて、結構な有名企業とかしっかりした利用目的があるとかじゃないとタイムライン表示みたいのは出来ないと聞いて、手が出ていません。。。

かといって外部ウィジェットはいつまでフォローされてるかわからないし、、、ということで、今回は省きました。

投稿単位ではYouTubeなどと同様に埋め込み可能ですので、記事に埋め込むなどしてご使用ください!

wordpressカテゴリの最新記事