SWELLでスライダーを任意の場所に設置する方法

SWELLは、トップページだけ、横に無限に流れるスライダーを設置することができます。

ですが、トップページでも任意の場所に設置はできません（使い勝手が悪い）。

そこで、この記事では、SWELLのスライダーを任意の場所に設置するための修正方法について解説します。

1 SWELLでスライダーを自由に設置するための手順
- 1.1 SWELLのスライダーの仕組み
2 SWELLで任意の場所にスライダーを設置するための修正内容
- 2.1 1）フォルダとファイル構成
- 2.2 2）ファイル作成・修正
3 スライダーのショートコードの指定方法
4 まとめ

SWELLでスライダーを自由に設置するための手順

現時点（2025年5月時点）では、SWELLで好きな場所にスライダーを設置することはできません。

ですが、トップページに「記事スライダー」を表示することができるため、仕組みはあります。

この仕組みを使いつつ、スライダーをショートコードにして、自由に設置できるようにするのが今回の目的です。

できるだけ、SWELLで使っているコード（親テーマファイル）を使って、汎用性を高めています。

動作イメージ

注意事項：投稿ページ、固定ページにも利用できます。ただし、同じ記事内に表示できるスライダーは1つです。

SWELLのスライダーの仕組み

SWELLでは、下記のjavascriptとCSSを使ってスライダーを表示しています。

swiper.min.js
set_post_slider.min.js
swiper.css
post-slider.css

今回の修正スライダーではこれを使いますが、そのまま利用すると「目次」メニューと干渉してしまうため、「loop_by_slider.php」を修正します。

また、javascriptを実行するために必要なパラメーターを「add-swell-vars.js」で追加。

さらに、自由な場所に表示させるために「shortcode-post-slider.php」というファイルで、スライダーをショートコード化しました。

この修正スライダーで利用しているファイルは以下のとおりです。

swiper.min.js（既存ファイルを参照）
set_post_slider.min.js（既存ファイルを参照）
swiper.css（既存ファイルを参照）
post-slider.css（親テーマからコピーして修正）
loop_by_slider.php（親テーマからコピーして修正）
functions.php（既存ファイルを修正）
shortcode-post-slider.php（新規作成）
add-swell-vars.js（新規作成）

SWELLで任意の場所にスライダーを設置するための修正内容

SWELLで任意の場所にスライダーを設置するための修正内容を解説していきます。

1）フォルダとファイル構成

フォルダ構成は以下のとおり。

子テーマフォルダ（swell_child）の中に下記の構成でファイルをアップロードします。

swell_child（フォルダ）
- js（フォルダ）
  - add-swell-vars.js
- parts（フォルダ）
  - post_list（フォルダ）
    - loop_by_slider_local.php
  - top（フォルダ）
    - post_slider.php
- functions.php
- shortcode-post-slider.php

2）ファイル作成・修正

作成するファイル、修正が必要なファイルはここから詳しく解説します。

add-swell-vars.js

子テーマフォルダの中に「jsフォルダ」を作成して、このファイルを保存します。

Object.assign(window.swellVars || {}, {
  psNum: "5",
  psNumSp: "2",
  psSpeed: "1500",
  psDelay: "5000"
});

loop_by_slider.php

まず、子テーマの中に、「partsフォルダとその中にpost_listフォルダ」を作成します。

親テーマから、ファイルをコピーして保存してください。

サーバーアドレス/swell/parts/post_list/loop_by_slider.php
↓
コピーして保存する
↓
サーバーアドレス/swell_child/parts/post_list/loop_by_slider.php

子テーマに保存したファイルを開いて、「h2タグ」を「divタグ」に変更してください。

・・・
<div class="p-postList__title">
	<?=wp_kses( $the_title, SWELL_Theme::$allowed_text_html )?>
</div>
・・・

post_slider.php

子テーマの中に、「partsフォルダとその中にtopフォルダ」を作成します。

親テーマから、ファイルをコピーして保存してください。

サーバーアドレス/swell/parts/top/post_slider.php
↓
コピーして保存する
↓
サーバーアドレス/swell_child/parts/top/post_slider.php

