SWELLで「最近リライトした記事」をサイドバーに表示する方法

下記コードを「子テーマのfunctions.phpに追加」してください。

php

// ショートコードで更新日順の記事リストを表示する関数を定義
function show_modified_posts() {

  // 表示する投稿の条件を設定
  $args = array(
    'post_type' => 'post',          // 通常の投稿を対象に
    'posts_per_page' => 5,          // 最大5件まで表示
    'orderby' => 'modified',        // 更新日の新しい順に並べる
    'order' => 'DESC',              // 降順（新しいものから順に）
    'post_status' => 'publish'      // 公開済みの投稿のみ取得
  );

  // 条件に合う投稿を取得するためのクエリを作成
  $recent_posts = new WP_Query($args);

  // HTMLの出力用変数を用意（ulタグでリスト化）
  $output = '<ul class="modified-posts">';

  // 投稿がある限り繰り返す
  while ($recent_posts->have_posts()) {
    $recent_posts->the_post(); // 次の投稿を取得

    // サムネイル画像を取得（サイズはmedium）
    $thumbnail = get_the_post_thumbnail(get_the_ID(), 'medium');

    // リストアイテムとしてHTMLを組み立て
    $output .= '<li class="shadow-box">';
    $output .= '<a href="' . get_permalink() . '">';       // 投稿のリンクを開始
    $output .= '<div class="post-thumbnail">' . $thumbnail . '</div>'; // サムネイル画像を表示
    $output .= '<div class="title">' . get_the_title() . '</div>'; // タイトルを表示
    $output .= '</a>';
    $output .= '</li>';
  }

  // 投稿データをリセット（他のループへの影響を防ぐ）
  wp_reset_postdata();

  // ulタグを閉じて、最終HTMLを返す
  $output .= '</ul>';
  return $output;
}

// 上記関数をショートコードとして登録
// 投稿やウィジェット内で [modified_posts] と書けば表示される
add_shortcode('modified_posts', 'show_modified_posts');

コード解説

すでにコード内に1行ずつコメントを追加していますが、以下に再度簡単にまとめておきます。

• WP_Query：WordPressの投稿を取得する仕組み
• get_the_post_thumbnail()：アイキャッチ画像を取得
• get_the_title()／get_permalink()：記事タイトルとリンクの取得
• wp_reset_postdata()：クエリ処理の後に元に戻す（お作法）
• add_shortcode()：ショートコードとしてWordPressに登録
• ‘post_status’ => ‘publish’：下書きや予約投稿ではなく「公開済み」のみ取得

以下のCSSコードを、「外観 → カスタマイズ → 追加CSSにペースト」の手順で追加することで、デザインが整い、より見やすくなります。

CSSコード

/* 投稿リスト全体のリセットと余白調整 */
.modified-posts {
  list-style: none; /* 通常のリストマーカーを削除 */
  padding: 0; /* パディングなしでスッキリ表示 */
}

/* 各記事を囲むボックスのデザイン */
.modified-posts li.shadow-box {
  border: 1px solid #ddd; /* 薄いグレーの枠線 */
  border-radius: 8px; /* 角を丸くして柔らかい印象に */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ほのかな影で立体感 */
  padding: 16px; /* 内側の余白をしっかり確保 */
  margin-bottom: 16px; /* 下にスペースを空けて詰まらせない */
  background-color: #fff; /* 背景を白に */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* ホバーアニメーション */
}

/* マウスを載せた時の演出 */
.modified-posts li.shadow-box:hover {
  transform: translateY(-4px); /* 少し浮き上がる */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 影を強調 */
}

/* サムネイル画像の装飾 */
.post-thumbnail img {
  width: 100%; /* 枠いっぱいに表示 */
  border-radius: 8px; /* 画像の角も丸くする */
}

/* タイトルの見た目調整 */
.modified-posts .title {
  font-size: 14px; /* 少し小さめに調整 */
  margin-top: 8px; /* サムネイルとの余白 */
  font-weight: bold; /* 強調表示 */
}

/* タイトルリンクの色を黒にし、ホバーでオレンジに変更 */
.modified-posts a {
  color: #333333; /* 通常時の文字色（黒） */
  text-decoration: none; /* 下線を消す */
}

.modified-posts a:hover {
  color: #ff6600; /* ホバー時にオレンジに変更 */
  text-decoration: underline; /* 下線を追加 */
}

ショートコードを追加して、サイドバーに「最近リライトした記事」を表示します。

手順

ウィジェットへ

WordPress管理画面 → 「外観」→「ウィジェット」へ

手順

カスタムHTMLを追加

「共通サイドバー」や「投稿ページ用サイドバー」など、表示したいエリアを選択し、「カスタムHTML」ウィジェットを追加します。

手順

テキスト入力

以下のように記述：「最近リライトした記事」とテキストを入力します。

手順

ショートコード入力

以下のショートコードを入力し保存します。

[modified_posts]

特徴と文字色を確認してください。

特徴の確認

以下の特徴があるかどうかを確認してください。

• 影付き枠を使用し、柔らかな影でコンテンツを際立たせます
• ホバー時に浮き上がるエフェクトで動きのあるデザインです
• 全体のデザインを枠線や画像の角を丸めて柔らかい印象にしました

画像確認

タイトル色

リンク付きの文字は、デフォルトでは水色で表示されます。この設定はブログ全体に適用されるため、リライト記事のタイトル文字だけ色を変えたい場合は、追加CSSを使って個別に指定する必要があります。追加したCSSは、リライト記事のブログカードのみに反映され、他の部分には影響を与えません。

なお、ブログ全体のリンクカラーやアクセントカラーを変更したい場合は、以下の手順で設定できます。

管理画面 → 外観 → カスタマイズ → 全体設定 → 色設定

ここで「リンクの色」や「アクセントカラー」を変更すれば、全体の配色に反映されます。