4ステップでわかる！WordPressサイトにPinterestの写真を埋め込む方法

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

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

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

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

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

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

という方法です。

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

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

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

Step1. 写真の詳細を表示

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

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

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

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

Pinterest

Home ( DIY Design Idea )

https://www.pinterest.jp/pin/348888302369536168/

Mahogany Dart Holder

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

飯橋凛（いいはし りん）

おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。

ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。

質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。