第13回目 スティンガー5カスタマイズ サイドバーの新着記事を特定のカテゴリのみ表示

今回はスティンガー5の企業のホームページにカスタマイズ第13回目、サイドバーの新着記事部分を特定のカテゴリのみだけ表示させる方法です。

デフォルトの設定だと、追加した記事はカテゴリ関係なく、5件表示させる設定になっています。
これを特定のカテゴリの最近投稿した記事10件表示させるようにしたいと思います。

サイドバー(newpost.php)のコード

サイドバー(newpost.php)のコードを変更するには、ワードプレスのダッシュボードから「外観」→「エディター」を開き(newpost.php)のファイルを選択します。

そして、下記のコードが今回まででカスタマイズして作成したコードです。
特定カテゴリだけ表示させるようにしたいので、さらにコードを変更します。

<div id="kanren">
  <?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 class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?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> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>" >


<p> <span class="kdate"><i class="fa fa-calendar"></i>入荷日&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>"> 
               <?php the_time('Y/m/d') ;?> 
                </time><br />

        <?php the_title(); ?>
        </a></h5>

 </span> </p>


 <!--     <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>新しい記事はありません</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>


変更後のコード

<div id="kanren">
<?php query_posts('cat=4&posts_per_page=10&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>



  
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?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> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>" >


<p> <span class="kdate"><i class="fa fa-calendar"></i>入荷日&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>"> 
               <?php the_time('Y/m/d') ;?> 
                </time><br />

        <?php the_title(); ?>
        </a></h5>

 </span> </p>


 <!--     <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>新しい記事はありません</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>
 

主な変更点としては、上記コードの2行目と3行目です。

2行目のcat=の後の4がカテゴリIDをさしています。
page=の後の10が表示させたい記事数をさしています。

自分で作成した、カテゴリーのIDを調べるには下記の記事を参考にしていただければわかると思います。
ワードプレス(WordPress)カテゴリIDを調べる方法

コード変更後の画像

第13回目 スティンガー5カスタマイズ サイドバーの新着記事を特定のカテゴリのみ表示
「newpost.php」を変更した事によりこんな感じになりました。
カテゴリID4の記事を10件表示させています。

スティンガー5のカスタマイズまとめ記事はこちら

ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

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