うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や暗い話も書きます)。

たまに毒吐くちゃん

カテゴリー「WordPress」の人気記事TOP3

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

time 更新日:  time 公開日:2016/08/15

関連記事

WordPressにはJetpackという公式プラグイン詰め合わせがありまして、その中に「関連投稿」という機能があります。

この「関連投稿」は、その名の通り記事下に関連する投稿を表示できる機能なのですが、ただ単に有効化しただけだと、正に記事直下……SNSシェアボタンや広告よりも上に表示されます
また表示される記事は3つだけです。

テーマファイルのカスタマイズにより、この「関連投稿」の表示場所や表示される記事数を変更することができます。以下でその方法をご紹介します。

テーマファイルにコードを追加する際は、万が一エラーが出た場合に備えて必ず元の状態のコピーを取っておいてください。

スポンサーリンク

functions.phpにコードを追加

Home

上記公式ページを参考にしました。

テーマファイルのfunctions.phpの一番下に

?>

と書いてあるはずですので、そのに以下のコードを追加します。

  • Jetpack関連投稿の自動挿入を削除
  • Jetpack関連投稿の記事数を変更

するコードです。

Jetpack関連投稿の記事数を変更

$options['size'] = 6;

この部分(24行目)で表示する記事数を、もとの3記事から6記事に変えています。6を別の数字に変えればその数の関連記事が表示されるようになります。

single.phpにコードを追加

single.phpの、関連投稿を表示させたい部分に以下のコードを足します。
シェアボタンの下に表示する場合、「この記事をシェアする」などの文言をctrl+fで探すといいかもしれません。

見出しについて

上記のコードにより、関連投稿と共に「関連」という見出しも表示されるようになります。
ただこの見出しの見た目があまりよくないので、このブログではその見出しを非表示にし、上記コードの上にオリジナルの見出しのコードを足しています。

管理画面の設定⇒表示設定⇒関連記事(Jetpack関連投稿を有効化している場合この項目が増えています)の、

関連記事と投稿の区別がつきやすいよう「関連」見出しを表示する

という項目のチェックボタンを外すことにより、もともとの関連投稿の見出しを非表示にすることができます。

その他、

  • 画像
  • 投稿日
  • カテゴリーまたはタグ

の表示、非表示をチェックボタンにより切り替えられます。

スポンサーリンク

CSSで見た目のカスタマイズ

上記作業で既に「関連投稿」は表示されるはずなので、その他の見た目で気になる所があったらCSSで変更します。
このブログでは、

  • オリジナルの見出しと関連投稿の隙間を狭める
  • 関連投稿の画像とタイトルの周りに影をつける

というカスタマイズを行っています。

同じように変更したい場合は、以下のコードをスタイルシートstyle.css)に追加してください。

Jetpack関連投稿のpadding-topを0にする

見出しと関連投稿の間の隙間が大きかったので、それを狭めました。もう少し広い方がいい場合は、

padding-top:0!important;

この部分の数字の0を別の数字に変えてみてください。

Jetpack関連投稿の画像とタイトルの周りに影をつける

画像とタイトルの周りに影をつけています。

余談:関連記事の画像は変えられないのかサポートに質問してみました

関連記事の画像は、デフォルトの設定だと記事の一番上の画像が表示されます。
これをアイキャッチ画像に変更したいと思いまして、Jetpackサポートにメールで質問してみました。

I would like to change ‘jp-relatedposts-post-img’ to ‘the_post_thumbnail’.
How can i do it?
I’m looking forward to hearing from you.
Thank you.

すると以下の返答がありました(夕方メールした所、翌日の朝に返事が届くという迅速な対応でした)。

Hi there,

Jetpack’s Related Posts use Photon to serve the images, so they have to be images within the post content itself, not just featured images.

Our only other option at this time is to set a fallback image when no image is found in the content: https://jetpack.com/support/related-posts/customize-related-posts/#default-image

Kind regards,

関連投稿の画像は記事内にないと駄目なんだ……ということのようです。

ちなみにその下の文章では、記事内に画像がない時に表示する画像を設定できるよ! ということを教えてくれているのだと思います。設定したい方は上記のURLをご覧ください。

今後のアップデートでカスタマイズできる所が増えることを期待しています。

あとがき

関連記事

カスタマイズが無事成功すれば、上の画像のような「関連投稿」が任意の場所に表示されているはずです。

テーマファイルのカスタマイズは一歩間違うとブログの表示がおかしくなったり、表示されなくなったりする恐れがありますのでご注意ください(繰り返しになりますが、必ず元の状態のコピーを取って、何かあった時に元に戻せるようにしておいてください)。
またテーマファイルのカスタマイズは恐れ入りますが自己責任でお願い致します。

追記
しばらくこのブログでJetpack関連投稿を使用していたのですが、記事数が増えてくるにつれあまり関連のない記事が表示されるようになってきた気がしたので、プラグイン「WordPress Related Posts」に乗り換えました。
「WordPress Related Posts」に関しては以下の記事をご覧ください。

おすすめのWordPressプラグイン

スポンサーリンク

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

AmazonなどでTシャツやグッズを販売しています

Amazon詳細ページへ
Amazon Yahoo!ショッピング TSHIRTS TRINITY  SUZURI Zazzle itaxes 価格・送料比較表