*

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

関連記事

めんどくさがり屋のあなたへ。AmazonEC2を使って9分でできるWordPressセットアップ

はてなやFC2などの無料ブログから、独自の環境へブログの移行を考えている方はたくさんいらっしゃる

記事を読む

WordPressをカスタマイズしたい! そんな人が見るべき世界で人気のWPチュートリアルサイト ベスト10!

いまや世界中の個人、法人Webサイトで採用されているWordPressですが、その人気の1つにカス

記事を読む

エックスサーバーのWordPress専用サービス”WPS レンタルサーバー”を使ってみた

私ごとですが、このサイトを含む全てのサイトをAmazon EC2からWPS レンタルサーバー

記事を読む

WordPress SSL対応後、管理ページがリダイレクトループエラーとなるときの解決方法

WordPressでSSL対応(https対応)後に管理ページでRedirect loopエ

記事を読む

no image

2013年アメリカホリデイシーズン ecommerce動向予測

アメリカでは10月から12月にかけてホリデイシーズンと呼ばれる時期に入ります。サンクスギビング、クリ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

WordPressでサイトを運営されている初心者ブロガーの方へ。SEOを意識した記事の投稿手順を紹介

WordPressは本当に便利なツールです。いまさら私が言うまでもないですが、WordPre

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

Ads by Google

Ads by Google

Ads by Google

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