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

wordpress

ハイ! リサです。

このブログのテーマはStinger5です。
サイドバーにはバナーや私についてのリンク、最新情報や人気記事が配置されています。
しかし、ノーマルなStingerは最新記事が一番上に来ています。

これを何とかして「リサのこと」の下に配置したかったことから、ウィジェットの領域を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の変更によって、ウィジェットは以下の様になります。

wj

CSSの追加

あとは追加したウィジェット領域のCSSを設定して出来上がりです。


/*ウィジェット領域の追加*/
#side aside #mybox2 ul li ul li {
font-size: 14px;
line-height: 27px;
}

#side aside #mybox2 ul {
margin-bottom: 10px;
}

やってみると拍子抜けするほど簡単にいきました。
後はウィジェットでサイドバーは自由自在です。

やってみてね。

See you !

Written by Lisa.

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする