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にGoogle+、Facebook、Twitterボタンを追加 「最新版」WordPressに各種ソーシャルメディアボタンを追加する方法

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

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

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

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定方法

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定…

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮…


コメントを残す

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

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