WPBeginner - 初心者のためのWordPressチュートリアル

Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでPinterestの「Pin It」ボタンを追加する方法（4つの方法）

最終更新日 by Editorial Staff | レビュー Syed Balkhi

シェア フェイスブックメッセンジャー WhatsApp
編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressにPinterestの「Pin It」ボタンを追加したいですか？

Pinterestは、ビジュアルコンテンツを共有し、サイトへの訪問者を増やすことができる人気のソーシャルネットワーキングサイトです。サイトに「Pin It」ボタンを追加することで、より多くの人にPinterestでコンテンツを共有してもらうことができます。

この投稿では、WordPressにPinterestの「Pin It」ボタンを追加する方法を紹介します。

Add Pinterest Pin It button in WordPress

なぜWordPressにPinterestの “Pin It “ボタンを追加するのか？

Pinterestは、ユーザーがボードを作成することで、ウェブサイトのリンクやその他のビジュアルコンテンツを収集できる人気のソーシャルメディアサイトです。

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

サイトに「Pin It」ボタンを追加することで、訪問者にPinterestでコンテンツをシェアしてもらうことができます。

An example of a 'Pin It' Pinterest sharing button

注： Pinterestは2016年に「Pin It」ボタンの名称を「Save」に正式に変更した。しかし、多くのガイドやWordPressプラグインはまだ「Pin It」を使用しているため、このガイドでは元の名称を使用しています。

それでは、WordPressでPinterestの「Pin It」ボタンを追加する方法を見ていきましょう。以下のクイックリンクから、お好きな方法を選んでください：

方法1：共有カウントを使う（素早く簡単に）

WordPressサイトにPinterestボタンを追加する最も簡単な方法は、Shared Countsを使用することです。

WordPressのための最高のソーシャルメディアプラグインの1つで、サイトにPinterestボタンを簡単に追加することができ、他のすべての主要なソーシャルネットワークのボタンも追加できます。

開始するには、Shared Countsプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

インストーラをインストールしたら、Settings ” Shared Countsでプラグインを設定してください。

Shared Counts settings page

ここで、「表示」セクションまでスクロールし、「表示する共有ボタン」テキストボックスをクリックする。

ドロップダウンメニューが開き、追加したいソーシャルメディアサービスを選択できます。例えば、Shared Countsを使ってFacebookのいいね！ボタンを追加したり、Twitterのシェアやリツイートボタンを追加したりすることができます。

Pin It」ボタンを作成するには、ドロップダウンから「Pinterest」を選択します。

Adding a Pinterest sharing button to WordPress

その後、’Share Button Style’ ドロップダウンを開き、Pinterestボタンのスタイルを選択することができます。

また、Pinterestボタンを表示する場所と投稿タイプを選択することもできます。

Adding a Pinterest 'Pin It' button to a WordPress website or blog

ボタンの設定に満足したら、「変更を保存」ボタンをクリックします。

これで、WordPressブログのどの投稿日にも、Pinterestボタンが表示されるようになりました。

Pinterest button added to WordPress post

方法2：カスタマイザーショートコードを使う（推奨）

サイト上の「Pin It」ボタンの外観を正確にコントロールしたい場合があります。例えば、特定のランディングページや投稿コンテンツ内にPinterestボタンを表示したい場合があります。

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

WordPressにカスタムコードを追加する最も簡単な方法は、WPCodeを使用することです。これは最高のコードスニペットプラグインで、カスタムのPHP、CSS、JavaScriptなどをサイトに追加することができます。カスタマイザーも作成できるので、サイトに「Pin It」ボタンを追加するのに最適です。

まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。 詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化したら、Code Snippets ” Add Snippetに進みます。

How to add a code snippet using WPCode

ここでは、WPCodeがあなたのサイトに追加できるすべての既製のスニペットを見ることができます。これらには、コメントを完全に無効化するスニペット、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。

ここで、「カスタムコードを追加（新規スニペット）」オプションにマウスオーバーし、表示されたら「スニペットを使用」ボタンをクリックする必要があります。

