Multiple swell wp theme’s slider

2023-09-122023-09-14

このサイトのテーマは swell を使用している。

トップページのヘッダーにあるスライダーはカッコいいのだが、固定でここにしか設置できない。

カスタム投稿タイプやカスタムタクソノミーにも非対応で、標準の投稿とカテゴリにしか対応できない。

swiper.js を直接実装してもいいんだけど、せっかく swell テーマの美しい表示やカテゴリラベルや更新日表示などがあるから、それを流用したいし、サイト全体をそれに統一したい。

そこで子テーマ側で以下のように改良した。

好きな場所に表示できる
複数表示できる
カスタム投稿タイプにも対応
カスタムタクソノミーにも対応
トップページのスライダーの表示スタイルやカテゴリラベル等がそのまま適用される
トップページのスライダーはそのまま使える

という感じで、概ね満足する表示になった。無理矢理感は否めないが・・・。

※ これを適用したのは制作依頼を受けた他サイトですが、まだ制作中のため公開は控えます。サンプル無くてごめんんなさい。

※ ほんとはフックを使ってカスタマイズしたい。

他にマルチスライダー化の方法はある？

ちなみにトップページ固定のスライダーは、フックを使ってカスタム投稿を表示できるそうだ。

SWELLカスタマイズ｜TOPページの記事スライダーにカスタム投稿を表示する | WordPressカスタマイズ
https://vhcinfo.org/swell-1338/

だけどこれはマルチスライダーではない。それとカスタムタクソノミーには非対応になる。

私が行ったマルチスライダー化のためのカスタマイズは以下の通り。

対応バージョン

swell ver2.7.8.4

前提メモ

swell はスライダー実装に swiper.js ライブラリを利用している。
トップページのテンプレートは tmp/front.php。子テーマに front.php が無い場合を想定しているのだろうか？ちょっとよくわからない。フロントページの設定次第ではこれは別ファイルになるのかもしれない。
カスタム投稿タイプ： session
カスタムタクソノミー： genre

スライダーの呼び出し順やテンプレートの解析

header を覗いてみると、

header.php (line:49)

// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
   $cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
   SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}

ここで SWELL_Theme::get_parts() 関数によって swell/parts/top/post_slider.php が読み込まれている。
get_parts() メソッドは、include や get_template_part でも代用できそうな内容だな。
↓
読み込み先の post_slider.php の中身を見てみると、

ここで各種設定をした上で、
swiper用の要素を出力し、
swell/parts/post_list/loop_by_slider.php を読み込んで、
この中で記事ループ

させている。

具体的には、

SWELL_Theme::get_parts( 'parts/post_list/loop_by_slider', [
   'query_args'  => $q_args,
   'thumb_sizes' => $thumb_sizes,
]);

query_args がいわゆる WP の Query 条件だ。post_type とか order_by とか諸々を設定するアレね。
ここで設定した post_type 等は、そのまま loop_by_slider.php へ受け渡される。

さらにその中で、カテゴリをサムネイル上でラベル的に表示しているのが、 list_parts.php だ。

というわけで、

swell/parts/top/post_slider.php
swell/parts/post_list/loop_by_slider.php
swell/lib/pluggable.php
swell/lib/pluggable_parts/list_parts.ph

この4つのファイルが肝だ。

他に、

functions.php
style.scss

も編集する。

SWELL_Theme クラスの get_parts() 関数を見ると、スライダーに関しては大したことをしていなそうだ。これを使わずに get_template_part() や include() をしてもいいんだが、一応 get_parts() を使ってみることにする。

呼び出し先へ変数の受け渡しは、include 的に共有されている場合と、get_parts() の第２引数で渡して $variables で受け取る、という形の２通りがある。

swiper の設定はどこでやってるのか？と探してみると、set_post_slider.min.js ファイルが swiper の config のようだ。
swell/build/js/front/set_post_slider.min.js

ここまで解析したら、マルチスライダー化を試みる。

方針

post_slider.php を子テーマにコピーして修正する。
loop_by_slider.php も子テーマにコピーして修正する。
list_parts.php も子テーマにコピーして修正する。
外部テンプレート読み込みは SWELL_Theme::get_part() を使う。
呼び出し先に渡したい変数は、get_part() の第二引数に指定。
呼び出し先では、$variable として利用可能。
['query_args'=>$q_args, 'thumb_sizes'=>$thumb_size] のように配列で渡した場合は、$variable['query_args'] などと呼び出せる。

注意点

間違っても、親テンプレート swell のファイルは編集してはいけない。それでも間違って編集しちゃうんだが。

マルチスライダー化実際の手順

# post_slider.php を子テーマへコピー
mkdir -p swell_child/parts/top
cp swell/parts/top/post_slider.php swell_child/parts/top/post_slider.php
# loop_by_slider.php を子テーマへコピー
mkdir -p swell_child/parts/post_list
cp swell/parts/post_list/loop_by_slider.php swell_childparts/post_list/loop_by_slider.php
# list_parts.php を子テーマにコピー
mkdir -p swell_child/parts/post_list
cp swell/parts/post_list/loop_by_slider.php swell_childparts/post_list/loop_by_slider.php
# 書くのめんどい。その他適宜コピーしたりしてください。

post_slider.php

post_slider.php を編集

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

// 以下1ブロック Added by me
$slider_id = $variable['slider_id']; // swiperの要素IDを指定させる。必須。呼び出し元に必ず書くこと
$post_type = $variable['post_type'] ?? 'post';
$the_orderby = $variable['order_by'] ?? $SETTING['ps_orderby']; // Added by me : 値がなければ設定から読み込み
$meta_key = $variable['meta_key'] ?? SWELL_CT_KEY; // なんねこれ？
$order    = $variable['order'] ?? 'DESC';
$post_per_page = $variable['post_per_page'] ?? 8;
// 以下 loop_by_slider.php に渡す変数
$show_date     = $variable['show_date'] ?? null;
$show_modified = $variable['show_modified'] ?? null;
$show_author   = $variable['show_author'] ?? null;
$cat_pos       = $variable['cat_pos'] ?? null;
$taxonomy      = $variable['taxonomy'] ?? 'category';

$SETTING = SWELL_Theme::get_setting();
$q_args  = [
    'post_type'           => $post_type, // Modified by me
    'post_status'         => 'publish',
    'no_found_rows'       => true,
    'posts_per_page'      => $post_per_page, // Modified by me
    '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'];  // rio コメントアウト
if ('meta_value_num' === $the_orderby) {
    $q_args['orderby']  = 'meta_value_num';
    $q_args['meta_key'] = $meta_key; // // Modified by me
    $q_args['order']    = $order; // Modified by me
} else {
    $q_args['orderby'] = $the_orderby;
}

###  タグやカテゴリでの絞り込み。テーマ設定から変更するやつ。これがあると、直すのが難しくなるなあ。 :TODO
###  $args['pickup_type'] = 'tag' 'category' を呼び出し元に宣言させとくか？無いなら $SETTING['ps_pickup_type'] を利用で。
###  picup_tag / pickup_cat は、タグやカテゴリのIDの整数値なのか？
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['cat'] = (int) $pickup_cat;
    }
}
// 以下の SETTING を用いる設定は post 以外の場合はスルーさせるかデフォルト値的なのを与える :TODO

// これも $args['pickup_title'] で読み込ませるか。 :TODO
// ピックアップタイトル
$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);

// floatにして計算
$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; //phpcs:ignore
    ?>
    <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 id="<?= esc_attr($slider_id) ?>" class="p-postSlider__swiper swiper"> <!-- Modified by me -->
            <?php
            // $args = $args + ['query_args'  => $q_args, 'thumb_sizes' => $thumb_sizes];
            SWELL_Theme::get_parts('parts/post_list/loop_by_slider', [
                'query_args'  => $q_args,
                'thumb_sizes' => $thumb_sizes,
                'show_date' => $show_date, // rio 以下追加
                'show_modified' => $show_modified,
                'show_author' => $show_author,
                'cat_pos' => $cat_pos,
                'taxonomy' => $taxonomy,
            ]);
            ?>
            <?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>

<!-- swiper config / Added by me -->
<!-- :TODO ここはあとで別ファイル化する -->
<!-- ちなみに、 set_post_slider.min.js の !(function() {ここね}) の中身をそっくりここへ持ってきても動作する。-->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        function isMobile() {
            return window.innerWidth < 768;
        }

        if (isMobile()) {
            slidesPerView = 1.5;
        } else {
            slidesPerView = 3;
        }
        if (typeof Swiper !== "undefined") {
            var swiper = new Swiper('#<?= esc_attr($slider_id) ?>', {
                speed: 1000,
                autoplay: {
                    delay: 5000,
                },
                slidesPerView: slidesPerView,
                effect: "slide",
                spaceBetween: 15,
                loop: true,
                createElements: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            });
        }
    });
</script>

tmp/front.php (スライダー挿入先)

挿入したい場所 (今回はトップページに表示されるテンプレート tmp/front.php) へ以下を挿入。

$variable はスライダーのconfigで、get_parts() でスライダーのテンプレートを読み込んでいる。$cache_key = ‘post_slider’ はこのパーツのキャッシュのためのキーらしい。

<h2 class="c-secTitle"><span>スライダータイトル</span></h2>
<?php
$variable = ["container_id" => "post_slider_multi_session_container", "container_class" => "post_slider_in_content", "slider_id" => "post_slider_multi_session", "slider_class" => "post_slider_multi", "post_type" => "session", "post_per_page" => -1, "order_by" => "modified", "order" => "DESC", "meta_key" => SWELL_CT_KEY, "show_date" => true, "show_modified" => false, "taxonomy" => "genre", "cat_pos" => "on_thumb"];
// cat_pos ... "on_title" or "on_thumb" or "none"
$cache_key = $SETTING['cache_top'] ? 'post_slider' : ''; // 意味わからんがやっとく
SWELL_Theme::get_parts('parts/top/post_slider', $variable, $cache_key);
?>

loop_by_slider.php

loop_by_slider.php を編集

<?php
if (!defined('ABSPATH')) {
    exit;
}
/**
 * 記事スライダーの投稿リスト出力テンプレート
 */
$query_args  = $variable['query_args'] ?? [];
$thumb_sizes = $variable['thumb_sizes'] ?? '';

// 表示設定 // ブロックごと Modified by me
$show_date     = $variable['show_date'] ?? SWELL_Theme::get_setting('ps_show_date');
$show_modified = $variable['show_modified'] ?? SWELL_Theme::get_setting('ps_show_modified');
$show_author   = $variable['show_author'] ?? SWELL_Theme::get_setting('ps_show_author');
$cat_pos       = $variable['cat_pos'] ?? SWELL_Theme::get_setting('pickup_cat_pos');
$taxonomy      = $variable['taxonomy'] ?? 'category';

// クエリの取得
$the_query = new WP_Query(apply_filters('swell_pickup_post_args', $query_args));

// 表示枚数
$ps_num_sp = SWELL_Theme::get_setting('ps_num_sp');

?>
<ul class="p-postSlider__postList p-postList swiper-wrapper">
    <?php
    $ct = 0;
    while ($the_query->have_posts()) :
        $ct++;
        $the_query->the_post();

        $post_data = get_post();
        $the_id    = $post_data->ID;
        $the_title = get_the_title();

        if (mb_strwidth($the_title, 'UTF-8') > 120) :
            $the_title = mb_strimwidth($the_title, 0, 120, '...', 'UTF-8');
        endif;
    ?>
        <li class="p-postList__item swiper-slide">
            <a href="<?php the_permalink($the_id); ?>" class="p-postList__link">
                <?php
                SWELL_Theme::get_parts(
                    'parts/post_list/item/thumb',
                    [
                        'post_id'   => $the_id,
                        'cat_pos'   => $cat_pos,
                        'size'      => 'large',
                        'sizes'     => $thumb_sizes,
                        'decoding'  => 'async',
                        'lazy_type' => $ct > $ps_num_sp ? SWELL_Theme::$lazy_type : 'none',
                        'taxonomy'  => $taxonomy,
                    ]
                );
                ?>
                <div class="p-postList__body">
                    <h2 class="p-postList__title">
                        <?= wp_kses($the_title, SWELL_Theme::$allowed_text_html) ?>
                    </h2>
                    <div class="p-postList__meta">
                        <?php
                        // 日付
                        SWELL_Theme::get_parts('parts/post_list/item/date', [
                            'show_date'     => $show_date,
                            'show_modified' => $show_modified,
                        ]);
                        if ('on_title' === $cat_pos) :
                            SWELL_Theme::pluggable_parts('post_list_taxonomy', [ // Modified by me
                                'post_id' => $the_id,
                                'taxonomy' => $taxonomy, // Added by me
                            ],);
                        endif;

                        if ($show_author) :
                            SWELL_Theme::pluggable_parts('post_list_author', [
                                'author_id' => $post_data->post_author,
                            ]);
                        endif;
                        ?>
                    </div>
                </div>
            </a>
        </li>
    <?php
    endwhile;
    wp_reset_postdata();
    ?>
</ul>

set_post_slider.min.js

swell/build/js/front/set_post_slider.min.js (minified されてたので prettified した)

参考まで。

!(function() {
   const e = 959 < window.innerWidth;
   function t() {
      const t = document.getElementById("post_slider");
      if (null === t) return;
      const n = window.swellVars;
      if (void 0 === n) return;
      const s = t.querySelector(".swiper");
      if (null === s) return void t.classList.add("show_");
      const i = {
         loop: !0,
         effect: "slider",
         preloadImages: !1,
         lazy: { loadPrevNext: !0 },
         autoplay: {
            delay: parseInt(n.psDelay) || 1e4,
            disableOnInteraction: !1,
         },
         speed: parseInt(n.psSpeed) || 1200,
         pagination: { el: ".p-postSlider .swiper-pagination", clickable: !0 },
         navigation: {
            nextEl: ".p-postSlider .swiper-button-next",
            prevEl: ".p-postSlider .swiper-button-prev",
         },
         runCallbacksOnInit: !0,
         on: {
            init() {
               setTimeout(() => {
                  const e = t.querySelector(".p-postList__thumb");
                  if (e) {
                     const n = e.offsetHeight / 2,
                        s = t.querySelector(".swiper-button-prev"),
                        i = t.querySelector(".swiper-button-next");
                     s && i && ((s.style.top = n + "px"), (i.style.top = n + "px"));
                  }
               }, 10);
            },
         },
      },
         o = e ? parseFloat(n.psNum) : parseFloat(n.psNumSp);
      (i.slidesPerView = o), (i.spaceBetween = 0), (i.centeredSlides = !0);
      const r = new Swiper(s, i);
      window.swellPsSwiper = r;
   }
   t(),
      window.addEventListener("orientationchange", () => {
         setTimeout(() => {
            window.swellPsSwiper && (window.swellPsSwiper.destroy(), t());
         }, 10);
      }),
      window.SWELLHOOK && window.SWELLHOOK.barbaAfter.add(t);
})();

list_parts.php

$args から $taxonomy を取得
get_the_category を get_the_terms に置換、引数に $taxonomy を追加
swl_get__a_category を swl_get__a_taxonomy に置換。$taxonomy 引数も追加

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

use SWELL_Theme as SWELL;

/**
 * 記事リストのカテゴリー
 */
if (!function_exists('swl_parts__post_list_taxonomy')) :
    function swl_parts__post_list_taxonomy($args)
    {
        $the_id   = $args['post_id'] ?? get_the_ID();
        $class    = $args['class'] ?? 'p-postList__cat u-thin';
        $taxonomy = $args['taxonomy'] ?? 'category'; // Added by me
        $cat_data = get_the_terms($the_id, $taxonomy); // Modified by me
        if (empty($cat_data)) {
            return;
        }

        // 表示するカテゴリー
        $display_cat = swl_get__a_taxonomy($cat_data, $taxonomy); // Modified by me

        $the_cat = apply_filters('swell_post_list_cat_data', [
            'id'   => $display_cat->term_id,
            'name' => $display_cat->name,
        ], $the_id);
?>
        <span class="<?= esc_attr($class) ?> icon-folder" data-cat-id="<?= esc_attr($the_cat['id']) ?>"><?= esc_html($the_cat['name']) ?></span>
<?php
    }
endif;

pluggable_parts.php

swl_get__a_category という関数名を swl_get__a_taxonomy へ置換。
引数 $taxonomy を追加
‘category’ と直書きされているのを $taxonomy に置換。

<?php

if (!defined('ABSPATH')) {
    exit;
}

use SWELL_Theme as SWELL;

/**
 * $categories = get_the_category()のデータ
 */
