プラグイン

【ワードプレス入門-25】WordPress関連記事表示プラグイン「Yuzo Related Posts」の意味・設定・使い方

 

当サイトは「JIN」というTheme(テーマ)を使っています。

関連記事を簡単に設置する機能を備えていますが、ちょっと大きすぎる感じがして、前々からカスタマイズしたいと考えていました。

そこで自由度の高いプラグインを探し、見つけました。

それが今回ご紹介する「Yuzo-Related Posts」です。

ワードプレス入門は25回めとなり、プラグインのインストールや有効化は何度もやって来たので、説明を省略します。

今までと同様に「プラグイン追加」→検索窓に「Yuzo」または「Related Posts」→「今すぐインストール」→「有効化」し、設定してください。

最初、有料版への案内ページが現れますが、それは無視してSettingへ進んでください。

サイドバーに「Related Posts」が現れますので、それをクリックしてもOKです。

では、説明に入ります。

関連記事を自動表示する「Related Posts」を設定する

1.メイン設定でタイトルの言葉、大きさ、本数を設定

「Main Settings」で、<h3>Related Post</h3>の「Related Post」を「関連記事」と打ち替えれば、見出しが「関連記事」となります。h3をh4に変えれば、一回り小さな見出しに変わります。
次の赤枠内は、表示したい記事の本数です。デフォルトでは4になっています。

Medium欄は、関連記事に出したい記事を選びます。デフォルト(初期設定)の「投稿」のみで良いでしょう。「固定ページ」も出したい人は「固定ページ」を「ON」にします。

2.メイン設定で何に基づいて関連させるかを選択

「Related to」は、「Category」を選びます。Advanced欄はデフォルトのままでOKです。

3.「SAVE CHANGES」ボタンをクリックして設定を保存

赤枠内もデフォルトの「On」になっていますが、これは「関連記事がない場合はランダムで記事を表示する」をOnにするといことです。Offにすれば表示されません。最後に「SAVE CHANGES」ボタンをクリックして設定を保存します。

4.スタイリング設定でスタイルを選ぶ

「Styling」タブをクリックします。
関連記事のスタイルを4つの中から選びます。
そしてサムネイルの大きさを選びます。
私は「Medium(中)」を選びました。


スタイルは、左から順に次のようになります。

A

B

C

D

5.スタイリングでサムネールを角丸にしたり、シャドーをつけたり

「Thumnail Border Radio」はサムネール写真の角を丸くしたい場合、数字を大きく設定すると丸みが増し、「50」で円になります。
「Margin」は記事の周囲の間隔をもっと空けたい時。
「Padding」とは、境界線の中の間隔。
境界線の内側と外側は余白をとることができ、ボーダー内側の余白を「Padding」、外側の余白を「Margin」と呼びます。
サムネールに「Shadow」を付けたければ、「Shadow Box」を「On」にします。

Background Color(背景色)も設定できます。

6.スタイリングで記事のタイトル文字の色、大きさ、文字数などを設定

上から説明します。Font sizeは、タイトルの大きさ。デフォルトは14です。私はいろりいろ変えて表示しましたが、結局14に落ち着きました。
Title lenghthはタイトルの長さ。私は25文字にしました。
Title Boldはタイトル文字を太くしたい場合は「On」。
Title color、Text Colorは、自分の好きな色を指定します。
Text lenghthは、テキストの長さ。私は85としました。

7.スタイリングで「SAVE CHANGES」をクリックし保存

「SAVE CHANGES」をクリックし保存します。CSSを使いこなせる人は、CSSを入力してカスタマイズすることもできます。

8.プロダクティヴィティはデフォルトのまま

「Productivity」タブをクリックします。ここははデフォルトのままでOK。「Show visits in related post」の「Show」を「On」にすると、表示された関連記事のタイトルの横に訪問者数が表示されます。

9.プロダクティヴィティを「SAVE CHANGES」

変更したら「SAVE CHANGES」をクリックし保存します。

10.出来上がり見本

表示する記事数を5にして、マージンを天地に3取って出来上がったのが、これです↓。

以上です。お疲れさまでした。