Adding custom code to your WordPress website using WPCode

次の画面で、コード・スニペットのタイトルを入力する。これは参考用なので、好きなものを使ってください。

WordPressにPHPを追加するので、「コードタイプ」のドロップダウンメニューを開き、「PHPコード」を選択します。

Adding code to WordPress using WPCode

そうしたら、コードエディターに以下を貼り付けるだけだ：

function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
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>'; }
  
add_shortcode('pin', 'get_pin');
Hosted with ❤️ by WPCode
1-click Use in WordPress

その後、ページを下にスクロールして「インサーター」セクションまで進む。ここでは、初期設定の’Auto Insert’メソッドのままにして、コードがどこでも実行されるようにすることができます。

すでに選択されていない場合は、「どこでも実行」を選択する。

Running custom PHP across your WordPress website

最後に画面を一番上までスクロールし、「Inactive」スライダーをクリックして「Active」と表示させる。

その後、「スニペットを保存」または「更新」ボタンをクリックするだけで、コード・スニペットが有効になります。

Activate and save your custom code snippet

Pin]ショートコードを使用して、WordPressのページ、投稿、ウィジェット対応エリアに’Pin It’ボタンを追加できます。

ショートコードの設置方法については、WordPressでショートコードを追加する方法をご覧ください。

use the [pin] shortcode in your WordPress posts

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

新しいブロック有効化テーマを使用している場合は、カスタムショートコードを使用してWordPressテーマの任意の場所に「Pin It」ボタンを追加することができます。

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

始めるには、WordPressダッシュボードのテーマ“ エディターと進んでください。

Opening the WordPress full-site editor (FSE)

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

別のページに’Pin It’ボタンを追加するには、左側のメニューから’Template’または’Template Parts’のいずれかを選択するだけです。

Choosing a WordPress template or template part in the full-site editor

編集したいテンプレートを選択できます。

この例では、サイトの個別ページテンプレートに’Pin It’ボタンを追加する方法を紹介します。ただし、どのテンプレートを選んでも手順は同じです。

Choosing a block-enabled single template

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

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

How to edit a single WordPress template using the block-based editor

それが終わったら、左上の青い「＋」アイコンをクリックする。

表示された検索バーに「Shortcode」と入力する。

How to add a Pin It button using shortcode

適切なブロックが外観されたら、テンプレートレイアウトにドラッグ＆ドロップする。

Pinショートコードをブロックタイプに入力します。

Adding a Pinterest pin button to your website using the full-site editor (FSE)

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

これで、WordPressサイトにアクセスすると、「Pin it」ボタンが表示されます。

方法3：コードとFTPを使用する（WordPressプラグイン必須なし）

プラグインを使用したくない場合は、テーマファイルにコードを追加することで、サイトにPinterestボタンを追加することができます。

テーマファイルを直接編集すると、WordPressの一般的なエラーを引き起こす可能性があり、WordPressテーマを更新すると、すべてのカスタムコードを失うことになります。この点を考慮し、WPCodeを使用することをお勧めします。

ただし、この方法を使う場合は、まずWordPressでサイトの完全なバックアップを取る必要がある。そうすることで、万が一誤ってサイトが壊れてしまった場合に、サイトを復元することができる。

FTPクライアントを使用してWordPressホスティングサービスに接続し、/wp-content/themes/フォルダに移動します。

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

Downloading the footer.php file in WordPress

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

次に、メモ帳などのプレーンテキストエディターで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>
Hosted with ❤️ by WPCode
1-click Use in WordPress

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

次に、ボタンを追加したいテーマのテンプレートファイルを探します。通常、これはsingle.phpファイルになりますが、WordPressテーマによって異なります。本当に〜してもよいですか？わからない場合は、WordPressテンプレート階層の初心者ガイドを参照してください。

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

Pin It’ボタンを表示する場所を選択する必要があります。多くのサイトでは、投稿タイトルの真下にソーシャル共有ボタンを表示していますが、好きな場所を使うことができます。