if (!function_exists('swl_get__a_taxonomy')) : // Modified by me
    function swl_get__a_taxonomy($categories, $taxonomy) // Modified by me
    {
        if (empty($categories)) {
            return null;
        }

        // １つしかなければそれを返す
        if (1 === count($categories)) {
            return $categories[0];
        }

        // 現在のページがカテゴリーアーカイブの時にそのカテゴリー名で表示するかどうか。
        if (is_category()) {
            $pickup_self = SWELL::get_setting('pl_cat_on_cat_page');
            // 強制的に表示名を現在のアーカイブに合わせる時
            if ('forced' === $pickup_self) {
                return get_queried_object();
            }

            // 表示カテゴリーと一致するものがあればそれを優先的に返す
            if ('if_have' === $pickup_self) {
                $now_id = get_queried_object_id();
                foreach ($categories as $the_cat) {
                    if ($now_id === $the_cat->term_id) {
                        return $the_cat;
                    }
                }
            }
        }

        // 一番親を返すか、子を返すか
        $p_or_c = SWELL::get_setting('pl_cat_target');
        if ('parent' === $p_or_c) {
            $_cat     = null;
            $_acts_ct = 0;
            foreach ($categories as $the_cat) {
                // 一番親のカテゴリーであればすぐにそれを返す
                if (0 === $the_cat->parent) {
                    return $the_cat;
                }

                $ancestors = get_ancestors($the_cat->term_id, $taxonomy); // Modified by me

                // 親カテゴリー自身と紐付いてなくても親のカテゴリー名で表示する
                // if ( 1 ) {
                //  return get_category( $ancestors[ count( $ancestors ) - 1 ] );
                // }

                // まだ1度もセットされていない時はまず記憶させる
                if (0 === $_acts_ct) {
                    $_cat     = $the_cat;
                    $_acts_ct = count($ancestors);
                    continue;
                }

                // 親の数がより少なければ上書き
                if ($_acts_ct > count($ancestors)) {
                    $_cat = $the_cat;
                }
            }
            return $_cat;
        } elseif ('child' === $p_or_c) {
            $_cat     = null;
            $_acts_ct = 0;
            foreach ($categories as $the_cat) {
                $ancestors = get_ancestors($the_cat->term_id, $taxonomy);

                // まだ1度もセットされていない時はまず記憶させる
                if (0 === $_acts_ct) {
                    $_cat     = $the_cat;
                    $_acts_ct = count($ancestors);
                    continue;
                }

                // 親の数がより「多ければ」上書き
                if ($_acts_ct < count($ancestors)) {
                    $_cat = $the_cat;
                }
            }
            return $_cat;
        }

        // 特に条件のヒットがなければ最初のカテゴリーを返す
        return $categories[0];
    }
endif;
// その他の関数は無関係なので無視

functions.php

上記２ファイルは WP テンプレートではないので、自動的には読み込まれない。
なので、 functions.php に追記。

require_once __DIR__ . '/lib/pluggable.php';
require_once __DIR__ . '/lib/pluggable_parts/list_parts.php';

thumb.php

あー、ここで、サムネイル画像についてるカテゴリラベルは、
swell/parts/post_list/item/thumb.php だと気づく。
swell_child/parts/post_list/item/thumb.php を編集する。

taxonomy に対応させる (post_list_taxonomy を呼び出させる)

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

$the_id    = $variable['post_id'] ?? get_the_ID();
$sizes     = $variable['sizes'] ?? '(min-width: 960px) 960px, 100vw';
$size      = $variable['size'] ?? 'full';
$lazy_type = $variable['lazy_type'] ?? SWELL_Theme::$lazy_type;
$decoding  = $variable['decoding'] ?? false;
$cat_pos   = $variable['cat_pos'] ?? 'none';
$cat_data  = $variable['cat_data'] ?? []; // 後方互換用
?>
<div class="p-postList__thumb c-postThumb<?php echo ! has_post_thumbnail( $the_id ) ? ' noimg_' : ''; ?>">
    <figure class="c-postThumb__figure">
        <?php
            SWELL_Theme::get_thumbnail( [
                'post_id'   => $the_id,
                'size'      => $size,
                'sizes'     => $sizes,
                'lazy_type' => $lazy_type,
                'decoding'  => $decoding,
                'class'     => 'c-postThumb__img u-obf-cover',
                'echo'      => true,
            ] );
        ?>
    </figure>
    <?php
        if ( 'on_thumb' === $cat_pos || ! empty( $cat_data ) ) :
            SWELL_Theme::pluggable_parts( 'post_list_taxonomy', [ // Modified by me
                'post_id' => $the_id,
                'class'   => 'c-postThumb__cat',
            ] );
        endif;
    ?>
</div>

以上で完成

これで、カスタムタクソノミー genre が、カスタム投稿タイプ session のサムネイル画像右上に表示されているはずだ。

微調整

css 調整

トップページのヘッダー固定なスライダーなので、padding が設定されている。
これはコンテンツ内に置くスライダーには不要なので、スタイルシートで除去する。

.post_slider_in_content {   // このためにこのクラスを設定した
   .l-container {
      padding-left: 0;
      padding-right: 0;
   }
}

swiper.js の config をトップページのスライダーと合わせる

