WordPressにPinterestの「ピンする」ボタンを追加する方法(4つの方法)

ソーシャルメディアでコンテンツを共有するように人々を促すことは、オーディエンスを増やし、ビジネスについて人々を興奮させるための素晴らしい方法です。

しかし、現実は、人々があなたのコンテンツを共有するのは、あなたがそれを簡単にした場合だけだということです。

WPBeginnerブログではソーシャル共有ボタンを使用しているため、読者は簡単なクリックでコンテンツを共有できます。そのため、私たちは何について話しているのかを知っています。🤓

私たちの経験では、PinterestはWordPressサイトへのトラフィックを促進するための素晴らしいプラットフォームです。特に、写真、インフォグラフィック、デジタルアートなどのビジュアルコンテンツを公開している場合はそうです。

WordPressサイトに「ピン」ボタンを追加すると、訪問者は画像やその他のビジュアルコンテンツをPinterestボードにすばやく共有できます。さらに、多くの利点があります!たとえば、より多くの訪問者、より多くのコメント、より多くの売上。💥

この記事では、WordPressにPinterestの「ピン」ボタンを追加する方法を説明します。

WordPressにPinterestの「ピンする」ボタンを追加する方法

WordPressにPinterest「ピン」ボタンを追加する理由

Pinterest は人気の ソーシャルメディア プラットフォームで、ユーザーはボードを作成してウェブサイトのリンクやその他のビジュアルコンテンツを収集できます。

ユーザーがあなたのコンテンツをPinterestボードに追加すると、他の人があなたのウェブサイトを発見するのに役立ちます。特に写真ウェブサイト、ファッションブログ、または画像や動画が多いあらゆる種類のブログを運営している場合、Pinterestは重要なトラフィックソースとなります。

ウェブサイトに「ピンする」ボタンを追加すると、訪問者があなたのコンテンツをPinterestで共有することを奨励できます。

Pinterestの「ピン」共有ボタンの例

注意: Pinterestは2016年に公式に「Pin It」ボタンの名前を「Save」に変更しました。しかし、多くのガイドやWordPressプラグインではまだ「Pin It」が使用されているため、このガイドでは元の名前を使用しています。それに、よりキャッチーな響きもあります!

というわけで、WordPressにPinterestの「Pin It」ボタンを追加する方法を見ていきましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

方法1:投稿にPinterest「Pin It」ボタンを追加する(簡単な方法)

PinterestボタンをWordPressサイトに追加する最も簡単な方法は、Novashareを使用することです。私たちの意見では、それはWordPressの最高のソーシャルメディアプラグインの1つです。

これにより、サイトにPinterestボタンを、他のすべての主要なソーシャルネットワークのボタンと一緒に簡単に追加できます。Novashareをさまざまなユースケースでテストしましたが、使いやすさが非常に気に入っています。プラグインの詳細については、Novashareの完全なレビューをご覧ください。

まず、 Novashare のウェブサイトにアクセスしてプランを選択する必要があります。次に、プラグインをインストールして有効化します。ヘルプが必要な場合は、 WordPressプラグインのインストール方法 に関するガイドをご覧ください。

Novashareの価格とプラン

有効化したら、WordPressダッシュボードの 設定 » Novashare ページに移動してライセンスを有効化してください。

「ライセンス」タブをクリックし、プラグイン購入時に提供されたライセンスキーを貼り付けてから、「ライセンスを保存」ボタンをクリックします。

Novashareライセンスを有効にする

ライセンスをアクティベートしたら、ウェブサイトにPinterestアイコンやその他の好きなソーシャルシェアアイコンを追加できます。これらのアイコンは、コンテンツと並べて、またはフローティングバーとして追加できます。

ここでは最初のオプションを使用します(ただし、フローティングバーに関する詳細については、読み続けてください)。

Novashareの「インラインコンテンツ」タブに移動し、「インラインコンテンツを有効にする」トグルをオンにします。次に、Pinterestボタンをクリックして赤色にします。

この時点で、ソーシャルシェアボタンバーに追加したい他のソーシャルネットワークを有効にすることもできます。

Novashare を使用してインラインピンタボタンを追加する

その後、下にスクロールして利用可能なオプションを使用してボタンバーを設定できます。

ボタンバーを投稿やページなどに表示する設定があります。ボタンの色やデザインもカスタマイズできます。