場所を選んだら、以下のコードを追加するだけだ： 

<?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>
Hosted with ❤️ by WPCode
1-click Use in WordPress

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

上記のコード・スニペットは、すべての投稿に縦のシェアボタンを追加します。代わりに横長のシェアボタンを表示したい場合は、count-layout="vertical">セクションをcount-layout="horizontal">に変更するだけです。

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

方法4：画像の上にPinterestのPin Itボタンを追加する

ファッション、写真、料理など、画像を多用するブログを運営している場合、これらの画像の上にPinterestボタンを追加することができます。これにより、訪問者はピンしたい画像にマウスオーバーするだけで、コンテンツを共有することができます。

画像の上にPinterestボタンを追加する最も簡単な方法は、Weblizar Pin It Button On Image Hover and Postを使うことです。

まず、プラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。有効化したら、左側のメニューからPinIt Buttonを選択し、プラグインの設定を行います。

Adding social media sharing buttons to your website

ここでは、投稿やページに「Pin It」ボタンを追加するかどうかを選択できます。

次に、’Show Pin It Button On Image Hover’ セクションを探し、’Yes’ に設定されていることを確認する。

Adding a pin button on hover in WordPress

さらに、このプラグインを使えば、モバイル端末に「Pin It」ボタンを表示したり、ボタンのサイズを変更したりすることができる。

プラグインの設定に満足したら、「保存」をクリックして変更を保存するのを忘れないでください。あとは、サイトにアクセスして、画像にマウスオーバーするだけで、Pinterestボタンが表示されます。

View your pin it button

特定の画像から「Pin It」ボタンを削除したいですか？これを行うには、WordPressで画像のURLを取得する必要があります。

その後、PinIt Buttonのページに行き、今度は’Exclude Images’タブを選択します。これで、初期設定で「Enter Image SRC URL」と表示されているフィールドに画像のURLを追加することができます。

Removing the Pinterest pin button from specific images

そうしたら、「追加」ボタンをクリックする。

除外ページ’タブを選択することで、特定のページからPinterestボタンを削除することもできます。ここでは、除外したいページ名を入力し、「追加」ボタンをクリックするだけです。

Exclude pages from pin it button

代替画像にPinterestのPin Itボタンを追加する、より強力なプラグインをお探しなら、Tasty Pinsをお勧めします。

Tasty Pinsを使えば、すべての画像に「Pin It」マウスオーバーボタンを簡単に追加できます。カスタマイズ可能な’Pin It’バナーをブログ投稿の最初の画像に追加することもできます。

Tasty Pins Pin It button banners

また、Tasty Pinsを使って、Pinterestのフォローボックスを追加したり、Pinterestの説明を設定したり、特定の画像へのピン留めを無効化したり、Pinterest固有の画像をページから非表示にしたりすることもできます。

この投稿で、WordPressブログにPinterestの「Pin It」ボタンを追加する方法をご理解いただけたでしょうか。また、メールマガジンの作成方法や、最高のウェブデザインソフトウェアの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

WPBeginnerで人気 今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

今すぐダウンロード

Reader Interactions

