WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
- 2015.02.16
- WORDPRESS
![WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ](https://dmgadget.net/wp-content/uploads/2015/02/wordpress-stinger5-footer-category_title.jpg)
前回、人気記事などをサイドバーに表示させる「WordPress Popular Post」の表示をStinger5と同じような表示にするカスタマイズを行いました。
見た目がそろってとても良い感じになりました。今回は下記の画像のようにフッターにカテゴリーを表示させてみたいと思います。
今回もMAMPを使ったローカル環境のWordPressで設定を行って行きます。ちなみに導入方法を書いた記事はこちら、
「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行目ぐらいに空白の行があります。
そこに以下の記述をコピペします。
register_sidebars(1, array( 'name'=>'フッター', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h5>', 'after_title' => '</h5>', ));
最終的に以下のようになれば問題ありません。
ダッシュボードに戻って確認します。
ダッシュボード → 外観 → ウィジェット を確認すると、
上記のように「フッター」が追加されています。そこにカテゴリーを追加します。自分は投稿数を表示させました。
親テーマに入っている「footer.php」を子テーマにコピーして子テーマの「footer.php」で作業していきます。
まず下記の記述をコピーして、
<div id="footer-box"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?> <?php endif; ?> </div>
上記のfooter.phpの2行目にペーストします。最終的にこのようになれば問題ありません。一回ブログを確認してみましょう。
一回ブログを確認してみましょう。
デザインを修正する記述を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);」の最後の1を0.7や0.8に変更してください。すると最初に紹介した完成形になります。
先日サイドバーの背景を変更するカスタマイズもしました。そちらも行いたい方は下記のリンクからどうぞ。
以前まではサイドバーにカテゴリーを表示させてましたが、新着記事や人気の投稿が目につきやすい方がブログ回遊率が上がるんではないかと思いフッターへ移動してみました。今回参考にさせて頂いたブログはこちら、
また何か思いついたら書きたいと思います。読んで頂いてありがとうございました。
-
前の記事
電話番号はそのままで楽天でんわやG-Callを使って通話料を安くする方法 2015.02.15
-
次の記事
IIJmioふぉんのデータ通信量をAndroidアプリ「まいみお!」で参照する 2015.02.17