サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年11月12日 16:05
horizontalの設置を試そうと思い、固定ページに
[popular_list horizontal="1" type="large_thumb_on" rank="1" count="10"]
とショートタグを張り、表示してみると、countは10設定ですが実際の表示は19ページ表示され
rank="1"設定でのランキング番号はこの設定でいくと11～表示されています。（11.12.13.14・・・）
多分、count、rank、の処理が少し違っているのだと思います。
2022年11月12日 16:24
私の環境でも再現しました(ただしcount="10"とした場合は19でなく20表示されました)。
サイト上の表示を確認したところ、horizontal="1" count="10"とした場合
- カードが30枚(count×3)出力される
- 左の10枚はスクロールの左側に隠れて表示されない
- 真ん中の10枚と右の10枚の20枚が表示される
- 11枚目から表示されるので、ランキングの数字は11から
という挙動のようでした。
コードのどこが原因かまでは時間がなくて調べられていません。
わいひら reacted
2022年11月12日 16:39
Swiperの問題っぽいような感じです。
Swiperの挙動として対象の左右に複製するような感じな気がします。
番号が振ってない、かつSwiperの機能(右ボタン)以外を使ってスクロールしないのであれば問題なく表示される(ループ表示される)ものの、スクロールバーで移動したりするとおかしなことに…？
というかスクロールバーが表示されるのがCocoonのサイトの紹介ページと私のサイトで違いました。
私のサイトでは.swiperのoverflow: hiddenよりも.is-list-horizontalのoverflow-x: scrollが優先されてスクロールバーが表示されています。
もしスクロールバー問題を解決したとしても、ランキングの番号を表示した時に番号がおかしくなるのは解決できません。
わいひら reacted
2022年11月12日 18:04
はるさんが書かれている通りSwiperの仕様です。
ループ処理をスムーズにするためloopAdditionalSlidesを有効にしているためかと思われます。
https://swiperjs.com/swiper-api#param-loopAdditionalSlides
変更する場合は以下の部分のループ処理を無効にすれば良いのかもしれません。
https://github.com/xserver-inc/cocoon/blob/2502e95db7a22940cf1f1d061f3a7deaa7f21f81/tmp/footer-javascript.php#L229
※試してはないです
2022年11月12日 18:07
私のサイトでは.swiperのoverflow: hiddenよりも.is-list-horizontalのoverflow-x: scrollが優先されてスクロールバーが表示されています。
恐れ入りますがCocoonのバージョンを教えていただいてよろしいでしょうか。
トピックスターター 2022年11月12日 21:47
はる様わいひら様早いご返答ありがとうございます。
cocoonのバージョンは、バージョン: 2.5.2.1 でした。
私の環境でも、下のスクロールバーが表示され、挙動も同じようにおかしいです。
よろしくお願いいたします。
2022年11月12日 22:41
こういうものは、比較できるような画像があった方が伝わりやすいと思いますので、私の環境の状況を貼り付けます。
WordPress 6.1、Cocoon 2.5.2.4です。
まずは、［popular_list rank="1" count="10"］の状態から。（括弧は全角にしました。）
わいひら reacted
2022年11月12日 22:43
続いては、以下のショートコード。（同じく括弧は全角にしました。）
［popular_list horizontal="1" type="large_thumb_on" rank="1" count="10"］
ランキングが「11」から始まって「20」まで。
「21」からまた同じものが繰り返される。
そして、私の場合は、「23」が左にきた辺り？で「13」に変わっていたようす。
貼り付けて気づきました。
（4枚目と5枚目）
貼り付けて気づきました。
（4枚目と5枚目）
キャプチャした時は、一気に3枚ずつくらいスライドしていたので、気づかなかったこともあり。
ゆっくりとスライドして、GIFにしてみました。
ゆっくりとスライドして、GIFにしてみました。
「22」のはずのものが、左にきた時に、「12」になっていますね。
そして、今度は、逆に移動した場合は「10」「11」だったものが、「20」「21」に変わっているみたいに見えます。
（その他のものも、変わっている）
（その他のものも、変わっている）
ランキングの番号が変わってしまうので、実際に何枚並んでいるのかは分からないです。
21以降も番号が続くということは、10枚＋もう10枚はあるのだと思いますけれど・・・。
21以降も番号が続くということは、10枚＋もう10枚はあるのだと思いますけれど・・・。
デベロッパーツールで確認すると、30枚に見えます。
スクロールバーは、私の環境ではないみたいですね。
もしかすると、環境の違いが関係するのでしょうか。
Windows10で、Chrome・Edge・Firefoxでは、スクロールバーはなかったです。
わいひら reacted
2022年11月13日 02:04
Cocoonのバージョンは2.5.2でした。
今2.5.2.1に更新してみましたが、変わらずスクロールバーが表示されました。
何が条件か試していたら、「CSS縮小化」をOFFにするとスクロールバーが表示されなくなりました。
わいひら reacted
2022年11月13日 02:13
はるさん
ありがとうございます。
私は、Cocoon 2.5.2.4です。
（ただ、2.5.2.1以降、このショートコードに関する修正はないはず）
今はもうPCを触れる状態にないので、確認ができないです。
ローカル環境ですので、高速化は無効にしていると思います。
明日、有効にしてみますね。
わいひら reacted
2022年11月13日 17:30
変更する場合は以下の部分のループ処理を無効にすれば良いのかもしれません。
https://github.com/xserver-inc/cocoon/blob/2502e95db7a22940cf1f1d061f3a7deaa7f21f81/tmp/footer-javascript.php#L229
上記ではダメかも・・・です。
（「loopAdditionalSlides」を「0」にしてみました）
その上の「loop: true」を変更すれば、大丈夫みたいですが、そうすると、ループしないですし・・・。
2022年11月13日 19:14
ご確認と不具合再現方法をいただきありがとうございます。
とりあえず、ループ機能はそこまで重要ではないので解除しました。
あと、Swiperにした場合、横スクロールは必要ないのでこちらも削除しました。
Swiperが何かしら動作しなかった場合の横スクロールCSSでしたが、そういった問題があるのであればあえて書く必要もないかなと。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
ｍｋ２ reacted
2022年11月13日 22:02
ご対応いただきありがとうございます。
「CSS縮小化」しても問題なくなりました。
ランキング番号も、問題なかったです。
ツールを使いこなすのは、なかなか難しいですね。
aminosan55さんや、はるさんにもご確認いただけますと幸いです。
トピックスターター 2022年11月14日 08:57
修正確認しました。
はるさん、わいひらさん、ｍｋ２さん
ありがとうございました。
矢印のボタンって戻る方向には無いのですよね？
PCから利用する時は、戻る方向にもボタンが
有った方が利便性が良いのではと個人的には思いました。
2022年11月14日 09:14
矢印のボタンって戻る方向には無いのですよね？
PCから利用する時は、戻る方向にもボタンが
有った方が利便性が良いのではと個人的には思いました。
これは思いました。
ただ、そうすると1枚目にボタンが被ってしまうと思うんです。
そうすると、視認性がよろしくないかなと思いました。
ボタンと被らないようにするには、右にずらすしかないと思います。
すると、今度はカードを表示するスペースが少なくなってしまうのではないかと。
それで、私は特に触れなかったという感じです。
（今の方が視認性が良いと考えました、戻れない訳ではないですし）
機能的にはprevもオプションにあったような気がしますので、できそうには思いますけれど。
ただ、上記は私の印象ですね。
aminosan55さんは、あった方が良いという印象をお持ちになったことは、お伝えいただくべきだと思います。
いろんな意見があれば、ご検討くださると思います。
わいひら reacted
トピックスターター 2022年11月14日 09:55
ｍｋ２さんご返答ありがとうございます。
そうですね。被ってしまいますよね。となると枠外にもっていくか
被る事に目をつぶるしかなくなりますよねぇ。オプションで表示、非表示が
選択出来れば良いのかも知れませんが。このへんの装備の装飾って難しいですね。
2022年11月14日 19:29
僕の"機能"のイメージとしては、Amazonプライムビデオのスライダーです。
なので戻るボタンはつけませんでした。
加えて、サイト訪問者のアクションとしてまず「進む」ボタンのようなクリックアクションを行なう人がまずまれで、さらに「戻る」ボタン押すような人はごくごく少数と考えられることから「戻る」ボタンはつけませんでした。サイト訪問者はサイト運営者が思っている以上にサイト上でアクションを起こさない経験からそのようにしています。
あとmk2さんの書かれていることも理由のひとつです。
あまり使われない機能をつけてもボタンがかぶると言ったデメリットの方が上回るということで、以上の三つの理由から「戻る」ボタンの実装は今のところ考えておりません。
ｍｋ２ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。