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の変更後は影響が出ていないか入念に検証してください。問題があればコードを削除して使用を停止してください。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

BizVektorのカスタマイズ

Lightningのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート