Xeory_Extension導入時のカスタマイズ

2017年7月22日ITwordpress, カスタマイズ

xeory_extension

wordpressテーマxeoryより引用

無料wordpressテーマのXeory_Extensionを使って、一つHPを作成しました。その導入時に行なったカスタマイズについてまとめます。

子テーマ作成

Xeoryは簡単に見栄えの良いHPを作れる点で優れていますが、子テーマの配布を行っていません。従って、完全な初心者には導入のハードルが高いかもしれません。公式ホームページのよくある質問のところには、子テーマの作り方が記載されています。←でもこの方法だと、子テーマとして認識されませんでした。

子テーマの基本の作り方

  1. wordpressテーマが収納されているディレクトリ(wordpress/wp-content/themes)に子テーマ用のフォルダを作成
  2. 親テーマの入っているフォルダから、style.cssを複製
  3. style.cssの中身を全削除し、子テーマであることを記述する
  4. 必要に応じて、functions.phpなども同様に複製する

子テーマ作成、style.css準備

作り方は、公式ホームページにあるコードを、複製した子テーマのスタイルシート (style.css) に記載する。

これだけで本来動くはずなのですが、なぜか子テーマとして認識されませんでした。

そこで、こちらのHPにあった記述を参考にして、
参考にしたHP

この最終行@ importの行を追加して見たところ、子テーマとしてされるようになりました。
でも、一旦テーマを有効化した後は、この追加した行を削除してもエラーにはなりませんでした。

子テーマ作成、functions.phpの準備

今のところは、functions.phpに記載したいことがあるわけではないけど、カスタマイズするならfunctions.phpもあった方が便利だろうということで、とりあえず作っておきました。
参考にしたHP
functions.phpを子テーマにコピー、中身を全削除。そして、代わりに下記を記述

この記述は、親テーマと違うphpは読み込んでねという意味。

トップ見出しの高さをカスタマイズ

トップ見出しがあまりにも大きくて不恰好になっていたため、見出しをコンパクトに書き換えるカスタマイズを実施。
参考にしたHP
こちらのHPでは、見出しをカスタマイズする方法として、style.cssに記載する方法と、footer.phpに記載する方法の2種類が説明されていました。しかし、なぜか、style.cssに記載する方法では、カスタマイズが反映されず。仕方ないので、footer.phpに記載する方法でカスタマイズすることにしました。

・まずは、footer.phpを親テーマから子テーマにコピー。
・footer.phpでトップページメインビジュアル部分を書き換え

デフォルトのfooter.php

カスタマイズ後のfooter.php

h = 見出し最大高さ
hP = 見出し文字の上の空白の長さ
hp = h * .3; はhの0.3倍にする
上のブロックは通常のパソコン表示の場合を示す
下のブロックは画面の横幅が、753px以下の場合を示す

会社概要削除

Xeory_Extensionにはトップページに店舗詳細を記載できる場所がデフォルトで備わっています。実店舗を持っている方は、そのまま利用できて便利だと思いますが、今回作成したHPの案件は実店舗を持たないため、会社概要の部分が不要でした。
しかし、デフォルトだと会社概要を入力しなくとも、余計な隙間が残ってしまうので、会社概要を入力しなければ良いというわけにいかず、会社概要の削除のカスタマイズが必要でした。

参考にしたHP
・まずは、front-page.phpを親テーマから子テーマにコピー
・front-page.phpから下記の会社概要の部分を全て削除

これで、余計な隙間がなくなります。

また、参考にしたHPの関連ページでは、

ここでメニューを見てみると、「テーマ編集」の「front-page.php」で「会社概要」を削除しても、スマホのメニューバーには「会社概要」の項目が表示されてしまいます。

とあり、header.phpの編集方法が記載されていますが、Xeory_Extension ver0.2.1 ではheader.phpの編集は不要でした。