[簡単コピペ]記事内の画像にPinterestのPinボタンをつける

公開日: 

これから書く記事のイメージも、過去に書いた記事のイメージも全部”Pinterest”のpinボタンをつけましょう。

今回は全然何も考えずにコピペしただけなのですが、すみません。

コピペでPinterestのpinボタンをつけよう

ではfunctions.phpに下記の関数をそのまま貼り付けます。子テーマのfunctions.phpでOKです。
子テーマの作り方はこちら→子テーマを作る。


/**
 * Pinterest Image Hover スクリプト読み込み用関数
 */
function load_pinterest_image_hover_js() {
// 添付・投稿フォーマット・記事・ページで実行
if ( is_attachment() || is_post_type_archive() || is_singular() ):?>
<script type="text/javascript">
// <![CDATA[
 
// ウインドウ幅を取得
w = document.documentElement.clientWidth;
// ウインドウ幅が 768px 以上の時だけ Pin ボタン実行
if (w >= 768) {
 
// pinterest image hover
(function (d) {
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.setAttribute('data-pin-lang', 'en');
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
 
}
//]]>
</script>
<?php endif;
}
 
add_action( 'wp_head', 'load_pinterest_image_hover_js' );

こちらが実装後

マウスをのせるとPinボタンが出ます。

*マウスをのせるとPinボタンが出ます。

参考にさせていただいたサイト様ありがとうございます。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを投稿

  • 自分の写真
    name
    Aya imai

    三人の子を持つ主婦です。パソコン、編み物など 下手の横好きですが、いろんな事をやりたがります。 どれも大した知識はありませんが、上達を目指しがんばります。

Category

PAGE TOP ↑