不動産プラグイン導入後、CSSファイルを子テーマで一つにしてみました。

前にも書きましたが、WordPressに不動産プラグインを入れると、それだけで物件検索機能等が組み込まれた不動産サービスサイトの骨格ができあがります。あまりにもあっけなく一通りの機能が組み込まれるので本当に感心してしまいます。

CSS Carved Pumpkin
Creative Commons License credit: mauricesvay

スポンサーリンク

 

WordPressのデフォルトテーマ、Twenty Ten またはTwenty Elevenをテーマとして使えば、物件詳細表示ページやサイドバーでの物件検索等も正しく表示されます。

ただ、見た目はあくまでもTwenty Ten またはTwenty Eleven ベースなのでそのままだとちょっと使えません。有料のテーマがプラグイン配布元から販売されていてなかなかいいので、イメージに合う場合はそれを使うのもいいと思います。

私の場合は、用意されているテーマがイメージに合わないのでTwenty Eleven をベースにCSSをいじり始めています。

 

ところで、WordPressには子テーマの機能があって便利、という記事を以前書きましたが、不動産プラグインを入れた場合はそう単純ではありません。上記の通り、プラグインの方でテーマのstyle.cssを修正するCSSを用意しているからです。

具体的にCSSを読みこむ順序は下の通りです(Twenty Elevenの場合)。

  1. Twenty Eleven の style.css
    /wp-content/themes/twentyeleven/style.css
  2. 基本レイアウトと物件表示を調整する css
    /wp-content/plugins/fudou/themes/style2011.css)
  3. 全体の装飾を調整する css
    /wp-content/plugins/fudou/themes/corners2011.css
(詳しくは不動産プラグイン配布元の nendebさんのページに説明があります。 )

 

これらのファイルは上記の通り不動産プラグインのフォルダ(/plugins/fudou/themes/)内に入っているため、不動産プラグインのアップデートをすると上書きされてしまいます。WordPressの子テーマ機能ってアップデートで上書きされる心配がないのでいいなあ、と思っていたのですが、このままだとやっぱりちゃんとバックアップしなきゃいけないようです。まあ、テーマの管理だけじゃなく日常的にバックアップはしなきゃいけないので、大した問題じゃないといえばそうなのですが…。

少し考えて、私としては以下の方法をとりました。

  1. Twenty Eleven の子テーマを作る。
  2. 子テーマのstyle.cssに、style2011.css と corners2011.css の内容をコピペ
  3. /wp-content/plugins/fudou/themes/ の style2011.css と corners2011.css をリネーム

これで、Twenty Eleven の子テーマのstyle.css だけで完結するので、WordPress のアップデートの際も、不動産プラグインのアップデートの際も、上書きされることを心配しないで済みます。きっと他にスマートな方法があるのかも知れません。

また、style.css の記述が長くなってしまいますが、これによって何か影響あるかは私にはわかりません…。

いずれにせよ、見た目が良ければいいというものでもないので、あまり凝り過ぎないようにしようと思います。

 

以上は、素人が自分の備忘録として記しているものなので、皆さまご自分の責任で作業して下さいませ。

関連記事とスポンサーリンク

スポンサーリンク


関連しているかもしれない記事

griffin

グリフィンです。不動産業もWordPressも関わるようになってまだわずか。それを差し引いてお読みください。コメントはお気軽にどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">