ハシビィくんSWELLの記事スライダーをトップページ以外で使いたいっす！
カピーさんちょっとしたカスタマイズで好きなページに表示させることができるぞ！
本記事はSWELLに元々備わっているSwiperを用いて、自由に選んだ記事をスライダー表示でするカスタマイズになります。
記事スライダーはSWELLの機能として用意されていますが、トップページのメインビジュアル下にしか設置できないなど自由度は低めとなっております。
コーポレートサイトであれば、実績などをスライダーで表示させたいや取材記事の表示などの活用方法が考えられます。
記事スライダーを表示させるための共通作業
本記事では、「投稿記事」と「固定ページ」のそれぞれに記事スライダーを表示させるカスタマイズを紹介いたします。
このそれぞれのページに表示させるカスタマイズには共通で行う必要作業があります。
親テーマ「SWELL」からheader.phpのファイルをコピーして子テーマ「SWELL CHILD」にペースト（追加）して下さい。
今回はheader.phpを例としてカスタマイズする流れを説明していますが、表示させたい箇所に応じたファイルに差し替えてご対応をお願いします。
SWELL利用中でプラグインやJSの内容によっては、スライダーが動かない場合がございます。
その際には、function.phpに下記コードを追記して下さい。
// SWELLの記事スライダー初期化用の変数
wp_register_script( 'swell-post-slider-vars', '', [], null, true );
wp_enqueue_script( 'swell-post-slider-vars' );
wp_add_inline_script(
'swell-post-slider-vars',
'Object.assign(window.swellVars || {}, {
psNum: "3",
psNumSp: "1.5",
psSpeed: "1500",
psDelay: "5000"
});',
'before'
);
// 記事スライダー初期化JS
if ( file_exists( $theme_dir . '/build/js/front/set_post_slider.min.js' ) ) {
wp_enqueue_script(
'swell-post-slider-init-js',
$theme_uri . '/build/js/front/set_post_slider.min.js',
[ 'swell-post-slider-swiper-js', 'swell-post-slider-vars' ],
filemtime( $theme_dir . '/build/js/front/set_post_slider.min.js' ),
true
);
}
}, 20 );また投稿記事や固定ページに貼り付けた際に、記事スライダーのサイズが大きく表示される場合があります。その際には、子テーマのstyle.cssや「カスタマイズ→追加CSS」に追記する必要があります。
/* =========================
SWELL 記事スライダー調整
投稿記事ページ用
========================= */
.single .p-postSlider .p-postList__item {
padding: 20px 8px 36px;
}
.single .p-postSlider.-ps-style-normal .p-postList__body {
margin-top: .75em;
}
.single .p-postSlider .swiper-pagination-bullet {
color: inherit;
background: currentColor;
}もちろん見せ方を調整したい場合は、JS・CSSを調整して自由にお使いください。
投稿記事に記事スライダーを表示させるカスタマイズ
上の図のように、投稿ページの「パンくずリスト」と「コンテンツエリア」の間に記事スライダーが差し込まれる形になります。
<?php if (is_single()){
get_template_part('parts/top/post_slider');
}
?>実際に差し込むと以下のようになります。
// ぱんくず
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です。
実案件での活用
実案件で対応した際には、投稿ページにのみ記事スライドを表示させるというものでした。
記事スライドとして表示させた内容は、「よくある質問」「主力商品のレビュー記事」など元々PVを稼いでいた記事+ユーザーに見せたい（誘導させたい）記事を登録していました。
カピーさんフッターなど任意の場所にも設定は可能だぞ！ただ位置によっては効果的ではないので注意だ！
まとめ：SWELL おすすめの記事をスライダーで自由に表示するカスタマイズ
スライダーでの表示はコンパクトに設置することができ、ページ全体が間延びすることを抑えることにつながります。
スマホでの閲覧でも縦に伸びすぎないので、操作性・視認性を確保した方法になります。
SWELL利用であれば、多くの使い道がありますので、ぜひお試しを。
- SWELL標準の記事スライダーは、カスタマイズすることでトップページ以外にも表示できます。
- 投稿ページ・固定ページごとに条件分岐を使えば、必要なページだけにスライダーを設置できます。
- おすすめ記事・実績・レビュー記事などを表示することで、サイト内回遊や導線改善に活用できます。
コメント（承認制）