ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「プラグイン「WordPress Related Posts」で華やかブログに!」の記事

プラグイン「WordPress Related Posts」で華やかブログに!

ウサヲです。

ブログなので、ブログらしくあるために、関連記事掲載をしてみました。選んだ理由は、メジャーだし、デザインの種類が豊富、という評判が目に付いたからです。

導入の手順

  1. 管理画面のプラグイン>新規追加で「WordPress Related Posts」をインストールし、有効化activeにします。

以上。

なんと、プラグインをアクティブにしただけで、シングルページにはすでに反映されています。随分賑やかに華やかになりました。デフォルトの設定の中で、自動的にRelated Postsを付加するにチェックが入っているからです。(もちろん手動で好きなところに設置することが可能です)

詳細設定

まずは管理画面の設定>WordPress Related Postsの設定画面に移動します。

1. Basic settings 基本設定を変更します。

スクリーンショット 2016-06-28 17.39.08

Related Posts TItle: デフォルトで「More from my site」となっていますが、これがh3に来る関連記事一覧の見出しになります。「こちらもどうぞ」とか「関連記事一覧」とか、お好みでどうぞ。

Number of Posts: デフォルトで6つのポストが表示されている状態です。お好みでどうぞ。

2.Advanced settings デフォルトで用意してある見た目を設定します。

スクリーンショット 2016-06-28 17.53.02

Enable Themes* : これにチェックを入れると、下のLayoutレイアウトが展開されます。ポチッとしながらお好みのデザインを選びます。チェックを入れない場合は、自分で自由に設定してね、という具合なのだと思います。

3.その下には詳細の設定が続きます。

自分でカスタマイズしたい方は、「Customize> Enable custom CSS 」をチェックして頑張りましょう。

ちなみに、ウサヲはこのように変更しました。下の画像は、デフォルトのcss編集ボックスに追加したものです。(なので何も処理していないクラスもそのまんま載せています。)

.related_post_title {
}
ul.related_post {
}
ul.related_post li {
padding: 0 0 32px 0 !important;
}
ul.related_post li a {
}
ul.related_post li img {
max-width: 97% !important;
border: 1px solid #eee !important;
box-shadow:none;
}

 

これが、こんな感じになります。

スクリーンショット 2016-06-28 19.46.49

 

4.関連記事を好きなところに載せたい方へ

スクリーンショット 2016-06-28 18.09.26

詳細設定の下の方にこんな↑チェックボタンがあります。一番↑にチェックが入っていると、プラグインが自動的に関連記事一覧を表示します。

チェックを外して以下のソース一行を追加すると、その位置に関連記事一覧が展開されます。

<?php wp_related_posts()?>

もちろん最後に保存してくださいね。

アバウトでごめんなさい。

 

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP