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

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

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

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

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

関連記事

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

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

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

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

sponsored link

function.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プラグイン

スポンサーリンク

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

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

  

同じカテゴリーの記事

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

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

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More