set_post_slider.min.js の中身を tmp/front.php に貼り付ける。スライダー表示数である n.psNum と n.psNumSp のみ、微調整した。

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const e = 959 < window.innerWidth;

        function t() {
            const t = document.getElementById("post_slider_multi_session_container");
            if (null === t) return;
            const n = window.swellVars;
            n.psNum = 3; // 減らす Added by me
            n.psNumSp = 1.5; // 減らす Added by me
            if (void 0 === n) return;
            const s = t.querySelector(".swiper");
            if (null === s) return void t.classList.add("show_");
            const i = {
                    loop: !0,
                    effect: "slider",
                    preloadImages: !1,
                    lazy: {
                        loadPrevNext: !0
                    },
                    autoplay: {
                        delay: parseInt(n.psDelay) || 1e4,
                        disableOnInteraction: !1,
                    },
                    speed: parseInt(n.psSpeed) || 1200,
                    pagination: {
                        el: ".p-postSlider .swiper-pagination",
                        clickable: !0
                    },
                    navigation: {
                        nextEl: ".p-postSlider .swiper-button-next",
                        prevEl: ".p-postSlider .swiper-button-prev",
                    },
                    runCallbacksOnInit: !0,
                    on: {
                        init() {
                            setTimeout(() => {
                                const e = t.querySelector(".p-postList__thumb");
                                if (e) {
                                    const n = e.offsetHeight / 2,
                                        s = t.querySelector(".swiper-button-prev"),
                                        i = t.querySelector(".swiper-button-next");
                                    s && i && ((s.style.top = n + "px"), (i.style.top = n + "px"));
                                }
                            }, 10);
                        },
                    },
                },
                o = e ? parseFloat(n.psNum) : parseFloat(n.psNumSp);
            (i.slidesPerView = o), (i.spaceBetween = 0), (i.centeredSlides = !0);
            const r = new Swiper(s, i);
            window.swellPsSwiper = r;
        }
        t(),
            window.addEventListener("orientationchange", () => {
                setTimeout(() => {
                    window.swellPsSwiper && (window.swellPsSwiper.destroy(), t());
                }, 10);
            }),
            window.SWELLHOOK && window.SWELLHOOK.barbaAfter.add(t);
    });
</script>

TODO・あとがき

post_slider.php の末尾でとりあえず swiper 設定しているのだが、マルチスライダー化してるし、実際 config はどこで設定しようか検討中。

フックが多数仕込まれてるようなので、フック経由でどうにか出来ないか。(–> 今回はフックだけでは難しそう)
何しろこのカスタマイズ手法では、親テーマのバージョンアップ時に整合性が取れなくなる可能性が高い。

なんとか既存のファイルを同じフォルダ同じ配置で再利用しようとしてこうなったが、既存の loop_slider.php などを使わずに、別フォルダ別名ファイルでマルチスライダーを作ってしまった方が良いような気もする。
その場合は、SWELL_Theme::get_parts('parts/top/post_slider', $variable, $cache_key); の ‘parts/top/post_slider’ を ‘parts/multi_slider/post_slider’ などとするところから始まるだろう。

※ Swell の作者さんへ。コードの一部を公開してしまっていますが、もし問題があれば、記事ごと削除または修正箇所のみ記述、としますのでお知らせください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

rio

Multiple swell wp theme’s slider

他にマルチスライダー化の方法はある？

対応バージョン

前提メモ

スライダーの呼び出し順やテンプレートの解析

方針

注意点

マルチスライダー化実際の手順

post_slider.php

tmp/front.php (スライダー挿入先)

loop_by_slider.php

set_post_slider.min.js

list_parts.php

pluggable_parts.php

functions.php

thumb.php

以上で完成

微調整

css 調整

swiper.js の config をトップページのスライダーと合わせる

TODO・あとがき

この記事を書いた人

コメント

コメントするコメントをキャンセル

Ads Blocker Detected!!! / 広告ブロック機能が検出されました。

Multiple swell wp theme’s slider

他にマルチスライダー化の方法はある？

対応バージョン

前提メモ

スライダーの呼び出し順やテンプレートの解析

方針

注意点

マルチスライダー化 実際の手順

post_slider.php

tmp/front.php (スライダー挿入先)

loop_by_slider.php

set_post_slider.min.js

list_parts.php

pluggable_parts.php

functions.php

thumb.php

以上で完成

微調整

css 調整

swiper.js の config をトップページのスライダーと合わせる

TODO・あとがき

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

Ads Blocker Detected!!! / 広告ブロック機能が検出されました。

マルチスライダー化実際の手順

コメントするコメントをキャンセル