WordPressのサイトにPinterestの写真を埋め込みたいんだけど！

どうも、Linです。日差し、探してます。

 

「ワードプレスのサイトにPinterestのおしゃれな写真を埋め込みたい！」

という時が1年に1回ぐらいあると思います。

そんな緊急時に知っておきたいのが、

WordPressサイトにPinterestの写真を埋め込む

という方法です。

今日は、たまたまその方法をマスターしたので忘れないうちにメモしておきますね。

 

 

ワードプレスにPinterestの写真を埋め込む方法

次の5ステップを踏むといいでしょう。

 

Step1. 写真の詳細を表示

まずはPinterestでめぼしい写真を見つけます。

「あっ、サイトに埋め込みたいな・・・」

という画像に出会ったらクリックして詳細画面に遷移しましょう。

 

 

 

今回は例として「ダーツの画像」を埋め込んでいきますよ。

 

Step2. 点をクリック

写真の左上に「3つの点が連なったマーク」があるでしょう。

 

 

こちらをクリックすると、

• ピン報告する
• 埋め込む

という2つの選択肢が出現するので今回は2つ目の「埋め込む」を選びます。

 

 

Step3. HTMLコードをテキスト編集モードで

埋め込みのためのコードが次の2種類発行されます。

1. HTML
2. JavaScript

 

まずはHTMLのコード。

WordPressの記事編集画面で「テキスト」からペースとして貼り付けます。

 Copy and paste this code into your page where you want your add-on to appear:

と書かれてるやつですね。

 

 

ここでのポイントは、

WordPressのビジュアル編集モードには戻してはいけない

ということです。必ず「テキスト編集モード」で記事を更新するようにしましょう。

 

 

もし、ちょっとした手違いでビジュアル編集モードに戻してしまうと、

PinterestのHTMLコードが消失する

という悲劇が起こりますので、最終編集の際には要注意です。

 

Step4. JavaScriptコードを埋め込む

Pinterestの写真を埋め込むためにはHTMLだけでなく、

JavaScriptのコード

を一緒に埋めなくてはなりません。

 

 

しかも、但し書きに、

Don’t forget to include pinit.js once per page, right before the closing </BODY> tag.

と書いてあるので、

• JavaScriptのコードは１ページにつき1つまで
• 入れる場所はBODYタグをしめる直前

ということに注意しましょう。

 

ってことで、まあBODYタグのしめる直前ではありませんが、テキスト編集モードの一番下にぶち込んでおけばいいでしょう。

最終的に、先ほどのダーツの画像の埋め込みに成功すると次のように表示されるはずです。

 

 

さあ、Pinterestの写真を埋め込んでキレイになろう

以上がPinterestの写真をワードプレスのサイトに埋め込む方法でした。

埋め込む際にテキストモードで編集するということを忘れなければ大丈夫そうですね。

 

Pinterestの埋め込みは写真単体だけでなく、

ボードごと埋め込んだり、

 

アカウントのプロフィールをブチ込んだりできるようです。

 

Pinterest埋め込みに使用した「Widget builder」を駆使してサイトをPinterestチックにサイトを変幻させていきましょう。

 

それでは！

Lin