関連記事エリアをプラグイン使って導入してみる
公開：2019.09.09
更新：2020.05.09
こんにちは、らいどらです。
このブログもそこそこ機能が充実してきたので、そろそろ関連記事表示に踏み込んでいこうと思います。
関連記事は回遊性を高めるという意味でSEO的な効果もあるとされますね。….とまあそんなことはどうでもいいんですが。
プラグインを導入する
今回は色々調べたものの、結局はプラグイン検索で一番ダウンロード数が多かった「YARPP」を使うことにしました。
これをインストール、有効化します。
ですが、有効化してもすぐには関連記事表示はされませんでした。どうやら、何らかの理由で記事更新を行わないとリストに入らないようです。少し面倒ですが、やればOKなので良しとしましょう。
参考にした記事 → https://techacademy.jp/magazine/2184
デフォルトでは四角い窓が、2つか4つか出てきます。
私はこれ嫌だったので、CSSで代えようと試みたのですが……これが一向に変わらない！
開発者ツールを見る限りではどうやらスタイルの優先順が関係しているようです。これがいくらセレクタを詳しく書いても優先されなかった….。自らのアマチュア知識の限界を感じました。
もうどうしようもないので、JQueryを使って該当部分に新クラスを与えちゃおうと思います。
早速script.js内のJQuery記述の基本部分の後に
$(".yarpp-related").addClass("kkfield");
これを追加します。[yarpp-related]は関連記事エリアのデフォルトクラスです。
このクラスを使ってスタイリングしていきます。
最終的にこうなりました。ですが記事下部のデザインとしては、やっぱりサイドバーとかがあった方がやりやすいですね。
また、プラグイン設定では詳しいデザイン設定や、記事の抜粋文表示機能が無かったので、将来的にはソースコードで解決した方が良さそうです。少し余裕が出てきたらやろうと思います。
それでは！
