*

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

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


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

関連記事

WordPress RSSフィードでエラーが出たときの解決方法

wordpressではデフォルトでRSS用のXMLを吐き出す機能がついています。 普通は ht

記事を読む

no image

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

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

記事を読む

no image

WordPress colorway テーマのcufonフォントを無効にする方法

WordPressの無料テーマである Colorwayではデフォルトでh1,h2,h3,

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

バージョン:BootStrap-3.3.2 Twitter BootStrap

記事を読む

no image

WordPress サイドバーにページを階層表示するプラグイン

自身のブログで使うことがあったので紹介します。 やりたいことはWordPressのページのリス

記事を読む

WordPressでプラグインインストール時にFTPのIDとパスワードを聞かれないようにする方法

WordPressでプラグインをインストールしようとすると、こんな画面画でてFTPサーバのIDと

記事を読む

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

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

記事を読む

Ads by Google

Ads by Google

Ads by Google

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