*

WordPress cherry frameworkでカルーセルを使ったときにモバイルでスクロールしない問題を解決

公開日: : 最終更新日:2015/08/21 bootstrap, WordPress全般 ,

Pocket

carousel

カルーセル(Carousel)という言葉が一般的かわかりませんが、一定の画面内で画像をスクロールさせる技術のことです。

WoodPressのCherry Frameworkというフレームワークを使ったテーマを選んだ場合、デフォルトでついてくるのですが、モバイルで使ったときに2点ほど問題がありました。

参考までに、私の使っているのはCherry Framework Ver.3.1.4です。

1.カルーセル画像の上でスワイプできない問題

モバイルでカルーセルを表示させたとき、なぜかカルーセルで使用している画像の上をタッチしてもスワイプできないという事象が発生しました。

画像以外の部分、例えば画像の左右をタッチするとスワイプできたりする場合は、私と同じ原因の可能性があります。

2015-04-08 09_37_27-Presentation1 - PowerPoint

解決方法

\wp-content\themes\CherryFramework\js\jquery.elastislide.js を開き下記のように編集します。

13行目あたりです。

これだけです。簡単でしょ?

追記:2015/8/20

上記の場所になかったら、こちらにある可能性があります。
\wp-content\plugins\cherry-plugin\lib\js\elasti-carousel
その場合の直し方はこちら。

追記:2015/4/23

aタグのhrefが動かない問題

紹介した方法でスワイプはできるようになりますが、カルーセルの中にaタグが入っている場合、注意が必要です。
どうやらこのカルーセル要素の中にaタグが入っていた場合、クリック時にjavascriptが呼ばれて、リンクを無効にされてしまうらしいです。

とりあえず暫定的に動くようにするためonClickイベントを追加しました。

私の使っているテンプレートでは /wp-contents/theme/テンプレート名/includes の中にあるcustom-function.phpで下記のように修正しました。

根本的な直し方は別にあるかもしれませんが、取り急ぎ動かさなければならない人はご参考にどうぞ。

2.画像サイズによって横スクロールしない問題

Cherry Frameworkではさまざまなshortcodeが用意されており、カルーセルもこれを使って簡単に実現することができます。

ショートコードは下記のサイトに詳しく記載されています。
Cherry Frameworkの公式マニュアル

基本的にページやポスト内で下記のようなコードを挿入するだけで使えます。

しかし、thumb_widthの設定値とmin_itemsの値の組み合わせによって、モバイルで横スクロールが動かないケースがあります。私の場合はthumb_width=270 でmin_item=1 のときに動きませんでした。

解決方法

はじめに断っておくと、この解決方法は結構無理やりです(笑)。これでも解決できますが、もっとスマートな方法があるかもしれません。

\wp-content\themes\CherryFramework\js\jquery.elastislide.js を開き下記のように編集します。

309行目あたりです。

以上です!

この記事がだれかの一助になることを祈ります。

Ads by Google

Ads by Google

関連記事

no image

WordPress Contact form 7 送信前に処理を実行する方法

WordPressの超有名プラグインContact form 7を利用されている方は多いと思

記事を読む

WordPressサイトを移行したらトップページ以外が404 Page not foundになってしまった場合の対処法

どんなシステムであれ、ホスティングサイトを変更するといろんな不具合がでます。

記事を読む

WordPress RSSフィードでエラーが発生した場合の解決方法

WordPressでできたサイトで突然RSSフィードが届かなくなりました。Webサイ

記事を読む

WordPres3.9.1にアップデートしたらRSSでエラーがでた時の解決方法

WordPressの最新版(2014年6/25時点)3.9.1にアップグレードしたところRSSフ

記事を読む

no image

WordPress ショートコードの中にショートコードを書く方法

.frame{ display: block; padding: 9.5px; margi

記事を読む

《解決》Twitter Bootstrapでmodalを使うと画面がずれる問題

バージョン:BootStrap-3.3.2 Twitter BootStrap

記事を読む

WordPress + Welcart 全部無料。10分でお手軽Eコマースサイトを構築する方法

WordPressとWelcartというプラグインで、早く、安く、簡単にEコマースサイトを構

記事を読む

no image

WordPressの投稿を自動的にFacebookのウォールに書き込む方法

Facebook、Twitterといったソーシャルネットワークサービス(SNS)が浸透している現在、

記事を読む

no image

WordPressマルチサイト化

WordPressマルチサイト化とはサブドメインやサブディレクトリを使って、一つのWordPress

記事を読む

WordPress セキュリティ対策 ポイント16選

多くのブログやホームページのプラットフォームに利用されているWordPressですが、人気ゆ

記事を読む

Ads by Google

Ads by Google

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