WordPressの無料テーマ「Xeory Extension」をカスタマイズした話【2】

WordPressの無料テーマ「Xeory Extension」をカスタマイズした話【2】

会社サイトで利用した無料テーマの「Xeory Extension」カスタマイズ忘備録第2弾です。

稼働サイトのリニューアル作業のため、まずはダミーサイトでどんなイメージになるかを確認してみました。固定ページをコピーしてダミー記事を投稿し「こんな感じでどう?」の確認を取ります。

その結果、いくつかさらに変更する箇所が出てきました。
できそうな感じではあったので、ひとまず稼働サイトにテーマをインストールしてみることにしました。
夜中に始めたリニューアル作業、どうにか朝までには形にしようと意気込んでスタートです!

デザイン面での変更

TOPのメインビジュアルだけは、最初から画像に変える気満々だったのでカスタマイズ【1】で変更しました。
けれど、確認したところ、その点も変更になることとなりました。
カスタマイズ第2弾の変更点は「メインビジュアルをスライダーに変更」することです。

メインビジュアルをスライダーに変更

できるだけたくさん画像を見せたいという思いから、メインビジュアルはスライダーにしたいとの要望がありました。
メインビジュアルの画像がレスポンシブにならない問題も解決できていないのに、なんという無茶ぶりを!……そうも思いましたが、わたしもスライダーの方がいいと思うので、やるしかありません。

プラグイン「MetaSlider」でスライダーを作成

まずは、スライダー作成のために「MetaSlider」をインストールして有効化します。

何枚かの画像を選んでスライダーを作成しました。

MetaSliderのショートコード

スライダーを作成するとショートコードが作成されるので、このコードを記載すればスライダーを表示させることができます。

スライダーに変更する

スライダーに変更するにあたって、参考記事をいろいろ探したんですが見つかりませんでした。
メインビジュアルの上にスライダー画像を表示するような形ではいくつか記事を見つけたのですが、わたしはメインビジュアルをそのままスライダーにしたいんです。

なので、自力でどうにかしました。たいしたことはしてませんが。
トップページを構成する「front-page.php」のメインビジュアルの箇所に、そのままスライダーのコードを差し込みました。

上記の箇所を下記のように変更します。スライダーのショートコードを追記するだけです。

これで、メインビジュアル部分にスライダーを配置できました。
<div class="wrap">をコメントアウトしているのは、スライダーの下に妙な領域ができてしまったからだったと思います。……多分。ちょっとすでにうろ覚えです。

レスポンシブにならない

スライダーに変えてみたものの、カスタマイズ【1】と同様にスライダーもレスポンシブになりません。スマホで確認しても大きいサイズのままです。

これはどうしたらいいのか悩みました。今もベストの状態とは言い難いのですが……。
とりあえず崩れずに表示されてたらいいや!の精神で、レスポンシブのブレイクポイントを増やすことで対処しました。

ブレイクポイントって?

レスポンシブデザインでは、画面サイズに応じて適用するCSSを切り替えます。その切り替えのポイントとなるのがブレイクポイントです。
だいたいは2~3箇所くらいにブレイクポイントがあるのではないかと思います。
「Xeory Extension」でも、767px、991px、1200pxの3か所にブレイクポイントがあります。

動作を見ながらブレイクポイント追加

実際にスライドを反映させたTOPページを表示させます。そして、ウィンドウサイズを縮めながら不自然なスライドのサイズを探します。
なんか変!と思った画面サイズでブレイクポイントを設定し、メインビジュアルの高さを設定していきます。
結果、子テーマのstyle.cssには、ブレイクポイントが6箇所、下記のように設定してあります。

まぁ、ものすごく適当にやってみた感じですが、現時点では違和感のない範囲で表示されているのでOKとしています。
いつか、もっと良い解決方法が見つかるかもしれません。

スライダーが表示できて感無量!

管理画面の設定でどうにかなる部分はさておき、最難関だと思っていたスライダーが表示できたときは本当に感無量でした!
明け方、ひとりで「よしっ!」って軽く声に出たくらい。
レスポンシブに関してはまだちょっと納得のいっていない部分もありますが、とりあえず表示されているのでそれで良し。

その後、いくつか問題が発生したり新たにカスタマイズしたり、まだもう少し「Xeory Extension」試行錯誤の道は続きます。
リニューアル完了から1ヵ月経ちましたが、SEOのことも含めて少しずつ微調整していっています。

サイトを育ててるって実感があって、うまくいったらとても楽しいです。
けれど、どうしようもなくなって試行錯誤している時間も、かなり集中していて楽しかったりするんですよね。ものすごく疲弊しますけど。

売上アップにつながりますように!!(切実)