Yet Another Related Posts Plugin (YARPP) の設定とCSS削除

公開日: 2014年07月10日

a-01

WordPressで関連記事を表示させることが出来るプラグイン「Yet Another Related Posts Plugin(YARPP)」の簡単な使い方、設定方法、勝手に読み込まれるデフォルトCSSの削除方法などの解説です。記事執筆時点のバージョンは4.2.2。

もくじ

はじめに

WordPressで、関連記事を表示させることが出来る超絶便利なプラグイン「Yet Another Related Posts PluginYARPP)」の簡単な使い方や設定方法、勝手に読み込まれるCSSの削除方法です。

現在のバージョンは4.2.2ですので、それを前提に進めていきます。

勝手に読み込まれるCSSの削除方法というのは、2014年5月くらいのアップデートだと思いますが、YARPPを更新すると勝手にCSSが追加されるようになったようで、「表示が崩れたー><」っていう方が結構いたようです。

プラグイン編集画面から直接YARPPのCSSファイルを編集しても良いのですが、そうすると再びYARPPが更新された際にまた編集しないといけません。

またオリジナルCSSから!importantでガシガシ上書きしても良いのですが、それも面倒です。

なので、functions.phpへコードを記述することで、CSSを読み込ませないように削除したいと思います。

YARPPのインストール

まず、Wordpress管理画面の「プラグイン > 新規追加」から「Yet Another Related Posts Plugin」と検索してインストールします。

すると、以下のような表示ががが。
関連記事プラグイン (YARPP) がインストールされました

関連記事プラグイン (YARPP) がインストールされました!

We would really appreciate your input to help us continue to improve the product. We are primarily looking for country, domain, and date installed information. Please help us make YARPP better by providing this information and by filling out our quick, 5 question survey: http://www.surveymonkey.com/s/Z278L88

私はしびれるくらい英語が苦手で、何だかよく分からないので「No, thanks」としました。

そして、YARPPを有効化した後は、Wordpress管理画面の「設定 > YARPP」から色々と基本的な設定をすることが出来ます。

基本的な使い方

YARPPの設定画面を開くと、以下のような画面になります。
関連記事(YARPP)設定

フィルター設定

フィルター設定では、関連記事として表示したい記事や表示させたくない記事を制限することが出来ます。

例えば、「このカテゴリーの記事を表示しない」の中から特定のカテゴリーにチェックを入れると、そのカテゴリーに属する記事は関連記事として表示されなくなります。

その他、パスワードで保護されている記事を表示するのかしないのかの選択、過去○日~○ヶ月以内の記事だけを表示させるというような期間を指定することも可能です。

期間指定は、今のところ最短1日~最長12ヶ月から選択できるようです。

ちなみに私の場合は、フィルター設定はデフォルトのまま使用しています。

関連スコア設定

関連スコア設定では、表示させる関連記事の判定基準などに関する設定を行うことが出来ます。

「表示する最低関連スコア」とは、表示する関連記事の関連度(関連レベル)みたいなものです。

高ければ高いほど判断基準がより厳しくなり、関連度の高い記事しか表示されなくなります。なのでブログ全体の記事数が少ない場合、ここの最低関連スコアの数字を低くしないと、関連記事がほとんど表示されなかったりします。

私の場合は、ブログにもよりますが2にすることが多いです。

ちなみに、Wordpressにログインしている状態で記事下部にある関連記事表示部分を見ると、以下のように記事タイトルの右側に関連スコアの数字が表示されますので、これを参考にしてみても良いかもしれません。
関連スコア

その他、「タイトル」「内容」「カテゴリー」「タグ」を検討するかしないかの選択、「全ての投稿タイプの結果を表示」や「過去の記事だけを表示」などの選択が出来ます。

タイトル~タグの部分に関しては、記事同士の関連度合を判断するのに検討するものを選択するわけですが、基本的にはデフォルトのままで良いと思います。

「全ての投稿タイプの結果を表示」とは、投稿と固定ページなどのことです。ここのチェックを外せば、投稿には関連投稿しか表示されませんし、固定ページには関連固定ページしか表示されません。

その下の「過去の記事だけを表示」というのは、その記事の投稿日を基準とした過去の記事しか表示させたくない場合にチェックを入れます。

私には使いどころがよく分かりませんので、使いどころが分かる方以外は基本的にチェックを外した状態で良いと思います。

表示設定 ウェブサイト用

表示設定欄の1番上に「Automatically display related content from YARPP Basic on」とあります。

これは自動的に関連記事を表示させるかさせないかという意味で、ここにチェックが入っていると、記事下の方に勝手に関連記事が表示されます。

