Jetpackで記事下に関連記事を設置する方法

2020年6月28日2022年1月30日便利なプラグイン

Jetpackは約30種類のWordPressを利用する上で便利な昨日がパックになったプラグインです。

今回はJetpackで記事下に関連記事を設置する方法とデザインのカスタマイズをする方法を紹介したいと思います。Jetpackのインストール方法についてはこちらを参考にしてください。

WordPress初心者におすすめ！多機能なプラグインJetpack ～導入編～

今回はWordPressを「始めたばかり」という人におすすめな多機能なプラグイン『Jetpack by WordP ...

https://kirari-yums.net/post-8423/

きらり

へえー、Jetpackで関連記事も表示できるんだね！

結耶

そうそう。便利な機能がパックになってるから便利だよねぇ。

Contents

1. Jetpackの設定
- 1.1. その他の設定
2. 表示のカスタマイズ
3. 最後に

Jetpackの設定

場所［Jetpack］［設定］［トラフィック］

WordPress管理画面から［Jetpack］⇒［設定］⇒「トラフィック」タブをクリックすると関連記事という項目があります。

「投稿の後に関連コンテンツを表示」をONにすると記事下に関連記事が表示されます。その下の「見出し付きの関連記事をハイライト表示する」をONにすると「関連」という見出し(見出しは後で変更できます。)が表示され、「使用可能な場合はサムネイル画像を表示します」をONにするとサムネイル画像が表示されます。(下にプレビューが表示されるので確認してください。)

結耶

これで記事下に関連記事が表示されます。確認してみてください。

その他の設定

関連記事の表示は上の設定でできます。ですがデフォルトの見出しは『関連』となっています。見出しの変更、日付、カテゴリーを付ける場合はカスタマイザーで設定します。

場所［外観］［カスタマイズ］［関連記事］

Jetpackの関連記事のプレビューの下にある「カスタマイザーにある関連記事の設定をする」からでも行けます。
Luxeritasをお使いの場合は［Luxeritas］⇒［カスタマイズ(外観)］でも行けます。

左のメニューの一番下に『関連記事』と言う項目があるのでクリックしてください。

きらり

あれれ？「単一の投稿ビューに移動し、カスタマイズオプションを表示してください。」って表示されてて設定項目が表示されないよ？

結耶

右側のプレビューでどれでもいいから投稿記事に切り替えてみて。切り替えると設定項目が表示されると思うよ。

［外観］からカスマイザーを開くと右側のプレビューはトップページが表示されます。トップページや固定ページなどの「Jetpackの関連記事」が表示されていないと設定項目は表示されません。右側のプレビューで関連記事が表示されている投稿記事(どれでもいいです)を表示してください。

カスタマイザーの関連記事設定では、見出しの変更やサムネイル、日付、カテゴリーの表示設定と一覧のレイアウトの設定ができます。レイアウトは『グリッド』と『リスト』の2種類があります。

右側のプレビューを見ながらお好みで設定してください。

結耶

設定したら忘れずに上の公開ボタンを押してくださいね。

表示のカスタマイズ

デフォルトの表示は見出しの文字が小さく、h3タグが使用されているためh3のスタイルが反映されます。同じように記事のタイトルはh4が使われているのでh4のスタイルが反映されてしまいます。

また表示件数がデフォルトは3件しか表示されません。

きらり

結耶はどんなカスタマイズをしたの？

結耶

見出しと記事タイトルの文字サイズとスタイルが上手く表示されなかったからスタイルの変更、生地件数の変更、カテゴリーのスタイルを変更したよ。

ということで参考に私がしたカスタマイズを紹介します。

見出しのカスタマイズ

見出しの内容はカスタマイザーで変更できます。ですが先程も書いたようにh3のスタイルが適用されてしまいます。「このままでいいや」という場合はいいのですが、見出しを変更したいという場合はCSSを追加します。

/*Jetpack関連記事の見出し*/
#jp-relatedposts h3.jp-relatedposts-headline{
    font-size:20px !important;    /*文字サイズ*/
}

「#jp-relatedposts」は関連記事を囲っている入れ物です。見出しは「h3.jp-relatedposts-headline」です。

文字サイズを指定していますが、(私の場合)普通に指定しても文字サイズが変わらなかったため「!important」を付けて指定しています。その他文字色や背景色など追加して見出しスタイルを変更してください。(文字サイズ以外は「!important」を付けなくても適用されると思います。)

記事タイトルのカスタマイズ

/*Jetpack関連記事の記事タイトル*/
#jp-relatedposts h4.jp-relatedposts-post-title{
    font-size:14px !important;    /*文字サイズ*/
}

記事タイトルは「」です。こちらもその他のスタイルを必要に応じて追加してください。

カテゴリーのカスタマイズ

デフォルトのままだとカテゴリーが解りづらかったので解りやすくするためにスタイルを変更してみました。

/*Jetpack関連記事のカテゴリー*/
#jp-relatedposts p.jp-relatedposts-post-context{
    display:inline-block;
    text-align:center;
    background-color:#ff6893;
    color:#ffffff;
    font-size:12px !important;
    line-height:1;
    border-radius:2px;
    padding:1px 5px;
}

カテゴリーは「p.jp-relatedposts-post-context」です。

3行目のdisplay:inline-block;を削除すると以下のようになります。

表示件数の変更

デフォルトでは記事は3件しか表示されません。記事件数を変更するにはfunction.phpにコードを追加する必要があります。

注意事項

function.phpを編集する前に必ずバックアップをとってください。

件数変更のコードは「関連記事のカスタマイズ」-Jetpack by WordPress.comで紹介されています。

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

2行目の「6」が表示件数です。

きらり

「6」ってことは6件表示されるってことだよね。

結耶

そうだよ。PCでは横3列、スマホは横2列で表示されるから「6」がちょうどいいと思うよ。