WordPress STINGER7

STINGER7:記事一覧をカード型にカスタマイズ【その2】

当サイトはアフィリエイト広告を利用しています。

eye_stinger7

STINGER7の記事一覧カスタマイズ【その2】でございます!
前回はとりあえずカード型にするところまでやりましたね↓

STINGER7:記事一覧をカード型にカスタマイズ【その1】
...

今回はタイル型に並べるつもりだったんですけど、その前にもう少し細かいところまでいじってみたいと思います!
完成するとこんな感じです↓

20160505e

前回の記事で「CSSでカード型に装飾」のところまでやっていただくと、今回の内容もスムーズに導入できます!
では早速やっていきましょう!

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

サムネイルを長方形にする

以前に書いた記事でも紹介していますが、まずはサムネイルを正方形から長方形に変えてみましょう。

STINGER7/Plus:トップページ記事一覧のサムネイル画像のサイズを変える方法
STINGER7で「サムネイルのサイズを変更したい」というリクエストを頂いたので早速カスタマイズしたいと思います!

「 itiran-thumbnail-on.php 」を編集します。
この部分を探してください↓

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>

見つけたら、「 <?php the_post_thumbnail( ‘thumbnail‘ ); ?> 」の赤字の部分を変更して、「 <?php the_post_thumbnail( ‘medium‘ ); ?> 」と変更します。

これによって画像の上限サイズが「設定 → メディア」で設定されている「中サイズ」になりました。
変更していなければ中サイズは300×300で設定されていると思います。

次にCSSで少し大きくします↓

@media only screen and (min-width: 414px) {
.itiran-custom dt {
	width: 300px;
}
 
.itiran-custom dt img {
	width: 300px;
}
 
.itiran-custom dd {
	padding-left: 320px;
}
}

結構大きめにしてみました。スマホは除外しているので小さいままです。

スマホでは通常通りの正方形にしたい場合は、さきほどの「 itiran-thumbnail-on.php 」をこのように変えてください↓

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php if ( st_is_mobile() ): ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php endif; ?>
<?php else: // サムネイルを持っていないときの処理 ?>

ちなみにサムネイルを「medium」に変更すると、普段使用しているアイキャッチ画像の縦横の比率でそのまま縮小されて表示されるので、アイキャッチ画像のサイズがバラバラだと記事一覧の画像サイズも縦の長さがバラバラになります。
普段からアイキャッチ画像のサイズは統一しておくとキレイに表示されますよ♪

投稿日・カテゴリー・タグをカスタマイズ(パターン1)

次は投稿日やカテゴリーの部分をいじってみます。
「itiran-thumbnail-on.php」のこの部分を探してください↓

<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-tags"></i>
<?php the_category( ', ' ); ?>
<?php the_tags( '', ', ' ); ?>
</span></p>
</div>

見つけたらこのコードに書き換えてみてください↓

<div class="blog_info <?php st_hidden_class(); ?>">
<p class="itiran-time"><?php the_time( 'Y.n.d' ); ?></p>
<p>
<span class="itiran-cat"><i class="fa fa-folder" aria-hidden="true"></i> <?php the_category( ', ' ); ?></span>
<span class="itiran-tag"><i class="fa fa-tags" aria-hidden="true"></i> <?php the_tags( '', ', ' ); ?></span>
</p>
</div>

CSSでちょいと見た目を修正します↓

.itiran-time { /* 投稿日の装飾 */
	color: #999 !important;
}
.itiran-cat { /* カテゴリーとタグの間の余白 */
	margin-right: 0.5em;
}
.itiran-cat .fa-folder { /* カテゴリーアイコンの装飾 */
	color: #359E84;
}
.itiran-cat a { /* カテゴリー名の装飾 */
	color: #359E84 !important;
}
.itiran-tag .fa-tags { /* タグアイコンの装飾 */
	color: #359E84;
}
.itiran-tag a { /* タグ名の装飾 */
	color: #359E84 !important;
}

投稿日に付いていたアイコンを消して、カテゴリーとタグにはそれぞれ別のアイコンを付けてカラーも変更しました。
ここまでやるとこんな感じになります↓

20160505d

細かい変更ですけど雰囲気が少し変わりますね(^^)
ちなみに前回の記事の最後の方に書いてある「カードに影を付ける」っていうのも入っています。

投稿日・カテゴリー・タグをカスタマイズ(パターン2)

では違うパターンもやってみましょう!
今度は「itiran-thumbnail-on.php」の先ほどと同じ箇所をこのように書き換えます↓

<div class="blog_info <?php st_hidden_class(); ?>">
<p class="itiran-time"><i class="fa fa-clock-o" aria-hidden="true"></i><?php the_time( 'Y年n月j日' ); ?></p>
<p class="itiran-cat"><?php the_category( ' ' ); ?><?php the_tags( '','','' ); ?></span></p>
</div>

今度は投稿日のアイコンを復活させて「◯年◯月◯日」という表示に。
カテゴリーとタグはアイコンを消しました。
そしてCSSをこうすると↓

.itiran-time { /* 投稿日の装飾 */
	color: #999 !important;
	margin-bottom: 6px !important;;
}
.itiran-cat a { /* カテゴリー・タグの装飾 */
	background: #47BEA0;
	margin-right: 6px;
	margin-bottom: 6px;
	color: #fff !important;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
}
@media only screen and (max-width: 413px) {
.itiran-cat a { /* カテゴリー・タグの装飾(スマホ) */
	font-size: 10px;
}
}

