パソコンでトップページを表示したときのデザイン変更を行いました。
今までは一番上に画像のサイトバナーを設置していましたが、やっぱり動きが欲しい!ということで画像スライダーを設置しました。
ちなみにトップページ以外はタイトル下に画像が1つ入っててかなり画像だらけになるので日記には表示されないようにしてあります。
更にモバイル(スマホ)表示のときもかなりのスペースを使ってしまうので、モバイルではトップページでも表示しないようにしています。
・・・と簡単に書きましたけど、ちょっと苦労したって話です。
この画像スライダー、メインの画像の左右に前後の画像が入ってて、しかも幅の広い(解像度の大きい)モニタで見ても左右いっぱいに表示されるようになっているもの。多分そこらに転がっているサイト幅に合わせたものよりはおしゃれ?ということでチョイスしました。
このスライダーは他のサイトでも使っていて、そこではいろいろ設定して手動で設置、順調に稼働しています。それをそっくり移設したら、このサイトではなんだか動かない・・・。というよりも動いたり動かなかったりという気持ちわるーーーい状態になってしまいました。
そして、スライダーが動くときには挿入したほかの画像が表示されないなんて現象も発生!!何がなんだか・・・。
そこでWordPressお得意のプラグイン発動!!
使ったのは
軽量な【slick.js】を用いたスライダーを設置できるプラグイン「Responsive Slick Slider WordPress」
まあ設定項目はいろいろありますけどそんなのは慣れっこなので問題なし、無事に表示の問題は解決しました。めでたしめでたし・・・ではありません。
次に躓いたのがスライダー表示時に一瞬すべての画像が並んでしまうこと。現在17枚の画像がスライド表示されるようにしているので一瞬でも画像がバーーーーっと表示されるのは格好悪い・・・ということでこちらも対策(上のリンク記事の中に対処方法を掲載してます)
最後に躓いたのがパソコンのトップページだけに表示するという要件。
これも他サイトでは素直にphpの中で条件分岐して表示/非表示にできていたのになぜかこのサイトではできず・・・(何かあるのかなぁ??)
普通WordPressではサイトのトップページかどうか判断するのにis_homeという条件を使うのですが、これが全く反応しない、条件分岐として「モバイルだったらどのページも非表示」「パソコンのトップページだったら表示」という複合条件なんですけど、順番に指定すれば問題ないはず・・・なのに・・・ダメ。
結局問題はis_homeという条件でした。環境によるのかもしれませんけどis_homeはフロントページ(トップページ)を任意の固定ページにした場合には効かないことがあるみたいで、is_front_pageかページのIDを指定するかのいずれかで代替として効くようです(ちなみにこのサイトはis_front_pageで指定しました)。
今回は別のサイトではできるのにこのサイトだけできない・・・の連続で結構苦労しました。
ということでいろいろありましたが完成しましたので、ぜひトップページを見てみてくださいね。