WordPress 5.0バージョンからブロックエディタ（Gutenberg）がデフォルトエディタに統合されました。ブロックエディタを使用している場合は、「最新の投稿」ブロックを使用して最新の投稿リストを表示できます。ブログの投稿本文に最近発行した記事のリストを目次ボックスのように表示することについて疑問に思っている人は、ブロックエディタの「最新の記事」ブロックを使用して目次プラグインに目次項目を表示するのと同様のスタイルで最新のブログ記事のリストを表示します。する方法を見てみましょう。
WordPress ブログ本文に最新の投稿リストを表示する
WordPressからブロックエディタで書くとき /ブロック - 名前を入力して、目的のブロックをすばやく選択して挿入できます。最新の投稿ブロックを挿入するには /最新を入力して 最新記事 ブロックを選択してください。
ブロックエディタのキーボードショートカットを使用すると、マウスの使用を最小限に抑えながら、すばやくブロックを挿入したり、古い投稿リンクを挿入したりできます。マウスの使用を減らすことで、コンピュータを多用する人の職業病と言える手首トンネル症候群の症状を緩和することもできます。 😄
ブロックを挿入すると、図のように最近公開された記事のリストが表示され、右側のブロック設定でさまざまな設定ができます。
右側のブロック設定では、投稿サマリ、投稿メタ（書き込み名、発行日）、属性画像（サムネイル）などを表示するかどうかを指定でき、投稿数、カテゴリなども設定できます。
「属性画像を表示」オプションを有効にしてサムネイルを表示するように設定すると、上の図に示すように、投稿のタイトルの上にサムネイルが表示されます。
最後に、次の図に示すように、サムネイルは左側に、投稿のタイトルを右側に表示し、目次のようにラベルを表示し、ボックスに背景色を設定したいと思います。
そのためには CSSの知識が少しあるはずです。最近はChat GPTです。 困惑を活用してコードを尋ねることができます。しかし、CSSについて少しでも知っている状態で、これらのAIを活用すれば効果的であると考えられます。
WordPress 通知パネル»外観»カスタマイズ»追加CSSに次のカスタムCSSコードを追加すると、上の図のように最新の記事が表示されます。
/* 최신 글 */
.wp-block-latest-posts {
background-color: #f9f9f9; /* 밝은 배경색 */
border: 1px solid #ddd; /* 부드러운 테두리 */
border-radius: 8px; /* 모서리 둥글게 */
padding: 1rem !important; /* 내부 여백 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
margin-bottom: 2rem; /* 박스 간 간격 */
}
.wp-block-latest-posts::before {
content: "최신 글";
display: block;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: #333; /* 제목 색상 */
text-align: left;
}
.wp-block-latest-posts__list {
list-style: none;
padding: 0;
margin: 0;
}
.wp-block-latest-posts__list li {
display: flex; /* 썸네일과 제목 나란히 배치 */
align-items: center;
margin-bottom: 1rem;
gap: 10px; /* 썸네일과 제목 간 간격 */
}
.wp-block-latest-posts__featured-image {
flex-shrink: 0; /* 썸네일 크기 유지 */
max-width: 60px;
max-height: 60px;
}
.wp-block-latest-posts__featured-image img {
width: 60px;
height: 60px;
object-fit: cover; /* 이미지 비율 유지 */
border-radius: 4px; /* 썸네일 모서리 둥글게 */
}
.wp-block-latest-posts__post-title {
font-size: 1rem;
color: #0073aa; /* 제목 색상 */
text-decoration: none;
line-height: 1.2;
}
.wp-block-latest-posts__post-title:hover {
color: #005b8f; /* 제목 호버 색상 */
text-decoration: underline;
} 上記のスタイルが気に入らない場合は、ChatGPTに上記のコードを入れて、好きなスタイルに合わせてコードを変更するように依頼できます。
GeneratePress テーマでテストしました。テーマによってレイアウトは少し異なる場合があります。
クラシックエディタ（クラシックエディタ）をまだお使いの方もいらっしゃいます。 クラシックエディタプラグインは現在1,000万を超えるサイトで有効になっています。 （現在1000万を超えるサイトにインストールされ、アクティブなプラグインでクラシックエディタに加えて Elementor、Yoast SEO、Contact Form 7程度があります。）
WordPressがバージョン5.0にアップデートされると、ブロックエディタ（Gutenberg）に転換される当時、多くの反発がありました。当初はブロックエディタが安定しておらず、機能も不十分な点が多かった。今ではブロックエディタが大幅に安定しており、機能も絶えず改善されているので、クラシックエディタを使用する場合は、ブロックエディタに置き換えることを検討してください。
コメントを残す