ルクセリタスの関連記事の表示件数と抜粋を増やす方法と軽い編集

今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）の関連記事の表示件数を増やす簡単なカスタマイズとCSSを使って軽い編集をする方法を紹介します。

※今回の方法はphpを弄ります。余計なことをしなければ基本的に大丈夫ですが、何かの拍子で指示と違う場所を削除してしまったり、要素を追加するとエラーのなる場合があります。作業は慎重に行い、必ずバックアップをとる様にして下さい。また何かエラーが起こった場合、質問は受け付けますが基本自己責任でお願いいたします。

関連記事の表示件数を増やす方法（phpファイル）

関連記事の呼び込みを制御しているphpファイルは、WordPressの左側管理ツールの外観→テーマエディター→「編集するテーマを選択」をLuxeritasに変更→「related.php」にあります。（下記の画像の部分です。）

related.php内の58行目付近にある下記の記述を見つけます。（開発者が場所を変える場合もあるのでその場合は自力で探して下さい）

$args = array(
	'post__not_in' => array( $post->ID ),
	'posts_per_page'=> 5,
	'post__in' => $post_in,
	'post__not_in' => $sticky_posts,
	'orderby' => 'post__in',
);

この部分の「‘posts_per_page’=> 5,」の「5」が表示する記事数になってます。ここの数値を変更すると関連記事の表示件数がその数値分に変更されます。

関連記事の抜粋文の文字数を変更する方法

関連記事の抜粋文の文字数を変更する方法は、先ほどのrelated.php内の116行目辺りにある下記の記述を見つけます。

<div class="excerpt">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php echo apply_filters( 'thk_excerpt_no_break', 40 ); ?></p>
</div>

ここの「( ‘thk_excerpt_no_break’, 40 )」の「40」が抜粋文の文字数です。この数値を変更することで抜粋文の文字数を変更することが出来ます。

下記が、関連記事表示件数と抜粋文の文字数を変更したbefore（デフォルト）/after（編集後）です。

関連記事のCSSクラス（id）

続きまして、関連記事のCSSクラス（id）を紹介。関連記事の見た目を変える方法を紹介します。

関連記事のCSSクラス（id）は「#related」です。関連記事の一つ一つの投稿部分のクラスが「.toc」です。
なので関連記事の表示を編集したい場合は「#related .toc」に対してスタイルを付けていきます。

例えば、リンクの色とホバー時の色を変更したい場合は下記の様に「#related .toc a」に対して任意の色を指定します。

/* 関連記事のリンク色・ホバー色変更 */
#related .toc a {
 color: #4e92df;
}
#related .toc a:hover {
 color: #dc143c
}

他にも。related.phpから抜粋文を0にしてから下記のCSSを記述すれば、横並びのボックスデザインになります。（文字の調整はもう少し必要かも…）

/*関連記事*/
#related {
padding: 0;
display: flex; 
justify-content: space-around;
}
#related .toc {
padding: 10px 10px;
border: solid 1px #ddd;
margin: 10px 10px 0px 0px;
box-shadow: 3px 3px 4px #777777;
}
#related .term img {
width: 100px;
height: 50px;
}
@media (max-width: 575px) {
#related {
flex-direction: column;
}
}
@media (max-width: 575px) {
#related .term img {
width: 50px;
height: 50px;
}
}

まとめ

以上が「ルクセリタスの関連記事の表示件数と抜粋を増やす方法と軽い編集」でした。

冒頭部分でも書きましたが、phpを弄る際は細心の注意を測って下さい。少しのミスで画面が真っ白になります。
また余談ですが、related.phpの仕組みを理解すれば、ここにアドセンス広告なども入れることが出来ます。