アフィリエイト Wordpress Affinger4

【AFFINGER4】関連記事をグリッド表示でカッコ良く

投稿日:

どうもみなさんこんにちは

当サイトのテーマを有料の超優良テーマAFFINGER4に変えたのですが、いつものように関連記事をプラグインYARPPで、より関連性の高い関連記事を表示しようかと思っていました。

しかし、ENJI様は大変素晴らしく、AFFINGER4をどんどんバージョンアップをしてくれて(しかも無料!)どんどん進化していくので、AFFINGER4本体のソースファイルを触りたくなくなってしまいました。

というのも本体のファイルを触らなければAFFINGER4がバージョンアップされても、本体ファイルを差し替えるだけで良いので、今後のバージョンアップにも対応がしやすいからです。

では関連記事の表示をAFFINGER4のデフォルトにしようかどうしようかと思っていたのですが、サイトの回遊性を高める上でも関連記事の表示は大事ですので、子テーマだけを触ってカッコ良くグリッド表示できないかと挑戦してみました。

スポンサーリンク

テーマファイルのコピー

kanren-thumbnail-on.phpというファイルを親テーマから子テーマのフォルダにコピーします。
※今後、AFFINGER4のバージョンアップでkanren-thumbnail-on.phpが更新されたら、子テーマの方も更新する必要があります。

私はFFFTPを使ってダウンロードして子テーマフォルダにアップロードすることでコピーを作成しました。

ちなみに、関連記事にサムネイル画像を表示しない方は、kanren-thumbnail-off.phpというファイルを使うことになるのですが、そもそもサムネイル画像を表示しない方はグリッド表示する意味も無いので割愛します。

ファイルの編集

ダッシュボードの「外観」-「テーマ編集」から子テーマのkanren-thumbnail-on.phpを編集します。

19行目以降の

$st_query = new WP_Query( $args ); ?>

から下を全て

$st_query = new WP_Query( $args ); ?>
<div class="random">
<?php
if ( $st_query->have_posts() ): ?>
<?php
while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
<ul class="clearfix">
<li>
<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; ?>
<span><?php the_title(); ?></span>
</a>
</li>
</ul>
<?php endwhile; ?>
<?php else: ?>
<p>関連記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>

に置き換えます。

スタイルシートの編集

同様に子テーマのスタイルシートに以下を追加します。
私は記事の下にアドセンスを2つ並べている関係で、記事エリアの横幅を1114pxにしているのでそれにも対応しました。

aside .kanren { padding-top: 0px;}
.random{padding:0px;margin:0px;text-align:center;}
.random ul{padding:0px;margin:0px;display:inline-block;}
.random li{float:left;position:relative;list-style:none;}
.random li:last-child{margin-right:0px;}
.random span{background:rgba(0,0,0,0.6);color:#fff;font-size:11px;padding:5px;position:absolute;left:0;bottom:0;line-height:normal;}
.random li img{height:auto;border:0px;}

@media only screen and (min-width: 300px) and (max-width:399px){
/* 関連記事グリッド表示 スマホ */
.random span{width:130px;}
.random li img{width:140px;}
}
@media only screen and (min-width: 400px) and (max-width:499px){
/* 関連記事グリッド表示 スマホ */
.random span{width:167px;}
.random li img{width:187px;}
}
@media only screen and (min-width: 600px) {
/* 関連記事グリッド表示 */
.random span{width:160px;}
.random li img{width:170px;}
}
@media only screen and (max-width: 960x) {
/* 関連記事グリッド表示 */
.random span{width:160px;}
.random li img{width:170px;}
}
@media print, screen and (min-width: 960px) {
/* 関連記事グリッド表示 */
.random span{width:145px;}
.random li img{width:155px;}
}
@media print, screen and (min-width: 1114px) {
/* 関連記事グリッド表示 */
.random span{width:170px;}
.random li img{width:180px;}
}

グリッド表示の完成

パソコンで見るとこんな感じです。

スマホで見るとこんな感じです。

ちなみに関連記事の表示数のおすすめは8つです。4つも試してみましたが、ちょっと寂しい。スマホだと8つは邪魔かと思いましたが、スマホサイトの場合サイドバーは下に回り込みますが、サイドバーコンテンツへのアクセスは少ない(サイドバーの設定が悪いとは言わないで)ので、8つでも問題無いかと思っています。気になった記事を見てもらって役に立つ方が嬉しいので。

AFFINGER4でのグリッド表示のまとめ

ずいぶん偉そうにグリッド表示のカスタマイズをご紹介致しましたが、こちらのサイトを参考に(というか従って)カスタマイズ致しました。ありがとうございます。

ただ、当サイトでは記事下アドセンスを横並びにしているので、その部分は参考にしてもらえたら嬉しいなぁと思います。

こういうカッコ良いカスタマイズがあると、自分の記事もカッコ良くしなければと引き締まりますね。

-アフィリエイト, Wordpress, Affinger4
-,

Copyright© 上善如水 , 2019 All Rights Reserved.