horizontalサポートで追加されたswiperについて - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ Cocoon ディスカッション掲示板 ja Tue, 14 Jul 2026 07:17:44 +0000 wpForo 60 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67146 Sat, 24 Dec 2022 14:34:52 +0000 ご確認いただきありがとうございます！
後から読み込んでもここまでタイムラグがないとは思いませんでした。

]]> Cocoonテーマに関する質問 わいひら https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67146 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67145 Sat, 24 Dec 2022 13:43:38 +0000 ----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.4.4
カテゴリ数：19
タグ数：146
ユーザー数：1
----------------------------------------------
［new_list horizontal=1］を記述した時(swiper動作の時)、swiper-bundle.min.cssが追加されている事を確認しました。
本件はクローズとします。

CSSが追加さていたので、自前でswiper.jsを用いていたのですが、CSSが消え墓穴を掘りました笑

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67145 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67143 Sat, 24 Dec 2022 13:16:01 +0000 先日の書き込みは見逃していました。すいません。

後からCSSを読み込むという方法も機能追加時、一旦実装してみたのですが、CLS的にはあまり良い実装ではなかったのでやめました。

先日のこちらの方法は、JavaScriptでやっていました。JavaScriptだと結構タイムラグがありました。
CSSをあとから読み込んでも多少早くなる程度ではないかと思って、何度も動作確認してみました。
結果、体感的には全くCLS問題は感じませんね。これまでの実装と体感的には表示は変わらないように感じます。
試しに実装したものを以下にアップしておきました。

------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
https://wp-cocoon.com/wp-content/uploads/2020/07/github-dl.png
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

そちらの環境ではどうでしょうか。

]]> Cocoonテーマに関する質問 わいひら https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67143 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67142 Sat, 24 Dec 2022 04:44:45 +0000 @yhira さん

汚い方法ですが...
ネット検索してたら、HTML5.2からlinkをbody内に書けるようになった？

  • wp_enqueue_swiperを削除
  • footer-javascript.phpのswiper-bundle.min.js追加前にlinkタグswiper-bundle.min.cssを追加
]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67142 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67070 Tue, 20 Dec 2022 11:54:33 +0000 少し思いついたのですが、以下ではダメですかね？
ヘッダーで判定できないなら、判定しJS出力する時、JS出力否なら追加したCSSを削除しては？

●utils.php

wp_enqueue_swiperでswiper-bundle.min.cssを無条件で追加。

●footer-javascript.php

$_IS_SWIPER_ENABLEを判定して、JSライブラリswiper-bundle.min.jsの追加と、JSを出力。

 

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-67070 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66898 Mon, 12 Dec 2022 13:10:20 +0000 あらかじめヘッダーでページの全ソースコードを読み込んで正規表現で検索するという方法も考えました。
ただそれだと、全ソースコードを2回読み込むことになるので、それも非効率的かと現在の仕様にしました。
何かショートコードが使われているかを知る方法があったり、他に良い方法思いついた場合は、即座にCSSが読み込まれないようにしたいと思います。

]]> Cocoonテーマに関する質問 わいひら https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66898 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66886 Mon, 12 Dec 2022 11:11:13 +0000 @yhira さん

詳しくないので、対策案の提示ができなく、申し訳なく。

 

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66886 RE: horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66885 Mon, 12 Dec 2022 10:21:41 +0000 僕もそうしたいところなんですが、ここで設定した$_IS_SWIPER_ENABLE = true;というのは、ヘッダーのCSS呼び出しの部分では取得できないんですよね。
https://github.com/xserver-inc/cocoon/blob/28e7e160bf9684978c4b4f5a883fff41c0712056/lib/html-forms.php#L1013
おそらくヘッダーの時点ではショートコードはまだ呼び出されていない状態なんだと思います。

ヘッダーで「ページ全体の中からショートコード（Swiperオプション）が使われているかどうか」を判断する何か良い方法をご存知でしょうか。

後からCSSを読み込むという方法も機能追加時、一旦実装してみたのですが、CLS的にはあまり良い実装ではなかったのでやめました。

]]> Cocoonテーマに関する質問 わいひら https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66885 horizontalサポートで追加されたswiperについて https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66862 Sun, 11 Dec 2022 15:41:02 +0000 ●質問

カルーセルなどは設定オンの時のみ、JSライブラリ、CSSが追加され。
しかし、カードでhorizontalの指定無なのに、常にswiper-bundle.min.cssが付加されます。

lib/utils.php
無条件でswiper-bundle.min.cssを追加。

tmp/footer-javascript.php
$_IS_SWIPER_ENABLE=trueを判定し追加し、swiper-bundle.min.jsを追加。

swiper-bundle.min.cssも同様に、$_IS_SWIPER_ENABLE=trueを判定し、追加すれば良いのでは？
これでは何か問題ありますか？

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/horizontal%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%a7%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9fswiper%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-66862