WordPress cherry frameworkでカルーセルを使ったときにモバイルでスクロールしない問題を解決
公開日:
:
最終更新日:2015/08/21
bootstrap, WordPress全般 carousel, カルーセル

カルーセル(Carousel)という言葉が一般的かわかりませんが、一定の画面内で画像をスクロールさせる技術のことです。
WoodPressのCherry Frameworkというフレームワークを使ったテーマを選んだ場合、デフォルトでついてくるのですが、モバイルで使ったときに2点ほど問題がありました。
参考までに、私の使っているのはCherry Framework Ver.3.1.4です。
1.カルーセル画像の上でスワイプできない問題
モバイルでカルーセルを表示させたとき、なぜかカルーセルで使用している画像の上をタッチしてもスワイプできないという事象が発生しました。
画像以外の部分、例えば画像の左右をタッチするとスワイプできたりする場合は、私と同じ原因の可能性があります。
解決方法
\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).'">'; |
根本的な直し方は別にあるかもしれませんが、取り急ぎ動かさなければならない人はご参考にどうぞ。
2.画像サイズによって横スクロールしない問題
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; } //ここまで |
以上です!
この記事がだれかの一助になることを祈ります。
More from my site
Ads by Google
関連記事
-
-
《解決》Twitter Bootstrapでmodalを使うと画面がずれる問題
バージョン:BootStrap-3.3.2 Twitter BootStrap
-
-
WordPress サイドバーにページを階層表示するプラグイン
自身のブログで使うことがあったので紹介します。 やりたいことはWordPressのページのリス
-
-
WordPressへの投稿をFacebookページにフィードする方法
WordPressへの新規で投稿した際にFacebookページへも自動で書き込まれる
-
-
WordPressでサイトを運営されている初心者ブロガーの方へ。SEOを意識した記事の投稿手順を紹介
WordPressは本当に便利なツールです。いまさら私が言うまでもないですが、WordPre
-
-
WordPress ショートコードの中にショートコードを書く方法
.frame{ display: block; padding: 9.5px; margi
-
-
WordPress セキュリティ対策 ポイント16選
多くのブログやホームページのプラットフォームに利用されているWordPressですが、人気ゆ
-
-
エックスサーバーのWordPress専用サービス”WPS レンタルサーバー”を使ってみた
私ごとですが、このサイトを含む全てのサイトをAmazon EC2からWPS レンタルサーバー
-
-
WordPress 画面下まで行くと横から箱がスライドしてくるプラグインを紹介!
記事を下までみていくと、画面外がらスライドボックスが登場するサイトに遭遇したことはありますか?
-
-
WordPress SSL対応後、管理ページがリダイレクトループエラーとなるときの解決方法
WordPressでSSL対応(https対応)後に管理ページでRedirect loopエ
-
-
WordPressサイトを移行したらトップページ以外が404 Page not foundになってしまった場合の対処法
どんなシステムであれ、ホスティングサイトを変更するといろんな不具合がでます。