MORIAWASE

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

今日の人気記事です!

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

   

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

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

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

フッターが寂しい

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

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

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

 

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

footer-widget-1

 

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

footer-widget-2

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

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

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

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

CAUTION

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

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

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

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

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

 

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

 

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

 

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

footer-widget-3

HTMLカスタマイズ

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

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

 

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

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

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

CSSカスタマイズ

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

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

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

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

 

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

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

POINT

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

 

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

まとめ

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

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

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

 - WordPress・カスタマイズ

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

最新情報をお届けします