好きなもの、好きなだけ、盛り合わせ

【フッターカスタマイズ】カテゴリーや広告をウィジェット管理!

   

最近、ずっとあることに悩んでいました。それは、なんだかよくわからないけど、自分のサイトのデザインが物足りない気がするということ。すっごいふわっとした悩み(笑)

いや、ホントに、なーんか物足りない気がしてたんですよ。それが何かはよくわからないんですが、とにかく何かが物足りなかったんです。

で、何をどうすればいいのか真剣に悩んでいたんですが、その悩みの原因が「フッター」であることがわかりました。

フッターが寂しい

これまで、「ヘッダー」や「記事部分」など、サイトでいうところの「上の部分」のカスタマイズはしてきたのですが、「下の部分」のカスタマイズは一切していませんでした。

というのも、アクセスして最初に目に入る部分はヘッダーであり、あくまでもメインコンテンツは「記事」です。なかなかフッターまではチェックしません。

でも、「全体的なサイトデザイン」の観点だと、ヘッダーからフッダーまでコンテンツが散りばめられた方が見栄えがいいんですよね。個人的な感想なんですが。

 

▼これがデフォルトのフッターデザイン。黄色い部分がフッターです。

footer-widget-1

 

▼これがカスタマイズ後のフッターデザイン。すべてフッターです。中身は良い意味で「ごちゃごちゃ」してますよね。

footer-widget-2

今回のフッターカスタマイズの内容

今回のフッターのカスタマイズ内容は下記の通りです。(後述しますが、分割する数は簡単に変更できます)

  1. ウィジェットで簡単に管理できる
  2. パソコン表示時は分割される
  3. スマホ表示時は分割されない

では、早速ご紹介します!

CAUTION

今回のカスタマイズはStinger5を例に進めていきます。必ずバックアップしてからお試しください。

functionカスタマイズ(ウィジェット追加)

まず、function.phpをカスタマイズして、フッター専用のウィジェットを追加します…が、重要な部分は別記事で詳しく書いているので、割愛します!

ヘッダー下をウィジェットで管理!ワードプレスカスタマイズ!

ウィジェットでCTAを簡単に設定する方法【全テーマ共通】

 

ということで、追加するコードだけご紹介。分割したい数だけ「コピペ&タイトル変更」すればOKです。

register_sidebars(1,
    array(
    'name'=>'フッター左ウィジェット',
    'before_widget' => '<div class="footer-widget">',
    'after_widget' => '</div>',
    'before_title' => '<p class="footer-widget-title">',
    'after_title' => '</p>',
    ));

 

▼3分割の時はこうなります。

register_sidebars(1,
    array(
    'name'=>'フッター左ウィジェット',
    'before_widget' => '<div class="footer-widget">',
    'after_widget' => '</div>',
    'before_title' => '<p class="footer-widget-title">',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター中央ウィジェット',
    'before_widget' => '<div class="footer-widget">',
    'after_widget' => '</div>',
    'before_title' => '<p class="footer-widget-title">',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター右ウィジェット',
    'before_widget' => '<div class="footer-widget">',
    'after_widget' => '</div>',
    'before_title' => '<p class="footer-widget-title">',
    'after_title' => '</p>',
    ));

 

これで、ウィジェットエリアにフッター専用のウィジェットが追加されました。中に入れるのは、なんでもOKです。アドセンスでも。

footer-widget-3

HTMLカスタマイズ

次は、HTMLのカスタマイズ。Stinger5だと、「footer.php」をカスタマイズします。

下記のコードが、先ほど追加したウィジェットを表示させるコード。分割する数に合わせてプラスマイナスすればOKです。

    <div class="footer-contents footer-left clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : //フッター左ウィジェット ?>
<?php endif; ?>
    </div>
    <div class="footer-contents footer-center clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(8) ) : else : //フッター中央ウィジェット ?>
<?php endif; ?>
    </div>
    <div class="footer-contents footer-right clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(9) ) : else : //フッター右ウィジェット ?>
<?php endif; ?>
    </div>

 

上記のコードをfooter.phpに追加した後の全体のコードがこちら。

<footer id="footer">
    <div class="inner">
    <div class="footer-contents footer-left clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : //フッター左ウィジェット ?>
<?php endif; ?>
    </div>
    <div class="footer-contents footer-center clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(8) ) : else : //フッター中央ウィジェット ?>
<?php endif; ?>
    </div>
    <div class="footer-contents footer-right clearfix">
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(9) ) : else : //フッター右ウィジェット ?>
<?php endif; ?>
    </div>
    <div id="footer-main">
  <h3>
    <?php if (is_home()) { ?>
    <?php bloginfo( 'name' ); ?>
    <?php } else { ?>
    <?php wp_title(''); ?>
    <?php } ?>
  </h3>
  <p>
    <?php bloginfo('description'); ?>
  </p>
  <p class="copy">Copyright&copy;
    <?php bloginfo('name');?>
    ,
    <?php the_date('Y');?>
    All Rights Reserved.</p>
    </div>
    </div>
</footer>

▲「上から2番目のコード」と「下から2番目のコード」は削除してもOKです。これは下記のカスタマイズの影響です。

Stinger5のヘッダーを画面いっぱいにしたカスタマイズ。

CSSカスタマイズ

最後に、スタイルシート(style.css)をカスタマイズして終了です。

@media only screen and (min-width: 780px)

▲このコードの後に、下記のコードを追加します。(min-widthの数値はテーマによって微妙に違うかもしれません)

.footer-contents {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
}

▲重要なのは、真ん中の数値。これは、「100÷分割したい数」の数値です。

  • 2分割→50%(100÷2)
  • 3分割→33.33%(100÷3)
  • 4分割→25%(100÷4)

 

そして、下記のコードを全体のデザインに影響する箇所に追加します。おそらく、前半に追加すれば間違いないはずです。

.footer-contents {
    padding: 20px 10px;
}
.footer-widget {
    margin-bottom: 20px;
}
.footer-widget-title {
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
}
#footer-main {
    border-top: 1px solid #111;
    padding-top: 20px;
    text-align: center;
    clear: both;
}

▲このコードは適宜微調整してOKです。

POINT

テーマによっては、上記のコードに下記のコードを追加する必要があります。デザインが崩れている場合は、お試しください!

.footer-contents {
    clear: both;
}

 

ちなみに、カテゴリーをドロップダウン表示ではなく、すべて表示させたい方は、下記のコードも参考になると思います。

.footer-contents ul li {
    list-style-type: none;
    font-size: 11px;
    background-color: #fff;
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px solid #111;
    border-radius: 2px;
    box-shadow: 0 5px 3px -4px;
}

まとめ

カスタマイズしていただければ実感すると思うんですが、フッター周りが充実していると、土台がしっかりしているような印象を受けるんですよね。

ワンカラムのサイト(サイドバーがないサイト)なんかは、フッター周りが特に重要だと思うので、記事を読んだ後の動線を増やすためにも効果的かもしれません。

「なんか、デザインを変えたいな…」と思ったら、フッター周りをカスタマイズしてみてはいかがでしょうか?お試しあれ!

カテゴリー WordPressカスタマイズ

注目 auひかり&スマートバリューでiPhone7の料金が激安に!

注目 クラウド会計ソフト「freee」の使い方とスマホでの操作方法!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE