Stinger8

【WordPress】Stinger8でトップページ記事一覧のアイキャッチやカテゴリー等をカスタマイズ!

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

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

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

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

完成はこんな感じです。

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

クラス名を追加する!

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

<?php
/**
 * トップやアーカイブ一覧
 */
?>
<div class="kanren">
	<?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: // サムネイルを持っていないときの処理 ?>
							<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>
				<p class="kanren-t"><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></p>

				<div class="blog_info">
					<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>
				<div class="smanone2">
					<?php the_excerpt(); //抜粋文 ?>
				</div>
			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>
<div class="kanren">

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

<div class="kanren kanren-02">

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

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

<?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 .clearfix dd .kanren-t a{
     font-size: 21px;
}

抜粋文を消す!

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

抜粋文を消す場合は、
以下の様にコメントアウトするか、この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’ ); //カテゴリー ?>
の下あたりに貼り付けます。

これで完成です。

まとめ

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

stinger8とstinger plus2で少しやり方が違うので、
お気を付けください。

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

Stinger8のカスタマイズ記事まとめはこちら!↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、

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

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

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

コメント

  1. いっちゃん より:

    こんにちは!

    いつも参考にしながらサイト作成を行っています!
    ど素人でお恥ずかしい質問なんですが、「itiran.php」?
    はどこで編集できますか?

    教えていただけると助かります。

    宜しくお願い致します。

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

      いっちゃんさん

      itiran.phpですが、
      親テーマからFTPソフトなどを使用しitiran.phpのファイルを子テーマにコピーした状態で、
      WordPressの管理画面にある【外観>テーマエディタ】から編集することができます。

      ちなみにFTPソフトを使用すれば、直接編集することができますよ~