PinterestのボタンをWordPressに設置する方法
ちまたで、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://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 があるので、動画見ながらブラウザに各自が入れた方が、便利なような気もします。
この動画ですね。