WordPressテーマ Gush2 サイドメニュー SNSボタンのカスタマイズ
WordPressの定番テーマGush2を入れたらまずやっておきたい設定その1
そのままでも使えることをコンセプトにしているWordPressの定番テーマ Gush2。
ですが、やはり多少なりともカスタマイズしてやらないとちょっと、な部分はあります。
今回はサイドメニューにある4つ並んだSNS類のバナー部分のカスタマイズ方法を解説します。
SNSボタン部分の設定
WordPressテーマ Gush2のSNSボタン類
Gush2のサイドメニュートップ部分にはTwitter・Facebook・Google+・RSSのボタンバナーが。
RSSは自動的に自身のWordPressサイトのRSSフィードへ飛ぶよう設定がなされているのでそのままでもOKです。
が、TwitterとFacebook、Google+のSNS三兄弟は自身のアカウントを設定してやる必要があります。
デフォルトではそれぞれ、Twitterのトップページ、Facebookのトップページ、Googleのトップページへのリンクが設定されています。
(クリックした人がTwitterとFacebookはそのブラウザでログインしている場合は、クリックした人その人のアカウントのページが表示されてしまいます)
これらSNSのボタンを表示させているのは、テーマフォルダー内に格納されているsidebar.phpの5行目から18行目辺りの
<!--アイコン--> <div class="side-sns"> <!-- thnx! http://www.iconsdb.com/ --> <ul> <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="https://www.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></li> <li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i></a></li> </ul> </div>
の表記。
「 https://twitter.com/ 」、「 https://www.facebook.com/ 」、「 https://www.google.com/ 」の部分をそれぞれ変えてやることで、任意のURLへリンクさせることができます。
せっかくなので自身のTwitterのアカウントページやFacebookページのページのURLを入れてやるといいでしょう。
Google+はもうサービスを終了しているので削除してください。あるだけ無駄です。
ちなみにデフォルトでは新規タブで開くように設定されていますが、 target="_blank" を消せばクリックしたタブ上でページを遷移させてやることも可能です。
(そんなことをする意義があるのかはともかく)
SNSボタン・RSSを使わない場合、SNSボタンの消し方
なーんて言っても、ツイッターもフェイスブックもググタスも全部やってる方なんてそんなにいないですよね。
変更するのも面倒な場合はそもそもこのSNSボタン部分を全て消すのも手。
実際、管理人もGush2のサイトはいくつか持っていますが、SNSボタンの部分は全く活用せず全部消しています。
消し方は簡単で、先ほどの5行目から18行目のそっくりそのままsidebar.phpから消してアップロードしなおすだけ。
なお、全部消すのでなくても、<li>~</li>を消すことで4つの内任意のボタンだけを消すことも可能です。
ボタン自体は自動的に残ったものだけで均等に並んでくれます。
また、全部消す場合はheader.phpの34行目にある
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
も不要になりますので、消しておくとよいでしょう。
アイコンを読み込んできているタグです。
(別段消さなくても問題ありませんが、ちょっとでもサイトの読み込みを軽くするために。大差ないかもですけど)
ディスカッション
ピンバック & トラックバック一覧
[…] – Gush2テーマの初期設定 その2・サイドメニューのSNSボタンのカスタマイズ – […]