2月 1日, 2012年 - IT    コメントはありません。

PinterestのボタンをWordPressに設置する方法

Pin It画像があってPinしたい場合押して下さいね。

ちまたで、facebookの次?
と言われているっぽい、pinterestを勉強がてら、ここ数日触っています。

で、自分のサイトに【“Follow Button” for Websites】はサイドバーに埋め込んでみたのですが、個別の記事にはまだ、埋め込んでいなかったので、埋め込んでみることにしました。

ちなみに、格闘時間は、しょーもないことに気づかず、約1日でした・・・・

wordpress3以降だと思いますが、以下が、その方法です。

PinterestのボタンをWordPressに設置する方法
Ver WordPress 3.3.1

①:自分が使用しているテーマにアイキャッチ画像を使う宣言があるかどうか確認する。
この宣言がないと、②以降を行ってもできません。
これが一番悩みました・・・
時間にして、数時間以上の楽しいひと時を過ごさして頂きました。
 (;・`д・´)

宣言は、【functions.php】あります。
以下のようなコードがない場合は追記して下さい。
私の場合は、何も考えずに最後に追記しました。

<?php
function mysetup() {
  add_theme_support( ‘post-thumbnails’ );
}
add_action( ‘after_setup_theme’, ‘mysetup’ );

?>

 

②:footer.phpに追記します。
http://pinterest.com/about/goodies/
から基本Advancedを選んだコードです。

 

<!– Pinterest-JS START–>
<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 = “http://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>
<!– Pinterest-JS END–>

 

③:single.phpに追記
私の場合は投稿全てに入るようにしました。
但し、画像がない場合もあるので、一応、画像がある場合は・・・
みたいな注釈をつけました。
\(;゚Д゚)/

追記場所に関しては、お好きな所にって感じです。
私の場合は下のコードです。

<section class=”postText”>

<!– Pinterest用 -START 別の場所でもいいです。–>
<?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(); ?>” count-layout=”horizontal”>Pin It</a>
画像があってPinしたい場合押して下さいね。
<!– Pinterest用 – END 別の場所でもいいです。 –>

<?php the_content(); ?>

</section>

 

 今回、下記のサイトが役に立ちました

http://kozuland.net/2012/01/26/pinterest%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92wordpress%E3%81%AB%E5%BC%B5%E3%82%8B/

 

http://www.wpbeginner.com/wp-tutorials/how-to-add-pinterest-pin-it-button-in-your-wordpress-blog/

 
http://kachibito.net/wordpress/add-pinterest.html
 

 

余談:結局この方法だと、ページ(投稿ごと)に自分でアイキャッチ画像を設定しないといけないです。
正直投稿数が増えた段階から、全部アイキャッチするの面倒です。
しかもアイキャチなんで画像は1つ
http://pinterest.com/about/goodies/
に“Pin It” Button があるので、動画見ながらブラウザに各自が入れた方が、便利なような気もします。

この動画ですね。



なにかご意見があればコメントを書いて下さい。