スポンサーリンク

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

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

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

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

きらり

きらり

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

結耶

結耶

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

スポンサーリンク

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」がちょうどいいと思うよ。

スマホでの表示

関連記事はPCでは横3列、スマホでは横2列で並びます。しかし表示件数を増やすとPCは問題なく3列ずつ並んでいるのですが、スマホで見ると横2列ですが…

と、こんな風になってしまいます(^^;)

結耶

結耶

これじゃあ件数増やした意味ないよ~!どうやったら綺麗に2列で並ぶの~?

どうしたら綺麗に2列で並ぶのか私にはわからなかったので以下の記事で紹介されているコードを使わせてもらいましたw(2022年1月30日 参考にさせてもらっていたページ(サイト)がなくなってしまったのでリンクは外しました。)

結耶

結耶

これで2列ずつでならんだし、カスタマイズも終了~ε-(´∀`*)ホッ

きらり

きらり

お疲れ様~。

最後に

今回はJetpackで関連記事を設置、カスタマイズをしてみました。

関連記事はユーザーに「こんな記事もあるよ~」とアピールができます。ユーザーに他の記事を見てもらうためにも必要なものです。

使用しているテーマによっては記事下に関連記事が表示されないものもあります。Jetpack以外にも関連記事を表示するプラグインはあります。なので記事下に関連記事を表示して他の記事もみて貰いましょう。

また、Jetpackのサイトの「関連記事のカスタマイズ」ページには表示件数を変更するためのコード以外にもカスタマイズ用のコードが紹介されているので参考にしてください。

以上です。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM