【WordPress】Luxeritasでウィジェット・トップページにカテゴリ別最新記事を表示する方法
- 「最新の投稿ブロック」を「再利用ブロック」に追加
- 外観のウィジェットでLuxeritasオリジナル「再利用ブロック」を好きな場所に表示
上記のようにとても簡単な話ですが、サムネイルを表示する場合は若干使いづらいので、CSSでのスタイリングや詳細を解説していきます。
一例として以下の画像のような表示にしていきます。サムネイルをはカラム、マウスオーバーでタイトル表示というスタイルです。
再利用ブロックに最新の投稿ブロックを追加
まずは表示したいカテゴリの最新記事のためのブロックを作成します。
直接「再利用ブロック」を作成してもいいし、投稿記事から作ってもいいので、「最新の投稿」ブロックを追加します。
グリッド表示に変更
「最新の投稿」ブロックの浮動メニューでリストからグリッドに変更。
この時点ではサムネイルは非表示設定になっているので、上記の画像のようになっていなくても気にしないでください。
最新の投稿ブロックの設定
右側に表示されている「ブロック」の設定をこのように調整します。一例ですので適宜設定してください。
カテゴリーはスラッグ名では出てこないので（20/08/20現在）カテゴリー名を直接打ち込みます。
当サイトのCSSではこのように設定するとおおよそ先ほど図示した画像（↓の画像）のような表示になります。
しかしこのサムネイル、リンクが張られていません。リンク先へ飛ぶにはタイトルを押す必要があります。
できればサムネイルにリンクを張りたいですね。
そこでタイトルをサムネイルに重ね、マウスオーバー時に画像を暗くし、タイトルを表示させたいと思います。
CSSを追加
そのためには以下のCSSを追加します。デザインファイルのCSSでもいいし、子テーマのCSSでも構いません。
/* ウィジェット用カテゴリー別最新記事ブロック調整 */
.wp-block-latest-posts__featured-image.aligncenter {
margin-bottom:0;
}
div[id^=thk_reusable_blocks_widget] ul li {
position:relative; /* 記事タイトル位置調整 */
}
div[id^=thk_reusable_blocks_widget] ul li a { /* 記事タイトル位置・背景色・文字色調整 */
position: absolute;
display: flex;
opacity: 0; /* マウスが乗らない時は透明 */
width: 100%;
height:100%;
top:0;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
background:rgba(0,0,0,0.6);
color:#fff;
align-items: center;
justify-content: center;
text-align:center;
overflow:hidden;
}
div[id^=thk_reusable_blocks_widget] ul li a:hover {
opacity: 1; /* マウスが乗った時は記事タイトルを表示 */
transition:all 0.6s ease;
}
/* 投稿日表示時調整用 */
time.wp-block-latest-posts__post-date {
position: absolute;
opacity: 0;
width: 100%;
height:100%;
top:0;
bottom: 0;
left: 0;
right: 0;
padding:20px;
color:#fff;
display: flex;
align-items: last baseline;
justify-content: center;
text-align:center;
overflow:hidden;
background:transparent;
pointer-events: none;
white-space: nowrap;
}
div[id^=thk_reusable_blocks_widget] ul li a:hover+time.wp-block-latest-posts__post-date{
opacity: 1;
transition:all 0.6s ease;
}これはウィジェット用の表示なので、投稿記事や固定ページでは変化しませんが……
ウィジェットに表示すると以下のようなスタイルになります。実際の表示と同じように動きます。
マウスを乗せるとタイトルが表示されます。
もちろん投稿記事や固定ページでもこのスタイルで表示させることは可能です。
その場合は div[id^=thk_reusable_blocks_widget] ul の部分をすべて ul.wp-block-latest-posts へ書き換えると動作するはずです。
カテゴリー別の投稿記事表示はluxeritasオリジナルの「カルーセルスライダー」でも実現可能ですが、「トップページ」に「カテゴリ別の最新記事を表示したい」という要望を満たす機能ではありません。
しかし再利用ブロックウィジェットは色々な使い方ができる機能ですし、Gutenbergの機能も増えているので、ぜひぜひ有効活用したいものです。
以上、参考になれば幸いです。良いLuxeritasライフを！