ボタンにラベルを追加したり、現在の投稿がソーシャルメディアで共有された回数を表示したりすることもできます。

これらのオプションとフローティングバーについては、WordPressにソーシャル共有ボタンを追加する方法のガイドで詳しく説明しています。

「ピン」ボタンのカスタマイズが完了したら、ページの下部までスクロールします。ここで、「変更を保存」ボタンをクリックして新しい設定を保存します。

これで、WordPressウェブサイトにアクセスして、Pinterestボタンが機能していることを確認できます。

WordPress の投稿に追加されたピンタボタン

方法2:画像にPinterestの「ピン」ボタンを追加する(簡単な方法)

ファッション、写真、またはフードブログを運営していますか?その場合、これらの画像の上にPinterestボタンを追加したいかもしれません。これにより、訪問者はピンしたい画像にカーソルを合わせるだけでコンテンツを共有できます。

方法1で使用したNovashareプラグインは、サイト上の画像をホバーしたときにPinterestの「ピン」ボタンを追加することもできます。

ライセンスを購入し、プラグインをインストールしたら(上記の方法1で説明したとおり)、設定 » Novashare に移動して「Pinterest」タブをクリックしてください。

次に、「画像ピンを有効にする」をオンにし、ボタンを表示したい「投稿タイプ」を選択します。

Novashareで画像ピンを有効にする

次に、ボタンの位置、形状、色をカスタマイズできます。その他のデフォルト設定は、ほとんどのウェブサイトでうまく機能します。

必要であれば、マウスカーソルを画像に合わせたときだけでなく、常にPinterestボタンを画像の上に表示することもできます。これを行うには、「常に表示」オプションを有効にする必要があります。

NovashareのPinterestボタンのカスタマイズ

一部のウェブサイトの所有者は、共有されたくない画像をいくつか持っています。その場合は、「除外する画像」フィールドにファイル名を入力できます。

設定に満足したら、「変更を保存」ボタンをクリックしてください。そうすると、Novashareは画像にピンボタンを表示し始めます。

Novashareを使用したPinterestピンボタンの例

方法3:カスタムショートコードを使用してPinterest「Pin It」ボタンを追加する

場合によっては、「ピン」ボタンが表示される場所を正確に制御したい場合があります。たとえば、特定の広告ランディングページや投稿コンテンツ内にPinterestボタンを表示したい場合があります。

その場合、1つのオプションは、コードを使用してボタンを作成し、カスタムショートコードを使用して各ページまたは投稿に配置することです。これにより、さまざまな場所に「Pin It」ボタンを表示する自由が得られますが、各ページまたは投稿に手動で追加する必要があります。

WordPressにカスタムコードを追加する最も簡単な方法は、WPCodeを使用することです。これにより、カスタムPHP、CSS、JavaScriptなどをウェブサイトに追加できます。

当社のパートナーブランドのいくつかは、このプラグインを使用してサイト全体でコードスニペットを管理しており、皆、それがどれほど気に入っているかを報告してくれています。詳細については、当社の完全なWPCodeレビューをご覧ください。

WPCodeを使用してカスタムショートコードを作成することもできるため、ウェブサイトに「Pin It」ボタンを追加するのに最適です。

まず、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインが有効になったら、Code Snippets » Add Snippet に移動します。

WPCode を使用してコードスニペットを追加する方法

ここでは、WPCode がサイトに追加できる、あらかじめ作成されたスニペットがすべて表示されます。これらには、WordPress にソーシャル共有ボタンを追加したり、サイドバーにソーシャルアイコンを表示したりするためのスニペットが含まれます。

次に、「カスタムコードを追加(新規スニペット)」オプションにマウスカーソルを合わせ、「+カスタムスニペットを追加」ボタンが表示されたらクリックします。

WordPressにカスタムスニペットを追加する

次に、WordPressにPHPを追加するので、コードタイプとして「PHPスニペット」を選択する必要があります。

WPCodeでPHPスニペットを選択

次の画面で、コードスニペットのタイトルを入力します。

これは参考用ですので、好きなものを使用できます。このチュートリアルでは、「Pinterest Pin It Button」と入力します。

スニペット名を入力し、ピンタボタンのコードを貼り付けます

これが完了したら、次のコードをコードエディターに貼り付けるだけです。

