サイトの関連記事を出してくれるYARPPは設定が簡単で、見た目に面白そうだったので初めのほうに導入したが、
挿入する位置を自由に決められる
らしいということで、やってみたところ、なぜかスタイルシートとの激闘が待っていた。
関連記事の表示場所を初期設定から手動に切り替える
- 設定→YARPPを選択
- 表示設定の一番上にある投稿、固定ページ、メディアのチェックボックスをすべてはずす
- 一番下の設定保存
以上の手順で初期設定で表示されていた関連記事の項目が消えた。
続いて関連記事を表示させたい場所に挿入する手順だが、
表示させたいところに”related_posts();”と書き込む、以上。
複数の解説ページで同じような記述がされていて、またまたーそんな簡単なわけないだろう、とか思いつつも、「テーマの編集」から個別投稿のページに書いてみると、なんと普通に表示された。
すげー、と感心するのもつかの間、問題発生。
関連記事項目が表示されているのはいいが、なんだかやけに左詰め、というかどう見てもスタイルシートの中央寄せが適応されていない。
というわけでいろいろ試してみたので以下やったことの記録。
該当ページでソースを確認
今回は個別の記事内での関連記事についてなので、リンクが張ってあるところを探してみると、”yarpp-related”と言うクラス名を発見。
これの中央寄せが他とずれているのでこうなっているようだ。
現在使っているテーマのスタイルシートを確認
「テーマの編集」で現状使っているテーマを見て、”page-content”に横幅の指定と中央寄せが書いてあったので丸ごとコピー。
CSSにYARPP用のスタイルを作成
同じく「テーマの編集」のスタイルシートに”yarpp-related”クラスを作成、先ほどコピーしたものを貼り付けて完成。
これだけ見るとびっくりするほど簡単そうだが、それぞれの項目にたどり着くまで、方々で知恵を借りることとなった。
スタイルシートについてちょっと勉強したいなー。
と、正直改めて見直してみると書くまでもない内容の話だったが、なんか予想外に手間取ったので、カッとなって記事にしてしまった、申し訳ない。