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

Sponsored Link


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

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

 

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

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

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

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

という方法です。

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

 

 

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

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

 

Step1. 写真の詳細を表示

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

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

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

 

wordpress pinterest 埋め込む

 

 

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

 

Step2. 点をクリック

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

 

wordpress pinterest 埋め込む

 

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

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

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

 

wordpress pinterest 埋め込む

 

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 埋め込む

 

ここでのポイントは、

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

飯橋凛(Ihashi Lin)

新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている


Sponsored Link

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



もう1本読んでみる