サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年2月23日 14:55
いつもお世話になっています。
Cocoonの標準機能である「関連記事」ですが、「カルーセル」と同じく
オートプレイで自動的に右に切り替わるようにカスタマイズできますでしょうか？
本来はカルーセルを記事下などに設置できたら理想ではあるのですが、
関連記事とカルーセルのデザインはほぼ同じなのに、関連記事ではオートプレイする設定がないため
こちらで質問させていただきました。
ご教授いただければ幸いです
2024年2月23日 17:47
●回答
Cocoon標準で、投稿本文下の関連記事を、カルーセルのようにオートプレイする機能はありません。
「カルーセル」と同じく
オートプレイで自動的に右に切り替わるようにカスタマイズできますでしょうか？
可能です。（図参照）
ご自身で、PHPか、JavaScriptを記述する必要があります。
●ご参考
2つの方法がります。
1.Slickを用いる
カルーセルはライブラリ「slick」を用いています。
これを使って、投稿本文下の「関連記事」を横型表示+オートプレイとする。
2.Swiperを用いる
ウィジェット「関連記事」を投稿本文下に配置。
設定「横型表示」はライブラリ「Swiper」を用いています。
これをオートプレイにする。
わいひら reacted
トピックスターター 2024年2月23日 21:33
「2.Swiperを用いる」
こちらの方法でうまくいきました。お教え頂いた部分を下記に変更して動作しました
<?php //Swiper
global $_IS_SWIPER_ENABLE;
if ($_IS_SWIPER_ENABLE): ?>
<link rel='stylesheet' id='swiper-style-css' href='https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css' />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const mySwiper = new Swiper('.is-list-horizontal.swiper', {
loop: true,
autoplay: {
delay: 0,
},
speed: 3000,
slidesPerView: 2,
});
</script>
<?php endif; //Swiper ?>
変更前のページネーション（＞）が残ってしまっているのが少し気になりますが、
もう少し調べて調整してみます。
ありがとうございました
わいひら reacted
2024年2月24日 00:23
●制約
子テーマのtmpフォルダーにfooter-javascript.phpをコピーし修正(上記コード)した場合、横型表示の全てのウィジェットが、オートプレイ対象となります。
●ページ送るボタン
以下でページボタンを出力しています。
この為、CSSで非表示にします。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。