賢威7はテーマに関連記事を表示させる機能はついていますが、カテゴリーかタグにチェックを入れるか、URLを指定しないと表示されません。
けれど先日テーマを編集すれば、デフォルトで関連記事を表示させる設定ができることがわかりました。
これでチェックを忘れた場合や、途中から賢威７にテーマを変更しても関連記事を表示させることができます。
せっかくなので関連記事の表示を変更してみることにしました。
賢威７の関連記事の設定でやりたいこと
賢威７で表示される関連記事はサムネイル画像+記事タイトルが縦に表示されます。
「記事の抜粋を表示」させるのもいいと思いましたが、表示形式を変えて横に2列表示させることにしました。
けれど賢威７の関連記事で表示される記事数はデフォルトでは5記事。
横並び表示させる場合は記事数が偶数の方がいいと思います。
そこで今回は関連記事に表示される記事数を変えて、横2列に表示させることにしました。
賢威７の関連記事で表示される記事数を変更
この記事では賢威7のver7.0.0.7での関連記事の表示件数の変更方法です。
ver7.1での変更方法は以下の記事に書いています。
横2列表示への変更はCSSのカスタマイズなので共通です。
関連記事の表示数を変更するにはfunctions.phpを編集します。
//---------------------------------------------------------------------------
// 関連記事を表示する関数 ver.7.0.7 更新
//---------------------------------------------------------------------------
if (!function_exists('relation_keni')) {
function relation_keni() {
echo get_relation_keni();
}
親テーマを編集すると、もし何か起こった場合に戻せなくなると大変なので、「関連記事を表示する関数」に関するコードを全て子テーマのfunctions.phpにコピーします。
if (count($relation) < 5)
このコードの5の部分を表示させたい記事数に変更します。
このコードは複数あるので全て変更します。
'posts_per_page' => 5,'
ここも同様に全て任意の記事数に変更します。
'showposts' => 5,
このコードは1か所しかないはずですが、上記２つのコードと同じく任意の記事数の数字に変更します。
これで変更した数字の記事数が関連記事に表示されます。
かなり大雑把ですが、もし何か不具合があっても子テーマで編集しているので安心です（笑）。
賢威７で関連記事を横2列に表示させる
記事数変更と異なり関連記事を横2列に表示させる方法は、参考にしたサイトがあるので大雑把ではありません（笑）。
参考サイト：会社を辞めてブログで起業したい２０、３０代のためのブログ「賢威7の関連記事を2列表示にする方法」
まずは子テーマにある賢威7の表示を整えるbace.cssに、以下のコードを書き込みます。
/*-------------------------------------
関連記事を2列表示
-------------------------------------*/
.related-articles-thumbs01 li {
width: 48%;
display: inline-block;
vertical-align: top;
font-size: 1pm;
}
フォントサイズは「1pm」にしましたが、表示を見て変更します。
すると、関連記事が横2列に表示されています。
けれどこのままだと、スマホ表示では記事タイトルが縦長に表示されてしまうのでスマホ・タブレットでは横2列表示しないように設定します。
スマホ表示を整える
スマホ表示を整えるには、レスポンシブウェブデザインの表示を整える子テーマの「rwd.css」に以下のコードを追加します
/*-------------------------------------
width950px以下で、関連記事を2列表示を解除
-------------------------------------*/
@media only screen and (max-width : 950px){
.related-articles-thumbs01 li {
width: auto;
}
}
これで画面幅が95px以下の端末では横2列で表示されません。
スマホで表示確認したところ縦1列にきちんと表示されています。
まとめ
テーマをいじると常に何かしら問題が生じるので時間がかかるかもしれないと思い、関連記事の表示はそのままでいました。
今回は久しぶりにすんなりいったので、もっと早く表示を変えていればよかったと思います。
ver 7.1.0.3では関連記事の並び順の変更と抜粋記事を表示できるようになりました。
今日のたつじんへの一歩
たつじんｗ 縦1列と横2列表示のどちらがユーザーに優しいのかはわかりませんが、ブログを書き続けるには自己満足も必要かもしれません（笑）。
