BizVektor1.7+Trust Formでデザインが崩れる

WordPress個別サポート

BizVektor1.7では大きな変更がありました。コンテンツエリアに「contentクラス」が追加されたことです。

それにより、「content」というclassを使っているプラグインは影響を受ける場合があります。たとえば、問い合わせフォームを作成するTrust Formプラグインです。

BizVektor1.6では問題なく表示されます。

Trust Formで作成した問い合わせフォーム
Trust Formで作成した問い合わせフォーム(BizVektor1.6で表示)

BizVektor1.7にアップデートすると、レイアウトが崩れます。具体的には項目見出しの幅が広がってしまいます。

項目見出しの幅が広がって入力枠が消える
項目見出しの幅が広がって入力枠が消える(BizVektor1.7で表示)
この問題はBizVektor 1.7.8で修正されているようです。最新バージョンをインストールしているため問題が起きなかった方は1つの事例として参考にしてください。

原因は、次の2つがバッティングすることです。

  • Trust Formでは入力項目の見出しに「content」というclass名が付いている
  • BizVektorのCSS(plain.css)ではcontentクラスの幅が640pxに設定されている

結果として、Trust Formの項目見出し(contentクラス)の幅が640pxになってしまうということです。

対策1:BizVektorのデザインスキンを「Calmly」または「NEAT」に変更する

contentクラスに対して幅を設定していないデザインスキン「Calmly」に変更すれば、ひとまず解決できます。また、「いちばんやさしいWordPressの教本」の読者特典で使用できるデザインスキン「NEAT」も影響を受けません。

影響を受けないデザインスキン「Calmly」または「NEAT」に変更する
影響を受けないデザインスキン「Calmly」または「NEAT」に変更する

NEATやCalmlyのときにTrust Formが影響を受けないのは、それぞれのCSS(例:neat.css)でclassではなくidのcontentに対してスタイルが設定されているためです。以下にneat.cssの例を示します

#main #container #content {
    float: left;
    width: 640px;
}
将来のバージョンでも「Calmly」および「NEAT」で影響を受けないとは限りません。上記の問題が起きることも頭に入れて、以下の対策2も作業するイメージをしておきましょう。

対策2:Trust Formの項目見出しのclass名を変更する

Trust Formの項目見出しのclass名「content」を「content2」などに変更することで、上記のバッティングを回避することができます。それには、BizVektorの(子テーマの)functions.phpに次のコードを入力する方法があります。

/* Trust Formのクラス名「content」を変更 */
function my_tr_input_footer($val) {
    $val = preg_replace('/<span class="content">/', '<span class="content2">', $val);

    return $val;
}
add_filter('tr_input_footer', 'my_tr_input_footer');

これにより、class名の「content」が「content2」に変更されます。BizVektorのCSSから影響を受けなくなり、Defaultデザインスキンなどでも問い合わせフォームが表示されるようになります。

すでにTrust Formのcontentクラスに対してスタイルを定義している場合など、作成中のサイトによっては影響が出る場合があります。自己責任で使用し、functions.phpの変更後は影響が出ていないか入念に検証してください。問題があればコードを削除して使用を停止してください。

2015年6月15日WordPressトラブル