
トップページのスライダーに「カスタム投稿」を表示させたい
SWELLで作ったサイトで、「カスタム投稿をトップページのスライダーに表示させたい」と思ったことはありませんか?

でも、困ったことにSWELLの初期状態では、「通常投稿」と「投稿カテゴリ」しか対象になっていないので、表示させることができません…。
中には私のようにカスタム投稿で作った制作事例を作って、それをトップページの記事スライダーに表示させたい!なんて人もいると思います。
なので、カスタム投稿でも表示できるようにしてみました!
この記事では、特定のカスタム投稿+カスタムタクソノミーの投稿をスライダーに表示させる方法をステップ形式でわかりやすく解説します。

コードに拒否感がある人でも分かりやすい内容にしています!コピペで試してみてくださいね!
カスタム投稿をトップページの記事スライダーに表示させる手順



まずは、どのような手順でカスタム投稿を記事スライダーに表示させるのか大まかな流れをみておきましょう!
- カスタム投稿・タクソノミーを作成する
- カスタムタクソノミーにIDを表示させる
- カスタム投稿を表示させるコードを追加する
それでは、この流れをもとに解説していきます。
カスタム投稿・タクソノミーを作成する
SWELLで「制作事例」や「実績紹介」などの専用投稿タイプを使いたい場合、プラグインなのでカスタム投稿を作りましょう。
カスタム投稿を作るプラグインはいくつかありますが、一番手っ取り早いのは「Custom Post Type UI」ではないかと思います。



直観的に設定できるし、日本語対応しています!
詳しい解説は別記事で紹介しますが、作り方はこんな感じ。
- 「Custom Post Type UI」のプラグインをインストール・有効化
- 投稿タイプのスラッグを決める
- 投稿タイプのラベルを決める
制作事例を作る場合は、スラッグは「works」で投稿タイプのラベルは「制作事例」にすると分かりやすい。
ここは、どんなカスタム投稿を作るか変わるので、お好みで設定してください。
また、後でスラッグ名が必要になるので、覚えておいてください。(確認する方法も教えます。)
次にやることは、タクソノミーの追加。
- タクソノミーの追加から進む
- タクソノミーのスラッグを決める
- タクソノミーのラベルを決める
- 関連付けする投稿タイプを決める
私の場合は、製作事例というカスタム投稿を作ったので、
タクソノミーのスラッグは「works-category」、
ラベルは「カテゴリー」、
関連付けする投稿タイプは「制作事例」にチェックマーク、
このようにしました!



タクソノミーとは、投稿のカテゴリーのようなものと覚えておいて!
プラグインを使いたくない場合
プラグインを使いたくない人は、functions.php
に以下のコードを追加することで対応可能です。
コードを確認する
// カスタム投稿タイプ「works」
function register_custom_post_type() {
register_post_type('works',
[
'labels' => [
'name' => '制作事例',
'singular_name' => '制作事例',
],
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-portfolio',
'supports' => ['title', 'editor', 'thumbnail'],
'show_in_rest' => true,
]
);
}
add_action('init', 'register_custom_post_type');
// カスタムタクソノミー「works-category」
function register_custom_taxonomy() {
register_taxonomy(
'works-category',
'works',
[
'label' => 'カテゴリー',
'hierarchical' => true,
'show_in_rest' => true,
]
);
}
add_action('init', 'register_custom_taxonomy');



よく分からない場合は、プラグインでやろう!
カスタムタクソノミーにIDを表示させる
カスタムタクソノミーを確認すると、通常のカテゴリーと異なりIDが表示されていませんよね。
でも、SWELLの記事スライダーに表示させるには、カスタムタクソノミー(カテゴリー)のIDを指定する必要があります。
なので、次は先ほど作ったタクソノミー(カテゴリー)一覧にIDを追加するカスタマイズを行っていきます。
- ファイルマネージャにアクセスする(FTPでもOK)
- functionファイルを探す
- コードを追加する(コピペでOK)
ファイルマネージャにアクセスする


エックスサーバーの場合は、ファイルマネージャから操作をすると分かりやすいです。
ログインして「ファイル管理」に進むと、編集画面に入ることができます。
functionファイルを探す





