ウィジェットのカスタマイズ　記事上と記事下、フッターにウィジェットを複数追加する方法。

覚書ついでに、複数のウィジェットを追加する方法の紹介です。^^

記事上、記事下、フッターのウィジェットの追加

記事の上や記事の下にウィジェットをよく追加しますね。フッターは、twenty elevenのようにテーマにデフォルトで配置されていないものがありますから、その場合はフッターエリアを追加するかもしれませんね。

追加方法は、function.phpの最後に新しく追加するか、すでにウィジェットがある場合はdynamic_sidebarで検索し、すでにあるウィジェットの続きに追加した方がいいかもしれません。どちらでもできますが、分割すると並び順に若干影響がでることがあります。

次のコードをfunction.phpに追加し、Wordpress > ウィジェットを確認すると、ウィジェットエリアが増えています。

/**
 * ウィジェットの追加
*/

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'記事上',
    'id' => 'post_top',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
register_sidebars(1,
    array(
    'name'=>'記事下',
    'id' => 'post_buttom',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター',
    'id' => 'footer',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
register_sidebars(1,
    array(
    'name'=>'フッター2',
    'id' => 'footer2',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<p>',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター3',
    'id' => 'footer3',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
?>

before_widget、after_widget、before_title、after_titleは好きなタグに変更できます。横並びにしたり、応用する場合に役に立ちます。

余談ですが、アドセンスはAdSense Managerのプラグインを使えば、ウィジェットエリアを追加する必要はありませんが、
ウィジェットエリアを追加した方がなんでも使えるため、ウィジェットエリアを使う方法がおすすめです。

ウィジェットを表示する方法

もちろん、function.phpに追加するだけでは、管理画面のウィジェットに追加されるだけです。ブログ上には表示はされないです。

テーマによりますが、記事上や記事下に追加する場合、single.phpに下記のコードを挟みます。表示のコードはどこに追加するかにより表示される場所が変わります。記事上や記事下に追加する場合は、the_content()の前後に挟みます。記事上の場合はthe_content()の上、記事下の場合はthe_content()の下です。

また、loop-single.phpなんかにわかれている場合もあります。フッターの場合は、footer.phpです。dynamic_sidebarの括弧の中は数字も指定できますが、idを指定する方がわかりやすいでしょう。指定したidのウィジェットが表示されます。

<?php dynamic_sidebar( 'post_top' ); ?>

フッターのスタイルシートをわける

フッターのスタイルシートを分けたい場合は、次のような形ですかね。

<div class="footer-left">
<?php dynamic_sidebar( 'footer' ); ?>
</div>
<div class="footer-center">
<?php dynamic_sidebar( 'footer2' ); ?>
</div>
<div class="footer-right">
<?php dynamic_sidebar( 'footer3' ); ?>
</div>