ブログ運営

Pinterestの保存ボタンをブログの記事上だけに設置する方法(WordPress/JIN)

ピンタレストのシェアボタンの設置方法を調べると「Footer.phpファイル上にタグをコピペしましょう」という解説が多いですが、Footerに入れると、ブログの全ページでシェアボタンが表示されてしまいますよね。

JINでのPinterestのタグ入力箇所(HTMLタグ設定)

WordPressのテーマ「JIN」を使用している場合は【HTMLタグ設定】の【bodyタグの終わり】にコードを入れます。

でも、全ページではなく、ブログの記事だけにシェアボタン表示させたいと思いませんか?

全ページに設置したくない理由

  • トップページでボタンを表示させたくない
  • 固定ページ(お問い合わせやサイトマップ)をシェアされたくない

ここで各記事1つ1つに手作業でコードを入力していく方法も確かにありますが、とにかく面倒。

各記事にコードをいれるということは、いつかピンタレストのボタンを使いたくなくなったときも、各記事からコードを手作業で抜いていかなければならないのも恐怖です。

そこで、めんどくさがりの私が思いついたのが、「記事下ウィジェット」もしくは「CTA」の利用

記事下ウィジェットにコードを入れれば、全記事でシェアボタンが表示され、CTAをうまく活用すれば一部の記事だけにシェアボタンを設置することも可能です。

WordPressのテーマ「JIN」を使用している場合の設置方法を紹介しています。(他のテーマでも応用は効くはず)

Pinterestの公式ページからコードをコピー

「シェアボタンの設置方法が全くわからない」のであれば、Pinterest Japan Blogのウェブサイトへの保存ボタンの設置方法には目を通しておいた方がいいかなと思います。

シェアボタン設置に必要なコードはDevelopers内のウィジェットビルダーから取得できます。

  1. 【保存】ボタンを選択
  2. ボタンの種類で画像にホバーした時を選択
  3. 好きなボタン(円形か文字/サイズ)を設定
  4. プレビュー下に表示されるコードをコピー

大きい円形のボタンであれば、このコードを使用することになります

<script async defer data-pin-hover=”true” data-pin-tall=”true” data-pin-round=”true” src=”//assets.pinterest.com/js/pinit.js”></script>

ブログの全記事にシェアボタンを表示させる方法

お好みで、記事下(上)ウィジェットか、CTAのどちらかにPinterestからコピーしたコードを貼り付けます。

【ウィジェットの使用】外観 > ウィジェット > 記事下(上)

記事下ウィジェットにコードを入れると、全記事にピンタレストのシェアボタンが反映されます。

「記事下」にしかコードが入らないので、「記事」が無いトップページと、固定ページにはシェアボタンは表示されません。

ビジュアルモードではなくテキストモードでコードを貼り付けます

【CTAの使用】CTA > (作成済みCTA)編集

CTAにコードを入れると、Pinterestで貼られるリンクがCTAのページになるのかな?と思いきや、ちゃんと記事にリンクされました。

ビジュアルモードではなくテキストモードでコードを貼り付けます

CTAの作成方法は、JINの公式ページ「CTAを設定する方法」を参照ください。

一部カテゴリーの記事にシェアボタンを表示させる方法

CTAを複数使い分けることで「全記事」ではなく、一部カテゴリーの記事だけにボタンを設置することができます。

カテゴリーA:CTA①
カテゴリーB:CTA①
カテゴリーC:CTA②

CTA①にはピンタレストのコードを入れず、CTA②にのみコードを入れた場合、カテゴリーCに入っている記事のみにシェアボタンが表示されます。

カテゴリーごとにCTAを指定する方法は、JINの公式ページ「カテゴリー別にCTAを設置する」を参照ください。

【注意点】コードの入力箇所は、ブログ上で文字や広告を表示させる

記事下ウィジェットでも、CTAでも、白紙の状態でコードだけを入力するのは避けたいです。

当ブログでは、記事下部ウィジェットにPinterestのコードを入れていますが、表示させる広告や文字を入れていないため、記事の終わりと関連記事の間に白紙のボックスだけが表示されています。

パソコンでの表示

携帯での表示

私が運営するもう一つの洋書多聴ブログでは、すでに表示させていた文字がある箇所にコードを入れているので、このようなことにはならず、自然と設置することができました。

当ブログもこれを機に、記事内に手作業で入れていた広告を全て消して、記事下ウィジェットかCTAで広告の一括管理&ボタン設置していこうと思っています。

最後に(この記事はブログ初心者が書いています)

この記事は、HTMLやスタイルシートは雰囲気(英語として)で読める程度、ワードプレス歴半年のブログ初心者が書いています。

不具合などの責任はとれませんので、この記事を参考にする場合は、自己責任でお願いします♡

3ヵ月でブログ50記事!リアルな収益・PVを公開してみる✔10記事未満でも報酬発生✔22記事で検索上位✔50記事書いたASPの累計収益は約9,000円。PVを含めて、このブログのそんな過程をまとめました。...
JINアイキャッチ画像上のカテゴリー名削除
【JIN】アイキャッチ画像上のカテゴリー名を非表示にするカスタマイズ【備忘録】有料テーマJIN(ジン)で表示される、アイキャッチ(サムネ)左上にアクセントカラーのカテゴリー名の消し方は簡単。WordPressで数行のコードを追加するだけで非表示にすることができました。...