「人気のある記事」と「最近の投稿」を移動させたい – Xeory Extension

WordPressのテンプレートで最近お気に入りなのが「Xeory Extension」です。
すごく素敵なテンプレートなのですが、「人気のある記事」と「最近の投稿」の表示場所を下の方へ移動させたい時が多いです。

そこで、「人気のある記事」と「最近の投稿」を「会社概要」の上に移動させちゃいます。

PHPファイルの修正

編集するファイルは、front-page.phpです。

ファイルの中にある<div id="popular_post_content" class="front-loop">と<div id="recent_post_content" class="front-loop">が「人気のある記事」と「最近の投稿」になります。

front-page.php

<div id="popular_post_content" class="front-loop">

<h2><i class="fa fa-flag"></i> 人気のある記事</h2>
<div class="wrap">
  <div class="front-loop-cont">
<?php
      $i = 1;
      if ( have_posts() ) :
        // wp_reset_query();

        $args=array(
            'meta_query'=>
            array(
              array(  'key'=>'bzb_show_toppage_flag',
                         'compare' => 'NOT EXISTS'
              ),
              array(  'key'=>'bzb_show_toppage_flag',
                        'value'=>'none',
                        'compare'=>'!='
              ),
             'relation'=>'OR'
          ),
            'showposts'=>5,
            'meta_key'=>'views',
            'orderby'=>'meta_value_num',
            'order'=>'DESC'
          );
        query_posts($args);
        // query_posts('showposts=5&meta_key=views&orderby=meta_value_num&order=DESC');
        while ( have_posts() ) : the_post();

        $cf = get_post_meta($post->ID);
        $rank_class = 'popular_post_box rank-'.$i;
        // print_r($cf);
?>

  <article id="post-<?php echo the_ID(); ?>" <?php post_class($rank_class); ?>>
    <a href="<?php the_permalink(); ?>" class="wrap-a">

      <?php if( get_the_post_thumbnail() ) { ?>
      <div class="post-thumbnail">
        <?php the_post_thumbnail('small_thumbnail'); ?>
      </div>
      <?php } else{ ?>
        <img src="<?php echo get_template_directory_uri(); ?>/lib/images/noimage.jpg" alt="noimage" width="300" height="158" />
      <?php } // get_the_post_thumbnail ?>
    <p class="p_category"><?php $cat = get_the_category(); $cat = $cat[0]; {
        echo $cat->cat_name;
      } ?></p>
    <h3><?php the_title(); ?></h3>
    <p class="p_rank">NO.<span><?php echo $i; ?></span></p>
    
    </a>
  </article>

<?php
        $i++;
        endwhile;
      endif;
?>

</div><!-- /front-loop-cont -->

</div><!-- /wrap -->
</div><!-- popular_post_content -->

<div id="recent_post_content" class="front-loop">

<h2><i class="fa fa-clock-o"></i> 最近の投稿</h2>
<div class="wrap">
  <div class="front-loop-cont">
<?php
      $i = 1;
      wp_reset_query();

        $args=array(
            'meta_query'=>
            array(
              array(  'key'=>'bzb_show_toppage_flag',
                         'compare' => 'NOT EXISTS'
              ),
              array(  'key'=>'bzb_show_toppage_flag',
                        'value'=>'none',
                        'compare'=>'!='
              ),
             'relation'=>'OR'
          ),
            'showposts'=>5,
            'order'=>'DESC'
          );

      query_posts($args);
      
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();

        $cf = get_post_meta($post->ID);
        $recent_class = 'popular_post_box recent-'.$i;
?>

  <article id="post-<?php echo the_ID(); ?>" <?php post_class($recent_class); ?>>
      <a href="<?php the_permalink(); ?>" class="wrap-a"><?php if( get_the_post_thumbnail() ) { ?>
        <div class="post-thumbnail">
          <?php the_post_thumbnail(array('300','158')); ?>
        </div>
        <?php } else{ ?>
          <img src="<?php echo get_template_directory_uri(); ?>/lib/images/noimage.jpg" alt="noimage" width="300" height="158" />
        <?php } // get_the_post_thumbnail ?>
            <p class="p_category"><?php $cat = get_the_category(); $cat = $cat[0]; {
          echo $cat->cat_name;
        } ?></p>
            <h3><?php the_title(); ?></h3>
            <p class="p_date"><span class="date-y"><?php the_time('Y'); ?></span><span class="date-mj"><?php the_time('m/j'); ?></span></p></a>
  </article>

<?php
        $i++;
        endwhile;
      endif;
?>

</div><!-- /front-root-cont -->

</div><!-- /wrap -->
</div><!-- /recent_post_content -->

以下のソースの真上にコピペします。

<!-- 会社概要 -->
<div id="front-company" class="front-main-cont">

CSSファイルの修正

「人気のある記事」と「最近の投稿」を移動しました。

ちょっと隙間が空いてしまい、デザインが崩れちゃってます。
そこでstyle.cssも修正します。

style.css

body.home #content {
    padding-top: 0;
}

まだ修正は続きます。

今度は、「人気のある記事」がくっついちゃったので、隙間を空けることにします。
style.css

body.home #popular_post_content {
    padding-top: 40px;
}

完成です。

まとめ

ソースも綺麗なので、コンテンツの入れ替え作業はとても楽でした！
コーポレートサイトとして使用するなら、ブログの新着記事は下の方が分かりやすいサイトになると思っています。