どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
STINGER8のフッター部分には各メニューやブログ名、説明文がデフォルトで表示されるようになっています。
フッターはヘッダーと違ってあまり目立つエリアではないので、特に手を加えることもなくそのままの設定で使用されていませんか？
現在ではフッターエリアをデザインされているブログをよく見かけるようになりましたが、オシャレにカスタマイズされているとユーザーの印象にも残りやすくなります。
私自身のブログもSTINGER8で少なからずカスタマイズを行ってきましたが、フッター部分はまだ手つかずの状態でしたので、そろそろ足元もオシャレにデザインしていこうかと思います。
今回はワードプレスにフッター用ウィジェットを新たに追加して、カスタマイズしていきますのでSTINGER8を利用されている方は、ご紹介する方法をぜひ参考にしていって下さい。
フッターのデザインについて
STINGER8のデフォルト仕様で表示した場合は以下のデザインになります。
フッターはどのテンプレートを利用しても、基本的には上記のような表示になるかと思います。
このいたって普通感のあるイメージを、以下のように独自性のあるものにカスタマイズしていきます。
もともとSTINGER8にはフッター用のウィジェットがない為、これを追加して３カラムに対応したフッターに編集したいと思います。
ウィジェットを使用できるようにすれば、テキストを使って好きなコンテンツを表示させることができるようになります。
フッター用ウィジェットの追加方法
まずはフッターで使用するウィジェットを追加する為には、子テーマの「functions.php」ファイルにコードを追加する必要があります。
ただ、注意点として「functions.php」の編集で誤ったコードを入力してしまうと、画面が真っ白になりワードプレスにアクセスできなくなります。
「functions.php」を編集する際は、必ずバックアップファイルを用意しておくことをオススメします。
もしエラーが起きてしまった時は、落ち着いて以下の記事内容を参考に復旧作業を進めて頂ければと思います。
| 参考：functions.phpのエラーで画面が真っ白に！その原因と対処法について |
また、親テーマにしかファイルがない場合は、FTPソフトで子テーマ内にアップロードしておきましょう。
「functions.php」を編集する
ワードプレスの管理画面メニューから、「外観」⇒『テーマの編集』をクリックします。
子テーマの「functions.php」ファイルを開いて、一番下の空いているスペースに以下のコードをコピー&ペーストします。
//フッターウィジェット追加 register_sidebar( array( 'id' => 'footer-left', 'name' => 'フッター左', 'before_widget' => '<ul><li>', 'after_widget' => '</li></ul>', 'before_title' => '<h4 class="menu_underh2">', 'after_title' => '</h4>', )); register_sidebar( array( 'id' => 'footer-center', 'name' => 'フッター中央', 'before_widget' => '<ul><li>', 'after_widget' => '</li></ul>', 'before_title' => '<h4 class="menu_underh2">', 'after_title' => '</h4>', )); register_sidebar( array( 'id' => 'footer-right', 'name' => 'フッター右', 'before_widget' => '<ul><li>', 'after_widget' => '</li></ul>', 'before_title' => '<h4 class="menu_underh2">', 'after_title' => '</h4>', ));
掲載コードは「STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法」でご紹介されているものをそのままお借りしました。
ファイルを更新すればワードプレスのウィジェット内に、「フッター左・中央・右」の３項目が追加されているはずです。
フッターエリアをカスタマイズ
後でデザインの編集で使用する「スタイルシート (style.css)」のコードを読み込ませる為に、「テーマフッター (footer.php)」ファイルを編集していきます。
「footer.php」を編集する
「footer.php」を開くとファイル内の上部に以下のコードがあるかと思います。
</div><!-- /contentw --> <footer> <div id="footer"> <div id="footer-in"> <?php //フッターメニュー $defaults = array(
上記のコードに以下の色のついた部分のコードを追加していきます。
</div><!-- /contentw -->
<div id="foot-wrapper">
<footer>
<div id="footer">
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<div class="clearfix">
<div id="footer-in">
<?php //フッターメニュー
$defaults = array(
フッターエリアにブログのタイトルや説明文が必要ないという方は、以下の記述の最初の部分に「<?php /* ?>」、最後の部分に「<?php */ ?>」を追記して下さい。
<?php /* ?>
<div class="footer-wbox clearfix">
<div class="footer-c">
<!-- フッターのメインコンテンツ -->
<p class="footerlogo">
<!-- ロゴ又はブログ名 -->
<?php if ( !is_home() || !is_front_page() ) { ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php } ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php if ( !is_home() || !is_front_page() ) { ?>
</a>
<?php } ?>
</p>
<p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
</p>
</div>
</div>
<?php */ ?>
コメントアウトでよく使われる「<!– –>」では上手く非表示にできないので、ここでは上記のコードを使用しています。
コードを削除して非表示にすることもできますが、私の場合はまた元に戻す可能性もありますのでコードは残す方法で対応しました。
フッターデザインをカスタマイズ
フッター用のウィジェットとデザインをカスタマイズする準備ができましたので、ここからは「style.css」で３カラムに表示できるように編集していきます。
「style.css」を編集する
「style.css」ファイルを開いたら、以下のコードを追記していきましょう。
/*-- フッターエリア --*/
.clearfix {
clear: both;/*回り込みを解除*/
}
#foot-wrapper {
width: 100%;/*全体の幅*/
padding: 0 auto;
margin: 0 auto;
background: #333;/*背景色*/
text-align: center;/*中央揃え*/
}
#footer {
max-width: 990px;/*幅の最大値*/
margin: 0 auto;
}
#footer>aside ul {
float: left;
color: #fff;/*テキストの文字色*/
margin-right: 30px;/*カラム間右側の幅*/
width: 300px;/*1カラムの幅*/
padding: 0px 0px;
list-style-type: none;
}
これで３カラムで表示できるようになりますので、後は好きなコンテンツをワードプレスのウィジェットから追加していきましょう。
また、すでにカテゴリーやプロフィールなどのデザインをCSSでカスタマイズされている場合は、そのデザインがフッターでも反映されてしまいます。
フッターエリアのデザインだけを変更したい時は、「style.css」に以下のように追記していきます。
#footer a {
color: #fff !important;/*メニュー色*/
}
#footer .menu_underh2 {
}
#footer .cat-item a {
}
上記のように「#footer」を追加したコードにすることで、フッターエリアのみに反映させることができます。
「#footer a」でメニューの配色を変更できますが、もし色コードを編集しても色が変わらない時は、「!important」を追記してコードの優先度を上げれば反映されるかと思います。
以上がSTINGER8のフッターエリアのカスタマイズになります。
まとめ
フッターエリアをカスタマイズして足元をオシャレに演出するだけでも、ブログやサイトの雰囲気がガラリと変わるのではないでしょうか。
また、コンテンツのアピールにも繋がりますし、ユーザビリティや回遊率の向上にも期待ができます。
デフォルトのまま使用するのは勿体無いので、STINGER8のフッターにウィジェットを追加してブログをアピールしていきましょう。
