Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ショートコードpopular_list...
 
共有:
通知
すべてクリア

[解決済] ショートコードpopular_listでhorizontal表示するとオプションの数値がおかしい

19 投稿
4 ユーザー
11 Likes
104 表示
aminosan55
(@aminosan55)
Active Member Registered
結合: 3週間前
投稿: 4
Topic starter  

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、の処理が少し違っているのだと思います。


   
引用
トピックタグ
はる
(@haruinoue)
Noble Member Moderator
結合: 2年前
投稿: 940
 

私の環境でも再現しました(ただしcount="10"とした場合は19でなく20表示されました)。

サイト上の表示を確認したところ、horizontal="1" count="10"とした場合

  • カードが30枚(count×3)出力される
  • 左の10枚はスクロールの左側に隠れて表示されない
  • 真ん中の10枚と右の10枚の20枚が表示される
  • 11枚目から表示されるので、ランキングの数字は11から

という挙動のようでした。

コードのどこが原因かまでは時間がなくて調べられていません。


   
わいひら reacted
返信引用
はる
(@haruinoue)
Noble Member Moderator
結合: 2年前
投稿: 940
 

Swiperの問題っぽいような感じです。

Swiperの挙動として対象の左右に複製するような感じな気がします。

番号が振ってない、かつSwiperの機能(右ボタン)以外を使ってスクロールしないのであれば問題なく表示される(ループ表示される)ものの、スクロールバーで移動したりするとおかしなことに…?


というかスクロールバーが表示されるのがCocoonのサイトの紹介ページと私のサイトで違いました。

私のサイトでは.swiperのoverflow: hiddenよりも.is-list-horizontalのoverflow-x: scrollが優先されてスクロールバーが表示されています。

もしスクロールバー問題を解決したとしても、ランキングの番号を表示した時に番号がおかしくなるのは解決できません。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 

はるさんが書かれている通りSwiperの仕様です。
ループ処理をスムーズにするためloopAdditionalSlidesを有効にしているためかと思われます。
https://swiperjs.com/swiper-api#param-loopAdditionalSlides
変更する場合は以下の部分のループ処理を無効にすれば良いのかもしれません。
https://github.com/xserver-inc/cocoon/blob/2502e95db7a22940cf1f1d061f3a7deaa7f21f81/tmp/footer-javascript.php#L229
※試してはないです


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 
投稿者:: @haruinoue

私のサイトでは.swiperのoverflow: hiddenよりも.is-list-horizontalのoverflow-x: scrollが優先されてスクロールバーが表示されています。

恐れ入りますがCocoonのバージョンを教えていただいてよろしいでしょうか。


   
返信引用
aminosan55
(@aminosan55)
Active Member Registered
結合: 3週間前
投稿: 4
Topic starter  

はる様わいひら様早いご返答ありがとうございます。

cocoonのバージョンは、バージョン: 2.5.2.1 でした。

私の環境でも、下のスクロールバーが表示され、挙動も同じようにおかしいです。

よろしくお願いいたします。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

こういうものは、比較できるような画像があった方が伝わりやすいと思いますので、私の環境の状況を貼り付けます。

WordPress 6.1、Cocoon 2.5.2.4です。

まずは、[popular_list rank="1" count="10"]の状態から。(括弧は全角にしました。)


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

続いては、以下のショートコード。(同じく括弧は全角にしました。)

[popular_list horizontal="1" type="large_thumb_on" rank="1" count="10"]

 
 
ランキングが「11」から始まって「20」まで。
「21」からまた同じものが繰り返される。
 
 
そして、私の場合は、「23」が左にきた辺り?で「13」に変わっていたようす。
貼り付けて気づきました。
(4枚目と5枚目)
 
 
キャプチャした時は、一気に3枚ずつくらいスライドしていたので、気づかなかったこともあり。
ゆっくりとスライドして、GIFにしてみました。
 
「22」のはずのものが、左にきた時に、「12」になっていますね。
 
そして、今度は、逆に移動した場合は「10」「11」だったものが、「20」「21」に変わっているみたいに見えます。
(その他のものも、変わっている)
 
ランキングの番号が変わってしまうので、実際に何枚並んでいるのかは分からないです。
21以降も番号が続くということは、10枚+もう10枚はあるのだと思いますけれど・・・。
 
デベロッパーツールで確認すると、30枚に見えます。
 
 
スクロールバーは、私の環境ではないみたいですね。
もしかすると、環境の違いが関係するのでしょうか。

Windows10で、Chrome・Edge・Firefoxでは、スクロールバーはなかったです。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

