当サイトで使用しているテーマ!特徴をチェック

【SWELL】カスタム投稿をトップページの記事スライダーに表示させる方法

当ページのリンクには広告が含まれています。
記事スライダーにカスタム投稿を表示させる
うぇぶろッ!のてっちゃんです!
この記事を書いた人
  • ワードプレス歴10年のWEB屋
  • 中小企業・個人事業主向けのホームページ制作中

WordPressの開設マニュアルを配布中!(無料)

こんな人に

トップページのスライダーに「カスタム投稿」を表示させたい

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を追加するカスタマイズを行っていきます。

IDを表示させる手順
  • ファイルマネージャにアクセスする(FTPでもOK)
  • functionファイルを探す
  • コードを追加する(コピペでOK)

ファイルマネージャにアクセスする

ファイルマネージャにアクセス
エックスサーバーの画面

エックスサーバーの場合は、ファイルマネージャから操作をすると分かりやすいです。

ログインして「ファイル管理」に進むと、編集画面に入ることができます。

functionファイルを探す

functionがある場所
てっちゃん

functionは以下の場所にあります!

ファイルの場所

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

この順番でクリックしていけば辿り着けます。

functionを編集する
てっちゃん

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」と入れました!

IDが表示
IDが表示されたら成功
てっちゃん

保存したら、WordPressに再読み込みしてください!カテゴリの横にIDが表示されていれば成功です!

このIDを入れれば、トップページの記事スライダーに表示できるくね?と思ってやったんですが、もうひと手間加えないと表示させることができませんので、もう少しだけお付き合いくださいね!

ここからは余談ですが、もし複数のタクソノミーにIDを追加したい場合は、カンマ区切りにすればOKです。

例:works-categoryevent-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をダウンロードする

post-slider.phpをダウンロードのダウンロード場所
ファイルの場所

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

上記フォルダ内にあるpost-slider.phpをPC内の分かりやすい場所にダウンロードしてください。

子テーマに必要なフォルダを作る

次に子テーマにフォルダを作成します。

このフォルダは、先ほどダウンロードしたpost-slider.phpを入れるフォルダになります。

「parts」フォルダを作る
フォルダを作る場所

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

てっちゃん

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

topのフォルダを作る
フォルダを作る場所

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

てっちゃん

同じように「parts」というフォルダに「top」というフォルダを作ります!

post-slider.php を子テーマにアップロードする

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は構造が整っているので、手順さえわかればとても扱いやすいテーマです。

自分のサイトに合った投稿タイプをスライダーで自由に使いこなせるようになれば、集客や訴求力も大きくアップします!

てっちゃん

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

LINEで質問受付中

WordPressのギモンをLINEで解決
記事スライダーにカスタム投稿を表示させる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