WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ

前回、人気記事などをサイドバーに表示させる「WordPress Popular Post」の表示をStinger5と同じような表示にするカスタマイズを行いました。

WordPress Popular PostをStinger5と同じ表示にカスタマイズ | dmgadget(ディーエムガジェット)

見た目がそろってとても良い感じになりました。今回は下記の画像のようにフッターにカテゴリーを表示させてみたいと思います。

今回もMAMPを使ったローカル環境のWordPressで設定を行って行きます。ちなみに導入方法を書いた記事はこちら、

OSXローカル環境にwordpressをインストールする方法 | dmgadget(ディーエムガジェット)

「Stinger5」に子テーマを導入する方法も書いています。子テーマでの説明となりますので、導入していない方はこちらからどうぞ〜。

WordPressテーマ「Stinger5」に子テーマを導入する方法 | dmgadget(ディーエムガジェット)

まずはfunction.phpを編集

記述を間違えたらブログが真っ白になってしまう（笑）「function.php」を編集します。初心者の方は必ずバックアップをしておきましょう。自分はTransmit4を愛用しているので、それで「function.php」を編集します。

Transmit
カテゴリ: ユーティリティ, 仕事効率化

function.phpの１８７行目ぐらいに以下の記述があります。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',

上記の２行目

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )

の最後の４を５に変更して表示するウイジェット数を４から５に変更します。下記のようになっていれば問題ありません。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',

次にその下２２５行目ぐらいに空白の行があります。

そこに以下の記述をコピペします。

register_sidebars(1,
    array(
    'name'=>'フッター',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

最終的に以下のようになれば問題ありません。

ダッシュボードに戻って確認します。

ダッシュボード　→　外観　→　ウィジェット　を確認すると、

上記のように「フッター」が追加されています。そこにカテゴリーを追加します。自分は投稿数を表示させました。

次にfooter.phpを編集してフッターにカテゴリを表示させます

親テーマに入っている「footer.php」を子テーマにコピーして子テーマの「footer.php」で作業していきます。

まず下記の記述をコピーして、

<div id="footer-box">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
    <?php endif; ?>
</div>

上記のfooter.phpの２行目にペーストします。最終的にこのようになれば問題ありません。一回ブログを確認してみましょう。

一回ブログを確認してみましょう。

デザインを修正する記述をstyle.cssに書きます。子テーマのstyle.cssの一番下か任意の場所に下記の文章をコピペしてください。

/*--------------------------------
フッターカテゴリー
---------------------------------*/
#footer-box {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#footer h5 {
	color: #333;
	font-size: 15px;
	font-weight: bold;
	margin: 10px 0px 10px 10px;
	text-align: left;
}
#footer h5:before {
 	color:#333;
 	margin-right: 5px;
 	font-family:"FontAwesome";
 	content:"\f02c";
 	font-size:12px;
}
#footer-box li{
	margin: 7px;
	float: left;
	list-style: none;
}
#footer-box li a{
	color: #333;
	font-size: 14px;
	background-color: #f1f1f1;
	padding: 7px;
	text-decoration: none;
	box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
	-moz-box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
}
#footer-box li a:before {
	color:#333;
	margin-right: 5px;
	font-family:"FontAwesome";
	content:"\f02c";
	font-size:12px;
}
#footer-box li a:hover{
	color: #DC143C;
	background-color: #dcdcdc;
}

/*--------------------------------
フッター文字
---------------------------------*/
#footer h3 {
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#footer .copy {
	font-size: 15px;
	color: #000;
	line-height: 15px;
	-moz-opacity: 0.5;
	opacity: 0.5;
	margin-bottom: 20px;
}

次に親テーマのstyle.cssから下記の部分をコピーして子テーマに貼付けてから編集します。

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
}
header {
	text-align: center;
}
#gazou {
	display: none;
}
#gazou p {
	margin: 0px;
}
main {
	background-color: #fff;
	padding: 20px 10px;
	margin: 0 -10px 20px;
}
section {
	margin-bottom: 3em;
}
footer {
	clear: both;
	padding: 20px 0;
	text-align: center;
}
.ad {
	padding-bottom: 10px;
}
.post{
overflow: hidden;
}

この中の

footer {
	clear: both;
	padding: 20px 0;
	text-align: center;
}

この部分を以下に書き換えます。コピペでいいでしょう。

footer {
	clear: both;
	padding: 20px 0;
	text-align: center;
	background: #fff;
	padding: 10px;
	border-radius: 4px;
	background: rgba(255,255,255,1);
}

コピペしたら確認ブログを確認してみましょう。

フッターにカテゴリーが綺麗に並びました。フッターの背景を白ではなくブログ全体の背景にしたい方は、最後の

footer {
	clear: both;
	padding: 20px 0;
	text-align: center;
	background: #fff;
	padding: 10px;
	border-radius: 4px;
	background: rgba(255,255,255,1);
}

footerの部分を抜いてください。又、背景を透過させたい方は最後の行の「 background: rgba(255,255,255,1);」の最後の１を0.7や0.8に変更してください。すると最初に紹介した完成形になります。

先日サイドバーの背景を変更するカスタマイズもしました。そちらも行いたい方は下記のリンクからどうぞ。

WordPress[Stinger5] プラグインなしで背景を画像にする | dmgadget(ディーエムガジェット)

以前まではサイドバーにカテゴリーを表示させてましたが、新着記事や人気の投稿が目につきやすい方がブログ回遊率が上がるんではないかと思いフッターへ移動してみました。今回参考にさせて頂いたブログはこちら、

【STINGER5】フッターに『カテゴリー』一覧ウィジェットを追加する方法 | SiteMiru（してみる）

また何か思いついたら書きたいと思います。読んで頂いてありがとうございました。