function get_pin($atts) {
    global $post;
    if ($post) {
        $pinterestimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
        if ($pinterestimage) {
            return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() . '" class="pin-it-button" count-layout="vertical">Pin It</a>';
        } else {
            return 'No Pinterest image available.';
        }
    } else {
        return 'No post found.';
    }
}
add_shortcode('pin', 'get_pin');

その後、ページを下にスクロールして「挿入」セクションに移動します。ここでは、デフォルトの「自動挿入」メソッドを使用して、コードがどこでも実行されるようにすることができます。

まだ選択されていない場合は、「すべてで実行」を選択してください。

WPCodeのデフォルトの自動挿入方法

最後に、画面の上部までスクロールし、「非アクティブ」スライダーをクリックして「アクティブ」と表示させます。

次に、「スニペットを保存」または「更新」ボタンをクリックするだけで、コードスニペットが公開されます。

コードスニペットWPCodeを保存して有効化

これで、[pin]ショートコードを使用して、WordPressのページ、投稿、またはウィジェット対応領域に「ピン」ボタンを追加できます。

ショートコードの配置方法については、WordPressでのショートコードの追加方法に関するガイドを参照してください。

WordPress の投稿で [pin] ショートコードを使用する

このコードを追加すると、訪問者はアイキャッチ画像があるページや投稿に「Pin It」ボタンが表示されるようになります。

ページにアイキャッチ画像がない場合、代わりに「Pinterest画像が利用できません」というエラーメッセージが表示されます。

フルサイトエディターを使用してPinterestの「ピン」ボタンを追加する方法

最新のブロック対応テーマのいずれかを使用している場合、カスタムショートコードを使用してWordPressテーマのどこにでも「ピン」ボタンを追加できます。

これは、すべてのページや投稿にボタンを追加する簡単な方法です。標準のWordPressコンテンツエディターでは編集できない領域、例えばサイトの404ページテンプレートにも「Pin It」ボタンを追加できます。

開始するには、WordPressダッシュボードでテーマ » エディターに移動するだけです。

WordPressのフルサイトエディター(FSE)を開く

デフォルトでは、フルサイトエディターにはテーマのホームページテンプレートが表示されます。

別のページに「Pin It」ボタンを追加するには、左側のメニューから「テンプレート」または「テンプレートパーツ」を選択するだけです。

フルサイトエディターで WordPress のテンプレートまたはテンプレートパーツを選択する

編集したいテンプレートを選択できるようになりました。

この例では、サイトのシングルページテンプレートに「ピンイット」ボタンを追加する方法を示します。ただし、どのテンプレートを選択しても手順は同様です。

ブロック対応のシングルテンプレートの選択

WordPressは、テンプレートまたはテンプレートパーツのプレビューを表示します。

このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてください。

ブロックベースのエディターを使用して WordPress のシングルテンプレートを編集する方法

これが完了したら、左上にある青い「+」アイコンをクリックします。

表示される検索バーに「ショートコード」と入力します。

ショートコードでピンタボタンを追加する方法

右側のブロックが表示されたら、それをテンプレートレイアウトにドラッグアンドドロップします。

ブロックにPinショートコードを入力できるようになりました。

フルサイトエディター(FSE)を使用してウェブサイトにピンタボタンを追加する

その後、「保存」をクリックするだけで、新しいショートコードが有効になります。

これで、WordPressのウェブサイトにアクセスすると、「Pin it」ボタンが機能しているのが確認できます。

方法4:コードとFTPを使用してPinterestの「ピン」ボタンを追加する

プラグインなしでPinterestボタンをウェブサイトに追加するもう一つの方法は、コードをテーマファイルに直接追加することです。ただし、この方法は技術的なユーザーにのみ適しています。

テーマファイルを直接編集すると、WordPressでよくあるエラーが発生する可能性があり、WordPressテーマを更新した際にカスタムコードがすべて失われてしまいます。そのため、代わりにWPCodeを使用することを常にお勧めします。

ただし、この方法を使用する場合は、まずサイトの完全なWordPressバックアップを作成する必要があります。これにより、誤って何か問題が発生した場合にサイトを復元できます。

これが完了したら、FTPクライアントを使用してWordPressホスティングに接続し、/wp-content/themes/フォルダに移動します。

ここから、現在のテーマフォルダを開き、footer.phpファイルを見つける必要があります。

WordPress で footer.php ファイルをダウンロードする

次に、そのファイルを右クリックし、メニューから「ダウンロード」を選択します。これにより、footer.phpファイルがコンピューターにダウンロードされます。

