3分で終わる!stingerのサイドバー並び順を入れ替える方法

現在ブログテーマとしてstinger3を使用をしています。見た目がシンプルでとても気に入ってます。製作されたENJIさんにはいつも感謝してます。 十分そのままでもいいのかなと思ってますが、やっぱり自分用にカスタムしたくなるのが人間ってものですよね。

そこで今回はサイドバーの並び替えに挑戦してみました。

new-entry

普通のstingerではウィジェットからカテゴリーやカレンダーを登録すると上記画像のNEW ENTRYの下に挿入されます。NEW ENTRYは標準で5個並んでますので、これだとカテゴリやカレンダーがかなり下の方になってしまうんです。

実はこの辺りの並び替えは本家ENJIさんのブログでも変えてたりするんですよね。

sidebar.phpの順番を入れ替えるだけ

まずはwordpressの操作画面から[外観]-[テーマ編集]と進みます。そうするとstingerの設定ファイルが右端に並びますので、[sidebar.php]を選択してくだい。下記のソースコードが表示されますので、まずは全コードをコピーしてバックアップを取りましょう。そうしたら45〜48行目のコードを10行目の上に移動させましょう。それで下の[ファイルを更新]を押してブログを更新すればNEW ENTRYの上に各ウィジェットが表示されるようになりますよ。

※作業の時はファイルのバックアップをお願いします。

[sidebar.phpソースコード]
<div id="side">
  <div class="sidead">
<?php if(is_mobile()) { ?>
<?php } else { ?>
<?php get_template_part('ad');?>
<?php } ?>
  </div>
  <?php get_search_form(); ?>
  <div class="kizi02"> 
    <!--最近のエントリ-->
    <h4 class="menu_underh2">NEW ENTRY</h4>
    <div id="topnews">
      <div>
<?php
$args = array(
    'posts_per_page' => 5,
);
$st_query = new WP_Query($args);
?>

<?php if( $st_query->have_posts() ): ?>
    <?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
<dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
    <?php the_post_thumbnail( 'thumb100' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
        <?php endif; ?>
        </a></span></dt><dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p>
</dd>
<p class="clear"></p>
</dl>
    <?php endwhile; ?>
<?php else: ?>
    <p>記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
        <p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p>
      </div>
    </div>
    <!--/最近のエントリ-->

    <div id="twibox">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
      <?php endif; ?>
    </div>
  </div>
  <!--/kizi--> 
  <!--アドセンス-->
  <div id="ad1">
    <div style="text-align:center;">
      <?php get_template_part('scroll-ad');?>
    </div>
  </div>
</div>
<!-- /#side -->
stinger-sidebar-custom

ほらね。