カルーセル(Carousel)という言葉が一般的かわかりませんが、一定の画面内で画像をスクロールさせる技術のことです。
WoodPressのCherry Frameworkというフレームワークを使ったテーマを選んだ場合、デフォルトでついてくるのですが、モバイルで使ったときに２点ほど問題がありました。
参考までに、私の使っているのはCherry Framework Ver.3.1.4です。
１．カルーセル画像の上でスワイプできない問題
モバイルでカルーセルを表示させたとき、なぜかカルーセルで使用している画像の上をタッチしてもスワイプできないという事象が発生しました。
画像以外の部分、例えば画像の左右をタッチするとスワイプできたりする場合は、私と同じ原因の可能性があります。
解決方法
\wp-content\themes\CherryFramework\js\jquery.elastislide.js を開き下記のように編集します。
13行目あたりです。
|
1 2 3 4 5 |
fromframe preventDefaultEvents: true to preventDefaultEvents: false |
これだけです。簡単でしょ？
上記の場所になかったら、こちらにある可能性があります。
\wp-content\plugins\cherry-plugin\lib\js\elasti-carousel
その場合の直し方はこちら。
|
1 2 3 4 5 |
fromframe preventDefaultEvents:!0 to preventDefaultEvents: false |
aタグのhrefが動かない問題
紹介した方法でスワイプはできるようになりますが、カルーセルの中にaタグが入っている場合、注意が必要です。
どうやらこのカルーセル要素の中にaタグが入っていた場合、クリック時にjavascriptが呼ばれて、リンクを無効にされてしまうらしいです。
とりあえず暫定的に動くようにするためonClickイベントを追加しました。
私の使っているテンプレートでは /wp-contents/theme/テンプレート名/includes の中にあるcustom-function.phpで下記のように修正しました。
|
1 |
$output .= '<a onClick="location.href=\''.get_permalink($post->ID).'\'" href="'.get_permalink($post->ID).'" class="MTCcustom_btn" title="'.get_the_title($post->ID).'">'; |
根本的な直し方は別にあるかもしれませんが、取り急ぎ動かさなければならない人はご参考にどうぞ。
２．画像サイズによって横スクロールしない問題
Cherry Frameworkではさまざまなshortcodeが用意されており、カルーセルもこれを使って簡単に実現することができます。
ショートコードは下記のサイトに詳しく記載されています。
Cherry Frameworkの公式マニュアル
基本的にページやポスト内で下記のようなコードを挿入するだけで使えます。
|
1 |
[carousel title="Latest News" num="8" thumb="true" thumb_width="380" thumb_height="380" more_text_single="Read More" excerpt_count="5" date="no" author="no" min_items="1" spacer="10"] |
しかし、thumb_widthの設定値とmin_itemsの値の組み合わせによって、モバイルで横スクロールが動かないケースがあります。私の場合はthumb_width=270 でmin_item=1 のときに動きませんでした。
解決方法
はじめに断っておくと、この解決方法は結構無理やりです（笑）。これでも解決できますが、もっとスマートな方法があるかもしれません。
\wp-content\themes\CherryFramework\js\jquery.elastislide.js を開き下記のように編集します。
309行目あたりです。
|
1 2 3 4 5 6 7 |
if( val === undefined ) { //ここに挿入 if(this.fitCount == 0){ this.fitCount = 1; } //ここまで |
以上です！
この記事がだれかの一助になることを祈ります。