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

おすすめの記事

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

ads.txtの設置方法を通して学ぶインターネット広告の問題点

ads.txtの設置方法を通して学ぶインターネット広告の問題点

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

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

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

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

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

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


コメントを残す

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

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