【WordPress】Stinger Plus2で記事一覧のアイキャッチ画像を大きくしたり、トップページのカスタマイズ!

stinger plus2

今回は久しぶりにStinger Plus2の記事です。
基本的にはコピペでとりあえずできるので、
お手軽にお試しください。
細かいところはご自分を修正をお願いいたします。

なお、こちらはStinger8の記事です
Stinger Plus2とは少々作業が異なりますので、
Stinger Plus2の場合は、こちらをご覧ください。
【WordPress】Stinger8でトップページ記事一覧のアイキャッチやカテゴリー等をカスタマイズ!

カスタマイズをするので、子テーマ推奨です。

ちなみにデフォルトの状態はこんな感じです。

完成はこんな感じです。

スポンサーリンク

クラス名を追加する!

トップページの記事一覧を編集する場合はまず、
itiran-thumbnail-on.phpを編集します。

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?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( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
							<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
						<?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 } ?>
					<?php endif; ?>
				</a></dt>
			<dd>
				<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>

				<div class="blog_info <?php st_hidden_class(); ?>">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
          </span></p>
				</div>

				<?php if( !st_is_mobile() && trim( $GLOBALS['stdata202'] ) === '' )://モバイル以外の場合のみ表示 ?>
					<div class="smanone">
						<?php the_excerpt(); //抜粋文 ?>
					</div>
				<?php endif; ?>

			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">

1行目にある上記のコードを見つけ、
下記の通りkanren-02というクラス名を追加します。

<div class="kanren kanren-02 <?php st_marugazou_class(); //サムネイルを丸くする ?>">

アイキャッチ画像を大きくする!

アイキャッチ画像を大きくする場合は、
同様に itiran-thumbnail-on.phpのファイルの6行目にある
以下のコードを探します。

<?php the_post_thumbnail( 'thumbnail' ); ?>

このコードにあるの‘thumbnail’‘medium’に書き換えます。

style.phpを編集する!

下記のコードをstyle.cssに追記します。

.kanren-02 dt{
	width:270px;
}
.kanren-02 dt img{
	width:270px;
}

.kanren-02 dd{
	padding-left:315px;
}

これで大きくなりました。

スマホ用のコード

そのままの設定ですと、
スマホでの表示の場合は、崩れてしまうので、
スマホ用にもstyle.cssに以下のコードをに追記します。

@media screen and (max-width: 480px) {

.kanren-02 dt{
        float:none;
        width:100%;
        margin:0 auto;
}

.kanren-02 dt img{
        width:100%;
}

.kanren-02 dd{
        margin-top:10px;
        padding-left:0px;
}

画像の大きさは好みだと思いますので、
好きな大きさに変更して下さい。

新着記事のタイトルにおける文字サイズを変更する

記事のタイトル部分の文字サイズを変更する場合は、
以下のコードをstyle.cssに追記し、font-sizeを調整してください。

.kanren h3 a{
     font-size: 23px;
}

抜粋文を消す!

ごちゃごちゃしてしまうので、
抜粋文を消してしまいます。

抜粋文を消す場合は、
以下の様にコメントアウトするか、この1行を削除してしまいましょう。

<!--<?php the_excerpt(); //抜粋文 ?>-->

これで抜粋文がなくなりました。

タグを非表示にして、カテゴリーを装飾する

タグとカテゴリーは個人的には、かぶる傾向にあるので、
どちらかでいいと思っています。
そのため、今回はタグを非表示にします。

タグを非表示にする

タグを非表示にする場合は、
itiran-thumbnail-on.phpファイルの26行目にある以下のコードをコメントアウトするか、消しましょう。

<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>

タグを装飾する

記事一覧のタグを装飾する場合は、
以下のコードをstyle.phpに追記します。

.pcone a {
	background: #38b48b;
	margin-right: 6px;
	margin-bottom: 6px;
	color: #fff !important;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
}

こんな感じになります。

こまかい補足

細かいところですが、少しだけ補足があります。

カテゴリー間の【,】を消去する

上記のカスタマイズをしても、カテゴリーとカテゴリーの間に
【,】が入っています。
これをなくす場合は、
itiran-thumbnail-on.phpの25行目にある以下のコードを見つけてください。

<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>

上記のコードにある(‘,’)の,を半角スペースに変更してください。

<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ' ' ) ?><br/>

これで完了です。

投稿日とカテゴリーを2段にする

投稿日とカテゴリーを2段にするためには、
itiran-thumbnail-on.phpの23行目あたりにある
<?php the_time( ‘Y/m/d’ ); ?>というコードを見つけ、
その後ろに、<br/>を追記してください。

<?php the_time( 'Y/m/d' ); ?><br/>

投稿日を一番上にする

上記と同様にitiran-thumbnail-on.phpの22行目あたりにある、
下記のコードを探します。

<i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>

こちらのコードを切りとり、
<?php get_template_part( ‘st-single-category’ ); //カテゴリー ?>
の下あたりに貼り付けます。

最終的にitiran-thumbnail-on.phpのコードは以下の様になっています。

<div class="kanren kanren-02 <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?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( 'medium' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
							<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
						<?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 } ?>
					<?php endif; ?>
				</a></dt>
			<dd>
				<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
						
						 <i class="fa fa-clock-o"></i>
                         <?php the_time( 'Y/m/d' ); ?>
						
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>

				<div class="blog_info <?php st_hidden_class(); ?>">
					<p>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ' ' ) ?><br/>
							<!--<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ',' ); ?>-->
          </span></p>
				</div>

				<?php if( !st_is_mobile() && trim( $GLOBALS['stdata202'] ) === '' )://モバイル以外の場合のみ表示 ?>
					<div class="smanone">
						<!--<?php the_excerpt(); //抜粋文 ?>-->
					</div>
				<?php endif; ?>

			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

まとめ

いかがだったでしょうか?
ざっくりではありますが、
トップページの記事一覧のカスタマイズをご紹介いたしました。

そろそろトップぺージのデザインが飽きてきたので、
新たにカスタマイズをすることを検討中です。

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

コメント

  1. ぷるぷる様

    初めまして!
    当方、最近はてなからワードプレスに引っ越しました。
    STINGER Plus2を使っているのですが、こちらのサイトには大変お世話になっております。
    そこで質問ですが、この記事の記事一覧のタグの装飾についてお聞きしたいのですが、
    私のブログの記事一覧にはそもそもカテゴリーの表記がありません。というより、どこかを
    いじれば表記できるのでしょうが、どうしても判らずに困っております。
    それが表記できれば、こちらのカスタマイズも活かせるかと思うのです。
    どのようにすれば記事一覧にカテゴリーを表記することが出来るでしょうか?

    • ぷるぷる ぷるぷる より:

      免疫大魔王 さん

      コメントありがとうございます。
      また、返信が遅くなり申し訳ありません。

      カテゴリの表記がないとのことですが、解決しましたでしょうか?
      ちなみにSTINGER PLUS2でもカテゴリーの表記がデフォルトでされているとは思うのですが・・・
      もしかすると作成した記事でカテゴリーを設定していない状態ではないでしょうか?