先日からWordPressテーマ『AFFINGER4 pro』をブログに導入してみている次第です。
おおまかなデザインは以前のものから変えたくなかったので、テーマを導入しデザインを前のものに合わせることにしました。ベーシックなところは同じ製作者からリリースされているSTINGER（ボクはSTINGER PLUSを使ってました）とほぼ同じなのでカスタマイズもだいたい同じように行えるので、手順のおさらいがてら、このブログで使用しているカスタマイズを備忘録にしておこうと思います。
今回は「 関連記事一覧 」について。
通常はリスト表示される「関連記事一覧」をグリッド表示に切り替える方法です。ちなみに以前、使っていたテーマ「STINGER」向けに同じカスタマイズの記事を書いたことがあります。
関連記事一覧 とは
AFFINGERやSTINGERのテーマに標準搭載されている機能のひとつに「関連記事一覧」ていうのがあります。記事下に「関連記事」として同じカテゴリーの記事を羅列してアクセス誘導してくれる機能です。
※画像は AFFINGER 公式サンプルサイトより
通常は上記画像のようにリスト形式で表示されるのですが、設置位置が記事下ということもあって、アクセスしてきた回覧者にリストの下の方までスクロールして観てもらうのはなかなか難しいかもしれません。
そこでリスト表示をグリット表示に変更して、画面に収まる記事数を増やし関連記事のアピールを図ってみようと思います。
グリット表示に変更する
子テーマを準備
まずは子テーマの準備。
AFFINGER4では子テーマファイルが標準で同梱されていますので、themeフォルダにこれをアップし、WordPressメニューの「外観」→「テーマ」からこの子テーマを有効にしておきます。
関連記事一覧の設定
WordPressメニューの「AFFINGER 管理」から「関連記事一覧」の項目を設定します。
関連記事の見出しタイトル名の設定と表示する記事件数の設定ができます。ボクの例ではタイトルを「おすすめ記事 を読む。」に、件数は8にしています。後述するグリット表示のサイズを変更すれば件数は何個でも構いませんが、この記事のコードを使い回す場合は４の倍数に設定しておくとよいでしょう。
編集ファイルをコピペ
つぎに親テーマから編集したい部分のphpをコピペしてきます。親テーマのフォルダからもってきてもいいし、FTPで複製＆移動してもいいです。
ここでは投稿記事ページでの表示をいじりたいので「kanren-thumbnail-on」をコピペします。
ファイルを編集
小テーマに上記ファイルを置いたら、編集します。外部エディターを使ってもいいですし、「外観」→「テーマの編集」から編集してもOK。
$st_query = new WP_Query( $args ); ?>
<?php
if ( $st_query->have_posts() ): ?>
<?php
while ( $st_query->have_posts() ) : $st_query->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>
<h5><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h5>
<div class="smanone2">
<?php the_excerpt(); //抜粋文 ?>
</div>
</dd>
</dl>
<?php endwhile; ?>
<?php else: ?>
<p>関連記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
元ファイルの19行目以降を書き換えます。
上記を下記に置き換え。
$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>
リスト表示を横並びに表示しアイキャッチ画像の上にオーバーレイでタイトルをのっけています。
CSSで微調整
sytle.css
子テーマフォルダ内のstyle.cssに加筆します。
下記を丸々コピペでもいいですし、自サイトのデザインに合わせてイジってもOK。
/* 関連記事グリッド表示 スマホ */
aside .kanren { padding-top: 0px;}
.random{padding:0px;margin:0px;}
.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;}
さらにスマホやタブレットなどのサイズに合わせるために上記のスタイルのうしろに下記を記述。
@media only screen and (min-width: 300px) and (max-width:399px){
/* 関連記事グリッド表示 スマホ */
.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;width:130px;}
.random li img{width:140px;height:auto;border:0px;}
}
@media only screen and (min-width: 400px) and (max-width:499px){
/* 関連記事グリッド表示 スマホ */
.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;width:167px;}
.random li img{width:187px;height:auto;border:0px;}
}
@media only screen and (min-width: 600px) {
/* 関連記事グリッド表示 */
.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;width:160px;}
.random li img{width:170px;height:auto;border:0px;}
}
@media only screen and (max-width: 960x) {
/* 関連記事グリッド表示 */
.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;width:160px;}
.random li img{width:170px;height:auto;border:0px;}
}
@media print, screen and (min-width: 960px) {
/* 関連記事グリッド表示 */
.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;width:145px;}
.random li img{width:155px;height:auto;border:0px;}
}
※このモバイル端末に対してのサイズ調整は正直ちょっと甘いので、スペースやサイズなどが気になる場合は自分ですこし調整してみてください。
【補足】スマホでの表示件数を変える
前項で基本的には完成です。以下は必要な人のための補足とお考え下さい。
PCやタブレットで表示する際は横幅が確保されているので、1行4件で表示。スマホでは2件で折り返し倍行で表示されるようになっています。
ただこの場合、表示件数を8件にしているためスマホで表示すると縦に4行ならんで、ちょっと範囲をとりすぎている感じがするためスマホで表示された時は件数を半分の4件に減らすようにします。
kanren-thumbnail-on.php
さきほど編集した「kanren-thumbnail-on.php」を再度開き、以下の12〜18行目を書き換えます。
endforeach; $args = array( 'post__not_in' => array( $post->ID ), 'posts_per_page' => $kanrenpost_no, 'category__in' => $category_ID, 'orderby' => 'rand', );
上記を下記に置き換えます。
endforeach;
if (is_mobile()){ //モバイルでの関連記事数
$args = array(
'post__not_in' => array( $post->ID ),
'posts_per_page' => 4,
'category__in' => $category_ID,
'orderby' => 'rand',
);
}else{
$args = array(
'post__not_in' => array( $post->ID ),
'posts_per_page' => $kanrenpost_no,
'category__in' => $category_ID,
'orderby' => 'rand',
);
}
この置き換えでは、スマホからの回覧を判別する「is_mobile」関数を利用して、スマホからのアクセス時には表示件数を4件に変更しています。
「is_mobile」関数はWordPressには標準では搭載されていないため、子テーマフォルダ内の「functions.php」にも加筆します。
functions.php
//スマホ・ケータイ判別
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
これでスマホからのアクセスだと2列2行表示に変更されます。
[myphp1 file=”series_affinger”]
