スティンガー5(stinger5) カスタマイズ第9回目「サイドバー」新着入荷日(記事のエントリー日)の表示

stinger5エントリー日を入れる
今回はサイドバーのカスタマイズの追加として、新着情報部分に、最初に記事を書いたエントリー日を表示させる方法についてです。
上記画像の矢印部分に、記事を書いたエントリー日を表示させたいと思います。

追加するコード

stinger5 カスタマイズ
追加するコードをいれる部分はテーマの編集から「 newpost.php」を選択します。
上記画像のようにコードを追加して変更します。

タイトルの文字の大きさも、少し大きすぎてバランスが悪かったので、一緒にタグで囲んで、同じ大きさにしてしまいました。
多分あとで変更しますが・・・

「spanとp」」の終了位置を「time」の後に変更すれば、タイトル文字の大きさはそのままにすることもできます。

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>

最後に変更後の画像

stinger5サイドバーカスタマイズ
記事をエントリーした日時が入りました。

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

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

stinger5カスタマイズ、今回までの記事

[stinger5]スティンガー5をビジネステンプレートみたいに、カスタマイズする方法 第1回「企業ロゴの追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第3回「グローバルナビの変更」

スティンガー5 カスタマイズ 第4回「グローバルナビの下に「Meta Slider」を使用して、スライド画像の挿入」

スティンガー5 カスタマイズ 第5回「トップページ 新着情報表示の変更」

スティンガー5 カスタマイズ第6回目「サイドバーの変更」企業のホームページみたいに!!

スティンガー5(stinger5) カスタマイズ第7回目「サイドバーの変更」要約文の省略方法

スティンガー5(stinger5) カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です