*

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

関連記事

no image

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

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

記事を読む

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

バージョン:BootStrap-3.3.2 Twitter BootStrap

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

WordPress  画面下まで行くと横から箱がスライドしてくるプラグインを紹介!

記事を下までみていくと、画面外がらスライドボックスが登場するサイトに遭遇したことはありますか?

記事を読む

Ads by Google

Ads by Google

Ads by Google

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