モッピー!お金がたまるポイントサイト

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

2021/06/21

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

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

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

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

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

[adsense]

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

まずはfunction.phpを編集

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


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

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

//ウイジェット追加
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以外では非表示部分',

上記の2行目

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

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

//ウイジェット追加
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以外では非表示部分',

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

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

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

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

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

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

[adsense]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインを修正する記述を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);
}

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

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

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

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);」の最後の1を0.7や0.8に変更してください。すると最初に紹介した完成形になります。

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

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

[adsense]

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

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

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget