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でオリジナルデザインのホームページを作る方法

おすすめの記事

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

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

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

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

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

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

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

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

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

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

iptablesで設定したパケットフィルタリングが正しく動作しているかテスト

iptablesで設定したパケットフィルタリングが正しく動作してい…


コメントを残す

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

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