が、記事下には広告やシェアボタンやコメント欄など、各ブログによって色々ありますよね。なので、YARPPの関連記事が表示されるデフォルト位置を、変更したい場合があると思います。

そういう場合はここのチェックを全て外し、テーマファイル(single.phpなど)に「related_posts()」を入れることで任意の位置に表示させることが出来ます。

その際は、関連記事を表示させたい部分に以下のコードを追記します。

<?php related_posts(); ?>

上記のコードをサイドバーのテキストウィジェット内に記述すれば、サイドバーに関連記事を表示させることも可能です(その場合はExec-PHPなどのプラグインを使いサイドバーでPHPが使えるようにする必要あり)。

その他、「一度に表示する関連記事数」はその言葉の通り。「リスト」と「サムネイル」と「カスタム」は表示のデザイン的なものを指しています。

リストは記事タイトルのみ、サムネイルはアイキャッチ画像も表示されます。カスタムは自分の好きなように出来るのですがややこしいため、検索(yarpp カスタム – Google 検索)してみて下さい。

「関連記事表示を囲むタグ」は、特にこだわりが無ければそのままで良いと思います。私の場合、h3タグの中身の英語部分だけを日本語で「関連記事」などとすることが多いですが、olタグなどはそのまま使用しています。

関連記事がない時のメッセージは、その言葉の意味のままですが、最低関連スコア以上の関連記事が無い場合、どのように表示するかといったものです。

私はデフォルトのままにしていますが、例えば「関連記事はありません」とかにしてもいいと思いますし、消してしまっても良いと思います。

YARPPのデフォルトCSSを外す(削除)

最初にも触れましたが、CSSが勝手に追加されてしまうんですよね。

ヘッダー部分には以下のようなコード。

<link rel='stylesheet' id='yarppWidgetCss-css'  href='http://inosh.jp/wp-content/plugins/yet-another-related-posts-plugin/style/widget.css?ver=3.8.3' type='text/css' media='all' />

フッター部分には以下のようなコード。

<link rel='stylesheet' id='yarppRelatedCss-css'  href='http://inosh.jp/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=3.8.3' type='text/css' media='all' />

また、YARPPの設定画面から「サムネイル」タイプを選択している場合には、以下のようなコードも追加されます。

<link rel='stylesheet' id='yarpp-thumbnails-yarpp-thumbnail-css'  href='http://inosh.jp/wp-content/plugins/yet-another-related-posts-plugin/includes/styles_thumbnails.css.php?width=120&#038;height=120&#038;ver=4.2.2' type='text/css' media='all' />

これらのCSSを吐き出されるHTMLコード上から削除するためには、functions.phpに以下のコードを追記します。

functions.php

//ヘッダー部分のCSS消去
add_action('wp_print_styles','lm_dequeue_header_styles');
function lm_dequeue_header_styles(){ wp_dequeue_style('yarppWidgetCss'); }

//フッター部分のCSS消去
add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles(){ wp_dequeue_style('yarppRelatedCss'); }

//サムネイルを有効にした場合に呼び出されるCSS消去
add_action('wp_print_styles','lm_dequeue_header_styles1');
function lm_dequeue_header_styles1(){ wp_dequeue_style('yarpp-thumbnails-yarpp-thumbnail'); }
add_action('get_footer','lm_dequeue_footer_styles1');
function lm_dequeue_footer_styles1(){ wp_dequeue_style('yarpp-thumbnails-yarpp-thumbnail'); }

ヘッダー部分とフッター部分のCSSを削除する方法は、プラグインのサポートフォーラムにあったので間違いないと思いますが、サムネイルのCSSを削除する方法は、私が適当にやったやつです。

検索しても情報が見当たらなかったので何か適当にやってみたら消えました、っていう感じです。

私はこういうプログラム的なことは本当に一切知識がないので、正しいやり方なのかは分かりません。ただ私の環境では、2つのWordpressで試しましたが、いずれも消えました。結果オーライです。

おわりに

YARPPのデフォルトCSSを削除したら、当然ですが自分でCSSに記述してスタイルを調整してあげなければなりません。

特にサムネイルタイプにした場合、デフォルトCSSがなくなると見た目がグチャグチャになります。

それでもデフォルトCSSを削除するのは、今回のアップデートで表示が崩れた、 !importantを使いたくない、1つのCSSファイルで管理したい、吐き出されるHTMLコードの中から無駄なコードを消したい、というようなものが主な目的になると思います。

また、呼び出されるCSSファイルが減ることになるので、微々たる変化すらないと思いますが、理論上は表示速度も向上するのではないかと思います。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む