2019/05/0717 Shares

Stingerサイドバー新着記事部分に日付を追加して見やすく表示しよう

sitinger3抜粋削除と日付追加

まだ全然手をつけていませんが、Stinger3のサイドバーでカスタマイズしたところをご紹介します。

今回は新着情報(NEW ENTRY)部分のカスタマイズ。抜粋を削除し、かわりに日付を追加しました。

抜粋を削除する方法

変更前のスクリーンショットを撮り忘れたので、公式サイトのデモページからお借りします。

sitinger3サイドバー

ここで表示されている抜粋部分は、先頭から35文字を抜き出したものです。ショートコードは表示しないような工夫もされていますが、「こんにちは、エローラです」なんて表示してもあまり意味がなさそうなので削除しました。

記事の最初は重要なつかみ部分ですが、抜粋を意識して書くより魅力的なタイトルをつけたほうが効果的です。

sidebar.phpの変更部分

「NEW ENTRY」を表示している箇所は、以下の部分です。

STINGERデフォルト

<!--最近のエントリ-->
<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>
<!--/最近のエントリ-->

抜粋部分を表示しているのが、以下の部分。

<p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p>

ここをばっさり削除すればOK。

日付を追加する方法

せっかくの「NEW ENTRY」なので日付を表示しておきましょう。きちんと更新されているブログは、読者に安心感を与えます。僕は何となくさびしかったので追加しただけ…

追加した部分とCSSの設定

追加した一文がこちら

<span class="date"><?php echo get_post_time('Y.m.d D'); ?></span>

僕はタイトルの上に設置しました。

<dd><span class="date"><?php echo get_post_time('Y.m.d D'); ?></span><br /><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</dd>

cssで色とサイズを指定。

.date {
	color: #aaa;
	text-align: left;
	font-size: 12px;
}

もう少しスッキリさせたいなと考え中です。

その他のサイドバーカスタマイズ

この他、現時点で変更したのは以下の部分です。

  • 背景色を白に変更
  • ウィジェットから余分なパーツを削除
  • 見出しにアンダーラインを追加
  • FacebookページLikeBoxを設置
  • Feedlyボタンを設置

もう少し記事が増えたら、検索部分の変更と人気記事を表示する予定です。

追記
Stingerからオリジナルテーマへ変更しました。検索はGoogleカスタム検索に、人気記事はサイドバートップに表示しています。

»Stingerをやめた1つの理由とちょっと後悔していること

それでは、また。