1. >
  2. >
  3. 投稿新着記事をサイドバーにNewマーク付きで出力

投稿新着記事をサイドバーにNewマーク付きで出力

サムネイルのイメージ
PHP

サイドバーにサムネイル付きの新着記事を入れたい

テーマによってカスタマイズが少なくて、思うような表示ができないとき、直接書いてしまったほうが早いです。
テーマやプラグインのアップデートの影響が少ないので、個人的におすすめです。

投稿新着記事をサイドバーに追加したイメージ

sideber.phpに追加します。フッターなどに応用しても問題ありません。

※投稿記事のみの対応です。
サムネイル付き投稿記事のイメージ

5記事出力しています。
サムネイルのサイズなどはcssで調整可能ですので、お好みで替えてください。

サイドバーに追加するソース

「posts_per_page => 5」となっているところが記事数です。ここで変更してください。

新着記事を追加する場所のイメージ

サイドバーのdiv内に入れるとレスポンシブで一緒に可変するので楽ですよ。
新着記事の追加イメージ

新着記事一覧用のcss

サムネイルとタイトルのサイズをwidth:calcで指定するとレスポンシブで崩れないです。
今回はサムネイルとタイトルの比率を余白の兼ね合いで2:7にしています。

新着記事に「NEW」マークを付けたい

content.phpの見出しを読んでいるh2やh3の直前に入れると、指定した記事数だけに「NEW」マークがつきます。
カテゴリーページや、TOPページに表示されるイメージです。
上記サイドバーで呼び出した新着記事にも使えます。次に紹介しているのでご確認ください。
newマークのイメージ

content.phpに追加

追加するソースはこちら
「limit=数字」この数字で表示される記事数を変更できます。
「echo ‘New’」New以外にも「新着」などサイトに合わせて変更してください。

追加する場所のイメージ

content.phpの見出し直前がベスト。
追加する場所

newタグのcss

今回の装飾は、背景色を入れただけです。参考に載せておきますね。

新着サイドバーにNEWマークを入れてみた

content.phpに入れるのと同様に、titleで呼び出している見出しの直前に「newマーク」のソースを追加したらこんな感じになります。
flexにしているので、newマークはblockにするときれいに収まります。
サイドバーにもnewマークを入れる

カテゴリー: PHP

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る