WordPressのサイトにPinterestの画像や動画を表示する方法を紹介します。
ピンやボードの中央表示もできます。
WordPressにピンタレストを表示する準備
まず最初に、WordPressでピンタレストのコンテンツを表示できるように、WordPressのテーマを変更します。
※ WordPressテーマの修正に関する注意
WordPressのテーマを修正する際は、必ずバックアップを取り、テスト環境で十分に確認してから、本番環境に反映させてください。
『Pinterest ウィジェットビルダー』の『ピンウィジェット』を表示します。
Pinterest ウィジェットビルダー | Pinterest Business
『ピンウィジェット』をクリックします。
『各ページのクロージング </BODY> タグのすぐ前に pinit.js を 1 つだけ含めてください。』の下にあるコードをまるっとコピーして、ピンやボードを表示したい場所の『</BODY>』の直前に追加します。
私が使っているテーマは『Xeory』なので、子テーマの『footer.php』、『</BODY>』の直前に插入しました。
テーマによっては『</BODY>』の場所が違うことがあります。
ご利用のテーマにあった場所に插入してください。
ピンを埋め込む
WordPressに插入するピンの「…」から「埋め込む」をクリックします。
ピンのサイズ：
小・中・大から選択します。サイズはプレビューの左下に表示されます。
説明を非表示にする：
チェックするすると、ピンの上から順に画像、コメント、保存した人、と3段表示されるうちの2段めのコメント部分が非表示になります。（※記事掲載時の表示形式です。ご利用の時期によっては変更されていることがあります）
このコードをコピーして、アドオンを表示したい場所に貼り付けます：
このコードをWordPressにペーストします。
ボードを埋め込む
『Pinterest ウィジェットビルダー』の『ピンウィジェット』を表示します。
『ボードウィジェット』をクリックします。
Pinterest ボードの URL：WordPressに表示するボードのURLを記入します。
サイズ：
四角、サイドバー、ヘッダー、カスタムから選べます。
カスタムでは、画像の幅、ボードの高さ、ボードの幅、を設定できます。
ボードの幅は、PCで表示する最大値を設定すると、スマホやAMPで見るときにも自動的に適切なサイズで表示してくれます。
このコードをコピーして、アドオンを表示したい場所に貼り付けます：
このコードをWordPressにペーストします。
複数のピンを表示するときにボードにまとめて表示しておけば、ピンの追加や削除をしても常に最新の状態で表示されるので便利ですね。
画像ごとに『P 保存』マークが表示されないのもスッキリしていいかも。
ピンやボードを中央に表示する
中央に表示したいときは、コードを『<center>~</center>』で囲みます。
<center>
<a data-pin-do="embedBoard" data-pin-lang="ja"
data-pin-board-width="600"
data-pin-scale-height="300"
data-pin-scale-width="200" href="https://www.pinterest.jp/infinilab/banksy/"></a>
</center>最後に
画像の加工やサーバーにアップする手間、容量の心配がなくていいのは楽ですね。
将来Pinterestの仕様や規約が変わると画像が表示されなくなる、というリスクがつきまといますが、まぁその時はその時で。
Dlifeショック以降、あのサービスもこのサービスも終わっちゃったりするんじゃないの？と猜疑心MAXな今日このごろです。
いかん、いかん。
信じる心を取り戻さないと…。