functionは以下の場所にあります!
「ドメイン名」 → 「public_html」 → 「wp-content」 → 「themes」 → 「swell_child」 → 「functions.php」
この順番でクリックしていけば辿り着けます。





functionを選択したら、上にある「編集」をクリックしてください!
コードを追加する


編集画面まで来たら、以下のコードを一番下に追加してください。
// タクソノミー一覧にID列を追加する
function add_taxonomy_column_id($columns) {
$id_column = ['term_id' => 'ID'];
$new_columns = [];
foreach ($columns as $key => $value) {
$new_columns[$key] = $value;
if ( $key === 'name' ) {
$new_columns += $id_column; // 「名前」のすぐ後ろにIDを追加
}
}
return $new_columns;
}
function add_taxonomy_column_id_content($content, $column_name, $term_id) {
if ( $column_name === 'term_id' ) {
return $term_id;
}
return $content;
}
function taxonomy_columns_register() {
$taxonomies = ['●●●●●']; // カスタムタクソノミーのスラッグ名を指定
foreach ( $taxonomies as $taxonomy ) {
add_filter("manage_edit-{$taxonomy}_columns", 'add_taxonomy_column_id');
add_filter("manage_{$taxonomy}_custom_column", 'add_taxonomy_column_id_content', 10, 3);
}
}
add_action('admin_init', 'taxonomy_columns_register');
24行目の「●●●●●」の部分は、あなたが指定したカスタムタクソノミーのスラッグを入れてください。
私の場合は、制作事例のカテゴリーを作りたかったので、「works-category」と入れました!





保存したら、WordPressに再読み込みしてください!カテゴリの横にIDが表示されていれば成功です!
ここからは余談ですが、もし複数のタクソノミーにIDを追加したい場合は、カンマ区切りにすればOKです。
例:works-category
と event-category
にIDを表示させる場合
$taxonomies = ['works-category', 'event-category'];
カスタム投稿を表示させるコードを追加する
タクソノミーのIDが確認できるようになったら、いよいよ本題です。
SWELLでは、トップページの記事スライダーのレイアウトは post-slider.php
というテンプレートファイルで制御されています。
このファイルを子テーマ側にコピーし、カスタム投稿・タクソノミーに対応するコードに書き換えることで、SWELL標準のスライダーにオリジナル投稿を表示できるようになります。
というわけで、SWELLのトップページにカスタム投稿を表示させるために必要な設定を行っていきます。



ムズかしそうに聞こえますが、やってみると案外できます!
- SWELL本体から post-slider.phpをダウンロードする
- 子テーマにに必要なフォルダを作る
- post-slider.php を子テーマにアップロードする
- コードを修正してカスタム投稿に対応させる
SWELL本体から post-slider.phpをダウンロードする


「ドメイン名」 → 「public_html」 → 「wp-content」 → 「themes」 → 「swell」 → 「parts」 → 「top」
上記フォルダ内にあるpost-slider.php
をPC内の分かりやすい場所にダウンロードしてください。
子テーマに必要なフォルダを作る
次に子テーマにフォルダを作成します。
このフォルダは、先ほどダウンロードしたpost-slider.php
を入れるフォルダになります。


「ドメイン名」 → 「public_html」 → 「wp-content」 → 「themes」 → 「swell_child」



新規フォルダをクリックして、「parts」というフォルダを作ってください!


「ドメイン名」 → 「public_html」 → 「wp-content」 → 「themes」 → 「swell_child」 → 「parts」



同じように「parts」というフォルダに「top」というフォルダを作ります!
post-slider.php を子テーマにアップロードする


作成したフォルダ内に、先ほどダウンロードした post-slider.php
をアップロードします。



アップロードする際にファイル名の文字コードを選択できますが、デフォルトのUTF-8でOK!
コードを修正してカスタム投稿に対応させる


最後に、アップロードしたファイルを編集して、カスタム投稿&カスタムタクソノミーに対応するように修正していきます。