65件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Thanks for the php snippet. I tried it on one of the sites and it works like a charm. You have saved me some space between plugins. Good job.

    返信

  3. Alison says

    Hi. I just added shared counts and the Pinterest add-on plugins recently. They seem to work fine, but I notice they haven’t been updated in several years nor have they been tested with my version of WordPress. Should I be looking for a new plugin or are they still ok to use?

    返信

  4. Julie says

    I’m looking to add an individual graphic pin that I’ve custom designed to the travel blog post it belongs to (like the best things to do in Jaipur). Is that what this article is covering or is it just the literal Pinterst “Button” that looks like the Pinterst logo? Sorry to be co fixed with this technicality, but an image or two would make this much clearer what specifically the “button” you are referring to is….thank you in advance…

    返信

    • WPBeginner Support says

      This is for the Pinterest pin it button, the second screenshot in the article should be what you are looking for as an example.

      返信

      管理者

  8. laira says

    hi wpbeginner, I follow your codes, may i know if i will still pin the images on my pinterest boards? or it will automatically pin there? Im still a beginner in this platform. thank you

    返信

  9. Lorraine Reguly says

    Thanks for the code. I just added it to my author site. (I have no idea how the Pinterest button shows up on my images on my business site, but it does.)

    Now my author site is all set up!
    Thanks, Syed.

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

    返信

  11. Thales says

    I did the last option, adding the short code to my theme’s functions.php file. It worked, but I couldn’t save my posts as draft anymore. Then I removed the code and it is not working. My site is still online, but I cannot log in into my site anymore. The following message appear:

    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

    Please help!

    返信

  13. Carissa says

    Does this only apply for wordpress.org blogs? I have a wordpress.com blog and I am not sure if I can add this plugin to it?

    Thank you!

    返信

  14. Ruth says

    I have a problem. I followed the instructions and came up with this error:

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

    Now I cannot get rid of it. Could someone advise. My site is now down.

    返信

    • WPBeginner Support says

      Open the functions.php file in a text editor like notepad. Go to line 18. You probably have <?php tag there that you don’t need. Delete it and also delete the ?> closing tag

      返信

      管理者

  15. Ian Harris says

    Thanks for this firstly

    I am struggling to position the element. It is seeming to always sit in the top left of the div.

    Is it possible to position it and also change the bg image to own custom one.

    Thanks

    返信

  17. mark taylor says

    Good tutorial, i have put it on my site without any problems, i then tested it and it worked, but it still says 0 after i pinned.
    Mark

    返信

  18. vrinda says

    I tried so many plugins… they don’t work with infinite scroll and nextgen gallery…. but with some changes this script solved my issue.. thanks

    返信

  19. Michael says

    Hello,

    I just want to ask if I could change the size of the “pin it” button? Because it seems that it was a little bit small.

    Regards,

    Michael

    返信

  20. Jenny says

    This code just recently stopped working. I had it on my site and it was working great and recently images appear to be working but then when you go view the pinboard there is no image set. Other times when trying to pin it 502 error that comes from the Pinterest site. Any ideas?

    返信

  21. Ido Schacham says

    There’s a bug in the code. The generated href for the pin it button should include ‘url=’, currently it’s missing the equals sign.

    返信

  22. jess says

    For wordpress users..adding the pin it or any other social media is easy! Under dashboard, go to setting, click on sharing and they all appear- click on what you want to add!

    返信

    • Jen M says

      THANK YOU! I have been searching for how to do this for 2 days & downloaded something & that didn’t work, I was about to give up & then THANKFULLY read your comment. I appreciate someone making it as EASY as it really is, how come wordpress can’t do that?

      返信

  26. FuturePocket says

    I tried adding this… it worked but when you click on “Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.

    返信

  28. Jean Oram says

    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. :)

    返信

  29. Editorial Staff says

    For any advanced theme framework like Thesis, Genesis, Headway etc, you have to add these codes via functions.php file using the framework appropriate hooks. We cannot possibly cover all the theme frameworks out there. Most theme framework blogs have instructions on how to do customize the themes.

    返信

    管理者

    • Ruby says

      @wpbeginner It’s not ideal, but it’s really not much more than you have to do to post the image anyway. I’m still looking for a great option (plugin ideally) that a) works on my theme and b) is easy. Luckily, due to the popularity of Pinterest, I’m confident someone will have one up and running soon!

      返信

  33. Gretchen says

    It works, but it shows the text “array” before the Pin It button. I’m calling it via my functions.php, like so “echo $pinterestimag…..<?php;" Could that be why?

    返信

返信を残す

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

著作権 © 2009 - 2024 WPBeginner LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。

Awesome Motiveが管理する｜WordPressホスティングがSiteGroundが管理する

を手伝ってほしい。…

人気のある検索

ブログの開始 ワードプレス SEO WordPress パフォーマンス WordPress エラー WordPress セキュリティ オンラインストアの構築