こんな感じになります↓

20160505e

スマホだとこんな感じですね↓

20160505f

投稿日の表示の種類

パターン1とパターン2で投稿日の表示方法を変えてみましたが、他にも色々と変えることができます。
いくつか例を載せておきますね。

16/5/5(木)

<?php the_time('y/n/j(D)'); ?>

 

2016.05.05 Thu

<?php echo get_post_time('Y.m.d D'); ?>

 

2016.5.5 Thursday

<?php echo get_post_time('Y.n.j l'); ?>

 

October 5th, 2016

<?php echo get_post_time('F jS, Y'); ?>

 

Oct 5, 2016

<?php echo get_post_time('M j, Y'); ?>

 

微妙にテンプレートタグが違っていますよね!
月や曜日は「the_time」だと日本語表記、「get_post_time」を使用すると英語表記になります。

「itiran-thumbnail-on.php」の該当箇所を変更すれば好きな表示に変えられますのでお試しください(^^)

まとめ

ということで記事一覧のカスタマイズ【その2】でした!
CSSを変更して色々とお好みでカスタマイズしてみてください。

次回は一行に2つ以上の記事を並べるタイル型にします!
お楽しみに〜♪

【その3】書きました↓

STINGER7:記事一覧をカード型にカスタマイズ【その3】
...

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。
WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. よい より:

    初めまして。
    連休中にこちらのブログを見つけ、いろいろカスタマイズすることができました。
    ありがとうございます。
    次のタイル型表示の更新も楽しみに待っています♪

  2. DICEDICE より:

    よい様

    コメントありがとうございます!
    お役に立てて幸いです!
    タイル型も近いうちに更新しますね〜(^^)

  3. より:

    勉強になりました!
    タイル型表示のTipsも楽しみにしてますねー

  4. DICEDICE より:

    兎様

    コメントありがとうございます!
    タイル型の記事もアップしましたので見てみてくださいね!

  5. スペシャルミルク より:

    いつもご丁寧なアドバイスありがとうございます。

    「投稿日・カテゴリー・タグをカスタマイズ」(パターン2)でお聞きしたいのですが、こちらの記事通りに進めると投稿日時の下にカテゴリーやタグが配置されますが、デフォルトの状態のように日時の右横にカテゴリーを表示したい場合は、コードはどのようになるのかご教示いただけますでしょうか?

    どうぞ宜しくお願い致します。

    • スペシャルミルク より:

      一応、自己解決できました!
      p class を span classに変えて/pを/spanに変えたら横並びになりました!
      しかし・・・カテゴリーの文字の下に下線が引かれています。
      下線は表示したくないのですが、spanに変えたことによって下線が生成されたのでしょうか?

      • DICEDICE より:

        リンクテキストの下線でしょうかね?
        CSSで「text-decoration: none;」を指定すると消えると思いますので追加してみてください。
        この記事のコードですと、
        .itiran-cat a {
        text-decoration: none;
        }
        で指定すれば大丈夫だと思います。

  6. スペシャルミルク より:

    DICE様

    いつもお世話になっています。記事一覧の編集でお聞きしたいのですが、投稿日時とカテゴリーのみ表示して、タグは記事一覧には表示させない場合、どのような記述をしてあげればよいのでしょうか?

    あとDICE様はバックアップどのようにされていますか?ボクは先ほど「All-in-One WP Migration」というプラグインを使ってみたのですが、すごい便利です!
    エクスポートは容量無制限でインポートは512MBまでは無料、それ以上をインポートする場合は6000円ほどで無制限化できるようです。

    バックアップに関しての記事はまだないようなので、初心者に分かりやすいDICE様のご説明で記事化されたら素晴らしいかなと思います!

    初心者にはFTPを使ったバックアップや引越し作業はハードル高めなので、こういうプラグインはありがたいです。

    「Duplicator」というプラグインも無料で便利なのですが、容量が大きい場合は失敗することもあるのと、引越し作業する場合にindex.phpをいじらなきゃいけない場合がありました。

    • DICEDICE より:

      またまた遅くなってすいません(^^;)
      タグの非表示は一覧表示用のテーマファイル(itiran-thumbnail-on.php など)にある「<?php the_tags( '','','' ); ?>」の部分を削除すれば消えますよ。

      このブログはまだバックアップしてないですが、他のサイトでは「BackWPup」とか使っています。初心者さん用に何か良いのがないか探してみますね!

      • スペシャルミルク より:

        DICE様、ありがとうございます!
        タグ消しやってみます!

        phpやcssから記述を消して無効にしたり、非表示にするのが普通だと思うのですが、もし削除せずに無効にする記述のようなものがあったらお時間のあるときに教えてください。
        無効にする記述で挟まれた記述は削除したのと同じようになるような。。。
        削除してしまうと元に戻したくなるときに面倒かなと、今ふと思ったのでw

        BackWPupの使い方見てみたら、慣れていない人にはちょっと難しそうですねー。
        バックアップ記事楽しみにしています!

        • DICEDICE より:

          「<!– –>」これで囲むとタグは記述したまま無効にできますよ。
          「<!– <?php the_tags( '','','' ); ?> –>」こんな感じですね。

タイトルとURLをコピーしました