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

Sponsored Link

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

どうも、Linです。日陰、ありましたね。

 

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

という時がWordPressサイトを運営していると1年に1回ぐらいあると思います。

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

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

という方法です。

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

 

 

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

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

 

Step1. 写真の詳細を表示

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

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

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

wordpress pinterest 埋め込む

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

 

Step2. 点をクリック

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

wordpress pinterest 埋め込む

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

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

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

wordpress pinterest 埋め込む

 

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

すると、埋め込みのためのコードが発行されます。

まずはHTMLのコード。

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

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

と書かれてる方ですね。

 

wordpress pinterest 埋め込む

 

ここでのポイントは、

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

ということです。必ず「テキスト編集モード」に設定しましょう。

wordpress pinterest 埋め込む

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

PinterestのHTMLコードが消失する

という悲劇が起こりますので、最終編集の際には必ずテキスト編集モードで作業するようにしましょう。

 

 

Step4. JavaScriptコードを埋め込む

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

JavaScriptのコード

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

wordpress pinterest 埋め込む

しかも、但し書きに、

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

と書いてあるので、

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

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

 

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

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

 

 

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

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

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

 

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

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

 

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

 

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

 

それでは!

Lin


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる