WordPressにGoogle+、Facebook、Twitterボタンを追加


投稿日:2011年12月21日
  • 2
  • 0



ソーシャルメディアの公式ページを作って、WordPressのサイトを友人や知人に紹介しよう

以前「WordPressにRSSを追加」という投稿でボタンの設置方法は解説しました。
前回公式ページを作っていなかったのでコメントアウトしておいたものを正式に使います。

具体的にはページ右上に「Google+、Facebook、Twitterボタン」を追加しました。


設置方法
header.php」の

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

という記述の後に以前追加したタグを使います。

RSSと合わせて

<div id="menuicon">
<p class="google"><a href="https://plus.google.com/116317665181063532323/posts"><img src="https://oxynotes.com/wp-content/themes/twentyten/images/google+.png" alt="google+公式ページ" title="google+公式ページ" /></a></p>
<p class="twitter"><a href="http://twitter.com/#!/oxynotes"><img src="https://oxynotes.com/wp-content/themes/twentyten/images/twitter.png" alt="twitter公式ページ" title="twitter公式ページ" /></a></p>
<p class="facebook"><a href="http://www.facebook.com/pages/Oxy-notes/238051846266899"><img src="https://oxynotes.com/wp-content/themes/twentyten/images/facebook.png" alt="facebook公式ページ" title="facebook公式ページ" /></a></p>
<p class="rss"><a href="https://oxynotes.com/?feed=rss2"><img src="https://oxynotes.com/wp-content/themes/twentyten/images/rss.png" alt="RSS" title="RSS" /></a></p>
</div>

となりました。

このボタンは配布してますので入用の方はどうぞ。
ソーシャルメディア用アイコン

続けて表示位置を調節するために「style.css」を編集。
以上で設置完了です。

動作確認でポチポチ押してみてください。


現在のページを共有する



現在のページに関連する記事

WordPressにRSSを追加 WordPressにRSSを追加
WordPressにGoogle+、Facebook、Twitterボタンを追加 貼るだけ簡単!アクセスが倍増するWordPress用OGPコード
WordPressにGoogle+、Facebook、Twitterボタンを追加 「人気ブログの作り方」最高のアクセスアップ法!記事とソーシャルメディアの相乗効果
WordPressにGoogle+、Facebook、Twitterボタンを追加 WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更
WordPressにGoogle+、Facebook、Twitterボタンを追加 もう覚えなくても大丈夫!?WordPressの条件分岐タグの使い方まとめ
WordPressにGoogle+、Facebook、Twitterボタンを追加 LaravelでOAuthを利用してTwitter、Facebook、Googleアカウントでログインを実装
WordPressでオリジナルデザインのホームページを作る方法 WordPressでオリジナルデザインのホームページを作る方法

おすすめの記事

WordPressの最速キャッシュを探せ!APC、memcached、Transients APIを比較

WordPressの最速キャッシュを探せ!APC、memcached、Transients…

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?

使うであろう文字だけの、HTML・XHTMLエンティティシート

使うであろう文字だけの、HTML・XHTMLエンティティシート

Question2AnswerへreCAPTCHAを導入する方法

Question2AnswerへreCAPTCHAを導入する方法

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

fluentdと連動して集計処理を行うNorikraの導入方法

fluentdと連動して集計処理を行うNorikraの導入方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。