WordPressのTOPページのみにソーシャルボタンを設置する方法

この記事は最終更新日から1年以上が経過しています。
今となっては当たり前のソーシャルブックマークボタン。
もうはや、ブログの人気バロメーターとなっています。

こういうのってやっぱり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ページ)専用となりました。

ソーシャルボタンを拾ってくる

ありました、こちらに。
Google+1/Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ

あとは欲しいものだけをコピーして引っ張ってくれば、完成ですね。
と行きたかったのですが、失敗しました。
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の複製の仕方でしょうか。
これは、使い道が多いかと思われます。
同じ要領で固定ページとかも複製できたはずですし。

便利なので、覚えておくといいと思います。

なんにせよ、満足です。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください