MENU
  1. TOP
  2. コラム
  3. swell
  4. SWELLテーマでカスタム投稿の新着記事と人気記事をサイドバーに表示する方法

SWELLテーマでカスタム投稿の新着記事と人気記事をサイドバーに表示する方法

PR
swell
  • URLをコピーしました！

SWELLテーマはシンプルで使いやすいテーマですが、標準機能では「投稿（post）」のみがサイドバーの新着記事や人気記事として扱われます。Custom Post Type UIなどで作成したカスタム投稿は、標準ウィジェットでは表示されないため、別途カスタマイズが必要となります。本記事では、カスタム投稿の新着記事と人気記事をサイドバーに表示する方法を、コード例を交えながら解説します。

目次

SWELLテーマの標準機能とカスタム投稿の制限

SWELLテーマでは、サイドバーに表示される新着記事や人気記事は、標準機能では「投稿（post）」のみが対象となります。つまり、Custom Post Type UIなどで作成したカスタム投稿は、SWELLの標準ウィジェットでは表示されないため、表示させるための工夫が必要です。

サイドバーに新着記事を表示する方法

ショートコードを作成する方法

子テーマの functions.php に以下のコードを追加することで、カスタム投稿（例：「column」）の新着記事を表示するショートコード [latest_columns] を作成できます。

function latest_column_posts() {
    $args = array(
        'post_type'      => 'column',  // カスタム投稿タイプ名を指定
        'posts_per_page' => 3,         // 表示する件数
        'orderby'        => 'date',    // 日付で並び替え
        'order'          => 'DESC'     // 新しい順に表示
    );
    $latest_posts = new WP_Query($args);

    $output = '<div class="sidebar-section sidebar-latest-posts">';
    $output .= '<h2>新着記事</h2>';
    $output .= '<ul>';
    while ($latest_posts->have_posts()) {
        $latest_posts->the_post();
        $output .= '<li style="margin-bottom: 10px;"><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul></div>';

    return $output;
}
add_shortcode('latest_columns', 'latest_column_posts');

コードの詳細解説

  • post_type
    カスタム投稿の種類を指定します。ここでは「column」としていますが、必要に応じて変更してください。
  • posts_per_page
    表示する記事数を設定しています。
  • orderby と order
    最新の記事を上部に表示するために、日付順に並び替えています。
  • HTML出力
    生成したHTMLにより、ウィジェットや固定ページにショートコード [latest_columns] を挿入するだけで表示が可能です。

CSSでデザインを調整する方法

サイドバーに表示される記事リストのデザインを整えるため、子テーマの style.css に以下のCSSを追加してください。これにより、記事間の余白や行間を調整し、読みやすいレイアウトに変更できます。

そのままの場合、記事と記事の行間が狭く感じると思います。

親テーマのCSSに上書きされる場合は、!important を使用して優先度を上げる方法がおすすめです。

.sidebar-section ul li {
    margin-bottom: 10px !important;
    line-height: 1.6;
}

サイドバーに人気記事を表示する方法

WordPress Popular Posts (WPP) プラグインの利用

人気記事の表示には、WordPress Popular Posts (WPP) プラグインが便利です。WPPは、記事のビュー数に基づいて人気記事を並び替えるため、カスタム投稿の人気記事を表示する際にも利用できます。

ショートコード例の解説

以下は、カスタム投稿「column」の人気記事を全期間対象で表示するショートコードの例です。

[wpp post_type='column' limit=3 range='all' order_by='views' stats_views=0]
  • post_type='column'
    カスタム投稿タイプ「column」を指定しています。
  • limit=3
    表示する記事数を3件に制限しています。
  • range='all'
    全期間の人気記事を対象とします。期間を変えたい場合は、daily（今日）、weekly（1週間）、monthly（1ヶ月）などが利用可能です。
  • order_by='views'
    ビュー数に基づいて記事を並び替えます。
  • stats_views=0
    ビュー数そのものは表示せず、並び替えのためにのみ使用します。

このショートコードをサイドバーのウィジェットやテンプレートに挿入することで、カスタム投稿の人気記事が表示されます。

まとめ

SWELLテーマの標準機能では「投稿（post）」のみがサイドバーに表示されるため、Custom Post Type UIなどで作成したカスタム投稿は標準ウィジェットでは表示されません。しかし、以下の方法を利用することで、カスタム投稿の新着記事と人気記事をサイドバーに表示することが可能です。

SWELLテーマでもカスタム投稿の新着記事と人気記事をサイドバーに表示し、サイト全体の利便性を向上させることができます。これにより、ユーザーの利便性やSEO効果の向上が期待できますので、ぜひ試してみてください。

swell
  • URLをコピーしました！

関連記事

目次