【SWELL】アイキャッチ付きブログカードをサイドバーに設置・カスタマイズ！

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

php

function simple_posts_with_shadow_shortcode($atts) {
    $atts = shortcode_atts([
        'ids' => '', // 記事IDをカンマ区切りで指定
    ], $atts, 'simple_posts_shadow');

    if (empty($atts['ids'])) {
        return '記事IDが指定されていません。';
    }

    $ids = explode(',', $atts['ids']);
    $args = [
        'post__in' => $ids,
        'orderby' => 'post__in', // 指定された順序で並び替え
    ];

    $query = new WP_Query($args);
    $output = '';

    if ($query->have_posts()) {
        $output .= '<ul class="simple-posts">';
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li class="shadow-box">';
            
            // 最大サイズのサムネイルを表示
            if (has_post_thumbnail()) {
                $output .= '<div class="post-thumbnail">' . get_the_post_thumbnail(null, 'full') . '</div>';
            }

            // 記事タイトル表示
            $output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';

            $output .= '</li>';
        }
        $output .= '</ul>';
    } else {
        $output = '記事が見つかりませんでした。';
    }

    wp_reset_postdata();
    return $output;
}
add_shortcode('simple_posts_shadow', 'simple_posts_with_shadow_shortcode');

ここにペーストしてください。

以下のコードをSWELLの「カスタマイズ」→「追加CSS」に追加します。

CSS

.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; /* ホバー時のアニメーション */
}

.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; /* 画像の角を丸くする */
}

ここにペーストしてください。

使用方法：ウィジェットで下記のショートコードをペーストします。
123,456,789の部分には、表示したい記事のIDを入れてください。

html

[simple_posts_shadow ids="123,456,789"]

ここにペーストしてください。