次に、Notepadのようなプレーンテキストエディタを使用してfooter.phpファイルを開き、</body>タグの直前に次のスクリプトを貼り付けます。

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

これが完了したら、ファイルを保存し、現在のテーマフォルダに再度アップロードする必要があります。

次に、ボタンを追加したいテーマのテンプレートファイルを見つけます。通常はsingle.phpファイルですが、WordPressテーマによって異なる場合があります。不明な場合は、WordPressテンプレート階層の初心者向けガイドを参照してください。

テンプレートファイルを編集するには、テーマフォルダからダウンロードして編集用に開くだけです。

「ピンする」ボタンを表示したい場所を選択する必要があります。多くのウェブサイトでは、投稿タイトルのすぐ下にソーシャル共有ボタンを表示していますが、好きな場所に表示できます。

場所を選択したら、以下のコードを追加するだけです。

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

上記のコードスニペットは、投稿のアイキャッチ画像、タイトル、説明、URLを共有URLパラメータに追加します。

このコードスニペットは、すべての投稿に垂直な共有ボタンも追加します。代わりに水平な共有ボタンを表示したい場合は、`count-layout="vertical">` セクションを `count-layout="horizontal">` に変更するだけです。

準備ができたら、ファイルを保存し、FTPを使用して直接テーマにアップロードし直してください。

ボーナス:WordPressとソーシャルメディアに関する追加ガイド

WordPressとソーシャルメディアの連携について、もっと詳しく知りたいですか?初心者向けのガイドをご覧ください:

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