先程は途中だったので。

スクロールバーの件、私は以下ですね。

 
Cocoonのバージョンによる違い?

   
わいひら reacted
返信引用
はる
(@haruinoue)
Noble Member Moderator
結合: 2年前
投稿: 940
 

Cocoonのバージョンは2.5.2でした。
今2.5.2.1に更新してみましたが、変わらずスクロールバーが表示されました。

何が条件か試していたら、「CSS縮小化」をOFFにするとスクロールバーが表示されなくなりました。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

はるさん

ありがとうございます。

私は、Cocoon 2.5.2.4です。
(ただ、2.5.2.1以降、このショートコードに関する修正はないはず)

今はもうPCを触れる状態にないので、確認ができないです。

ローカル環境ですので、高速化は無効にしていると思います。

明日、有効にしてみますね。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

はるさんの仰る通り、「CSS縮小化」すると、スクロールバーが出てきますね。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

Posted by: @yhira

変更する場合は以下の部分のループ処理を無効にすれば良いのかもしれません。
https://github.com/xserver-inc/cocoon/blob/2502e95db7a22940cf1f1d061f3a7deaa7f21f81/tmp/footer-javascript.php#L229

上記ではダメかも・・・です。
(「loopAdditionalSlides」を「0」にしてみました

その上の「loop: true」を変更すれば、大丈夫みたいですが、そうすると、ループしないですし・・・。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 

ご確認と不具合再現方法をいただきありがとうございます。

とりあえず、ループ機能はそこまで重要ではないので解除しました。

あと、Swiperにした場合、横スクロールは必要ないのでこちらも削除しました。
Swiperが何かしら動作しなかった場合の横スクロールCSSでしたが、そういった問題があるのであればあえて書く必要もないかなと。

------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
mk2 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

ご対応いただきありがとうございます。

「CSS縮小化」しても問題なくなりました。
ランキング番号も、問題なかったです。

ツールを使いこなすのは、なかなか難しいですね。
 

aminosan55さんや、はるさんにもご確認いただけますと幸いです。


   
返信引用
aminosan55
(@aminosan55)
Active Member Registered
結合: 3週間前
投稿: 4
Topic starter  

修正確認しました。
はるさん、わいひらさん、mk2さん
ありがとうございました。

矢印のボタンって戻る方向には無いのですよね?
PCから利用する時は、戻る方向にもボタンが
有った方が利便性が良いのではと個人的には思いました。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

Posted by: @aminosan55

矢印のボタンって戻る方向には無いのですよね?
PCから利用する時は、戻る方向にもボタンが
有った方が利便性が良いのではと個人的には思いました。

これは思いました。

ただ、そうすると1枚目にボタンが被ってしまうと思うんです。
そうすると、視認性がよろしくないかなと思いました。

ボタンと被らないようにするには、右にずらすしかないと思います。
すると、今度はカードを表示するスペースが少なくなってしまうのではないかと。

それで、私は特に触れなかったという感じです。
(今の方が視認性が良いと考えました、戻れない訳ではないですし)

機能的にはprevもオプションにあったような気がしますので、できそうには思いますけれど。

ただ、上記は私の印象ですね。

aminosan55さんは、あった方が良いという印象をお持ちになったことは、お伝えいただくべきだと思います。

いろんな意見があれば、ご検討くださると思います。


   
わいひら reacted
返信引用
aminosan55
(@aminosan55)
Active Member Registered
結合: 3週間前
投稿: 4
Topic starter  

mk2さんご返答ありがとうございます。

そうですね。被ってしまいますよね。となると枠外にもっていくか

被る事に目をつぶるしかなくなりますよねぇ。オプションで表示、非表示が

選択出来れば良いのかも知れませんが。このへんの装備の装飾って難しいですね。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 

僕の"機能"のイメージとしては、Amazonプライムビデオのスライダーです。
なので戻るボタンはつけませんでした。
加えて、サイト訪問者のアクションとしてまず「進む」ボタンのようなクリックアクションを行なう人がまずまれで、さらに「戻る」ボタン押すような人はごくごく少数と考えられることから「戻る」ボタンはつけませんでした。サイト訪問者はサイト運営者が思っている以上にサイト上でアクションを起こさない経験からそのようにしています。
あとmk2さんの書かれていることも理由のひとつです。

あまり使われない機能をつけてもボタンがかぶると言ったデメリットの方が上回るということで、以上の三つの理由から「戻る」ボタンの実装は今のところ考えておりません。


   
mk2 reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました