以前このブログのテーマは「Stinger5」でした。
この記事は、その際に書いたものです。
今では古いテーマと言えるでしょうが、私がつくったブログには、まだ「Stinger5」をベースに稼働中ものもあります。
記事を捨てるには惜しい気がしましたので、そのまま掲載しておきます。
ブログのサイドバーにはバナーや私についてのリンク、最新情報や人気記事が配置されています。
しかし、ノーマルな「Stinger5」は最新記事が一番上に来ています。
これを何とかしてプロフィールの下に配置したかったことから、ウィジェットの領域を2つにすることにしました。
前提条件
最新記事の表示が出来るプラグインで、記事の抜粋まで表示出来るものが探せませんでした。
そこで、「Stinger5」の最新記事を活かして、その他の項目をウィジェットで自由に変えるという発想しました。
そのためサイドバーの構造は以下の様になります。
- 最新情報の上部(ウィジェット領域)
- 最新記事
- 最新情報の下部(追加するウィジェット領域)
- スマホのAdsens
- PCの追尾広告
サイドバーのコード(sidebar.php)の変更
まず、サイドバーのコード(sidebar.php)は以下の様に変更しました。
<div id="side"> <aside> <div id="mybox"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : //サイドウイジェット読み込み ?> <?php endif; ?> </div> <!-- 最近のエントリ --> <h4 class="menu_underh2"> 最新記事</h4> <?php get_template_part('newpost');?> <!-- /最近のエントリ --> <div id="mybox2"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : //サイドウイジェット読み込み ?> <?php endif; ?> </div> <!-- スマホだけのアドセンス --> <?php if (is_404()) { ?> <?php } else { ?> <?php if(is_mobile()) { //スマホの場合 ?> <div style="padding-top:10px;">スポンサーリンク <?php get_template_part('ad'); //アドセンス読み込み ?> </div> <?php } else { //PCの場合 ?> <div id="scrollad"> <?php get_template_part('scroll-ad'); //追尾式広告 ?> </div> <?php } ?> <?php } ?> </aside> </div>
最新情報の上と下に“mybox”と“mybox2”を配置しています。
dynamic_sidebar(5)にしていることに注意して下さい。
「dynamic_sidebar(5)」が「追加するウィジェット領域」になります。
ファンクション(function.php)の変更
function.phpの以下の部分を変更します。
//ウイジェット追加 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) register_sidebars(1, array( 'name'=>'サイドバーウイジェット1', 'before_widget' => ' <ul> <li>', 'after_widget' => '</li> </ul> ', 'before_title' => ' <h4 class="menu_underh2">', 'after_title' => '</h4> ', )); register_sidebars(1, array( 'name'=>'スクロール広告用', 'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分', 'before_widget' => ' <ul> <li>', 'after_widget' => '</li> </ul> ', 'before_title' => ' <h4 class="menu_underh2" style="text-align:left;">', 'after_title' => '</h4> ', )); register_sidebars(1, array( 'name'=>'Googleアドセンス用336px', 'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。', 'before_widget' => '', 'after_widget' => '', 'before_title' => ' ', 'after_title' => ' ', )); register_sidebars(1, array( 'name'=>'Googleアドセンスのスマホ用300px', 'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。', 'before_widget' => '', 'after_widget' => '', 'before_title' => ' ', 'after_title' => ' ', )); register_sidebars(1, array( 'name'=>'サイドバーウイジェット2', 'before_widget' => ' <ul> <li>', 'after_widget' => '</li> </ul> ', 'before_title' => ' <h4 class="menu_underh2">', 'after_title' => '</h4> ', ));
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(5) ) に変更し、
‘name’=>’サイドバーウイジェット1‘, にします。
また、一番下に以下を追加します。
register_sidebars(1, array( 'name'=>'サイドバーウイジェット2', 'before_widget' => ' <ul> <li>', 'after_widget' => '</li> </ul> ', 'before_title' => ' <h4 class="menu_underh2">', 'after_title' => '</h4> ', ));
ウィジェットの表示
function.phpの変更によって、ウィジェットは以下の様になります。
CSSの追加
あとは追加したウィジェット領域のCSSを設定して出来上がりです。
/*ウィジェット領域の追加*/ #side aside #mybox2 ul li ul li { font-size: 14px; line-height: 27px; } #side aside #mybox2 ul { margin-bottom: 10px; }
やってみると拍子抜けするほど簡単にいきました。
後はウィジェットでサイドバーは自由自在です。
by T.Y.