YARPPの位置を変えてみた

サイトの関連記事を出してくれるYARPPは設定が簡単で、見た目に面白そうだったので初めのほうに導入したが、

挿入する位置を自由に決められる

らしいということで、やってみたところ、なぜかスタイルシートとの激闘が待っていた。

関連記事の表示場所を初期設定から手動に切り替える

  1. 設定→YARPPを選択
  2. 表示設定の一番上にある投稿、固定ページ、メディアのチェックボックスをすべてはずす
  3. 一番下の設定保存

以上の手順で初期設定で表示されていた関連記事の項目が消えた。
続いて関連記事を表示させたい場所に挿入する手順だが、

表示させたいところに”related_posts();”と書き込む、以上。

複数の解説ページで同じような記述がされていて、またまたーそんな簡単なわけないだろう、とか思いつつも、「テーマの編集」から個別投稿のページに書いてみると、なんと普通に表示された。
すげー、と感心するのもつかの間、問題発生。
関連記事項目が表示されているのはいいが、なんだかやけに左詰め、というかどう見てもスタイルシートの中央寄せが適応されていない。
というわけでいろいろ試してみたので以下やったことの記録。

該当ページでソースを確認
今回は個別の記事内での関連記事についてなので、リンクが張ってあるところを探してみると、”yarpp-related”と言うクラス名を発見。
これの中央寄せが他とずれているのでこうなっているようだ。

現在使っているテーマのスタイルシートを確認
「テーマの編集」で現状使っているテーマを見て、”page-content”に横幅の指定と中央寄せが書いてあったので丸ごとコピー。

CSSにYARPP用のスタイルを作成
同じく「テーマの編集」のスタイルシートに”yarpp-related”クラスを作成、先ほどコピーしたものを貼り付けて完成。

これだけ見るとびっくりするほど簡単そうだが、それぞれの項目にたどり着くまで、方々で知恵を借りることとなった。
スタイルシートについてちょっと勉強したいなー。
と、正直改めて見直してみると書くまでもない内容の話だったが、なんか予想外に手間取ったので、カッとなって記事にしてしまった、申し訳ない。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA