2017年9月28日更新

ヘッダーのSNSリンクをサイドバーに移動する方法:XeoryBase

Thumbnail

今回の記事では、バズ部さんが無料で公開しているWordPressテーマ:XeoryBase のSNSアカウントへのリンクをカスタマイズする方法について書いてみたいと思います。

Xeory をインストールしたばかりの状態だと、SNSアカウントへのリンクがタイトルの横(ヘッダー右上)に表示されますよね。
他のサイトを見ていると、特にブログのようなサイトでは、このようなSNSへのリンクはサイドバーに表示することが少なくない気がします。

表示する場所の選択肢は多いほうが良い!ということで、今回はSNSアカウントへのリンクをサイドバーの一番上に表示する方法を紹介していきます。

カスタマイズ前

↓ SNSへのリンクはヘッダー右上に表示されている

sidebar-sns-before

カスタマイズ後

↓ サイドバーの一番上に移動

sidebar-sns-after

1. header.php を編集

最初の状態ではヘッダーにSNSへのリンクが表示されているので、まずはこれを非表示にしましょう。
header.php の52行目付近に以下のコードがあるので、・・・

PHP
コピーする
<?php bzb_header_social_buttons();?>

このコードを消去(またはコメントアウト)します。
これでヘッダーに表示されていたSNSへのリンクは非表示になりました。

2. sidebar.php を編集

次は sidebar.php を編集して、サイドバーにSNSへのリンクを表示させます。
sidebar.php の5行目付近に以下のコードがあるので、・・・

PHP
コピーする
<?php
if( dynamic_sidebar('sidebar') ):

このコードを、下のコードで置き換えます。

PHP
コピーする
<div class="side-sns side-widget">
<div class="side-widget-inner">
<h4 class="side-title"><span class="side-title-inner">SNS</span></h4>
<?php bzb_header_social_buttons(); ?>
</div>
</div>
<?php
if( dynamic_sidebar('sidebar') ):

保存してページを更新すると、サイドバーに表示されました。

sidebar-sns-before-css

3. CSSでスタイリング

ここまでの状態だとSNSボタンが縦並びになってしまっているので、最後にCSSで見た目を整えていきましょう。
Xeory自体の(親テーマの)style.css や子テーマの style.css など、お好みのCSSファイルに以下のコードを追加します。

CSS
コピーする
.side-sns:before {
content: "";
display: table;
}
.side-sns:after {
content: "";
display: table;
clear: both;
}
#side #header-sns ul {
padding: 0 0 10px;
}
#side #header-sns li {
display: inline-block;
margin-left: 30px;
font-size: 21px;
}
#side #header-sns li a {
color: #ccc;
}
#side #header-sns li a:hover {
color: #57585a;
}
.side-sns.side-widget {
padding-bottom: 0;
}
.side-sns.side-widget li {
border-bottom: none;
}

↓ CSSコード追加後

sidebar-sns-after-2

ちなみにアイコンの色は、上のコード中の #ccc#57585a 部分を違う色コードにすることで、お好みの色に変更することができます。
ぜひお試し下さい。

CSS
コピーする
#side #header-sns li a {
color: #ccc; ← 通常の状態
}
#side #header-sns li a:hover {
color: #57585a; ← マウスオーバーしたとき
}

Copyrights © WebCraftLogAll Rights Reserved.