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

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

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

記事の上や記事の下にウィジェットをよく追加しますね。フッターは、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>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (5件)

  • いつもわかりやすくお世話になっています。
    サイト作成中なのですが、記事上にウィジェットを配置しようと思ってます。
    (テーマはstinger8を使用しています。)
    「ウィジェットを表示する方法」の項目でsingle.phpの最下部に

    を入力しても表示されません(>_<)
    stinger8では別のcssに記述しないといけないのでしょうか?
    すみません、まったくの素人のため、ご教授いただけると幸いです。
    お手数をおかけいたしますが、どうぞよろしくお願い申し上げます。

  • 申し訳ございません
    ソースが抜けていました。

    「ウィジェットを表示する方法」の項目でsingle.phpの最下部に

    を入力しても表示されません(>_<)

  • こんにちは。

    cssは.cssファイルに書くものになるためcssは関係ありません。
    この記事はPHPのコードのカスタマイズになります。

    まずfunction.phpにソースを追加したとき、ウィジェットエリアは増えていますか?
    そこまでが最初のステップです。

    もし増えていれば、そのウィジェットに文字などを適当に入れるといいかもしれません。その文字がソースコード上に表示されているか否かで表示がうまくいっているか確認できます。たとえば、記事上に追加したつもりが記事下にでていたなんてことがあるかもしれません。

    一番、気になったのは最下部とありますが、表示のコードはどこに追加するかにより表示される場所が変わります。記事上の場合、the_content()、(検索すればすぐに見つかります)の上に追加します。記事も若干説明を追記させてもらいました。

    PHPの基礎中の基礎ぐらい理解してからカスタマイズした方がいいかと思われますが、万が一画面が真っ白になった場合はFTP上からそのコードを消すか、ローカルにSingle.phpのバックアップをとっておきアップロードすればなおります。

    また、僕はstinger8を利用したことないため、わからない部分もありますが、single.phpのファイルが記事のタイプなどで別れている場合もあります。
    その場合は追記する場所が間違えています。

    ちなみに、僕は現在、この方法は使っておらず子テーマで対応しています。
    http://ebookbrain.net/how-to-create-a-child-theme-on-wp/
    ただ、あまり難しいことをしたくなければ、この方法でもいいかもしれません。

  • 下記は追加するウィジェットを囲うタグの指定かとおもいますが
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    pのままやってみたところブラウザ上では
    空のがウィジェットの上下に1つずつ生成されました。
    pではなくdivにしたところうまくラップされました。

    • コメントありがとうございます。ちょっと昔の記事なのでうる覚えです。pでも問題ないはずですけど、divの方がより安心感があるかもしれませんね。

コメントする