以下のコードをコピペすればOK!(スラッグだけ変更してね)
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
$SETTING = SWELL_Theme::get_setting();
$q_args = [
'post_type' => ['post', '●●●●●'], // ← カスタム投稿 works を対象に追加
'post_status' => 'publish',
'no_found_rows' => true,
'posts_per_page' => 8,
'ignore_sticky_posts' => true,
];
// 除外タグ(投稿のみ対象)
$exc_tag = explode( ',', $SETTING['exc_tag_id'] );
if ( ! empty( $exc_tag ) ) {
$q_args['tag__not_in'] = $exc_tag;
}
// 並び順
$the_orderby = $SETTING['ps_orderby'];
if ( 'meta_value_num' === $the_orderby ) {
$q_args['orderby'] = 'meta_value_num';
$q_args['meta_key'] = SWELL_CT_KEY;
$q_args['order'] = 'DESC';
} else {
$q_args['orderby'] = $the_orderby;
}
if ( 'tag' === $SETTING['ps_pickup_type'] ) {
// タグを指定(投稿のみ)
$pickup_tag = $SETTING['pickup_tag'];
if ( ! empty( $pickup_tag ) ) {
$q_args['tag'] = $pickup_tag;
}
} else {
// カテゴリー or カスタムタクソノミーを指定
$pickup_cat = $SETTING['pickup_cat'];
if ( ! empty( $pickup_cat ) ) {
$q_args['tax_query'] = [
'relation' => 'OR',
[
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
[
'taxonomy' => '▼▼▼▼▼', // ← ここを変更!
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
];
}
}
// ピックアップタイトル
$pickup_title = $SETTING['pickup_title'];
// スライダークラス
$slider_class = ( 'normal' === $SETTING['ps_style'] ) ? '-ps-style-normal' : '-ps-style-img';
// 表示枚数
$slide_num_pc = $SETTING['ps_num'];
$slide_num_sp = $SETTING['ps_num_sp'];
$slider_class .= ' -num-pc-' . str_replace( '.', '_', $slide_num_pc );
$slider_class .= ' -num-sp-' . str_replace( '.', '_', $slide_num_sp );
$slide_num_pc = (float) $slide_num_pc;
$slide_num_sp = (float) $slide_num_sp;
if ( $slide_num_pc <= 2 ) {
$slider_class .= ' -fz-pc-l';
};
if ( $slide_num_sp >= 2 ) {
$slider_class .= ' -fz-sp-s';
}
// インナークラス
$inner_class = ( 'wide' === $SETTING['pickup_pad_lr'] ) ? ' l-container' : '';
// サムネイルサイズ
$pc_size = round( 100 / $slide_num_pc, 1 ) . 'vw';
$sp_size = round( 100 / $slide_num_sp, 1 ) . 'vw';
$thumb_sizes = '(min-width: 960px) ' . $pc_size . ', ' . $sp_size;
// 背景画像
$bgimg = '';
$bgimg_url = SWELL_Theme::get_setting( 'bg_pickup' );
$bgimg_id = SWELL_Theme::get_setting( 'ps_bgimg_id' );
$style = 'opacity: ' . $SETTING['ps_img_opacity'] . ';';
if ( $bgimg_id ) {
$bgimg = SWELL_Theme::get_image( $bgimg_id, [
'class' => 'p-postSlider__imgLayer c-filterLayer__img u-obf-cover',
'alt' => '',
'loading' => apply_filters( 'swell_post_slider_lazy_off', true ) ? 'none' : SWELL_Theme::$lazy_type,
'style' => $style,
'decoding' => 'async',
'aria-hidden' => 'true',
]);
} elseif ( $bgimg_url ) {
$bgimg = '<img src="' . esc_attr( $bgimg_url ) . '" class="p-postSlider__imgLayer c-filterLayer__img u-obf-cover" decoding="async" style="' . esc_attr( $style ) . '">';
}
?>
<div id="post_slider" class="p-postSlider c-filterLayer <?=esc_attr( $slider_class )?>">
<?php echo $bgimg; ?>
<div class="p-postSlider__inner<?=esc_attr( $inner_class )?>">
<?php if ( $pickup_title ) : ?>
<div class="p-postSlider__title">
<?=wp_kses( $SETTING['pickup_title'], SWELL_Theme::$allowed_text_html )?>
</div>
<?php endif; ?>
<div class="p-postSlider__swiper swiper">
<?php
SWELL_Theme::get_parts( 'parts/post_list/loop_by_slider', [
'query_args' => $q_args,
'thumb_sizes' => $thumb_sizes,
] );
?>
<?php if ( $SETTING['ps_on_pagination'] ) : ?>
<div class="swiper-pagination"></div>
<?php endif; ?>
<?php if ( $SETTING['ps_on_nav'] ) : ?>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="<?=esc_attr__( '前のスライド', 'swell' )?>"></div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="<?=esc_attr__( '次のスライド', 'swell' )?>"></div>
<?php endif; ?>
</div>
</div>
</div>
- 「●●●●●」→カスタム投稿のスラッグに変更(例:works)
- 「▼▼▼▼▼」→カスタムタクソノミーのスラッグに変更(例:works-category)
上記コードを貼り付けたら完成です。
カスタムタクソノミーのIDを「ピックアップ対象のカテゴリーID」に入れて確認してみましょう!





手順通りにしていければ大丈夫です!
表示条件に関する部分だけ欲しい方はこちら
コードを確認する
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
$SETTING = SWELL_Theme::get_setting();
$q_args = [
'post_type' => ['post', 'works'], // ← カスタム投稿 "works" を追加
'post_status' => 'publish',
'no_found_rows' => true,
'posts_per_page' => 8,
'ignore_sticky_posts' => true,
];
// 並び順
$the_orderby = $SETTING['ps_orderby'];
if ( 'meta_value_num' === $the_orderby ) {
$q_args['orderby'] = 'meta_value_num';
$q_args['meta_key'] = SWELL_CT_KEY;
$q_args['order'] = 'DESC';
} else {
$q_args['orderby'] = $the_orderby;
}
// ピックアップタイプが「タグ」か「カテゴリ」かで分岐
if ( 'tag' === $SETTING['ps_pickup_type'] ) {
$pickup_tag = $SETTING['pickup_tag'];
if ( ! empty( $pickup_tag ) ) {
$q_args['tag'] = $pickup_tag;
}
} else {
$pickup_cat = $SETTING['pickup_cat'];
if ( ! empty( $pickup_cat ) ) {
$q_args['tax_query'] = [
'relation' => 'OR',
[
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
[
'taxonomy' => 'works-category', // ← カスタムタクソノミーに対応
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
];
}
}
表示されない場合の確認ポイント&おまけ
記事されない場合は、
- ファイルパスが間違っていないか?
- カスタム投稿・タクソノミーのスラッグ名は正しいか?
- 管理画面で指定したカテゴリIDは合っているか?
この辺りが間違いやすいポイントなので、確認してみてください!



私も最初はフォルダのファイル名が間違っていて、反映されませんでしたw
おまけ:投稿タイプやタクソノミーを増やしたい場合



さらにカスタマイズしたい人向けです!
複数のタクソノミーに対応させたい場合
$pickup_cat = $SETTING['pickup_cat'];
if ( ! empty( $pickup_cat ) ) {
$q_args['tax_query'] = [
'relation' => 'OR', // どちらかに一致すればOK
[
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
[
'taxonomy' => 'works-category',
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
// ↓ さらに他のカスタムタクソノミーも追加可能
[
'taxonomy' => 'news-category',
'field' => 'term_id',
'terms' => [(int) $pickup_cat],
],
];
}



投稿や制作、お知らせなども入れたい方は、このコードを参考にしてね!
まとめ
SWELLのトップページに、カスタム投稿を記事スライダーとして表示させるには、少し工夫が必要です。
SWELLの標準機能では通常の投稿とカテゴリしか対象になっていませんが、子テーマに post-slider.php
を設置し、コードを編集することで、制作事例やお知らせなど、任意のカスタム投稿も自由に表示できるようになります。
この記事では、
- カスタム投稿・カスタムタクソノミーの作成方法
- 管理画面にIDを表示させるためのカスタマイズ
- SWELLのテンプレート構造の理解とpost-slider.phpの活用
- 実際の表示条件をコントロールするコードの修正方法
といった流れで、初心者の方でも迷わず実装できるよう丁寧に解説しました。
WordPressのテーマカスタマイズは「難しそう」と思われがちですが、SWELLは構造が整っているので、手順さえわかればとても扱いやすいテーマです。
自分のサイトに合った投稿タイプをスライダーで自由に使いこなせるようになれば、集客や訴求力も大きくアップします!



ぜひ、あなたのサイトでも試してみてください!

