WordPress Related Posts の「Related Posts Title」部をCSSファイルからカスタマイズする

関連記事が表示される上に、カスタマイズが容易な「WordPress Related Posts」。
そのカスタマイズをCSS直イジリで行う方法が、検索しても発見出来なかったので自力で調査してみました。
今回はバージョン3.5.3での検証となります。

WordPress Related Posts インストール直後の状態

WordPress Related Posts インストール直後は、Related Posts Titleが「More from my site」になっています。
今回は「こちらの記事もどうぞ」に変更しました。
customize-wordpress-related-posts-css_02

そして実際のページを見ると、
customize-wordpress-related-posts-css_03
この様に、Hタグっぽい表示がされます。

このデフォルトの状態では、あまりに味気ないのでカスタマイズする事にしたのですが、冒頭で述べた様に、検索してもCSSのカスタマイズ情報が見つけられませんでした。
なので自分で調べる事にしました。

実際に表示されているページのソースを見ると、「こちらの記事もどうぞ」の部分に、下記の様なCSS要素を発見しました。
customize-wordpress-related-posts-css_04

"wp_rp_wrap" の下の "related_post_title" によって装飾されているのです。
ですので、これら要素が発見できればカスタマイズが可能です。

何かCSSファイルを読み込んでいるはずと、ソースを見てみると、の直前にそれらしき記述がありました。

customize-wordpress-related-posts-css_05

plugins/wordpress-23-related-posts-plugin/static/themes/vertical.css
を読み込んでいますね。

ただし、これは Advanced settings の Layout項目で Vertical(Large) を選んだ場合です。
customize-wordpress-related-posts-css_10
その他を選んだ場合は、それに対応したCSSが読み込まれます。

  • Momma の場合は、momma.css
  • Vertical(Medium) の場合は、vertical-m.css

といった具合です。

実際に plugins/wordpress-23-related-posts-plugin/static/themes/vertical.css を見てみました。

customize-wordpress-related-posts-css_06

いきなり一番上部にありましたよ。
.wp_rp_wrap .related_post_title
が。

なのでこの部分をカスタマイズすればOKです。

wp_rp_wrap .related_post_title {
	clear		: both;
	margin		: 15px 0 !important; /* 要 important */
	padding		: 0.5em !important; /* 要 important */
	position	: relative;
	border		: #333 solid 3px;
	border-radius	: 16px;
	background	: #fff;
	box-shadow	: -7px -5px 0 0 #e8e8e8 inset, 2px 3px 0 0 #000;
}
.wp_rp_wrap .related_post_title:before {
	content		: "";
	position	: absolute;
	top		: 100%;
	left		: 34px;
	width		: 0;
	height		: 0;
	border		: 20px solid transparent;
	border-top-color: #333;
}
.wp_rp_wrap .related_post_title:after{
	content		: "";
	position	: absolute;
	bottom		: -27px;
	left		: 38px;
	width		: 0;
	height		: 0;
	border		: 14px solid transparent;
	border-top-color: #e8e8e8;
}

今回は上記の様に、before と after を使用して格好良く装飾しました。
結果は下図です。

customize-wordpress-related-posts-css_07

と、ここまで行っておいてやっと気付いたのですが、もっと簡単にカスタマイズできる事が分かりました。

CSSを直接打ち込める

Advanced settings の Customize 項目に、CSSを打ち込める所がありました。

customize-wordpress-related-posts-css_08
「Enable custom CSS」にチェックを入れ、先ほどのCSSをペーストすればOKです。

この方法でも、同様の効果がありました。

この場所でカスタマイズを行ってから先ほどの
plugins/wordpress-23-related-posts-plugin/static/themes/vertical.css
を見てみても、何も変更がありませんでした。

どこに反映されているのだろうと、ソースを見てみると

customize-wordpress-related-posts-css_09

直前にベタ打ちで反映されていました。

この方法だと毎ページ読み込む度に、その都度この部分が読まれるわけですから、ほんのわずかですが遅くなる可能性がありますね。

とは言え、Advanced settings の Layout をどれに変更しても適用されるわけですから、こちらの方が汎用性が高いですね。

結論:
CSS直イジリは余り効果がありませんでしたが、WordPress Related Posts がどういう振る舞いをするか究明できただけでも良かったとします。

よろしければコメントをどうぞ

コメント欄(必須)


4 × = 三十 六

  • 送信後に「送信されました」等のメッセージ画面は表示されません。
  • 送信されたかどうか心配な場合は、再度送信なさってください。
  • 送信いただいたコメントは、承認後に表示されます。
サブコンテンツ

このページの先頭へ