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

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

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

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

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

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

SWELL記事スライダー
かんた

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

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

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

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

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

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

全体の流れ

  1. テーマのテンプレートファイルにコードを追加する
  2. 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なしのスライダー

下層ページの記事スライダー用に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;
}

まとめ

WordPress有料テーマSWELLの下層ページに記事スライダーを設置する方法を解説しました。

ちなみに実際に作成したサンプルサイトです↓

スライダーを下層ページに設置したデモサイト

本記事ではパンくずとコンテンツエリアの間に記事スライダーを表示しました。フッターや任意の場所に記事スライダーを設置してみてください!

注意

本記記事を執筆時に利用可能なSWELLは最新バージョン(2.3.9)利用しました。
異なるバージョンではファイル構成が異なる場合があり、今回紹介した方法で記事スライダーが表示されないことあります。

よかったらシェアしてね!
  • URLをコピーしました!
目次