ブログのサイドバーへ、2つ目のウィジェット領域を追加。自由自在のサイドバーへ。

ブログのサイドバーにはバナーや私についてのリンク、最新情報や人気記事が配置されています。
しかし、ノーマルな「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.