WordPressのTOPページのみにソーシャルボタンを設置する方法
どこにつけるかによっていじるファイルが変わってくる
WordPressは主に以下の3ファイルがメインで形成されています。
header.php
index.php（TOPページ） or single.php（投稿記事） or page.php（固定ページ）
footer.php
これに他のファイルがちまちまとくっついて、ブログのような形になっているわけです。
僕の希望はTOPページのみに載せたいのですから、index.phpを修正すれば終わりっちゃ終わりです。
ただ、配置は＜div id=”header”＞のなかに入れたいのです。
そうなると、header.php内を修正しなければなりませんが、ここに載せると全てのページに表示されてしまうのが問題です。
さて。
複数のheader.phpを作る
javascriptを使ってると、その読み込みでページが重くなる場合があります。
そして、そのjavascriptを使うページと使わないページが出てくる場合、header.phpで全てのページ読み込ませているのは無駄になります。
そこで、それぞれ呼び出したいページ用のheader.phpと、呼び出さない用のheader.phpを作るという方法があります。
それと同じで、今回のソーシャルボタンの設置も、呼び出すheader.phpを作製すれば上手くいくという算段となりました。
header.phpのコピー
header.phpをコピーし、header-2.phpとして保存して下さい。
新しく作った方をTOPページにのみ使う事にしましょう。
index.phpの修正
index.phpを開き、先頭行
<?php get_header();
↓修正
<?php get_header('2');
これで完了です。
header-2.phpは、index.php（TOPページ）専用となりました。
ソーシャルボタンを拾ってくる
あとは欲しいものだけをコピーして引っ張ってくれば、完成ですね。
と行きたかったのですが、失敗しました。
jqueryが競合して、めちゃくちゃになってしまいました。
なので、他の手段をとります。
探すとこのような便利な情報が。
Facebook・Twitterなどソーシャルボタン設置方法まとめ | Design Spice
で、ここから必要なものを調べて、コードを引っ張りました。
TOPページにに表示されているのが完成系ですが、特にすごい事はありません。
一応、コードを header-2.phpに追加。
<ul class="socialbutton">
<li>
<a href="http://b.hatena.ne.jp/entry//" class="hatena-bookmark-button" data-hatena-bookmark-title="戯れ問答" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li class="twitter_bt" >
<a href="https://twitter.com/share" class="twitter-share-button" data-via="daihachi_serve" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true"></div>
</li>
<li>
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({contentId:'content',providerName:'戯れ問答'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>
</li>
<li>
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="medium"></g:plusone>
<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
<br clear="all"></ul>
以上となります。
総括
元々、WordPressにはソーシャルボタンのプラグインがあるので、特に必要ないかもしれませんが、僕が欲しかったのでついでに記事にしました。
有益な情報として、header.phpの複製の仕方でしょうか。
これは、使い道が多いかと思われます。
同じ要領で固定ページとかも複製できたはずですし。
便利なので、覚えておくといいと思います。
なんにせよ、満足です。
