【最大99%オフ】商用利用可能なデジタルデザイン素材集が期間限定販売中!→

ピンタレストのボードやピンをワードプレス投稿内に埋め込んで表示する方法【プラグインで簡単!】

(Disclosure:記事内のリンクの一部はアフィリエイトリンクです。詳しくはプライバシーポリシーをお読みください。)

こんにちは! Keiko(@kmy_design)です。

わたしはピンタレストのヘビーユーザー(当ブログのPinterestアカウントはこちら)で、現在の月間閲覧者数は100万人前後です。

本記事では、ピンタレストのボードやピンをワードプレスの投稿内に埋め込む方法を紹介します。

ウェブサイトと連携したピンタレストアカウントを育てたいなら、ウェブサイト内にボードやピンを埋め込んでおくとユーザーの目にとまりやすくなります。

この方法を覚えれば、ピンタレストボードやピンを簡単にブログ投稿内で紹介できるようになりますよ。どの方法も無料で利用できます。

では、早速みていきましょう。

もくじ(クリックした項目に移動します)
デザインカッツブラックフライデーセール
12/1までProcreate & Affinityブラシ、英語フォントなどが半額セール中

ピンタレストのボードやピンをワードプレスの投稿内に埋め込んで表示させる方法

ピンタレストのボードやピンをワードプレスの投稿内に埋め込んで表示させる方法は大きく分けて2種類あります。

  1. プラグイン「Jetpack」を利用する
  2. ウィジェットビルダーを利用する

なるべくカンタンな方法がいい!という方は①が、プラグインをあまり増やしたくない方やボードのサイズを指定したい方には②の方法がオススメです。

方法①:プラグイン「Jetpack」を利用する

Jetpack」はセキュリティ、パフォーマンス、サイト管理などを助けてくれるワードプレスプラグイン。無料または有料が選べ、無料版だけでも豊富な機能が利用できます。

ピンタレストのボードやピンの埋め込みは、無料版でも使える機能です。

Jetpackを利用した埋め込みではボードやピンのサイズを指定できませんが、わざわざウィジェットビルダーに移動する手間が省けます。

(注:これから紹介する機能はクラシックエディタでは利用できません。)

Jetpackをダウンロードして有効化する

ワードプレスの管理画面のメニューから「プラグイン」→「新規追加」をクリックしましょう。検索ウィンドウに「jetpack」と入力すると「Jetpack by WordPress.com」が表示されます。「今すぐインストール」ボタンをクリックするとボタンの名前が「有効化」になるので、もう一度クリックして有効化してください。

Jetpackをダウンロードして有効化する
ピンタレストボードまたはピンを挿入したい場所でプラスボタンをクリックし、Jetpackを選択する

Jetpackの手続きが完了したら(ここでは詳しい手続きは省略します)、ピンタレストボードまたはピンを挿入したい投稿の編集画面に移動してください。

ボードまたはピンを挿入したい場所でブロックを追加し、Jetpackを選択しましょう。

ピンタレストボードまたはピンを挿入したい場所でプラスボタンをクリックし、Jetpackを選択する
選択肢の中から「Pinterest」をチョイス

Jetpackを選ぶと、その中の項目が表示されます。Pinterestを選んでクリックしてください。

選択肢の中から「Pinterest」をチョイス
埋め込みたいボードまたはピンのURLを入力する

すると次のようなブロックが表示されます。空欄に表示したいボードやピンのURLを入力し「Embed(埋め込む)」ボタンをクリックしましょう。

埋め込みたいボードまたはピンのURLを入力する

ボード名に日本語が含まれていると入力した時に文字化けしますが、問題ないのでそのままEmbedボタンを押してください。

埋め込み完了

↓以下のように表示されれば成功です。

▼Jetpackを利用したボードの表示例

▼Jetpackを利用したピンの表示例

方法②:ウィジェットビルダーを利用する

Pinterestウィジェットビルダー
Pinterestウィジェットビルダー

ウィジェットビルダーを利用すれば、以下のボタンやウィジェットが作成できます。

  • 保存ボタン
  • フォローボタン
  • プロフィールウィジェット
  • ボードウィジェット
  • ピンウィジェット

毎回ウィジェットビルダーのサイトでコードを取得する必要がありますが、ウィジェットビルダーを利用すればボードやピンの表示サイズを細かく設定できます。

ここではボードを表示する「ボードウィジェット」の表示方法を紹介します。ピンウィジェットの表示方法もほぼ同じです。

ウィジェットビルダー作成ページに移動する

まずはボードウィジェットの作成ページに移動します。

ウィジェットビルダー作成ページに移動する
ボードのURLを入力し、サイズを決める

表示したいボードのURLを入力し、次にサイズを選びます。サイズは以下の4通りから選べます。

  • 四角
  • サイドバー
  • ヘッダー
  • カスタム

ここではサイズ「カスタム」について簡単に説明します。カスタムを選択すると画像の幅(ピン画像の幅)、ボードの高さ、ボードの幅を自由に設定できます。

