WordPressの最新の投稿ブロックではブロックの設定の「投稿メタ」から記事の投稿日を表示させることができます。その場合は「投稿日を表示」にチェックをいれるとできます。
ただ、この場合、記事のタイトルが上に、日付は下に表示されるのがデフォルトなので、これを「2024年11月14日 Hello world!」のように日付→タイトルの順で横並びにしたい、でもHTMLを触りたくないので、stylesheetのみでやりたい。と毎回思います。毎回。
もう面倒なので、備忘録で記事を投稿し、今後はコピペでいこうと思いその覚書になります。（ここまでが前置き）
HTMLは触らない
最新の投稿ブロックの出力HTMLは日付を入れた状態だとこんな感じのHTMLになるかと思います。（今後変わる可能性有り）
<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">
<li>
<a class="wp-block-latest-posts__post-title" href="">投稿テスト</a>
<time datetime="2025-01-08T10:01:07+09:00" class="wp-block-latest-posts__post-date">2025年1月8日</time>
</li>
<li>
<a class="wp-block-latest-posts__post-title" href="">Hello world!</a>
<time datetime="2024-11-14T11:18:10+09:00" class="wp-block-latest-posts__post-date">2024年11月14日</time>
</li>
</ul>
CSS
stylesheet.cssの方に記述するのは下記。
.wp-block-latest-posts__list { margin: 0; padding: 0; list-style: none; }
.wp-block-latest-posts__list li { margin-bottom: 10px; padding-bottom: 5px; display: flex; align-items: center; border-bottom: 1px solid #ddd; }
.wp-block-latest-posts__post-date { margin-right: 10px; order: 1; white-space: nowrap; width: 9.5rem; }
.wp-block-latest-posts__post-title { order: 2; white-space: nowrap; flex-grow: 0; }
反映後イメージ
order: 1、order: 2で表示順を指定します。
.wp-block-latest-posts__post-dateにwidthで横幅サイズを指定するとページタイトルの頭が揃うので、widthをいれたり、あとは微調整。
