会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【WordPress】標準の「最新の投稿」ブロックを|日付-投稿タイトル|で横並びに整形する方法

WordPress(ワードプレス)
この記事は約3分で読めます。

最新の投稿ブロック

「最新の投稿」ブロックは、最近の投稿の一覧を表示します。

この「最新の投稿」ブロックは、抜粋を表示したり、文字数を制限したり。

カードタイプの表示に切り替えたり・・・

表示させるカテゴリーを限定したりと、色々と便利に使えます。

ほかのテーマでも基本は同じ並び順

テーマを変えても、基本的には「投稿タイトル」「投稿日」「投稿本文」の順番で並びます。

横並びにしたい・・・

こんな感じのレイアウトにしたい、と思った時に、解決させる方法です。

ソースコード

<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts"><li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る</a><time datetime="2012-03-15T15:36:32+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
<li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T15:15:12+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
<li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T14:41:11+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>

・・・
</ul>

投稿タイトルのclass名

liの方にはクラス名が設定されていませんが、ul(リスト全体)の方にクラス名が設定されています。

<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">

投稿日のclass名

<time datetime="XXXXXXXXXXXX" class="wp-block-latest-posts__post-date">XXXX年X月XX日</time>

timeタグとは?

time要素は、特定の時の区間を表します。 datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

ひとまずdisplay:flexにしてみる

liになっているので、これをdisplay:flexにして、横並びにしてみる?

.article ul li {
    display: flex;
}

それっぽくなりました(笑)

まとめ

まあこれで完成・・・でもよいかと思いましたが、順番が希望と反対なので・・・、これをどうにか並び替えてみます。

長くなりましたので、続きはまた!

ご参考ください😃

タイトルとURLをコピーしました