子テーマに保存したファイルを開いて、「$SETTING = SWELL_Theme::get_setting();」の部分を下記ように修正してください。

・・・
if ( ! isset( $SETTING ) ) {
    $SETTING = SWELL_Theme::get_setting();
}
・・・

shortcode-post-slider.php

ファイルに下記のコードを記載して、子テーマフォルダにアップロードしてください。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

function shortcode_post_slider_func( $atts ) {
    // デフォルト値
    $defaults = [
        'ps_pickup_type'    => 'tag',
        'pickup_tag'     => '',
        'pickup_cat'     => '',
        'pickup_title'   => '',
        'exc_tag_id'     => '',
        'ps_orderby'     => 'date',
        'ps_style'       => 'normal',
        'ps_num'         => '3',
        'ps_num_sp'      => '1.5',
        'pickup_pad_lr'  => '',
        'bg_pickup'      => '',
        'ps_bgimg_id'    => '',
        'ps_img_opacity' => '0.5',
        'ps_on_pagination'  => true,
        'ps_on_nav'         => true,
    ];
    $SETTING = shortcode_atts( $defaults, $atts );

    ob_start();
    include get_stylesheet_directory() . '/parts/top/post_slider.php';
    return ob_get_clean();
}
add_shortcode( 'shortcode_post_slider', 'shortcode_post_slider_func' );
?>

functions.php

子テーマのfunctions.phpに下記のコードを追加します。

コードを追加する場所はどこでも大丈夫です（一番最後でOK）。

add_action('init', function() {
    $file = get_stylesheet_directory() . '/shortcode-post-slider.php';
    if ( file_exists($file) ) {
        require_once $file;
    }
});

function enqueue_post_slider_assets() {

    $timestamp = date('YmdHis');

    //インラインCSS
    wp_register_style( 'custom-post-slider-style', false );
    wp_enqueue_style( 'custom-post-slider-style' );
    wp_add_inline_style( 'custom-post-slider-style', ':root {--ps_space:8px;#post_slider .swiper{padding-bottom:24px};}' );

    wp_enqueue_style( 'swiper_css', get_template_directory_uri() .'/build/css/plugins/swiper.css', [], $timestamp );
    wp_enqueue_style( 'post_slider_css', get_template_directory_uri() .'/build/css/modules/parts/post-slider.css', [], $timestamp );

    // swellVars
    wp_enqueue_script('add-swell-vars', get_stylesheet_directory_uri() .'/js/add-swell-vars.js', array(), $timestamp, true);
    // Swiper
    wp_enqueue_script('swell-swiper', get_template_directory_uri() .'/assets/js/plugins/swiper.min.js', array('add-swell-vars'), $timestamp, true);
    // Swiperインスタンス
    wp_enqueue_script('swell-post-slider', get_template_directory_uri() .'/build/js/front/set_post_slider.min.js', array('swell-swiper'), $timestamp, true);
}
add_action( 'wp_enqueue_scripts', 'enqueue_post_slider_assets' );

これで設定は完了です。

スライダーのショートコードの指定方法

修正スライダーを表示するためのショートコードのフォーマットは以下のとおり。

[shortcode_post_slider ps_pickup_type='' pickup_tag='' pickup_title='' exc_tag_id='' ps_orderby='']

例：スラッグ名がnewsのタグを取得してランダムに表示
[shortcode_post_slider ps_pickup_type='tag' pickup_tag='news' ps_orderby='rand']

指定できるパラメーターはこちら。

パラメーター	パラメーターに設定する内容	パラメーターの意味
ps_pickup_type	・cat ・tag	カテゴリーかタグを指定する
pickup_cat	カテゴリーのIDを指定	ps_pickup_typeでcatを指定した場合に指定する
pickup_tag	タグのスラッグを指定	ps_pickup_typeでtagを指定した場合に指定する
pickup_title	任意テキスト	スライダーのタイトルを表示する
exc_tag_id	タグのID	表示から除外したいタグのIDを指定する（カンマで複数指定可）
ps_orderby	・rand（ランダム）・date（投稿日）・modified（更新日）・meta_value_num（人気順）	記事の表示方法を指定する