wordpress-footer-widgets

wordpressでフッターにウィジェットを追加する方法

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

サイドバーには、ウィジェットを自由自在に設定できるけど、フッターにもウィジェットを追加したいよ!という向けです。この度、フッターにウィジェットを追加したので、その方法をメモ程度に残しておきます。(崩れてないよね?!)


1,まずはfunctions.phpに追加

テーマごとに書き方は違いと思いますが、サイドバーがあるテーマでしたらテーマ編集よりfunctions.phpに

register_sidebar(array(
		'name' => 'footer',
		'description' => 'footer',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

と書いてあるはずです。ので、これを増やす!
(フッターに3つ並べて表示したい場合は3つ、2つなら2つ。1つなら1つ。)

私のfunctions.phpはこんな感じです。

2、ウィジェットを確認。

【外観】→【ウィジェット】を確認

先程、functions.phpで追加した部分が表示されています。
しかし、ここに追加してもまだサイトの方には表示されません。

3,footer.phpに追加
テーマ編集よりfooter.phpに下記を追加

<?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footer);?>

これでフッターにウィジェットが追加できるようになります。
が表示はがたがたなので、cssなどで調節してあげればおっけーです!

4,簡単な流れ

フッターに3つウィジェットを追加したい場合

まずはfunctions.phpに追加。

register_sidebar(array(
		'name' => 'footerleft',
		'description' => 'footerleft',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

register_sidebar(array(
		'name' => 'footercenter',
		'description' => 'footercenter',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

register_sidebar(array(
		'name' => 'footerright',
		'description' => 'footerright',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

footer.phpに下記を追加

<div id="footer-widget" class="clearfloat">
    <div id="footerleft" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footerleft);?>
    </div>
    <div id="footercenter" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footercenter);?>
    </div>
    <div id="footerright" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footerright);?>
    </div>
</div>

cssはざっくりこんな感じ

div#footerleft{
    width:25%;
    float:left;
}

div#footercenter {
    width:50%;
    float:left;
}
 
div#footerleft {
    padding:10px 5px 10px 10px;
}
 
div#footercenter {
    padding:10px 5px 10px 5px;
}
 
div#footerright {
    width:15%;
    float:right;
    padding:10px 10px 10px 5px;
}
 
.clearfloat {
margin : 0px auto;
padding : 0px;
width : 1000px;
}
 
.clearfloat:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

まとめ

フッターでウィジェットが使えれば、色々幅が広がりそうですね!

関連する記事がありません。

関連記事

  • Pingback: ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介! | Design Color

  • TA

    お世話になります。
    いつも楽しく読ませていただいています。

    まずはfunctions.phpに追加。

    の20行目

    ‘name’ => ‘footerrightt’,

    のtが一つ多いようです。

    • ハヤシ

      TA様
      コメントありがとうございます。
      失礼いたしました。修正させていただきました!

    • http://nh-lab.com/ ハヤシ

      TA様
      お世話になります。
      いつも読んでいただきありがとうございます。

      大変失礼いたしました。
      修正いたしました。

      ありがとうございました!

  • kobashihh

    こんにちは!
    フッターウィジェットがデフォルトで搭載されているBuddyPress向けテーマの「X2」を使っているのですが、フッターウィジェットのスペースが大きすぎるためカスタマイズしたいのですが、どこをどのようにしたらいいかわからず悩んでおります。
    ポケットラボさんの高さが正に理想なのですが。教えていただけませんでしょうか?
    お願いいたします。

    • http://nh-lab.com/ ハヤシ

      こんにちは!コメントありがとうございます!

      http://themekraft.com/x2-demo/

      実際のサイト見てみないとわからない部分もございますが
      こちらを使用中ということでよろしいでしょうか?

      こちらのテーマだとCSSでheightで高さを指定しているわけではなく、ウィジェットの中のコンテンツの長さによって高さが調節されるようになっているかと思います。
      class=”widgetarea cc-widget”にかかっているmarginを調節、

      もしくはclass=”widget”のmargin-bottom:を調節すれば高さは修正できるかと思います。

      ウィジェットの要素を入れずに高さを修正したい場合は、#footer div.creditsにpaddingで調節してみればいいのではないでしょうか?

      そのほかご不明点ございましたらお答えいたしますよー!

      • kobashihh

        ご返答ありがとうございます。
        そちらのテーマで制作しております。
        theme-generator.phpというファイルにハヤシさんにご指摘いただいたclass=”widgetarea cc-widgetとclass=”widget”のmargin-bottom:という記述がありましたのでかかる数字を変更してみましたが表示に変化が現れませんでした。こちらではないのでしょうか?またはポケットラボさんのようなフッター高さにするにはウィジェットではなく他のファイルを変えたほうがいいですか?質問がごちゃごちゃしてすみません。フッターにはコピーライトと1行のテキストを表示させようと思います。

        • http://nh-lab.com/ ハヤシ

          ウィジェットを使用していないということですので、
          上記のclassのCSSを変更しても変化しないかもしれませんね!

          コピーライト部分のclass=”credits”の部分に当てているCSSをpaddingもしくはheightで調節できるかもしれません。

          どうでしょうか?

PAGE TOP