文字

関連記事エリアをプラグイン使って導入してみる
公開: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]は関連記事エリアのデフォルトクラスです。

このクラスを使ってスタイリングしていきます。

強硬クラス付与でスタイリングした関連記事フィールド
デフォルトよりはマシになったかな?

最終的にこうなりました。ですが記事下部のデザインとしては、やっぱりサイドバーとかがあった方がやりやすいですね。

また、プラグイン設定では詳しいデザイン設定や、記事の抜粋文表示機能が無かったので、将来的にはソースコードで解決した方が良さそうです。少し余裕が出てきたらやろうと思います。

それでは!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。