WP：記事中に挿入する関連記事のレイアウト

記事本文中の任意の場所に関連記事を目立つように表示させるレイアウトのソース例。
 

目的

• ユーザーの疑問を即時解決する
• 滞在時間を長くする

記事本文中の任意の場所に関連記事を目立つように表示させることで、ユーザー（閲覧者）の疑問を即時解決できるようにする。

結果、ユーザーの滞在時間が増えて、お互いWin-Winの関係になることを目標とする。

注意事項

テーマファイルにソースを追加します。

失敗するとサイトが表示されなくなる可能性があるので、失敗してもすぐ戻せるように、必ずファイルのバックアップを取っておきましょう。

バックアップするファイル

CSS編集に追加する場合はバックアップの必要ありません。

• style.php

この記事の環境

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

• WordPress 4.8.2-ja以上
• STINGER 5、STINGER 7、AFFINGER
• Google Chrom

表示するHTML

dd/dtを横並びにして、画像・タイトル・抜粋を表示させて関連記事の内容を解りやすくレイアウトしました。

▼ 表示例

▼ HTML

<div class="kiji-kanren">
<dl class="clearfix">
<dt><a href="リンク先URL"><img src="画像URL" alt="画像タイトル" /></a></dt>
<dd><a href="リンク先URL">タイトル</a><br /><span style="font-size:10px;">抜粋文</span></dd>
</dl>
</div>

STINGERやAFFINGERは、別のCSSが干渉するので必要な部分はHTMLに記述しています。

追加するソース

「style.php」または「CSS編集」に下記のソースをコピペします。

/* 記事中関連記事 */
.kiji-kanren dl {
	overflow:auto;
}
.kiji-kanren dt {
	float: left ;
	clear: left;
	padding: 10px;
	width: 150px ; /* 画像の横幅 */
}
.kiji-kanren dd {
	background-color: #f9f9f9; /* ボックスの背景色 */
	padding: 10px 10px 10px 170px;
	border-top: 1px dotted #999;
	border-left: 1px dotted #999;
	border-right: 1px dotted #999;
	border-bottom: 1px dotted #999;
	min-height: 120px; /* ボックスの最小高さ */
	height:auto !important;
        margin-bottom:10px;
}
.kiji-kanren a {
	color: #333;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}

抜粋文が少なくてもボックスのレイアウトが崩れないように、最小高さを指定しています。