SWELLの記事スライダーを記事・固定ページなどの下層ページに表示するカスタマイズ

2021 11/10

2021年11月10日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

SWELLの記事スライダーを記事・固定ページなどの下層ページに表示するカスタマイズ

初心者

記事スライダーって、トップページにしか表示されないの？
固定ページや投稿記事にも表示する方法ってないの？

そんな人向けにSWELLの記事スライダーを記事と固定ページで表示するカスタマイズ方法をサンプルコード付きで紹介します。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【基礎知識】記事スライダーって何？

本記事で紹介する記事スライダーは、SWELLのトップページに表示される以下のパーツのことです。

かんた

メインビジュアルの下に表示され、一定時間ごとに自動的にスライドするオシャレ度の高いパーツです！

記事スライダーは「カスタマイザー」→「トップページ」→「記事スライダー」から設定できるSWELL固有のオプションです。設定画面で「設置する」を選択した場合のみ、トップページに表示されます。

この記事スライダーは標準仕様でトップページ以外には表示されません。

下層ページで記事スライダーを表示するには独自カスタマイズが必須です。

記事スライダーを表示するカスタマイズの流れと注意点

記事スライダーをトップページ以外にも表示する作業の流れです。

全体の流れ

テーマのテンプレートファイルにコードを追加する
CSSコードを追加する

かんた

本カスタマイズはテーマ内のテンプレートファイルにコードを追加します。マウス操作でポチポチするだけの作業ではありません。

テーマファイルを編集する際、誤作業でサイトが表示されなくなるリスクがあります。

カスタマイズの仕組み

記事スライダーはテーマ内の以下パーツで出力しています。

parts/top/post_slider.php

このパーツをテンプレートの好きな場所に追加すると記事スライダーが表示されます。

かんた

テンプレートファイル上にpost_slider.phpを呼び出すコードを設置すると記事スライダーが表示されます。

投稿記事に記事スライダーを表示するカスタマイズ

今回は上の図のように、投稿ページの「パンくず」と「コンテツエリア」の間に記事スライダーを表示させます。

サンプルコード

<?php if (is_single()){
get_template_part('parts/top/post_slider');
}	
?>

コードはif文で「投稿（post）ならスライダーのパーツ（post_slider）を呼び出す」というシンプルなものです。

かんた

標準投稿だけでなく、特定のカスタム投稿でも記事スライダーを表示させたい場合は次のサンプルコードを使いましょう。

サンプルコード

<?php if (is_singular('info')){
get_template_part('parts/top/post_slider');
}	
?>

カスタム投稿「info」の記事ページで表示する場合のサンプルです。

サンプルコードをheader.php内に記述します。

コードを追加するのは、「ぱんくず」と「＃content」の間です。

	// ぱんくず
	if ( 'top' === $SETTING['pos_breadcrumb'] ) SWELL_FUNC::get_parts( 'parts/breadcrumb' );

?>
<?php if (is_single()){
get_template_part('parts/top/post_slider');
}	
?>

<div id="content" class="l-content l-container" <?php SWELL_FUNC::content_attrs(); ?>>

固定ページに記事スライダーを表示するカスタマイズ

記事スライダーを固定ぺージに表示する場合のカスタマイズを紹介します。投稿記事と同じく「パンくず」と「コンテツエリア」の間に記事スライダーを表示させます。

サンプルコード

<?php if (is_page()){
get_template_part('parts/top/post_slider');
}	
?>

サンプルコードを追加する場所は記事ページと場合と同じくheader.phpです。

記事・固定ページに記事スライダーを表示するカスタマイズ

記事、固定ページの両方に記事スライダーを表示する場合のコードです。

サンプルコード

<?php if (is_singular()){
get_template_part('parts/top/post_slider');
}	
?>

かんた

厳密には固定ページ、標準投稿（posts）の投稿ページ、カスタム投稿の投稿ページ上で表示されます。

CSSで記事スライダーを調整

テーマに記事スライダー呼び出しコードを追加したらCSSコードを追加します。

本来記事スライダーはトップページのみに表示されます。そのため、記事スライダーの一部CSSはトップページでしか読み込まれません。

下層ページの記事スライダー用にCSSコードを追加しないと、上の図のようにスライド間に余白が表示されません。

サンプルコード

.p-postSlider .p-postList__item {
    padding:20px 8px 36px 8px;
}

.p-postSlider.-ps-style-normal .p-postList__body {
    margin-top: .75em;
}

.p-postSlider .swiper-pagination-bullet {
    background: currentColor;
}

marginやpaddingは自分好みになるよう自由に数字を変更してください。

CSSはスライダーを表示させるページのみで読み込むようセレクタを工夫して設定しましょう。

投稿ページをセレクタに指定したサンプルコード

.single .p-postSlider .p-postList__item {
    padding:20px 8px 36px 8px;
}

.single .p-postSlider.-ps-style-normal .p-postList__body {
    margin-top: .75em;
}

.single .p-postSlider .swiper-pagination-bullet {
    color: inherit;
    background: currentColor;
}

固定ページをセレクタに指定したサンプルコード

.page .p-postSlider .p-postList__item {
    padding:20px 8px 36px 8px;
}

.page .p-postSlider.-ps-style-normal .p-postList__body {
    margin-top: .75em;
}

.page .p-postSlider .swiper-pagination-bullet {
    color: inherit;
    background: currentColor;
}