65 CommentsLeave a Reply

  1. PHPコードスニペットをありがとうございます。
    コードをウェブサイトのfooter.phpファイルにコピー&ペーストしましたが、アップロード後、ボタンはすぐには表示されませんでした。
    新しいボタンが正しく表示されるためには、キャッシュをクリアする必要があることに気づきました。

  2. PHPスニペットをありがとうございます。サイトの1つで試したところ、驚くほどうまく機能しました。プラグイン間のスペースを節約できました。素晴らしい仕事です。

  3. こんにちは。最近、共有カウントとPinterestアドオンプラグインを追加しました。問題なく動作しているようですが、数年間更新されておらず、私のWordPressバージョンでテストされていないことに気づきました。新しいプラグインを探すべきですか、それともまだ使用しても大丈夫ですか?

  4. カスタムデザインした個別のグラフィックピンを、それが属する旅行ブログ記事(例:ジャイプルでやるべきことリスト)に追加したいのですが、この記事はそれを扱っていますか、それとも単にPinterestのロゴのような見た目の「ボタン」だけですか?この技術的な点について申し訳ありませんが、画像が1つか2つあれば、あなたが言及している「ボタン」が具体的に何であるかがもっと明確になるでしょう…事前に感謝します…

    • これはPinterestのピンボタンに関するものです。記事の2番目のスクリーンショットが、例として探しているものだと思います。

      管理者

  5. こんにちは、wpbeginnerさん。あなたのコードをフォローしていますが、Pinterestボードに画像をピン留めし続けるかどうか、または自動的にピン留めされるかどうかを知りたいです。私はこのプラットフォームではまだ初心者です。ありがとうございます。

  6. コードをありがとうございます。自分の著者サイトに追加しました。(ビジネスサイトの画像にPinterestボタンがどのように表示されるのか全く分かりませんが、表示されています。)

    これで私の著者サイトがすべて設定されました!
    ありがとう、サイード。

    P.S. I just followed you on Pinterest. :)

  7. これは機能します!! ありがとう

    および

    不思議ですね…
    アイコンを変更するにはどうすればいいですか?コードを変更してもアイコンは同じままです

  8. 最後のオプションを実行しました。ショートコードをテーマのfunctions.phpファイルに追加しました。機能しましたが、下書きとして投稿を保存できなくなりました。その後、コードを削除しましたが、機能しません。私のサイトはまだオンラインですが、サイトにログインできなくなりました。次のメッセージが表示されます。

    Warning: Cannot modify header information – headers already sent by (output started at /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) in /home/peque107/public_html/wp-includes/pluggable.php on line 1224

    ヘルプをお願いします!

  9. これはWordPress.orgブログにのみ適用されますか?WordPress.comブログを持っており、このプラグインを追加できるかどうかわかりません。

    ありがとうございます!

  10. 問題があります。指示に従ったところ、このエラーが発生しました。

    Parse error: syntax error, unexpected ‘<' in /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php on line 18

    今、それを削除できません。誰かアドバイスしてもらえませんか。私のサイトは現在ダウンしています。

    • テキストエディタ(メモ帳など)でfunctions.phpファイルを開きます。18行目に移動します。そこにある不要な<?phpタグを削除してください。また、?>の閉じタグも削除してください。

      管理者

  11. まずはありがとうございます

    要素の位置決めがうまくいきません。常にdivの左上に配置されているようです。

    位置を設定して、背景画像を独自のカスタム画像に変更することは可能ですか?

    ありがとう

  12. 素晴らしいチュートリアルです。問題なく自分のサイトに設置できました。テストしたところ動作しましたが、ピン留めした後も0と表示されます。
    Mark

  13. たくさんのプラグインを試しましたが、無限スクロールやNextGenギャラリーとは連携しませんでした…しかし、いくつかの変更を加えたこのスクリプトで問題が解決しました。ありがとうございます。

  14. Hello,

    「ピン」ボタンのサイズを変更することは可能でしょうか?少し小さいように思われるためです。

    よろしくお願いいたします。

    マイケル

  15. このコードは最近機能しなくなりました。私のサイトにあり、うまく機能していましたが、最近画像は機能しているように見えますが、ピンボードを表示すると画像が設定されていません。他の times は、Pinterestサイトから発生する502エラーをピンしようとしています。何かアイデアはありますか?

  16. コードにバグがあります。生成されるピンボタンのhrefには「url=」を含める必要がありますが、現在は等号が欠落しています。

  17. WordPressユーザーの場合、ピンイットボタンやその他のソーシャルメディアの追加は簡単です!ダッシュボードで設定に移動し、共有をクリックするとすべて表示されます。追加したいものをクリックしてください!

    • ありがとうございます!2日間この方法を探していて、何かをダウンロードしましたがうまくいきませんでした。諦めようとしていたところ、幸いにもあなたのコメントを読みました。こんなに簡単なことを誰かが分かりやすく説明してくれたことに感謝します。WordPressはどうしてそれができないのでしょうか?

        •  @Husein Yuseinov Ok… では、以下の手順で行ってください。PHPタグ内の $pinterestimage 行の上に、次の行を追加します。
           
          global $wp_query;
          $postid = $wp_query->post->ID;
           
          次に、$post->ID を $postid に置き換えると、機能するはずです。 また、コードの後には、wp_reset_query(); を追加することも検討してください。
           
          これが私たちができる最善のことです。あなたが求めていることはコーディングが必要です。もしこれができない場合は、メールでお問い合わせください。少額の料金でサポートさせていただきます。 

  18. これを追加してみましたが、機能しました。しかし、「Pin it」をクリックして新しいブラウザでウィンドウが開き、実際にピンを送信すると、新しく開いたウィンドウがリロードされるだけで、ピンは送信されません。バグが修正されるまで実装しないことにしました。

  19. I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  20. Thesis、Genesis、Headwayなどの高度なテーマフレームワークの場合、フレームワークの適切なフックを使用してfunctions.phpファイルを通じてこれらのコードを追加する必要があります。考えられるすべてのテーマフレームワークを網羅することはできません。ほとんどのテーマフレームワークのブログには、テーマをカスタマイズする方法に関する説明があります。

    管理者

    • @wpbeginner理想的ではありませんが、とにかく画像を投稿するために必要なことと大差ありません。私はまだ素晴らしいオプション(理想的にはプラグイン)を探しています。a)私のテーマで機能し、b)簡単なものです。幸いなことに、Pinterestの人気により、すぐに誰かがそれを稼働させるだろうと確信しています!

  21. 機能しますが、ピンボタンの前に「array」というテキストが表示されます。functions.phpから呼び出しています。たとえば、「echo $pinterestimag.....<?php;」のように。それが理由でしょうか?

  22. うまくいかないようです。最初のコードをフッター.phpの閉じボディタグの前に挿入し、次にpo.stが提供する他の共有ボタンの後にシングル.phpに別のコードを追加しました。しかし、私のサイトで投稿を見ると(http://crockpotladies.com/recipe-categories/entrees/crockpot-chicken-enchiladas/)、ピンボタンが表示されません。何か提案はありますか?

  23. Digg DiggやSociableのような既存のWPプラグインとこれを統合するにはどうすればよいですか?

コメントを残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。