WordPressのサイトにPinterestの写真を埋め込みたいんだけど！
どうも、Linです。日差し、探してます。
「ワードプレスのサイトにPinterestのおしゃれな写真を埋め込みたい！」
という時が1年に1回ぐらいあると思います。
そんな緊急時に知っておきたいのが、
WordPressサイトにPinterestの写真を埋め込む
という方法です。
今日は、たまたまその方法をマスターしたので忘れないうちにメモしておきますね。
ワードプレスにPinterestの写真を埋め込む方法
次の5ステップを踏むといいでしょう。
Step1. 写真の詳細を表示
まずはPinterestでめぼしい写真を見つけます。
「あっ、サイトに埋め込みたいな・・・」
という画像に出会ったらクリックして詳細画面に遷移しましょう。
今回は例として「ダーツの画像」を埋め込んでいきますよ。
Step2. 点をクリック
写真の左上に「3つの点が連なったマーク」があるでしょう。
こちらをクリックすると、
- ピン報告する
- 埋め込む
という2つの選択肢が出現するので今回は2つ目の「埋め込む」を選びます。
Step3. HTMLコードをテキスト編集モードで
埋め込みのためのコードが次の2種類発行されます。
- HTML
- 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
こんにちは。
Pinterest埋め込みありがとうございます。
しかし、トライしましたができませんでした。
テキストに埋め込んでもダメでした。ビジュアルに戻してませんが何度やってもうまくいきません。
まずはHTMLのコード、次にJavaScriptのコードを並列で入れました。
問題はどこでしょうか。
お時間ありましたらお願いします。
これじつはWordPress側の問題なんですが、ビジュアルに戻すと微妙にテキスト編集とはコードが違ってきちゃうんです。
このピンタレストの記事だけに関しては更新をテキストモードでおこなってくださいね。決してビジュアルに戻してはダメです