数値を変えるとすぐに下のプレビューに反映されるので、色々試してみてください。

ボードのURLを入力し、サイズを決める

「四角」「サイドバー」「ヘッダー」については下の表示例をご覧ください。

コードをコピーして投稿に貼り付ける

「このコードをコピーして、アドオンを表示したい場所に貼り付けます:」の下に表示されたコードをコピーしましょう。

コードをコピーして投稿に貼り付ける
貼り付けたい場所に「カスタムHTML」ブロックを設定する

ワードプレス投稿に移動し、コードを貼り付けたい場所でブロックを追加を選び「フォーマット」→「カスタムHTML」をクリックしましょう。

貼り付けたい場所に「カスタムHTML」ブロックを設定する
コピーしておいたコードをペーストする

先ほどコピーしておいたコードをペーストします。

コピーしておいたコードをペーストする
.jsコードをコピーする(以下のステップはすでにお済みの方は不要です)

「各ページのクロージング </BODY> タグのすぐ前に pinit.js を 1 つだけ含めてください。」の下にあるコードをコピーします。

.jsコードをコピーする(以下のステップはすでにお済みの方は不要です)
</BODY> タグのすぐ前にペーストする

管理画面のメニューから「外観」→「テーマエディター」を選び、テーマの編集画面に移動します。

</BODY> タグが入っているファイルを開いてください。</BODY> タグの直前に先ほどコピーしたコードをペーストし、保存ボタンを押します。

当ブログのワードプレステーマSANGOとPORIPUの場合は「テーマフッター(footer.php)」ファイルを開いてペーストしました。テーマによってファイル名が異なる場合があります。

表示を確認して埋め込み完了

STEP.5でペーストしたコードが正しく表示されるか確認しましょう。問題なければOKです。

▼ウィジェットビルダーで作成したサイズ「四角」の表示例

▼ウィジェットビルダーで作成したサイズ「サイドバー」の表示例

▼ウィジェットビルダーで作成したサイズ「ヘッダー」の表示例

ウィジェットビルダーを利用したピンウィジェットの作成例

ウィジェットビルダーでピンウィジェットを作成すると、説明の表示・非表示が選べます。ピンウィジェットの作り方は上で説明したボードウィジェットの作成プロセスとほぼ同じなので、そちらを参照してください。

▼ピンのサイズ「小」

▼ピンのサイズ「中」

▼ピンのサイズ「大」

https://kmy.website/blog/wp-content/uploads/profile-pic.jpg
Keiko

説明を非表示にするとスッキリした印象になりますよ。

投稿以外にもボードやピンの埋め込みができる

当ブログのピンタレストカテゴリーページ
当ブログのピンタレストカテゴリーページ

ワードプレス投稿内だけでなく、固定ページやワードプレスウィジェットなどにボードやピンを埋め込むことができます。

当ブログではサイドバーやカテゴリーページにも、ピンタレストボードウィジェットを表示しています。

「こんな使い方をしているよ!」というアイデアがあれば、ぜひ教えてください…!

早速ウェブサイト内にピンタレストボードやピンを埋め込んでみよう

ピンタレストのボードやピンをワードプレス投稿内に埋め込んで表示する方法【プラグインで簡単!】

ボードやピンをウェブサイト内に埋め込めば、クリックするだけで簡単にピンタレストアカウントに移動できます。

  1. プラグイン「Jetpack」を利用する
  2. ウィジェットビルダーを利用する

なるべく簡単な方法がよければ①が、ボードやピンの大きさを細かく設定したい場合は②がオススメです。

本記事で紹介した方法で、早速ボードやピンを埋め込んでみてください。

▼当ブログのピンタレスト関連記事はこちらです。あわせてお読みください。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

ピンタレストやインスタに使える高クオリティ写真&イラストが月額固定料金で使い放題!

ピンタレストのピンやインスタの投稿でクオリティの高い写真やイラストを使いたい!でもあまりお金がかかるのも困る...とお悩みの方におすすめなのが、デザイン素材サイトenvato elements(エンバトエレメンツ)

envato elementsで使えるインスタ用テンプレートの一例
envato elementsで使えるインスタ用テンプレートの一例

月額16.5ドル〜(年払い)で、以下のような商用利用可能なデジタルデザイン素材が好きなだけ利用できます(ダウンロード点数制限なし)。

  • ピンタレストテンプレート
  • インスタグラムテンプレート
  • ストック写真
  • イラスト
  • 背景素材
  • フォント
  • 動画テンプレート
  • ミュージックトラック
  • ワードプレステーマ&プラグイン 
  • プロクリエイトブラシ など

当ブログやピンタレストのピンデザインにも、envato elementsの写真やイラストをかなり使ってます。

毎月フリーデザイン素材がもらえる無料アカウント登録方法とお得な月額プラン加入方法はこちら

もくじ(クリックした項目に移動します)
閉じる